chore: update

src/components/TableOfContentsHeading.astro

@@ -5,13 +5,15 @@ import Link from './Link.astro'
 const { heading } = Astro.props
 ---
 
-<li class="list-inside list-disc px-6 py-1.5 xl:list-none xl:p-0 text-sm">
+<li
+  class="list-inside list-disc px-6 py-1.5 text-sm text-foreground/60 xl:list-none xl:p-0"
+>
   <Link href={'#' + heading.slug} class="toc-link" data-heading={heading.slug}>
     {heading.text}
   </Link>
   {
     heading.subheadings.length > 0 && (
-      <ul class="translate-x-3 xl:translate-x-0 xl:ml-4 xl:mt-2 xl:space-y-2">
+      <ul class="translate-x-3 xl:ml-4 xl:mt-2 xl:translate-x-0 xl:space-y-2">
         {heading.subheadings.map((subheading: Heading) => (
           <Astro.self heading={subheading} />
         ))}
@@ -22,28 +24,30 @@ const { heading } = Astro.props
 
 <script>
   function updateActiveHeading() {
-    const headings = document.querySelectorAll('h2, h3, h4, h5, h6');
-    const tocLinks = document.querySelectorAll('.toc-link');
-    
-    let currentHeading = '';
-    
-    headings.forEach(heading => {
-      const top = heading.getBoundingClientRect().top;
-      if (top < 100) {
-        currentHeading = heading.id;
+    const headings = document.querySelectorAll('h2, h3, h4, h5, h6')
+    const tocLinks = document.querySelectorAll('.toc-link')
+
+    let currentHeading = ''
+
+    headings.forEach((heading) => {
+      const top = heading.getBoundingClientRect().top
+      if (top < 200) {
+        currentHeading = heading.id
       }
-    });
-    
-    tocLinks.forEach(link => {
-      const headingSlug = link.getAttribute('data-heading');
+    })
+
+    tocLinks.forEach((link) => {
+      const headingSlug = link.getAttribute('data-heading')
       if (headingSlug === currentHeading) {
-        link.classList.add('underline');
+        link.classList.add('underline')
+        link.classList.add('text-foreground')
       } else {
-        link.classList.remove('underline');
+        link.classList.remove('underline')
+        link.classList.remove('text-foreground')
       }
-    });
+    })
   }
 
-  window.addEventListener('scroll', updateActiveHeading);
-  window.addEventListener('load', updateActiveHeading);
-</script>
+  window.addEventListener('scroll', updateActiveHeading)
+  window.addEventListener('load', updateActiveHeading)
+</script>