components/table-of-contents.tsx

@@ -8,7 +8,7 @@ interface TableOfContentsProps {
 }
 
 export default function TableOfContents({ headings }: TableOfContentsProps) {
-  const [activeSlug, setActiveSlug] = useState("");
+  const [activeSlug, setActiveSlug] = useState(() => headings[0]?.slug ?? "");
 
   useEffect(() => {
     if (headings.length === 0) return;
@@ -43,10 +43,11 @@ export default function TableOfContents({ headings }: TableOfContentsProps) {
         {headings.map(({ slug, text, level }) => (
           <li
             key={slug}
-            style={{ paddingLeft: level === 3 ? "0.75rem" : "0" }}
+            className={level === 3 ? "pl-3" : ""}
           >
             <a
               href={`#${slug}`}
+              aria-current={activeSlug === slug ? "true" : undefined}
               className={`text-sm leading-snug transition-colors duration-150 ${
                 activeSlug === slug
                   ? "text-blue-700 font-semibold"