add toc sidebar to docs site

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>

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>

web/pw-server/src/routes/docs/doc.svelte

@@ -4,7 +4,6 @@
 
 <style scoped lang="scss">
   .container {
-    width: 800px;
+    max-width: 800px;
-    margin: 0 auto;
   }
 </style>

web/pw-server/src/routes/docs/index.svelte

@@ -2,7 +2,7 @@
   export async function load() {
     return {
       status: 302,
-          redirect: "/docs/rules"
+      redirect: "/docs/rules",
-      }
+    };
   }
 </script>

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,7 +7,7 @@ traveling between the planets (_expeditions_).
 Example game state:
 
 ```json
-  {
+{
   "planets": [
     {
       "ship_count": 2,
@@ -41,7 +41,7 @@ Example game state:
       "turns_remaining": 2
     }
   ]
-  }
+}
 ```
 
 The `owner` field holds a player number when the planet is held by a player, and is
@@ -53,8 +53,9 @@ 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",
@@ -62,7 +63,7 @@ Example command:
       "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!

web/pw-server/src/styles/buttons.scss

@@ -1,5 +1,7 @@
-$btn-text-color: rgb(9, 105, 218);
+@use "./variables";
-$btn-border-color: rgba(27, 31, 36, 0.25);
+
+$btn-text-color: variables.$blue-primary;
+$btn-border-color: variables.$light-grey;
 
 .btn {
   color: $btn-text-color;

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);