add toc sidebar to docs site

This commit is contained in:
Ilion Beyst 2022-09-12 21:55:16 +02:00
parent 66162ea43c
commit 7f1b6c06b6
7 changed files with 141 additions and 55 deletions

View file

@ -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>

View file

@ -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>

View file

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

View file

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

View file

@ -1,5 +1,5 @@
## How to play ## How to play
In every game turn, your bot will receive a json-encoded line on stdin, describing the current 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 state of the game. Each state will hold a set of planets, and a set of spaceship fleets
traveling between the planets (_expeditions_). traveling between the planets (_expeditions_).
@ -53,6 +53,7 @@ Every turn, you may send out expeditions to conquer other planets. You can do th
a json-encoded line to stdout: a json-encoded line to stdout:
Example command: Example command:
```json ```json
{ {
"moves": [ "moves": [
@ -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. If you'd like additional libraries or a different programming language, feel free to nag the administrator.
### TL;DR ### TL;DR
Head over to the editor view to get started - a working example is provided. 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! Feel free to just hit the play button to see how it works!

View file

@ -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 { .btn {
color: $btn-text-color; color: $btn-text-color;

View file

@ -1 +1,3 @@
$bg-color: rgb(41, 41, 41); $bg-color: rgb(41, 41, 41);
$light-grey: rgba(27, 31, 36, 0.25);
$blue-primary: rgb(9, 105, 218);