Makes dynamic configuration work in production

If a static file is mounted in the Docker image, it will be read at
each page load and sent to the client.

src/config.yml

@@ -1,14 +0,0 @@
-title: 'Hello World !!'
-subtitle: 'I am a new pilot.'
-
-services:
-  - title: '/Cloud'
-    subtitle: 'Private Cloud Utilities'
-    icon: 'fas fa-cloud'
-    items:
-      - title: 'NAS'
-        subtitle: 'Network Attached Storage'
-        icon: 'fas fa-hard-drive'
-        target: '_blank'
-        url: '/NAS'
-        keywords: 'cloud storage files'

src/config.yml

@@ -0,0 +1 @@
+../static/config.yml

src/lib/config.ts

@@ -1,4 +1,4 @@
-import configData from './config.yml';
+import configData from '../config.yml';
 
 export type Brand = {
 	logo?: string;

src/routes/+page.server.ts

@@ -0,0 +1,20 @@
+import { dev } from '$app/environment';
+import { config, type Config } from '$lib/config';
+import type { PageServerLoad } from './$types';
+
+import { readFileSync } from 'fs';
+import * as yml from 'js-yaml';
+
+export const load: PageServerLoad = () => {
+	if (dev) {
+		return { config: config };
+	}
+
+	try {
+		const dynamic = yml.load(readFileSync('/dynamic/config.yml', 'utf8'));
+		return { config: { ...config, ...dynamic } as Config };
+	} catch (err) {
+		console.debug("could not read '/dynamic/config.yml': " + err);
+		return { config: config };
+	}
+};

src/routes/+page.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
-	import { config } from '../config';
+	import type { PageData } from './$types';
+
+	export let data: PageData;
 </script>
 
-<h1>{config.title}</h1>
-{#if config.subtitle}
-	<h2>{config.subtitle}</h2>
+<h1>{data.config.title}</h1>
+{#if data.config.subtitle}
+	<h2>{data.config.subtitle}</h2>
 {/if}