add table of contents

static-src/scss/hugo-toc.scss

@@ -0,0 +1,43 @@
+// Hugo {{ .TableOfContents }}
+$toc-background-color: #eee;
+$toc-font-size: .9rem;
+
+.toc-wrapper {
+  font-size: $toc-font-size;
+  padding: 0.5em 0.5em 0.5em 0em;
+  background: $toc-background-color;
+  label {
+    background: url(/img/menu-close-dark.svg) no-repeat right center;
+    display: block;
+    cursor: pointer;
+    padding-left: 1em;
+  }
+}
+#TableOfContents {
+  overflow: hidden;
+  margin-top: 0;
+  max-height: 100%;
+  > ul {
+    list-style-type: none;
+    padding-left: 0;
+    > li ul {
+      list-style-type: none;
+      padding-left: 1em;
+    }
+  }
+}
+
+input#tocToggle {
+  display: none;
+  + label {
+    font-weight: bold;
+  }
+  &:checked {
+    + label {
+      background-image: url(/img/menu-open-dark.svg);
+    }
+    ~ #TableOfContents {
+      max-height: 0;
+    }
+  }
+}

static-src/scss/tocbot.scss

@@ -0,0 +1,31 @@
+@import 'hugo-toc';
+
+.toc {
+  font-size: $toc-font-size;
+  overflow-y: auto;
+  background: $toc-background-color;
+  padding-left: 0rem;
+  padding-top: 1em;
+  > .toc-list {
+    overflow: hidden;
+    position: relative;
+    li {
+      list-style: none;
+    }
+  }
+}
+.toc-list {
+  margin: 0;
+  padding-left: 1rem;
+}
+.is-collapsible {
+  max-height: 1000px;
+  overflow: hidden;
+}
+.is-collapsed {
+  max-height: 0;
+}
+.is-position-fixed {
+  position: fixed;
+  top: 0;
+}