Improved TOC

Author: kitswas

_includes/head/meta-static.html

@@ -14,3 +14,4 @@
 <meta name="application-name" content="{{ site.title }}" />
 
 <meta name="generator" content="Hydejack v9.2.1" />
+<script src="{{ '/assets/js/toc-enhance.js' | relative_url }}" defer></script>

_sass/my-style.scss

@@ -81,3 +81,33 @@ body.dark-mode {
   vertical-align: baseline;
   border-radius: 0.25rem;
 }
+
+/* TOC sidebar enhancements */
+#markdown-toc {
+  transition: box-shadow 0.15s ease, transform 0.15s ease;
+}
+
+.toc-sentinel {
+  width: 1px;
+  height: 1px;
+  display: block;
+}
+
+/* Only affix TOC on screens wide enough (86em = --break-point-5) */
+@media (min-width: 86em) {
+  #markdown-toc.affix {
+    position: fixed;
+    top: 1rem;
+    right: 1rem;
+    width: 18rem;
+    max-height: calc(100vh - 2rem);
+    overflow: auto;
+    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
+    background: inherit;
+    z-index: 40;
+  }
+}
+
+#markdown-toc a {
+  transition: color 0.12s ease, font-weight 0.12s ease;
+}

assets/js/toc-enhance.js

@@ -0,0 +1,61 @@
+/* Enhanced TOC behavior: affix, active-section highlighting, and auto-scroll */
+(function () {
+	function safeId(href) { return href && href.charAt(0) === '#' ? href.slice(1) : null }
+	document.addEventListener('DOMContentLoaded', function () {
+		var toc = document.getElementById('markdown-toc');
+		if (!toc) return;
+		// sentinel to toggle affix class when TOC scrolls past top
+		var sentinel = document.createElement('div');
+		sentinel.className = 'toc-sentinel';
+		toc.parentNode.insertBefore(sentinel, toc);
+		var sentObs = new IntersectionObserver(function (entries) {
+			entries.forEach(function (e) {
+				if (!e.isIntersecting) toc.classList.add('affix'); else toc.classList.remove('affix');
+			});
+		}, { root: null, threshold: 0, rootMargin: '-1px 0px 0px 0px' });
+		sentObs.observe(sentinel);
+
+		var links = Array.from(toc.querySelectorAll('a[href^="#"]'));
+		var targets = links.map(function (a) { return document.getElementById(safeId(a.getAttribute('href'))) }).filter(Boolean);
+		if (targets.length === 0) return;
+
+		var offsets = new Map();
+		var visible = new Set();
+		var first = true;
+		var tocContainsOverscroll = getComputedStyle(toc).overscrollBehaviorY === 'contain';
+
+		function setActive(activeEl) {
+			links.forEach(function (a) { a.style.fontWeight = '' });
+			if (!activeEl) return;
+			var selector = 'a[href="#' + activeEl.id + '"]';
+			var link = toc.querySelector(selector);
+			if (link) {
+				link.style.fontWeight = 'bold';
+				if (tocContainsOverscroll) {
+					clearTimeout(link.__tocScrollTimer);
+					link.__tocScrollTimer = setTimeout(function () {
+						if (toc.classList.contains('affix')) link.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
+					}, 100);
+				}
+			}
+		}
+
+		var observer = new IntersectionObserver(function (entries) {
+			if (first) {
+				targets.forEach(function (t) { offsets.set(t, t.getBoundingClientRect().top + window.pageYOffset); });
+				first = false;
+			}
+			entries.forEach(function (entry) {
+				var el = entry.target;
+				if (entry.isIntersecting) visible.add(el); else visible.delete(el);
+			});
+			if (visible.size === 0) { setActive(null); return; }
+			var active = null;
+			visible.forEach(function (el) { if (!active || offsets.get(el) < offsets.get(active)) active = el; });
+			setActive(active);
+		}, { root: null, threshold: [0, 0.1, 0.5, 1] });
+
+		targets.forEach(function (t) { observer.observe(t) });
+		window.addEventListener('unload', function () { observer.disconnect(); sentObs.disconnect(); });
+	});
+})();