add toc

layouts/guide/single.html

@@ -5,5 +5,10 @@
       <header><h1>{{ .Title }}</h1></header>
       <section class="copy">{{ .Content }}</section>
     </div>
+    <div class="toc">
+      <header>In this page:</header>
+      {{ .TableOfContents }}
+    </div>
   </main>
+  <script async defer src="/script/toc.js"></script>
 {{ end }}

static/script/toc.js

@@ -0,0 +1,34 @@
+const toc = document.getElementById("TableOfContents");
+
+const getId = (el) => {
+  do {
+    const id = el.getAttribute("id");
+    if (id) {
+      return id;
+    }
+    el = el.previousElementSibling;
+  } while (el);
+};
+if (toc) {
+  if (toc.children.length < 1) {
+    toc.parentElement.remove();
+  } else {
+    const observer = new IntersectionObserver((entries) => {
+      const filtered = entries.filter((i) => getId(i.target));
+      filtered.forEach((entry) => {
+        const id = getId(entry.target);
+        if (id && entry.intersectionRatio > 0) {
+          toc.querySelector(`li.active`)?.classList.remove("active");
+          toc
+            .querySelector(`li a[href="#${id}"]`)
+            .parentElement.classList.add("active");
+        }
+      });
+    });
+
+    // Track all sections that have an `id` applied
+    document.querySelectorAll(".copy *").forEach((section) => {
+      observer.observe(section);
+    });
+  }
+}

themes/strimertul/assets/scss/guide.scss

@@ -175,3 +175,53 @@
     }
   }
 }
+
+.toc {
+  @media only screen and (max-width: 1400px) {
+    display: none;
+  }
+  padding: 0;
+  position: fixed;
+  right: 0;
+  top: 60px;
+  header {
+    font-weight: bold;
+    padding: 0.6rem 0.9rem;
+    margin-top: 0.5rem;
+  }
+  ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    li {
+      display: flex;
+      align-items: stretch;
+      justify-content: stretch;
+      transition: all 100ms;
+      font-size: 14px;
+      border-left: 5px solid $gray3;
+      &.active {
+        pointer-events: none;
+        border-left-color: $teal8;
+        a {
+          color: $teal11;
+        }
+      }
+      &:hover {
+        background-color: rgba(255, 255, 255, 0.05);
+      }
+      a {
+        flex: 1;
+        padding: 0.6rem 1rem;
+        color: $teal12;
+        text-decoration: none;
+        &:first-of-type {
+          padding-top: 0.8rem;
+        }
+      }
+      a:hover {
+        color: $teal11;
+      }
+    }
+  }
+}