style(frontend): make page name configurable

Data5tream · Jul 7, 2023 · dace937 · dace937
1 parent 958bee4
commit dace937
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 14 deletions.
diff --git a/frontend/src/lib/components/PageHeader.svelte b/frontend/src/lib/components/PageHeader.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { env } from '$env/dynamic/public';
+
+	const title = env.PUBLIC_PAGE_TITLE ? env.PUBLIC_PAGE_TITLE : 'Simple Status Page';
+</script>
+
+<svelte:head>
+	<title>{title}</title>
+</svelte:head>
+
+<h1>{title}</h1>
+
+<style lang="scss">
+	h1 {
+		display: inline-block;
+		background: var(--c-black);
+		color: var(--c-white);
+		padding: 8px 16px 8px 8px;
+		font-family: monospace;
+
+		&:after {
+			content: '_';
+			animation: blink 2s infinite;
+		}
+	}
+</style>
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
@@ -1,14 +1,15 @@
 <script lang="ts">
 	import type { StatusData } from '$lib/dataprovider';
 	import StatusList from '$lib/components/StatusList.svelte';
+	import PageHeader from '$lib/components/PageHeader.svelte';
 	import PageFooter from '$lib/components/PageFooter.svelte';
 	import '$lib/main.css';
 
 	export let data: { status: StatusData };
 </script>
 
 <main>
-	<h1>Simple Status Page</h1>
+	<PageHeader />
 	{#if data.status && !data.status.is_valid}
 		<span class="error">Error loading status data :(</span>
 	{:else}
@@ -25,19 +26,6 @@
 		@media screen and (min-width: 1432px) {
 			width: 100%;
 			margin: 0 auto;
-    }
-	}
-
-	h1 {
-		display: inline-block;
-		background: var(--c-black);
-		color: var(--c-white);
-		padding: 8px 16px 8px 8px;
-		font-family: monospace;
-
-		&:after {
-			content: '_';
-			animation: blink 2s infinite;
 		}
 	}