feat: generate doc pages from markup

src/lib/components/atoms/DocsNavNode.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import type { DocumentInfo } from '$lib/documentation.shared';
+  export let info: DocumentInfo;
+</script>
+
+<!-- Always part of a list -->
+<li>
+  <div class="doc-section">
+    <a href="/docs/{info.slug}">{info.title}</a>
+  </div>
+</li>
+
+<style>
+a {
+  text-decoration: none;
+  background-color: inherit;
+  color: var(--white);
+}
+
+.doc-section {
+	background-color: var(--grey-one);
+	border-radius: 12px;
+	padding: 15px 20px;
+}
+
+li {
+  padding-bottom: 0.5rem;
+}
+</style>

src/lib/components/molecules/DocsNavTree.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { is_tree } from '$lib/documentation.shared';
+  import type { DocsTree } from '$lib/documentation.shared';
+
+  import DocsNavNode from '$lib/components/atoms/DocsNavNode.svelte';
+
+  export let tree: DocsTree;
+  // How deeply nested this is.
+  export let nested = 0;
+</script>
+
+{#if nested}
+  <!-- The index should be part of the `ul` above us. -->
+  <DocsNavNode info={tree.index} />
+{/if}
+
+<ul>
+  {#if !nested}
+    <!-- There is no `ul` above us, so index should go here instead. -->
+    <DocsNavNode info={tree.index} />
+  {/if}
+
+  {#each tree.nodes as node}
+    {#if is_tree(node)}
+      <!-- Recursion here is fine. We are not dealing with a tree the size of a linux root file system. -->
+      <svelte:self tree={node} nested={nested + 1} />
+    {:else}
+      <DocsNavNode info={node} />
+    {/if}
+  {/each}
+</ul>
+
+<style>
+ul {
+	padding-left: 2rem;
+  list-style-type: "• ";
+  color: var(--white);
+}
+</style>

src/lib/components/molecules/NavHost.svelte

@@ -28,17 +28,17 @@
 		</a>
 		<ul>
 			<Navigation href="/">Home</Navigation>
-			<Navigation href="/download/">Download</Navigation>
-			<Navigation href="/docs/">Docs</Navigation>
-			<Navigation href="/patches/">Patches</Navigation>
+			<Navigation href="/download">Download</Navigation>
+			<Navigation is_selected={target => target.startsWith("/docs")} href="/docs">Docs</Navigation>
+			<Navigation href="/patches">Patches</Navigation>
 		</ul>
 	</div>
 	<ul>
 		<Navigation href="/contributors/">
-			<img src="../icons/contrib.svg" alt="Contributors"/>
+			<img src="/icons/contrib.svg" alt="Contributors"/>
 		</Navigation>
 		<Navigation href="/api-settings/">
-			<img src="../icons/settings.svg" alt="Settings"/>
+			<img src="/icons/settings.svg" alt="Settings"/>
 		</Navigation>
 	</ul>
 	<div class="menu-btn" class:open={menuOpen} bind:this={menuBtn}>