site: use three column layout

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

@@ -3,10 +3,20 @@
   let { paths } = data;
 </script>
 
-<nav>
+<div class="container">
-  {#each paths as path}
+  <nav>
-    <li><a href={`/docs/${path}`}>{path}</a></li>
+    {#each paths as path}
-  {/each}
+      <li><a href={`/docs/${path}`}>{path}</a></li>
-  <li><a href="/">Home</a></li>
+    {/each}
-</nav>
+    <li><a href="/">Home</a></li>
-{@render children()}
+  </nav>
+  <div class="content">
+    {@render children()}
+  </div>
+</div>
+
+<style>
+  .container {
+    display: flex;
+  }
+</style>

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

@@ -4,8 +4,18 @@
   let { data } = $props();
 </script>
 
-<div class="toc">
+<div class="container">
-{@html data.toc}
+  <div class="content">
+    {@html data.content}
+  </div>
+  <div class="toc">
+    {@html data.toc}
+  </div>
 </div>
-{@html data.content}
+
-{JSON.stringify(data.frontmatter)}
+<!-- {JSON.stringify(data.frontmatter)} -->
+<style>
+  .container {
+    display: flex;
+  }
+</style>