Show more headings in the table of contents

- Add h3 and h4 in the table of contents
- When the table of contents is taller than the viewport's height, it will now be scrollable
- Scroll the active table of content link in view if needed
- Mark `<a>` as active instead of `<li>` so the border is only as tall as the active heading
- Remove the bold styling for active to prevent content jump when a link takes one extra line when bolded

Author: rik

.eleventy.js

@@ -8,7 +8,7 @@ module.exports = function(config) {
 	config.addPassthroughCopy('src/img');
 	config.addPassthroughCopy('src/manifest.json');
 
-	config.addPlugin(pluginTOC, {tags: ['h2']});
+	config.addPlugin(pluginTOC, {tags: ['h2', 'h3', 'h4']});
 	config.addPlugin(syntaxHighlight);
 	config.addPlugin(imageOptimizations);
 	config.addPlugin(eleventyNavigationPlugin);

src/_includes/scripts/in-page-nav.js

@@ -1,21 +1,22 @@
 const observer = new IntersectionObserver(entries => {
-    entries.forEach(entry => {
-        const id = entry.target.getAttribute('id');
-
-        if (entry.intersectionRatio > 0) {
-            if (document.querySelector(`.pageNav li.is-active`)) {
-                document.querySelector(`.pageNav li.is-active`).classList.remove('is-active');
-            }
-            
-            document.querySelector(`.pageNav a[href="#${id}"]`).parentElement.classList.add('is-active');
+    const intersectingEntries = entries.filter(e => e.isIntersecting);
+    for (const entry of intersectingEntries) {
+        const previouslyActive = document.querySelector('.pageNav a.is-active');
+        if (previouslyActive) {
+            previouslyActive.classList.remove('is-active');
         }
-    })
+
+        const id = entry.target.getAttribute('id')
+        const newActive = document.querySelector(`.pageNav a[href="#${id}"]`);
+        newActive.classList.add('is-active');
+        newActive.scrollIntoView({ block: 'nearest' });
+    }
 }, { rootMargin: `0% 0% -90% 0%` }
 );
 
-//track h2's with an id
+//track headings with an id
 if (document.querySelector('.pageNav')) {
-    document.querySelectorAll('h2[id]').forEach((section) => {
-        observer.observe(section);
-    });
-}
+    for (const heading of document.querySelectorAll(':is(h2,h3,h4)[id]')) {
+        observer.observe(heading)
+    }
+}

src/_includes/styles.css

@@ -337,10 +337,11 @@ nav{
     padding-left: 0;
     border-left: 1px solid var(--light-grey);
     font-size: .9em;
-
+    margin: 0;
 }
 .pageNav a{
     padding-left: 1em;
+    border-left: 3px solid transparent;
     display: inline-block;
 }
 nav ul{
@@ -358,7 +359,7 @@ nav a:hover{
 nav li{
     margin-bottom: 1em;
 }
-nav .is-active > a{
+.primaryNav .is-active > a{
     font-weight: bold;
     color: #000;
 }
@@ -368,14 +369,17 @@ nav li ul{
 }
 
 .toc .is-active{
-    border-left: 3px solid var(--wpt-navy);
+    border-left-color: var(--wpt-navy);
     color: var(--wpt-navy);
 }
 @media (min-width: 68em) {
     .toc{
+        --top-offset: 1em;
         position: sticky;
-        top: 1em;
-        padding-top: .5em;
+        top: var(--top-offset);
+        margin-top: 1.5em;
+        max-height: calc(100vh - 2 * var(--top-offset));
+        overflow-y: auto;
     }
 }
 .toc li{