Skip to content

Commit de63f8a

Browse files
committed
chore: theme brand and window title
1 parent 0f52102 commit de63f8a

File tree

9 files changed

+18
-7
lines changed

9 files changed

+18
-7
lines changed

apps/frontend/.env

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
VITE_API_URL=http://localhost:3000
22
VITE_THEME_COLOR=quassel
3+
VITE_TITLE=Quassel

apps/frontend/index.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<head>
55
<meta charset="UTF-8" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>LEMON</title>
7+
<title>$TITLE</title>
88
<style>
99
html {
1010
height: 100%;
@@ -23,7 +23,8 @@
2323
<script type="text/javascript">
2424
window.env = {
2525
apiUrl: '$API_URL',
26-
themeColor: '$THEME_COLOR'
26+
themeColor: '$THEME_COLOR',
27+
title: '$TITLE'
2728
};
2829
</script>
2930
</head>

apps/frontend/src/configuration.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export const C = {
99
env: {
1010
apiUrl: getEnv("apiUrl") || import.meta.env.VITE_API_URL,
1111
themeColor: getEnv("themeColor") || import.meta.env.VITE_THEME_COLOR,
12+
title: getEnv("title") || import.meta.env.VITE_TITLE,
1213
},
1314
ui: {
1415
maxDropdownHeight: 800,

apps/frontend/src/main.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ declare module "@tanstack/react-router" {
2525
}
2626

2727
const currentTheme = mergeThemeOverrides(defaultTheme, { primaryColor: C.env.themeColor });
28+
if (import.meta.env.DEV) document.title = C.env.title;
2829

2930
createRoot(document.getElementById("root")!).render(
3031
<StrictMode>

apps/frontend/src/routes/__root.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import { $layout } from "../stores/layout";
2727
import { $api } from "../stores/api";
2828
import { DefaultError, useQueryClient } from "@tanstack/react-query";
2929
import { i18n } from "../stores/i18n";
30+
import { C } from "../configuration";
3031

3132
const messages = i18n("RootRoute", {
3233
title: "Home",
@@ -66,7 +67,7 @@ function Root() {
6667
<AppShell.Header>
6768
<Group justify="space-between">
6869
<Link to="/">
69-
<Brand />
70+
<Brand title={C.env.title} />
7071
</Link>
7172
{sessionStore.email && (
7273
<Group>

apps/frontend/src/sections/HeroSection.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import { Button, Container, Group, Hero, Text, Title } from "@quassel/ui";
33
import { i18n } from "../stores/i18n";
44
import { useStore } from "@nanostores/react";
55
import { Link } from "@tanstack/react-router";
6+
import { C } from "../configuration";
67

78
const messages = i18n("heroSection", {
8-
title: "LEMON",
99
subtitle: "Gather language exposure",
1010
toFormAction: "Questionnaire",
1111
toAdminAction: "Administration",
@@ -18,7 +18,7 @@ export function HeroSection() {
1818
<div className={classes.inner}>
1919
<div className={classes.content}>
2020
<Title className={classes.title}>
21-
<span className={classes.highlight}>{t.title}</span>
21+
<span className={classes.highlight}>{C.env.title}</span>
2222
</Title>
2323
<Text c="dimmed" mt="md">
2424
<b>L</b>anguage <b>E</b>xposure questionnaire for <b>M</b>ultilinguals <b>On</b>line

apps/frontend/src/types.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ declare global {
2626
env?: {
2727
apiUrl?: string;
2828
themeColor?: string;
29+
title?: string;
2930
};
3031
}
3132
}

examples/public/docker-compose.yaml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@ services:
7676
environment:
7777
API_URL: https://api.test.example.com
7878
THEME_COLOR: uzhGold
79+
TITLE: LEMON
7980
labels:
8081
- "com.centurylinklabs.watchtower.enable=true"
8182
- "traefik.enable=true"

libs/ui/src/components/Brand.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
import { Group, Stack, Title } from "@mantine/core";
22
import Logo from "../assets/logo.svg?react";
33

4-
export function Brand() {
4+
type Props = {
5+
title: string;
6+
};
7+
8+
export function Brand({ title }: Props) {
59
return (
610
<Group className="quassel-Brand" gap="md">
711
<Logo className="quassel-Logo" />
812
<Stack gap={0}>
913
<Title order={2} c="black">
10-
LEMON
14+
{title}
1115
</Title>
1216
</Stack>
1317
</Group>

0 commit comments

Comments
 (0)