shivam + claude changes

components/mdx/MobileTableOfContents.tsx

@@ -17,6 +17,8 @@ export function MobileTableOfContents({ headings }: { headings: Heading[] }) {
         <div className="block xl:hidden mb-8 border border-zinc-200 dark:border-zinc-800 rounded-lg overflow-hidden">
             <button
                 onClick={() => setIsOpen(!isOpen)}
+                aria-expanded={isOpen}
+                aria-controls="mobile-toc"
                 className="w-full flex items-center justify-between p-4 bg-zinc-50 dark:bg-zinc-900 text-sm font-medium text-zinc-900 dark:text-zinc-100"
             >
                 <span>Table of Contents</span>
@@ -26,7 +28,7 @@ export function MobileTableOfContents({ headings }: { headings: Heading[] }) {
             </button>
 
             {isOpen && (
-                <ul className="p-4 bg-white dark:bg-black border-t border-zinc-200 dark:border-zinc-800 space-y-3">
+                <ul id="mobile-toc" className="p-4 bg-white dark:bg-black border-t border-zinc-200 dark:border-zinc-800 space-y-3">
                     {headings.map((heading) => (
                         <li
                             key={heading.id}

components/mdx/ReadingProgressBar.tsx

@@ -1,28 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-
-export function ReadingProgressBar() {
-    const [progress, setProgress] = useState(0);
-
-    useEffect(() => {
-        const updateProgress = () => {
-            const scrollTop = window.scrollY;
-            const docHeight = document.documentElement.scrollHeight - window.innerHeight;
-            const readPercent = scrollTop / docHeight;
-            setProgress(readPercent * 100);
-        };
-
-        window.addEventListener('scroll', updateProgress);
-        return () => window.removeEventListener('scroll', updateProgress);
-    }, []);
-
-    return (
-        <div className="fixed top-0 left-0 w-full h-1 z-[100] bg-transparent">
-            <div
-                className="h-full bg-zinc-900 dark:bg-zinc-100 transition-all duration-100 ease-out"
-                style={{ width: `${progress}%` }}
-            />
-        </div>
-    );
-}

components/mdx/TableOfContents.tsx

@@ -54,7 +54,7 @@ export function TableOfContents({ headings }: { headings: Heading[] }) {
     if (headings.length === 0) return null;
 
     return (
-        <nav className="text-sm animate-fade-in text-left">
+        <nav aria-label="Table of contents" className="text-sm animate-fade-in text-left">
             <h4 className="font-bold text-zinc-900 dark:text-zinc-100 mb-4 uppercase tracking-wider text-xs">On this page</h4>
             <ul className="space-y-3">
                 {Array.isArray(headings) && headings.map((heading) => (