add toc sidebar to docs site

7 files changed, 141 insertions, 55 deletions

diff --git a/web/pw-server/src/lib/components/docs/TocEntry.svelte b/web/pw-server/src/lib/components/docs/TocEntry.svelte
new file mode 100644
index 0000000..b28e7fd
--- /dev/null
+++ b/web/pw-server/src/lib/components/docs/TocEntry.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+  export let href: string;
+  export let text: string;
+</script>
+
+<div class="toc-entry">
+  <a {href}>{text}</a>
+</div>
+
+<style scoped lang="scss">
+  @use "src/styles/variables";
+
+  .toc-entry {
+    font-size: 16px;
+    padding: 4px;
+  }
+
+  .toc-entry a {
+    color: variables.$blue-primary;
+  }
+</style>
diff --git a/web/pw-server/src/routes/docs/__layout.svelte b/web/pw-server/src/routes/docs/__layout.svelte
new file mode 100644
index 0000000..40c4317
--- /dev/null
+++ b/web/pw-server/src/routes/docs/__layout.svelte
@@ -0,0 +1,60 @@
+<script>
+  import TocEntry from "$lib/components/docs/TocEntry.svelte";
+</script>
+
+<div class="container">
+  <div class="sidebar">
+    <div class="sidebar-content">
+      <h2>Docs</h2>
+      <div class="sidebar-nav-group">
+        <TocEntry href="/docs/rules" text="Rules" />
+      </div>
+    </div>
+  </div>
+  <div class="content-container">
+    <div class="content">
+      <slot />
+    </div>
+  </div>
+</div>
+
+<style lang="scss">
+  @use "src/styles/variables";
+
+  .container {
+    display: flex;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
+      "Open Sans", "Helvetica Neue", sans-serif;
+  }
+
+  .sidebar {
+    width: 300px;
+    line-height: 20px;
+    border-right: 1px solid variables.$light-grey;
+  }
+
+  .sidebar-content {
+    padding: 32px 16px;
+    position: sticky;
+    align-self: flex-start;
+    top: 0px;
+  }
+
+  .sidebar-content h2 {
+    margin: 16px 0;
+  }
+
+  .sidebar-nav-group {
+    padding: 0 8px;
+  }
+
+  .content-container {
+    padding: 16px 0;
+    flex-grow: 1;
+  }
+
+  .content {
+    max-width: 75%;
+    margin: 0 auto;
+  }
+</style>
diff --git a/web/pw-server/src/routes/docs/doc.svelte b/web/pw-server/src/routes/docs/doc.svelte
index ded3a6c..00431b3 100644
--- a/web/pw-server/src/routes/docs/doc.svelte
+++ b/web/pw-server/src/routes/docs/doc.svelte
@@ -4,7 +4,6 @@
 
 <style scoped lang="scss">
   .container {
-    width: 800px;
-    margin: 0 auto;
+    max-width: 800px;
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/web/pw-server/src/routes/docs/index.svelte b/web/pw-server/src/routes/docs/index.svelte
index 7401de3..4a3fda9 100644
--- a/web/pw-server/src/routes/docs/index.svelte
+++ b/web/pw-server/src/routes/docs/index.svelte
@@ -1,8 +1,8 @@
 <script context="module">
   export async function load() {
-      return {
-          status: 302,
-          redirect: "/docs/rules"
-      }
+    return {
+      status: 302,
+      redirect: "/docs/rules",
+    };
   }
-</script> 
\ No newline at end of file
+</script>
diff --git a/web/pw-server/src/routes/docs/rules.md b/web/pw-server/src/routes/docs/rules.md
index 45a72c7..ff803e7 100644
--- a/web/pw-server/src/routes/docs/rules.md
+++ b/web/pw-server/src/routes/docs/rules.md
@@ -1,5 +1,5 @@
-
 ## How to play
+
 In every game turn, your bot will receive a json-encoded line on stdin, describing the current
 state of the game. Each state will hold a set of planets, and a set of spaceship fleets
 traveling between the planets (_expeditions_).
@@ -7,41 +7,41 @@ traveling between the planets (_expeditions_).
 Example game state:
 
 ```json
-  {
-    "planets": [
-      {
-        "ship_count": 2,
-        "x": -2.0,
-        "y": 0.0,
-        "owner": 1,
-        "name": "your planet"
-      },
-      {
-        "ship_count": 4,
-        "x": 2.0,
-        "y": 0.0,
-        "owner": 2,
-        "name": "enemy planet"
-      },
-      {
-        "ship_count": 2,
-        "x": 0.0,
-        "y": 2.0,
-        "owner": null,
-        "name": "neutral planet"
-      }
-    ],
-    "expeditions": [
-      {
-        "id": 169,
-        "ship_count": 8,
-        "origin": "your planet",
-        "destination": "enemy planet",
-        "owner": 1,
-        "turns_remaining": 2
-      }
-    ]
-  }
+{
+  "planets": [
+    {
+      "ship_count": 2,
+      "x": -2.0,
+      "y": 0.0,
+      "owner": 1,
+      "name": "your planet"
+    },
+    {
+      "ship_count": 4,
+      "x": 2.0,
+      "y": 0.0,
+      "owner": 2,
+      "name": "enemy planet"
+    },
+    {
+      "ship_count": 2,
+      "x": 0.0,
+      "y": 2.0,
+      "owner": null,
+      "name": "neutral planet"
+    }
+  ],
+  "expeditions": [
+    {
+      "id": 169,
+      "ship_count": 8,
+      "origin": "your planet",
+      "destination": "enemy planet",
+      "owner": 1,
+      "turns_remaining": 2
+    }
+  ]
+}
 ```
 
 The `owner` field holds a player number when the planet is held by a player, and is
@@ -53,16 +53,17 @@ Every turn, you may send out expeditions to conquer other planets. You can do th
 a json-encoded line to stdout:
 
 Example command:
+
 ```json
-  {
-    "moves": [
-      {
-        "origin": "your planet",
-        "destination": "enemy planet",
-        "ship_count": 2
-      }
-    ]
-  }
+{
+  "moves": [
+    {
+      "origin": "your planet",
+      "destination": "enemy planet",
+      "ship_count": 2
+    }
+  ]
+}
 ```
 
 All players send out their commands simultaneously, so there is no turn order. You may send as
@@ -81,5 +82,6 @@ You can code your bot in python 3.10. You have the entire stdlib at your disposa
 If you'd like additional libraries or a different programming language, feel free to nag the administrator.
 
 ### TL;DR
+
 Head over to the editor view to get started - a working example is provided.  
 Feel free to just hit the play button to see how it works!
diff --git a/web/pw-server/src/styles/buttons.scss b/web/pw-server/src/styles/buttons.scss
index b485014..c72d9dc 100644
--- a/web/pw-server/src/styles/buttons.scss
+++ b/web/pw-server/src/styles/buttons.scss
@@ -1,5 +1,7 @@
-$btn-text-color: rgb(9, 105, 218);
-$btn-border-color: rgba(27, 31, 36, 0.25);
+@use "./variables";
+
+$btn-text-color: variables.$blue-primary;
+$btn-border-color: variables.$light-grey;
 
 .btn {
   color: $btn-text-color;
diff --git a/web/pw-server/src/styles/variables.scss b/web/pw-server/src/styles/variables.scss
index 257a67e..603db66 100644
--- a/web/pw-server/src/styles/variables.scss
+++ b/web/pw-server/src/styles/variables.scss
@@ -1 +1,3 @@
 $bg-color: rgb(41, 41, 41);
+$light-grey: rgba(27, 31, 36, 0.25);
+$blue-primary: rgb(9, 105, 218);