rework menus, add wip guide

content/api/_index.md

@@ -1,6 +1,7 @@
 ---
 menu: main
 title: API reference
+weight: 100
 ---
 
 TODO Talk about kilovolt and explain event and RPCs

content/guide/_index.md

@@ -0,0 +1,7 @@
+---
+menu: main
+title: User guide
+weight: 10
+---
+
+TODO introduction to the user guide here

content/guide/getting-started/_index.md

@@ -0,0 +1,6 @@
+---
+menu:
+  guides:
+    identifier: gettingstarted
+title: Getting started
+---

content/guide/getting-started/installation.md

@@ -0,0 +1,8 @@
+---
+title: Installation
+menu:
+  guides:
+    parent: gettingstarted
+---
+
+TODO install guide here

layouts/api/list.html

@@ -57,6 +57,7 @@
   {{ $keys := .Site.Data.api.v310.api }}
   <main class="apidocs">
     <nav>
+      <header>Kilovolt keys</header>
       <ul>
         {{ range $key, $spec := $keys }}
           <li>

layouts/guide/list.html

@@ -0,0 +1,8 @@
+{{ define "main" }}
+  <main class="guide">
+    {{ partial "menu.html" (dict "context" . "menu" $.Site.Menus.guides) }}
+    <div class="doc">
+      <section class="copy">{{ .Content }}</section>
+    </div>
+  </main>
+{{ end }}

layouts/guide/single.html

@@ -0,0 +1,8 @@
+{{ define "main" }}
+  <main class="guide">
+    {{ partial "menu.html" (dict "context" . "menu" $.Site.Menus.guides) }}
+    <div class="doc">
+      <section class="copy">{{ .Content }}</section>
+    </div>
+  </main>
+{{ end }}

layouts/partials/header.html

@@ -20,6 +20,20 @@
         {{ .Name }}
       </a>
     {{ end }}
-    <a href="https://github.com/strimertul/strimertul">GitHub</a>
+    <a href="https://github.com/strimertul/strimertul">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        style="padding-right: 1px;margin-left:0"
+        viewBox="-32 -32 160 160"
+      >
+        <path
+          fill="#fff"
+          fill-rule="evenodd"
+          d="M49 0A49 49 0 0034 96c2 0 3-1 3-2V84c-14 3-17-5-17-5-2-6-5-8-5-8-5-3 0-3 0-3 5 1 8 5 8 5 4 8 11 6 14 4 0-3 2-5 3-6-11-1-22-5-22-24 0-6 2-10 5-14-1-1-2-6 0-13 0 0 4-1 14 5a47 47 0 0112-1l12 1c9-6 13-5 13-5 3 7 1 12 1 13 3 4 5 8 5 14 0 19-11 23-22 24 1 1 3 4 3 9v14c0 1 1 2 3 2 20-7 34-25 34-47C98 22 76 0 49 0z"
+          clip-rule="evenodd"
+        ></path></svg
+      >GitHub</a
+    >
   </nav>
 </header>

layouts/partials/menu.html

@@ -0,0 +1,28 @@
+<nav>
+  {{ $currentPage := .context }}
+  {{ range .menu }}
+    {{ if .HasChildren }}
+      <header>{{ .Title }}</header>
+      <ul class="sub-menu">
+        {{ range .Children }}
+          <li
+            class="{{ if $currentPage.IsMenuCurrent "guides" . }}
+              active
+            {{ end }}"
+          >
+            <a href="{{ .URL }}">{{ .Name }}</a>
+          </li>
+        {{ end }}
+      </ul>
+    {{ else }}
+      <ul>
+        <li>
+          <a href="{{ .URL }}">
+            {{ .Pre }}
+            <span>{{ .Name }}</span>
+          </a>
+        </li>
+      </ul>
+    {{ end }}
+  {{ end }}
+</nav>

themes/strimertul/assets/scss/guide.scss

@@ -1,4 +1,5 @@
-.apidocs {
+.apidocs,
+.guide {
   display: grid;
   grid-template-rows: 1fr;
   grid-template-columns: 250px 1fr;
@@ -20,6 +21,12 @@
     background-color: $gray2;
     padding: 0;
     grid-column: 1;
+    header {
+      font-weight: bold;
+      padding: 0.6rem 0.9rem;
+      border-bottom: 1px solid $gray4;
+      margin-top: 0.5rem;
+    }
     ul {
       list-style-type: none;
       margin: 0;
@@ -29,19 +36,28 @@
         align-items: stretch;
         justify-content: stretch;
         transition: all 100ms;
-        &:nth-child(odd) {
-          background-color: rgba(255, 255, 255, 0.02);
+        font-size: 14px;
+        &.active {
+          pointer-events: none;
+          background-color: $gray5;
+          a {
+            color: $teal11;
+          }
         }
         &:hover {
           background-color: rgba(255, 255, 255, 0.05);
         }
         a {
           flex: 1;
-          padding: 0.5rem;
-          color: $teal10;
+          padding: 0.6rem 1rem;
+          color: $teal12;
+          text-decoration: none;
+          &:first-of-type {
+            padding-top: 0.8rem;
+          }
         }
         a:hover {
-          color: $teal12;
+          color: $teal11;
         }
       }
     }

themes/strimertul/assets/scss/layout.scss

@@ -87,3 +87,14 @@ a.appname {
 .hidden {
   display: none;
 }
+
+html,
+body,
+.content {
+  min-height: 100vh;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+}

themes/strimertul/assets/scss/main.scss

@@ -5,4 +5,5 @@
 @import "_vars.scss";
 @import "layout.scss";
 @import "landing.scss";
-@import "api.scss";
+@import "guide.scss";
+@import "pages.scss";

themes/strimertul/assets/scss/pages.scss

@@ -0,0 +1,4 @@
+main.apidocs,
+main.guide {
+  flex: 1;
+}