From 6ad6fe864cecb3d8e1c92d2c2ba13e4bdfb50cac Mon Sep 17 00:00:00 2001
From: Jared Miller <jared@smell.flowers>
Date: Sun, 28 Dec 2025 05:00:51 -0500
Subject: [PATCH] Higlight active TOC entry

---
 script.js | 15 +++++++++++----
 style.css |  6 ++++++
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/script.js b/script.js
index 228ad4e..b6e8c76 100644
--- a/script.js
+++ b/script.js
@@ -344,13 +344,20 @@ tocList?.addEventListener("click", (e) => {
   }
 });
 
-// scroll TOC item into view when navigating via hash
-window.addEventListener("hashchange", () => {
+// highlight active TOC entry based on hash
+const updateActiveTocEntry = () => {
   const id = location.hash.slice(1);
+  tocList?.querySelector("a.active")?.classList.remove("active");
   if (id) {
-    tocList?.querySelector(`a[href="#${id}"]`)?.scrollIntoView({ block: "nearest" });
+    const link = tocList?.querySelector(`a[href="#${id}"]`);
+    link?.classList.add("active");
   }
-});
+};
+
+window.addEventListener("hashchange", updateActiveTocEntry);
+if (location.hash) {
+  updateActiveTocEntry();
+}
 
 // Entry popup preview on hover
 const popup = document.createElement("div");
diff --git a/style.css b/style.css
index 8431945..7de302d 100644
--- a/style.css
+++ b/style.css
@@ -151,6 +151,12 @@ body {
   color: var(--accent-deep);
 }
 
+.toc-list a.active {
+  background: rgba(182, 82, 47, 0.22);
+  color: var(--accent-deep);
+  font-weight: 600;
+}
+
 .content {
   background: rgba(255, 255, 255, 0.6);
   border-radius: clamp(12px, 3vw, 24px);