fix: add header offset to IntersectionObserver

src/components/TableOfContents.astro

@@ -57,7 +57,7 @@ function buildToc(headings: Heading[]): Heading[] {
 >
   <div class="mr-6 flex justify-end">
     <ul
-      class="max-h-[calc(100vh-8rem)] flex flex-col gap-y-2 overflow-y-auto mr-6 justify-end"
+      class="mr-6 flex max-h-[calc(100vh-8rem)] flex-col justify-end gap-y-2 overflow-y-auto"
       id="toc-container"
     >
       <li>
@@ -70,7 +70,11 @@ function buildToc(headings: Heading[]): Heading[] {
 
 <script>
   function setupToc() {
-    const observer = new IntersectionObserver((sections) => {
+    const header = document.querySelector('header')
+    const headerHeight = header ? header.offsetHeight : 0
+
+    const observer = new IntersectionObserver(
+      (sections) => {
         sections.forEach((section) => {
           const heading = section.target.querySelector('h2, h3, h4, h5, h6')
           if (!heading) return
@@ -81,10 +85,14 @@ function buildToc(headings: Heading[]): Heading[] {
           )
           if (!link) return
 
-        const addRemove = section.intersectionRatio > 0 ? 'add' : 'remove'
+          const addRemove = section.isIntersecting ? 'add' : 'remove'
           link.classList[addRemove]('text-foreground')
         })
-    })
+      },
+      {
+        rootMargin: `-${headerHeight}px 0px 0px 0px`,
+      },
+    )
 
     const sections = document.querySelectorAll('.prose section')
     sections.forEach((section) => {

src/components/TableOfContentsHeading.astro

@@ -10,7 +10,7 @@ const { heading } = Astro.props
 >
   <Link
     href={'#' + heading.slug}
-    class="toc-link transition-colors duration-200"
+    class="toc-link transition-colors duration-200 hover:underline"
   >
     {heading.text}
   </Link>

src/components/ui/button.tsx

@@ -11,8 +11,7 @@ const buttonVariants = cva(
         default: 'bg-primary text-primary-foreground hover:bg-secondary/50',
         destructive:
           'bg-destructive text-destructive-foreground over:bg-destructive/50',
-        outline:
-          'border border-input bg-background hover:bg-secondary/50',
+        outline: 'border border-input bg-background hover:bg-secondary/50',
         secondary:
           'bg-secondary text-secondary-foreground hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',