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,21 +70,29 @@ function buildToc(headings: Heading[]): Heading[] {
 
 <script>
   function setupToc() {
-    const observer = new IntersectionObserver((sections) => {
+    const header = document.querySelector('header')
-      sections.forEach((section) => {
+    const headerHeight = header ? header.offsetHeight : 0
-        const heading = section.target.querySelector('h2, h3, h4, h5, h6')
-        if (!heading) return
 
-        const id = heading.getAttribute('id')
+    const observer = new IntersectionObserver(
-        const link = document.querySelector(
+      (sections) => {
-          `#toc-container li a[href="#${id}"]`,
+        sections.forEach((section) => {
-        )
+          const heading = section.target.querySelector('h2, h3, h4, h5, h6')
-        if (!link) return
+          if (!heading) return
 
-        const addRemove = section.intersectionRatio > 0 ? 'add' : 'remove'
+          const id = heading.getAttribute('id')
-        link.classList[addRemove]('text-foreground')
+          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) => {

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:
+        outline: 'border border-input bg-background hover:bg-secondary/50',
-          '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',