using markdown for docs

website/src/routes/[...language]/+layout.svelte

@@ -2,14 +2,55 @@
 	import { ModeWatcher } from 'mode-watcher';
 	import { isLoading, locale, _ } from 'svelte-i18n';
 	import { page } from '$app/stores';
+	import Nav from '$lib/components/Nav.svelte';
+	import Footer from '$lib/components/Footer.svelte';
 
-	if ($page.params.language) {
+	$: if ($page.params.language === '' && $locale !== 'en') {
+		locale.set('en');
+	} else if ($page.params.language && $locale !== $page.params.language) {
 		locale.set($page.params.language);
 	}
+
+	const appRoute = '/[...language]';
 </script>
 
 <ModeWatcher />
 
 {#if !$isLoading}
-	<slot />
+	{#if $page.route.id === appRoute}
+		<slot />
+	{:else}
+		<Nav />
+		<main>
+			<slot />
+		</main>
+		<Footer />
+	{/if}
 {/if}
+
+<style lang="postcss">
+	:global(.markdown) {
+	}
+
+	:global(.markdown h1) {
+		@apply text-3xl;
+		@apply font-bold;
+		@apply mt-4 mb-2;
+	}
+
+	:global(.markdown h2) {
+		@apply text-2xl;
+		@apply font-bold;
+		@apply mt-4 mb-2;
+	}
+
+	:global(.markdown a) {
+		@apply text-blue-500;
+		@apply hover:underline;
+	}
+
+	:global(.markdown ul) {
+		@apply list-disc;
+		@apply pl-4;
+	}
+</style>

website/src/routes/[...language]/about/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { base } from '$app/paths';
+	import DocsLoader from '$lib/components/docs/DocsLoader.svelte';
 	import { languages } from '$lib/languages';
 	import { _ } from 'svelte-i18n';
 </script>
@@ -21,3 +22,7 @@
 		{/if}
 	{/each}
 </svelte:head>
+
+<div class="px-10 py-6 markdown">
+	<DocsLoader path="about.svx" />
+</div>

website/src/routes/[...language]/documentation/+page.svelte

@@ -0,0 +1,5 @@
+<script>
+	import Docs from '$lib/components/docs/Docs.svx';
+</script>
+
+<Docs />