Update toc with active section.

Author: nikoshell

src/content/config.ts

@@ -10,7 +10,7 @@ const pages = defineCollection({
   schema: z.object({
     title: z.string(),
     subtitle: z.string(),
-    toc: z.boolean().optional().default(false),
+    toc: z.boolean().optional().default(true),
   }),
 });
 

src/pages/[...slug].astro

@@ -54,9 +54,8 @@ const description = post.data.subtitle;
 
     { post.data.toc ?
         <TwoCols>
-          <div class="mt-28" > aaa </div>
           <Fragment slot="content">
-          <Headline id="contents" as="h4" title="Contents" />
+          <Headline id="contents" as="h4" title="Table of contents" />
           <div id="toc" class="mb-6 last:mb-0 rounded-lg shadow-md bg-white p-6"></div>
           </Fragment>
           <Fragment slot="sidebar">
@@ -107,26 +106,112 @@ document.addEventListener("DOMContentLoaded", () => {
   const tocContainer = document.getElementById("toc");
   if (!tocContainer) return;
 
-  const headings = document.querySelectorAll("article h2, article h3");
+  const headings = Array.from(document.querySelectorAll("article h2, article h3, article h4"));
   if (!headings.length) return;
 
-  const ul = document.createElement("ul");
+  const rootUl = document.createElement("ul");
+  let currentUl = rootUl;
+  let lastLevel = 2;
+  const parents = [rootUl];
 
   headings.forEach((heading, index) => {
     if (!heading.id) {
       heading.id = `heading-${index}`;
     }
 
+    const level = parseInt(heading.tagName[1], 10);
     const li = document.createElement("li");
-    li.style.marginLeft = heading.tagName === "H3" ? "1em" : "0";
     const a = document.createElement("a");
     a.href = `#${heading.id}`;
     a.textContent = heading.textContent;
-
     li.appendChild(a);
-    ul.appendChild(li);
+
+    if (level > lastLevel) {
+      const newUl = document.createElement("ul");
+      parents[parents.length - 1].lastElementChild?.appendChild(newUl);
+      parents.push(newUl);
+    } else if (level < lastLevel) {
+      parents.splice(-(lastLevel - level));
+    }
+
+    currentUl = parents[parents.length - 1];
+    currentUl.appendChild(li);
+    lastLevel = level;
   });
 
-  tocContainer.appendChild(ul);
+  tocContainer.appendChild(rootUl);
+
+  // Scroll spy: highlight active link
+  const observer = new IntersectionObserver(
+    entries => {
+      entries.forEach(entry => {
+        const id = entry.target.id;
+        const tocLink = tocContainer.querySelector(`a[href="#${id}"]`);
+        if (tocLink) {
+          if (entry.isIntersecting) {
+            tocContainer.querySelectorAll("a").forEach(a => a.classList.remove("active"));
+            tocLink.classList.add("active");
+          }
+        }
+      });
+    },
+    {
+      rootMargin: "-30% 0px -60% 0px", // adjust when to highlight
+      threshold: 0,
+    }
+  );
+
+  headings.forEach(heading => observer.observe(heading));
 });
 </script>
+
+<style is:global>
+
+#toc {
+  font-size: 0.95rem;
+  line-height: 1.5;
+  max-width: 300px;
+  padding: 1rem;
+  border-left: 1px solid #e0e0e0;
+  position: sticky;
+  top: 1rem;
+}
+
+#toc ul {
+  list-style: none;
+  padding-left: 0;
+  margin: 0;
+}
+
+#toc li {
+  margin: 0.25em 0;
+}
+
+#toc li ul {
+  margin-left: 1em;
+  border-left: 1px dashed #ddd;
+  padding-left: 0.75em;
+}
+
+#toc a {
+  text-decoration: none;
+  color: #333;
+  display: block;
+  padding: 0.25em 0.5em;
+  border-radius: 4px;
+  transition: background 0.2s ease, color 0.2s ease;
+}
+
+#toc a:hover {
+  background: #f0f0f0;
+  color: #007acc;
+}
+
+#toc a.active {
+  font-weight: 600;
+  color: #007acc;
+  border-left: 3px solid #007acc;
+  background: rgba(0, 122, 204, 0.1);
+  padding-left: 0.5em;
+}
+</style>