site: use three column layout

site/src/routes/+layout.svelte

@@ -10,4 +10,23 @@
   <link rel="icon" href={favicon} />
 </svelte:head>
 
-{@render children?.()}
+<nav>
+  <ul>
+    <li><a href="/">Home</a></li>
+    <li><a href="/docs/">Docs</a></li>
+  </ul>
+</nav>
+<main>
+  {@render children?.()}
+</main>
+
+<style>
+  ul {
+    display: flex;
+    border-bottom: 1px solid;
+    list-style: none;
+  }
+  li {
+    padding-left: 2em;
+  }
+</style>

site/src/routes/+page.svelte

@@ -1,4 +1 @@
 <h1>Welcome to Clan</h1>
-<p>
-  <a href="/docs">Show Docs</a>
-</p>

site/src/routes/docs/+layout.svelte

@@ -8,7 +8,6 @@
     {#each paths as path}
       <li><a href={`/docs/${path}`}>{path}</a></li>
     {/each}
-    <li><a href="/">Home</a></li>
   </nav>
   <div class="content">
     {@render children()}
@@ -19,4 +18,8 @@
   .container {
     display: flex;
   }
+  nav {
+    width: 300px;
+    flex: none;
+  }
 </style>

site/src/routes/docs/[...path]/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import "./markdown.css";
   import "./shiki.css";
   import "./admonition.css";
   let { data } = $props();
@@ -6,9 +7,11 @@
 
 <div class="container">
   <div class="content">
+    <h1>{data.frontmatter.title}</h1>
     {@html data.content}
   </div>
   <div class="toc">
+    <h2>On this page</h2>
     {@html data.toc}
   </div>
 </div>
@@ -17,5 +20,14 @@
 <style>
   .container {
     display: flex;
+    padding-left: 30px;
+  }
+  .content {
+    flex: 1;
+    max-width: 800px;
+    margin-left: calc(50vw - 400px - 300px);
+  }
+  .toc {
+    flex: none;
   }
 </style>

site/src/routes/docs/[...path]/markdown.css

@@ -0,0 +1,10 @@
+code {
+  font-family:
+    ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,
+    "DejaVu Sans Mono", monospace;
+  font-weight: normal;
+}
+
+pre code {
+  overflow: auto;
+}

site/src/routes/docs/getting-started/add-machines.md

@@ -1,3 +1,7 @@
+---
+title: Add Machines
+---
+
 Machines can be added using the following methods
 
 - Create a file `machines/{machine_name}/configuration.nix` (See: [File Autoincludes](../guides/inventory/autoincludes.md))

site/src/routes/index.css

@@ -2,4 +2,5 @@
 
 body {
   font-family: "Geist Variable";
+  font-size: 16px;
 }

site/vitePlugins/markdown.ts

@@ -38,8 +38,8 @@ export default function (): PluginOption {
         .use(remarkRehype)
         .use(rehypeShiki, {
           themes: {
-            light: "vitesse-light",
-            dark: "vitesse-dark",
+            light: "nord",
+            dark: "nord",
           },
           transformers: [
             transformerNotationDiff({
@@ -53,7 +53,7 @@ export default function (): PluginOption {
         .use(rehypeStringify)
         .use(rehypeSlug)
         .use(rehypeAutolinkHeadings)
-        .process(String(code));
+        .process(String(file));
 
       const parsed = await unified()
         .use(remarkParse)
@@ -63,7 +63,7 @@ export default function (): PluginOption {
         })
         .use(remarkRehype)
         .use(rehypeStringify)
-        .process(file);
+        .process(String(file));
 
       return `
 export const content = ${JSON.stringify(String(html))};