radiant-docs 0.1.41 → 0.1.42

package/template/src/components/TableOfContents.astro

@@ -1,5 +1,6 @@
 ---
 import type { MarkdownHeading } from "astro";
+import { Icon } from "astro-icon/components";
 
 interface Props {
   headings: MarkdownHeading[];
@@ -29,19 +30,32 @@ for (const heading of headings) {
 ---
 
 <nav
-  class="sticky top-16 text-[14px]/5 py-16 -mt-16"
+  class="sticky top-[calc(68px+64px)] text-[13px]/5"
   aria-label="Table of Contents"
   data-slugs={JSON.stringify(headings.map((h) => h.slug))}
 >
-  <div class="text-sm font-medium mb-3 text-neutral-900 dark:text-neutral-100">On this page</div>
+  <div
+    class="pl-[22px] relative font-medium mb-3 text-neutral-900 dark:text-neutral-100"
+  >
+    <Icon
+      name="lucide:text-align-start"
+      class="absolute left-0 top-1/2 -translate-y-1/2 size-3"
+    />On this page
+  </div>
   <div class="flex text-neutral-600/90 dark:text-neutral-300/90">
-    <svg viewBox="0 0 22 100" width="22px" height="100" class="shrink-0">
+    <svg
+      data-rd-toc-rail
+      viewBox="0 0 22 100"
+      width="22px"
+      height="100"
+      class="shrink-0"
+    >
       <path
         id="toc-bg-path"
         d=""
-        stroke-width="1.2"
+        stroke-width="1"
         vector-effect="non-scaling-stroke"
-        class="stroke-neutral-200 dark:stroke-neutral-700/70"
+        class="stroke-neutral-200/80 dark:stroke-neutral-700/70"
         fill="none"
         stroke-linecap="round"
         stroke-linejoin="round"></path>
@@ -50,14 +64,13 @@ for (const heading of headings) {
         d=""
         stroke-width="1.4"
         vector-effect="non-scaling-stroke"
-        class="transition-[stroke-dasharray] duration-200"
-        style="stroke: var(--color-theme);"
+        class="transition-[stroke-dasharray] duration-200 stroke-(--color-theme)/50"
         fill="none"
         stroke-linecap="round"
         stroke-linejoin="round"></path>
       <g id="toc-circles"></g>
     </svg>
-    <ol id="toc-list">
+    <ol id="toc-list" class="text-neutral-500/80 dark:text-neutral-400/70">
       {
         groupedHeadings.map((heading) => (
           <li class="mt-3 first:mt-0">
@@ -94,7 +107,7 @@ for (const heading of headings) {
   <script>
     function initTableOfContents() {
       const nav = document.querySelector('nav[aria-label="Table of Contents"]');
-      const svg = nav?.querySelector("svg");
+      const svg = nav?.querySelector("[data-rd-toc-rail]");
       const ol = nav?.querySelector("#toc-list");
 
       if (!svg || !ol) return;
@@ -109,12 +122,15 @@ for (const heading of headings) {
       let path = "";
       let currentY = 0;
       const gap = 12; // mt-3 = 12px
-      const linkPositions: Map<string, { pathLengthAtMid: number }> = new Map();
+      const markerOffset = 10; // Half of the inherited 20px line-height
+      const linkPositions: Map<string, { pathLengthAtMarker: number }> =
+        new Map();
 
       // First pass: collect all items with their positions
       interface ItemInfo {
         x: number;
         height: number;
+        markerY: number;
         slug?: string;
         yStart: number;
       }
@@ -123,7 +139,7 @@ for (const heading of headings) {
       // Iterate through top-level items to collect data
       ol.querySelectorAll(":scope > li").forEach((li) => {
         const topLink = li.querySelector(
-          ":scope > a"
+          ":scope > a",
         ) as HTMLAnchorElement | null;
         const subOl = li.querySelector(":scope > ol");
 
@@ -134,6 +150,7 @@ for (const heading of headings) {
           items.push({
             x: 0.5,
             height,
+            markerY: currentY + Math.min(markerOffset, height / 2),
             slug: topLink.dataset.slug,
             yStart: currentY,
           });
@@ -144,7 +161,7 @@ for (const heading of headings) {
         if (subOl) {
           subOl.querySelectorAll(":scope > li").forEach((subLi) => {
             const subLink = subLi.querySelector(
-              "a"
+              "a",
             ) as HTMLAnchorElement | null;
             if (!subLink) return;
 
@@ -155,6 +172,7 @@ for (const heading of headings) {
             items.push({
               x: 12,
               height,
+              markerY: currentY + Math.min(markerOffset, height / 2),
               slug: subLink.dataset.slug,
               yStart: currentY,
             });
@@ -163,59 +181,121 @@ for (const heading of headings) {
         }
       });
 
-      // Second pass: build path with midpoint start/end, tracking cumulative path length
+      // Second pass: build path with first-line anchors, tracking cumulative path length
       let pathLength = 0;
       let prevX: number | null = null;
       let prevY: number | null = null;
 
+      function getCubicPoint(
+        start: number,
+        control1: number,
+        control2: number,
+        end: number,
+        progress: number,
+      ) {
+        const inverse = 1 - progress;
+
+        return (
+          inverse ** 3 * start +
+          3 * inverse ** 2 * progress * control1 +
+          3 * inverse * progress ** 2 * control2 +
+          progress ** 3 * end
+        );
+      }
+
+      function getCubicLength(
+        x1: number,
+        y1: number,
+        c1x: number,
+        c1y: number,
+        c2x: number,
+        c2y: number,
+        x2: number,
+        y2: number,
+      ) {
+        let length = 0;
+        let previousX = x1;
+        let previousY = y1;
+
+        for (let step = 1; step <= 12; step += 1) {
+          const progress = step / 12;
+          const x = getCubicPoint(x1, c1x, c2x, x2, progress);
+          const y = getCubicPoint(y1, c1y, c2y, y2, progress);
+          length += Math.hypot(x - previousX, y - previousY);
+          previousX = x;
+          previousY = y;
+        }
+
+        return length;
+      }
+
+      function appendConnector(x: number, y: number) {
+        if (prevX === null || prevY === null) return;
+
+        const dx = x - prevX;
+        const dy = y - prevY;
+
+        if (Math.abs(dx) < 0.01 || Math.abs(dy) < 0.01) {
+          path += `L ${x} ${y} `;
+          pathLength += Math.hypot(dx, dy);
+        } else {
+          const bendOffset = Math.min(Math.abs(dy) * 0.6, 8);
+          const direction = dy > 0 ? 1 : -1;
+          const c1x = prevX;
+          const c1y = prevY + bendOffset * direction;
+          const c2x = x;
+          const c2y = y - bendOffset * direction;
+
+          path += `C ${c1x} ${c1y} ${c2x} ${c2y} ${x} ${y} `;
+          pathLength += getCubicLength(prevX, prevY, c1x, c1y, c2x, c2y, x, y);
+        }
+
+        prevX = x;
+        prevY = y;
+      }
+
       items.forEach((item, index) => {
         const isFirst = index === 0;
         const isLast = index === items.length - 1;
-        const midY = item.yStart + item.height / 2;
 
         if (isFirst) {
-          // Start at midpoint of first item
-          path = `M ${item.x} ${midY} `;
+          // Start at the center of the first rendered line.
+          path = `M ${item.x} ${item.markerY} `;
           prevX = item.x;
-          prevY = midY;
+          prevY = item.markerY;
 
-          // Path length at first item's midpoint is 0
+          // Path length at first item's marker is 0
           if (item.slug) {
-            linkPositions.set(item.slug, { pathLengthAtMid: 0 });
+            linkPositions.set(item.slug, { pathLengthAtMarker: 0 });
           }
 
           if (!isLast) {
-            // Draw from midpoint to bottom
+            // Draw from first-line center to bottom
             path += `L ${item.x} ${item.yStart + item.height} `;
-            pathLength += item.height / 2; // vertical segment
+            pathLength += item.yStart + item.height - item.markerY;
             prevY = item.yStart + item.height;
           }
         } else {
           // Segment from previous position to this item's top
-          const dx = item.x - prevX!;
-          const dy = item.yStart - prevY!;
-          pathLength += Math.sqrt(dx * dx + dy * dy);
-          path += `L ${item.x} ${item.yStart} `;
-          prevX = item.x;
-          prevY = item.yStart;
+          appendConnector(item.x, item.yStart);
 
           if (isLast) {
-            // Draw from top to midpoint
-            const midLength = item.height / 2;
-            pathLength += midLength;
-            path += `L ${item.x} ${midY} `;
-            prevY = midY;
+            // Draw from top to first-line center
+            const markerLength = item.markerY - item.yStart;
+            pathLength += markerLength;
+            path += `L ${item.x} ${item.markerY} `;
+            prevY = item.markerY;
 
             if (item.slug) {
-              linkPositions.set(item.slug, { pathLengthAtMid: pathLength });
+              linkPositions.set(item.slug, { pathLengthAtMarker: pathLength });
             }
           } else {
-            // Middle item: path length at midpoint is current + half height
-            const pathLengthAtMid = pathLength + item.height / 2;
+            // Middle item: path length at marker is current + first-line offset
+            const pathLengthAtMarker = pathLength + item.markerY - item.yStart;
 
             if (item.slug) {
               linkPositions.set(item.slug, {
-                pathLengthAtMid: pathLengthAtMid,
+                pathLengthAtMarker,
               });
             }
 
@@ -227,26 +307,25 @@ for (const heading of headings) {
         }
       });
 
-      // Create circles at each item's midpoint
+      // Create circles at each item's first-line center
       const circlesGroup = svg.querySelector("#toc-circles");
       if (circlesGroup) {
         // Clear existing circles before creating new ones
         circlesGroup.innerHTML = "";
         items.forEach((item) => {
-          const midY = item.yStart + item.height / 2;
           const circle = document.createElementNS(
             "http://www.w3.org/2000/svg",
-            "circle"
+            "circle",
           );
           circle.setAttribute("cx", String(item.x));
-          circle.setAttribute("cy", String(midY));
+          circle.setAttribute("cy", String(item.markerY));
           circle.setAttribute("r", "2.25");
           circle.setAttribute("fill", "currentColor");
           circle.classList.add(
-            "fill-neutral-300",
-            "dark:fill-neutral-600",
+            "fill-neutral-200",
+            "dark:fill-neutral-700",
             "transition-all",
-            "duration-200"
+            "duration-200",
           );
           if (item.slug) {
             circle.dataset.slug = item.slug;
@@ -273,7 +352,7 @@ for (const heading of headings) {
         // Initially hide the highlight (use same pattern as "0 visible" state)
         fgPath.setAttribute(
           "stroke-dasharray",
-          `0 ${totalLength} 0 ${totalLength}`
+          `0 ${totalLength} 0 ${totalLength}`,
         );
         fgPath.setAttribute("stroke-dashoffset", "0");
       }
@@ -289,8 +368,8 @@ for (const heading of headings) {
         visibleSlugs.forEach((slug) => {
           const pos = linkPositions.get(slug);
           if (pos) {
-            minPathLength = Math.min(minPathLength, pos.pathLengthAtMid);
-            maxPathLength = Math.max(maxPathLength, pos.pathLengthAtMid);
+            minPathLength = Math.min(minPathLength, pos.pathLengthAtMarker);
+            maxPathLength = Math.max(maxPathLength, pos.pathLengthAtMarker);
           }
         });
 
@@ -312,14 +391,14 @@ for (const heading of headings) {
             // 1 visible heading: position gap at this item, ready to grow down
             fgPath.setAttribute(
               "stroke-dasharray",
-              `0 ${minPathLength} 0 ${totalLength}`
+              `0 ${minPathLength} 0 ${totalLength}`,
             );
             fgPath.setAttribute("stroke-dashoffset", "0");
           } else {
             // 0 visible headings: fully hidden
             fgPath.setAttribute(
               "stroke-dasharray",
-              `0 ${totalLength} 0 ${totalLength}`
+              `0 ${totalLength} 0 ${totalLength}`,
             );
             fgPath.setAttribute("stroke-dashoffset", "0");
           }
@@ -331,9 +410,11 @@ for (const heading of headings) {
           const slug = (circle as SVGCircleElement).dataset.slug;
           if (slug && visibleSlugs.has(slug)) {
             (circle as SVGCircleElement).style.fill = "var(--color-theme)";
+            circle.setAttribute("fill-opacity", "0.8");
             circle.setAttribute("r", "2.75");
           } else {
             (circle as SVGCircleElement).style.fill = "";
+            circle.removeAttribute("fill-opacity");
             circle.setAttribute("r", "2.25");
           }
         });
@@ -343,21 +424,46 @@ for (const heading of headings) {
         tocLinks?.forEach((link) => {
           const slug = (link as HTMLAnchorElement).dataset.slug;
           if (slug && visibleSlugs.has(slug)) {
-            link.classList.add("text-neutral-900", "dark:text-neutral-100");
+            link.classList.add("text-neutral-950", "dark:text-neutral-100");
           } else {
-            link.classList.remove("text-neutral-900", "dark:text-neutral-100");
+            link.classList.remove("text-neutral-950", "dark:text-neutral-100");
           }
         });
       }
 
       // Intersection Observer to track headings in view
       const slugs: string[] = JSON.parse(
-        (nav as HTMLElement).dataset.slugs || "[]"
+        (nav as HTMLElement).dataset.slugs || "[]",
       );
       const headings = slugs
         .map((slug) => document.getElementById(slug))
         .filter((el): el is HTMLElement => el !== null);
 
+      if ((ol as HTMLElement).dataset.smoothScrollBound !== "true") {
+        (ol as HTMLElement).dataset.smoothScrollBound = "true";
+
+        ol.addEventListener("click", (event) => {
+          if (!(event.target instanceof Element)) return;
+
+          const link = event.target.closest(
+            "a[data-slug]",
+          ) as HTMLAnchorElement | null;
+          if (!link) return;
+
+          const slug = link.dataset.slug;
+          const target = slug ? document.getElementById(slug) : null;
+          if (!target) return;
+
+          event.preventDefault();
+          target.scrollIntoView({ behavior: "smooth", block: "start" });
+
+          const hash = link.getAttribute("href");
+          if (hash) {
+            window.history.replaceState(null, "", hash);
+          }
+        });
+      }
+
       const headerOffset = 112;
 
       // Calculate active headings based on scroll position
@@ -402,7 +508,7 @@ for (const heading of headings) {
         {
           rootMargin: `-${headerOffset}px 0px 0px 0px`,
           threshold: 0,
-        }
+        },
       );
 
       headings.forEach((heading) => observer.observe(heading));
@@ -455,7 +561,7 @@ for (const heading of headings) {
 
     // Re-initialize when TOC becomes visible (responsive breakpoint)
     const tocNav = document.querySelector(
-      'nav[aria-label="Table of Contents"]'
+      'nav[aria-label="Table of Contents"]',
     );
     if (tocNav) {
       let wasVisible = tocNav.getBoundingClientRect().width > 0;