Have animated scroll on table of contents

Animated and offset correctly with hero. Requires some extra JS to keep the height up to date.

package-lock.json

@@ -14,6 +14,7 @@
         "elevator.js": "^1.0.1",
         "firacode": "^6.2.0",
         "lite-youtube-embed": "^0.2.0",
+        "lodash.debounce": "^4.0.8",
         "shareon": "^2.0.0"
       },
       "devDependencies": {
@@ -1098,6 +1099,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
+    },
     "node_modules/memorystream": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",
@@ -2312,6 +2318,11 @@
         "strip-bom": "^3.0.0"
       }
     },
+    "lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
+    },
     "memorystream": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",

package.json

@@ -26,6 +26,7 @@
     "elevator.js": "^1.0.1",
     "firacode": "^6.2.0",
     "lite-youtube-embed": "^0.2.0",
+    "lodash.debounce": "^4.0.8",
     "shareon": "^2.0.0"
   }
 }

static/src/js/base.js

@@ -1,4 +1,16 @@
 const Elevator = require("elevator.js");
+const debounce = require("lodash.debounce");
+
+const HERO = document.querySelector("section.hero");
+const ROOT = document.querySelector(":root");
+
+function getHeroHeight() {
+  return HERO.getBoundingClientRect().height;
+}
+
+function setHeroHeight() {
+  ROOT.style.setProperty("--hero-height", `${getHeroHeight()}px`);
+}
 
 window.addEventListener("load", () => {
   const navbarBurger = document.getElementById("navbar-burger");
@@ -15,6 +27,17 @@ window.addEventListener("load", () => {
     });
   });
 
+  document.querySelectorAll("#table-of-contents li a").forEach((element) => {
+    element.addEventListener("click", (event) => {
+      event.preventDefault();
+      const rect = document
+        .querySelector(event.target.hash)
+        .getBoundingClientRect();
+      const top = rect.top - getHeroHeight();
+      window.scrollBy({ top: top, behavior: "smooth" });
+    });
+  });
+
   const elevatorButton = document.getElementById("to-top-elevator");
   new Elevator({
     element: elevatorButton,
@@ -23,3 +46,6 @@ window.addEventListener("load", () => {
     preloadAudio: false,
   });
 });
+
+window.addEventListener("resize", debounce(setHeroHeight, 2000));
+window.addEventListener("load", setHeroHeight);

static/src/scss/_bulma_overrides.scss

@@ -3,3 +3,5 @@
 $container-max-width: $widescreen;
 $pre-background: unset;
 $family-code: "Fira Code", monospace;
+$dropdown-content-radius: 0px;
+$dropdown-content-offset: 0px;

static/src/scss/_content.scss

@@ -8,7 +8,7 @@ section.content {
   h5,
   h6 {
     .heading-anchor {
-      scroll-margin-top: 160px;  // navbar height (ish)
+      scroll-margin-top: var(--hero-height); // navbar height (ish)
       margin-right: 0.5rem;
     }
   }

website/common/templates/common/hero.html

@@ -19,16 +19,16 @@
         </div>
         <div class="column is-narrow dropdown-wrapper is-hidden-touch is-grouped">
           {% if page.table_of_contents %}
-            <div class="dropdown is-hoverable is-right">
+            <div class="dropdown is-hoverable is-right" id="table-of-contents">
               <div class="dropdown-trigger">
-                <button class="button is-radiusless" aria-haspopup="true" aria-controls="dropdown-menu">
+                <button class="button is-radiusless" aria-haspopup="true" aria-controls="toc-menu">
                   <span>Table of Contents</span>
                   <span class="icon is-small">
                     <i class="fas fa-angle-down" aria-hidden="true"></i>
                   </span>
                 </button>
               </div>
-              <div class="dropdown-menu" id="dropdown-menu" role="menu">
+              <div class="dropdown-menu" id="toc-menu" role="menu">
                 <div class="dropdown-content menu">
                   <ul class="menu-list">
                     {% for toc_item in page.table_of_contents %}