Update scrollbar to change on heading scroll rather than scroll percent (#626)

Author: HomelessDinosaur

src/app/[[...slug]]/layout.tsx

@@ -3,7 +3,6 @@ import { Prose } from '@/components/Prose'
 import React from 'react'
 import { allDocs } from '@/content'
 import DocToc from '@/components/layout/DocToC'
-import { Feedback } from '@/components/Feedback'
 import { Button } from '@/components/ui/button'
 import { GitHubIcon } from '@/components/icons/GitHubIcon'
 import Breadcrumbs from '@/components/Breadcrumbs'

src/components/layout/DocToC.tsx

@@ -1,46 +1,84 @@
 'use client'
 
 import type { Doc } from '@/content'
-import React, { useRef } from 'react'
-import { Badge } from '../ui/badge'
+import { useRef, useLayoutEffect, useState, useEffect } from 'react'
 import Link from 'next/link'
-import { FaFacebook, FaFilePdf, FaLinkedin } from 'react-icons/fa'
 import { DocTracingBeam } from './DocTracingBeam'
-import { BASE_URL } from '@/lib/constants'
-import { title } from 'radash'
 import { Button } from '../ui/button'
 import { GitHubIcon } from '../icons/GitHubIcon'
-
-interface Props {
-  doc: Doc
-  articleRef?: React.RefObject<HTMLDivElement>
-}
+import { useMotionValue } from 'framer-motion'
+import { cn } from '@/lib/utils'
 
 interface Toc {
   url: string
   value: string
   depth: number
 }
 
-const DocToC: React.FC<Props> = ({ doc }) => {
-  const articleRef = useRef<HTMLDivElement>(null)
+const DocToC = ({ doc }: { doc: Doc }) => {
+  const initial = 14
+  const sectionSize = 28
+  const offset = 10
+
+  const y1 = useMotionValue(0)
+  const y2 = useMotionValue(0)
+
+  const [activeIndex, setActiveIndex] = useState(-1)
+
+  useEffect(() => {
+    const headings = document
+      .querySelectorAll<HTMLHeadingElement>('h2.md-content-header')
+      .values()
+      .toArray()
+
+    const options = {
+      root: null,
+      rootMargin: '0px',
+      threshold: 1, // Adjust based on when you want to highlight
+    }
+
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          const index = headings.findIndex(
+            (heading) => heading.textContent === entry.target.textContent,
+          )
+
+          y2.set(initial + (index * sectionSize + offset))
+
+          setActiveIndex(index)
+        }
+      })
+    }, options)
+
+    headings.forEach((h2) => observer.observe(h2))
+
+    return () => {
+      headings.forEach((h2) => observer.unobserve(h2))
+    }
+  }, [])
 
   return (
-    <div className="hidden h-full min-w-52 md:block" ref={articleRef}>
+    <div className="hidden h-full min-w-52 md:block">
       <aside className="sticky top-[calc(var(--header-height)+1px+2rem)] max-h-[calc(100vh-var(--header-height)-3rem)] min-w-40 space-y-6">
         {doc.toc.length ? (
           <div className="relative flex flex-col">
             <p className="mb-2 font-mono text-sm uppercase dark:text-zinc-300">
               On this page
             </p>
-            <DocTracingBeam targetRef={articleRef}>
+            <DocTracingBeam y1={y1} y2={y2}>
               <ol className="flex flex-col gap-y-1 pl-4 text-sm font-medium">
                 {doc.toc.map((item: Toc, i: number) => {
                   return (
                     <li key={item.url + i}>
                       <Link
                         href={item.url}
-                        className="text-2xs text-muted-foreground transition-colors hover:text-zinc-900 dark:hover:text-zinc-200"
+                        className={cn(
+                          'text-2xs',
+                          activeIndex === i
+                            ? 'text-zinc-900 dark:text-zinc-200'
+                            : 'text-muted-foreground transition-colors hover:text-zinc-900 dark:hover:text-zinc-200',
+                        )}
                       >
                         {item.value}
                       </Link>

src/components/layout/DocTracingBeam.tsx

@@ -1,24 +1,26 @@
 'use client'
 
 import React, { useEffect, useRef, useState } from 'react'
-import { motion, useTransform, useScroll, useSpring } from 'framer-motion'
+import {
+  motion,
+  useTransform,
+  useSpring,
+  useMotionValue,
+  MotionValue,
+} from 'framer-motion'
 import { cn } from '@/lib/utils'
 
-// TODO this should set the height based off the h2 offset heights, not current scroll progress
 export const DocTracingBeam = ({
   children,
   className,
-  targetRef,
+  y1,
+  y2,
 }: {
   children: React.ReactNode
   className?: string
-  targetRef: React.RefObject<HTMLDivElement>
+  y1: MotionValue<number>
+  y2: MotionValue<number>
 }) => {
-  const { scrollYProgress } = useScroll({
-    target: targetRef,
-    offset: ['start start', 'end end'],
-  })
-
   const contentRef = useRef<HTMLDivElement>(null)
   const [svgHeight, setSvgHeight] = useState(0)
 
@@ -28,21 +30,6 @@ export const DocTracingBeam = ({
     }
   }, [])
 
-  const y1 = useSpring(
-    useTransform(scrollYProgress, [0, 0.8], [0, svgHeight]),
-    {
-      stiffness: 500,
-      damping: 90,
-    },
-  )
-  const y2 = useSpring(
-    useTransform(scrollYProgress, [0, 1], [0, svgHeight - 210]),
-    {
-      stiffness: 500,
-      damping: 90,
-    },
-  )
-
   return (
     <motion.div
       className={cn('relative mx-auto h-full w-full max-w-4xl', className)}
@@ -81,7 +68,7 @@ export const DocTracingBeam = ({
               x1="0"
               x2="0"
               y1={y1} // set y1 for gradient
-              y2={y2} // set y2 for gradient
+              y2={useSpring(y2)} // set y2 for gradient
             >
               <stop stopColor="var(--primary-500)" stopOpacity="0"></stop>
               <stop stopColor="var(--primary-500)"></stop>