Updating TOC to new theme

src/js/toc.js

@@ -0,0 +1,122 @@
+export function animatedToc() {
+  var toc = document.querySelector(".toc");
+  var tocPath = document.querySelector(".toc-marker path");
+  var tocItems;
+
+  // Factor of screen size that the element must cross
+  // before it's considered visible
+  var TOP_MARGIN = 0.1,
+    BOTTOM_MARGIN = 0.2;
+
+  var pathLength;
+
+  var lastPathStart, lastPathEnd;
+
+  window.addEventListener("resize", drawPath, false);
+  window.addEventListener("scroll", sync, false);
+
+  drawPath();
+
+  function drawPath() {
+    tocItems = [].slice.call(toc.querySelectorAll("li"));
+
+    // Cache element references and measurements
+    tocItems = tocItems.map(function (item) {
+      var anchor = item.querySelector("a");
+      var target = document.getElementById(
+        anchor.getAttribute("href").slice(1)
+      );
+
+      return {
+        listItem: item,
+        anchor: anchor,
+        target: target,
+      };
+    });
+
+    // Remove missing targets
+    tocItems = tocItems.filter(function (item) {
+      return !!item.target;
+    });
+
+    var path = [];
+    var pathIndent;
+
+    tocItems.forEach(function (item, i) {
+      var x = item.anchor.offsetLeft - 5,
+        y = item.anchor.offsetTop,
+        height = item.anchor.offsetHeight;
+
+      if (i === 0) {
+        path.push("M", x, y, "L", x, y + height);
+        item.pathStart = 0;
+      } else {
+        // Draw an additional line when there's a change in
+        // indent levels
+        if (pathIndent !== x) path.push("L", pathIndent, y);
+
+        path.push("L", x, y);
+
+        // Set the current path so that we can measure it
+        tocPath.setAttribute("d", path.join(" "));
+        item.pathStart = tocPath.getTotalLength() || 0;
+
+        path.push("L", x, y + height);
+      }
+
+      pathIndent = x;
+
+      tocPath.setAttribute("d", path.join(" "));
+      item.pathEnd = tocPath.getTotalLength();
+    });
+
+    pathLength = tocPath.getTotalLength();
+
+    sync();
+  }
+
+  function sync() {
+    var windowHeight = window.innerHeight;
+
+    var pathStart = pathLength,
+      pathEnd = 0;
+
+    var visibleItems = 0;
+
+    tocItems.forEach(function (item) {
+      var targetBounds = item.target.getBoundingClientRect();
+
+      if (
+        targetBounds.bottom > windowHeight * TOP_MARGIN &&
+        targetBounds.top < windowHeight * (1 - BOTTOM_MARGIN)
+      ) {
+        pathStart = Math.min(item.pathStart, pathStart);
+        pathEnd = Math.max(item.pathEnd, pathEnd);
+
+        visibleItems += 1;
+
+        item.listItem.classList.add("visible");
+      } else {
+        item.listItem.classList.remove("visible");
+      }
+    });
+
+    // Specify the visible path or hide the path altogether
+    // if there are no visible items
+    if (visibleItems > 0 && pathStart < pathEnd) {
+      if (pathStart !== lastPathStart || pathEnd !== lastPathEnd) {
+        tocPath.setAttribute("stroke-dashoffset", "1");
+        tocPath.setAttribute(
+          "stroke-dasharray",
+          "1, " + pathStart + ", " + (pathEnd - pathStart) + ", " + pathLength
+        );
+        tocPath.setAttribute("opacity", 1);
+      }
+    } else {
+      tocPath.setAttribute("opacity", 0);
+    }
+
+    lastPathStart = pathStart;
+    lastPathEnd = pathEnd;
+  }
+}

src/main.js

@@ -5,10 +5,12 @@ window.addEventListener("DOMContentLoaded", async (event) => {
   const { default: App } = await import(
     /* webpackChunkName: "app" */ "./js/App"
   );
+  const animatedToc = await import("./js/toc");
   App.bootstrapify();
   App.lazyload();
   App.loadFontAwesome();
   // App.navbarFade();
   App.aos();
   App.scrollBar();
+  animatedToc.animatedToc();
 });

src/scss/code-block.scss

@@ -0,0 +1,3 @@
+div.highlight {
+    padding-bottom: 20px;
+}

src/scss/styles.scss

@@ -5,8 +5,10 @@
 @import "sticky-footer";
 @import "search";
 @import "search-bar";
-@import "toc";
 @import "scroll-bar";
 @import "admonition-icons";
 @import "cards";
 @import "fonts";
+@import "toc-marker";
+@import "code-block";
+@import "toc";

src/scss/toc-marker.scss

@@ -0,0 +1,41 @@
+@mixin toc-selected {
+    color: $text-gray;
+    transform: translate(5px);
+}
+
+.toc {
+    line-height: 2;
+
+    ul {
+        list-style: none;
+        padding-left: 0px;
+    }
+
+    ul ul {
+        padding-left: 1em;
+    }
+
+    li a {
+        display: inline-block;
+        color: $text-muted;
+        text-decoration: none;
+        transition: all 0.3s cubic-bezier(0.230, 1.000, 0.320, 1.000);
+        font-size: 0.9rem;
+
+        &:hover {
+            @include toc-selected;
+        }
+    }
+
+    li.visible>a {
+        @include toc-selected;
+    }
+}
+
+// Adds offset to the headers in the post content to ignore the navbar height (avoids underscroll).
+:target[id]:before {
+    content: '';
+    display: block;
+    height: 58px;
+    margin: -30px 0 0;
+}

src/scss/toc.scss

@@ -1,30 +1,10 @@
-div.toc-sidebar {
-    position: fixed;
-    right: 0;
-    // background-color: rgb(245,245,245);
-    background: repeating-linear-gradient(135deg, rgba(128, 50, 50, 0.025), rgba(160, 60, 60, 0.025) 5px, rgba(0,0,0,0) 5px, rgba(0,0,0,0) 10px);
-    height: 100%;
-    margin-top: -500%;
-    padding-top: 500%;
-    padding-bottom: 500%;
-    margin-right: 5%;
-    font-size: 0.9em;
+div {
+    &.toc-container {
+        top: 56px;
+        background-color: white;
+    }
 
-    & li {
-        list-style: none;
-        padding-bottom: 10px;
+    &.toc-contents {
+        padding-left: 10px;
     }
 }
-
-#TableOfContents > ul {
-    margin-left: -40px;
-
-    & > li ul {
-        margin-left: -15px;
-    }
-}
-
-div.toc-contents a {
-    // color: $text-muted
-    color: $gray-700
-}