Highlight current heading

Author: hasparus

src/_design-system/mdx-components/get-mdx-headings.tsx

@@ -30,7 +30,9 @@ const createHeading = (
     id,
     className,
     ...props
-  }: React.ComponentPropsWithoutRef<"h2">): React.ReactElement {
+  }: React.ComponentPropsWithoutRef<"h2"> & {
+    size?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
+  }): React.ReactElement {
     // Nextra tracks anchors in context
     const setActiveAnchor = useSetActiveAnchor()
     const slugs = useSlugs()
@@ -61,7 +63,7 @@ const createHeading = (
           className === "sr-only"
             ? // can be added by footnotes
               "sr-only"
-            : clsx(headingClasses[Tag], "text-neu-900", className)
+            : clsx(headingClasses[props.size || Tag], "text-neu-900", className)
         }
         {...props}
       >

src/components/faq-aggregator/index.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { getMdxHeadings } from "@/_design-system/mdx-components/get-mdx-headings"
 import { type ReactNode, useRef, useLayoutEffect, useState } from "react"
 
 function slugify(text: string): string {
@@ -9,17 +10,18 @@ function slugify(text: string): string {
     .replace(/(^-|-$)/g, "")
 }
 
+const mdxHeadings = getMdxHeadings()
+
 function FaqH1({ id, children }: { id?: string; children?: ReactNode }) {
   const slug = id ?? slugify(String(children))
   return (
-    <h2
+    <mdxHeadings.h2
       id={slug}
-      className="typography-h2 mb-4 mt-8 scroll-mt-24 text-neu-900 first:mt-0"
+      size="h1"
+      className="mb-4 mt-8 scroll-mt-24 text-neu-900 first:mt-0"
     >
-      <a href={`#${slug}`} className="hover:underline">
-        {children}
-      </a>
-    </h2>
+      {children}
+    </mdxHeadings.h2>
   )
 }