Codex fixes

components/mdx/TableOfContents.tsx

@@ -9,46 +9,30 @@ type Heading = {
 };
 
 export function TableOfContents({ headings }: { headings: Heading[] }) {
-    const [activeId, setActiveId] = useState<string>('');
+    const [activeId, setActiveId] = useState<string>(() => headings[0]?.id ?? '');
 
     useEffect(() => {
-        const handleScroll = () => {
-            const headingElements = headings.map((heading) => ({
-                id: heading.id,
-                element: document.getElementById(heading.id),
-            }));
+        const elements = headings
+            .map((heading) => document.getElementById(heading.id))
+            .filter((element): element is HTMLElement => Boolean(element));
 
-            // Find the first heading that is currently visible or just above the fold
-            // We look for headings that are above the 150px mark
-            let currentActiveId = '';
+        if (elements.length === 0) return;
 
-            for (const { id, element } of headingElements) {
-                if (!element) continue;
-                const rect = element.getBoundingClientRect();
+        const observer = new IntersectionObserver((entries) => {
+            const visible = entries
+                .filter((entry) => entry.isIntersecting)
+                .sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
 
-                // If the heading is within the top portion of the screen
-                // OR if we haven't found a better one yet, this one 'might' be it
-                // We basically want the *last* heading that has a 'top' value <= some threshold
-                if (rect.top <= 150) {
-                    currentActiveId = id;
-                }
+            if (visible[0]?.target.id) {
+                setActiveId(visible[0].target.id);
             }
+        }, {
+            rootMargin: '-20% 0px -65% 0px',
+            threshold: 0,
+        });
 
-            // If we are at the very bottom, it's likely the last item
-            if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 50) {
-                if (headings.length > 0) currentActiveId = headings[headings.length - 1].id;
-            }
-
-            if (currentActiveId) {
-                setActiveId(currentActiveId);
-            }
-        };
-
-        window.addEventListener('scroll', handleScroll, { passive: true });
-        // Trigger once on mount
-        handleScroll();
-
-        return () => window.removeEventListener('scroll', handleScroll);
+        elements.forEach((element) => observer.observe(element));
+        return () => observer.disconnect();
     }, [headings]);
 
     if (headings.length === 0) return null;
@@ -58,10 +42,7 @@ export function TableOfContents({ headings }: { headings: Heading[] }) {
             <h4 className="eyebrow mb-4">Contents</h4>
             <ul className="space-y-2">
                 {Array.isArray(headings) && headings.map((heading) => (
-                    <li
-                        key={heading.id}
-                        style={{ paddingLeft: `${(heading.level - 2) * 10}px` }}
-                    >
+                    <li key={heading.id} className={heading.level > 2 ? 'pl-3' : undefined}>
                         <a
                             href={`#${heading.id}`}
                             className={`block text-[0.82rem] leading-6 transition-colors ${activeId === heading.id