toc

components/blog/MDXComponents.tsx

@@ -69,16 +69,26 @@ export const mdxComponents = {
   img: (props: any) => (
     <AnimatedImage src={props.src} alt={props.alt} />
   ),
-  h2: ({ children, ...props }: any) => (
-    <SplitHeading {...props} className="mt-16 mb-6 pb-3 border-b-2 border-primary/20">
-      {children}
-    </SplitHeading>
-  ),
-  h3: ({ children, ...props }: any) => (
-    <h3 {...props} className="text-2xl font-bold text-text-primary mt-12 mb-4">
-      {children}
-    </h3>
-  ),
+  h2: ({ children, ...props }: any) => {
+    const id = typeof children === 'string'
+      ? children.toLowerCase().replace(/[^\w\s-]/g, '').replace(/\s+/g, '-')
+      : props.id;
+    return (
+      <SplitHeading {...props} id={id} className="mt-16 mb-6 pb-3 border-b-2 border-primary/20">
+        {children}
+      </SplitHeading>
+    );
+  },
+  h3: ({ children, ...props }: any) => {
+    const id = typeof children === 'string'
+      ? children.toLowerCase().replace(/[^\w\s-]/g, '').replace(/\s+/g, '-')
+      : props.id;
+    return (
+      <h3 {...props} id={id} className="text-2xl font-bold text-text-primary mt-12 mb-4">
+        {children}
+      </h3>
+    );
+  },
   p: ({ children, ...props }: any) => (
     <p {...props} className="text-lg text-text-secondary leading-relaxed mb-6">
       {children}

components/blog/TableOfContents.tsx

@@ -19,7 +19,7 @@ export default function TableOfContents({ headings, locale }: TableOfContentsPro
 
   useEffect(() => {
     const observerOptions = {
-      rootMargin: '-100px 0% -80% 0%',
+      rootMargin: '-10% 0% -70% 0%',
       threshold: 0
     };
 
@@ -31,12 +31,18 @@ export default function TableOfContents({ headings, locale }: TableOfContentsPro
       });
     }, observerOptions);
 
-    const elements = headings.map((h) => document.getElementById(h.id));
-    elements.forEach((el) => {
-      if (el) observer.observe(el);
-    });
+    // Use a small delay to ensure MDX content is rendered and IDs are present
+    const timer = setTimeout(() => {
+      const elements = headings.map((h) => document.getElementById(h.id));
+      elements.forEach((el) => {
+        if (el) observer.observe(el);
+      });
+    }, 500);
 
-    return () => observer.disconnect();
+    return () => {
+      clearTimeout(timer);
+      observer.disconnect();
+    };
   }, [headings]);
 
   if (headings.length === 0) return null;