From c64a081508c0b1fe4446b04331de805e20a1872e Mon Sep 17 00:00:00 2001
From: enscribe <jason@enscribe.dev>
Date: Wed, 18 Sep 2024 23:18:46 -0700
Subject: [PATCH] fix: add header offset to `IntersectionObserver`

---
 src/components/TableOfContents.astro        | 36 +++++++++++++--------
 src/components/TableOfContentsHeading.astro |  2 +-
 src/components/ui/button.tsx                |  3 +-
 3 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/src/components/TableOfContents.astro b/src/components/TableOfContents.astro
index 6f0b100..6bbad7b 100644
--- a/src/components/TableOfContents.astro
+++ b/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,21 +70,29 @@ function buildToc(headings: Heading[]): Heading[] {
 
 <script>
   function setupToc() {
-    const observer = new IntersectionObserver((sections) => {
-      sections.forEach((section) => {
-        const heading = section.target.querySelector('h2, h3, h4, h5, h6')
-        if (!heading) return
+    const header = document.querySelector('header')
+    const headerHeight = header ? header.offsetHeight : 0
 
-        const id = heading.getAttribute('id')
-        const link = document.querySelector(
-          `#toc-container li a[href="#${id}"]`,
-        )
-        if (!link) return
+    const observer = new IntersectionObserver(
+      (sections) => {
+        sections.forEach((section) => {
+          const heading = section.target.querySelector('h2, h3, h4, h5, h6')
+          if (!heading) return
 
-        const addRemove = section.intersectionRatio > 0 ? 'add' : 'remove'
-        link.classList[addRemove]('text-foreground')
-      })
-    })
+          const id = heading.getAttribute('id')
+          const link = document.querySelector(
+            `#toc-container li a[href="#${id}"]`,
+          )
+          if (!link) return
+
+          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) => {
diff --git a/src/components/TableOfContentsHeading.astro b/src/components/TableOfContentsHeading.astro
index b397fdd..375e45e 100644
--- a/src/components/TableOfContentsHeading.astro
+++ b/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>
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index fafbdd0..f42b82e 100644
--- a/src/components/ui/button.tsx
+++ b/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',