Aggregate all FAQ pages on one page as per design

Author: hasparus

src/components/faq-aggregator/index.tsx

@@ -0,0 +1,101 @@
+"use client"
+
+import { type ReactNode, useRef, useLayoutEffect, useState } from "react"
+
+function slugify(text: string): string {
+  return String(text)
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/(^-|-$)/g, "")
+}
+
+function FaqH1({ id, children }: { id?: string; children?: ReactNode }) {
+  const slug = id ?? slugify(String(children))
+  return (
+    <h2
+      id={slug}
+      className="typography-h2 mb-4 mt-8 scroll-mt-24 text-neu-900 first:mt-0"
+    >
+      <a href={`#${slug}`} className="hover:underline">
+        {children}
+      </a>
+    </h2>
+  )
+}
+
+function FaqH2({ id, children }: { id?: string; children?: ReactNode }) {
+  const slug = id ?? slugify(String(children))
+  return (
+    <details className="group border-b border-neu-100 dark:border-neu-200 [&:first-of-type]:border-t">
+      <summary className="flex cursor-pointer list-none items-center justify-between gap-4 py-4 [&::-webkit-details-marker]:hidden">
+        <h3 id={slug} className="typography-body-lg text-neu-900">
+          {children}
+        </h3>
+        <ChevronIcon className="size-5 shrink-0 text-neu-600 transition-transform group-open:rotate-180" />
+      </summary>
+    </details>
+  )
+}
+
+function ChevronIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+    >
+      <polyline points="6 9 12 15 18 9" />
+    </svg>
+  )
+}
+
+export function FaqAggregator({ children }: { children: ReactNode }) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [, forceUpdate] = useState(0)
+
+  useLayoutEffect(() => {
+    const container = containerRef.current
+    if (!container) return
+
+    const details = container.querySelectorAll("details")
+    details.forEach(detail => {
+      const answerContent: Node[] = []
+      let sibling = detail.nextSibling
+
+      while (sibling) {
+        const next = sibling.nextSibling
+        if (sibling instanceof Element) {
+          if (sibling.tagName === "DETAILS" || sibling.tagName === "H2") break
+          answerContent.push(sibling)
+        } else if (
+          sibling.nodeType === Node.TEXT_NODE &&
+          sibling.textContent?.trim()
+        ) {
+          answerContent.push(sibling)
+        }
+        sibling = next
+      }
+
+      if (answerContent.length > 0) {
+        const wrapper = document.createElement("div")
+        wrapper.className = "pb-4"
+        answerContent.forEach(node => wrapper.appendChild(node))
+        detail.appendChild(wrapper)
+      }
+    })
+
+    forceUpdate(n => n + 1)
+  }, [])
+
+  return <div ref={containerRef}>{children}</div>
+}
+
+export const faqMdxComponents = {
+  h1: FaqH1,
+  h2: FaqH2,
+}

src/pages/faq/_meta.ts

@@ -1,6 +1,10 @@
 export default {
   index: {
     title: "FAQ",
+    theme: {
+      toc: false,
+      sidebar: false,
+    },
   },
   "getting-started": { display: "hidden" },
   general: { display: "hidden" },

src/pages/faq/index.mdx

@@ -9,9 +9,11 @@ import Foundation from "./foundation.mdx"
 
 <h1 className="typography-h1">Frequently Asked Questions</h1>
 
-<GettingStarted components={faqMdxComponents} />
-<General components={faqMdxComponents} />
-<BestPractices components={faqMdxComponents} />
-<Specification components={faqMdxComponents} />
-<Frontend components={faqMdxComponents} />
-<Foundation components={faqMdxComponents} />
+<FaqAggregator>
+  <GettingStarted components={faqMdxComponents} />
+  <General components={faqMdxComponents} />
+  <BestPractices components={faqMdxComponents} />
+  <Specification components={faqMdxComponents} />
+  <Frontend components={faqMdxComponents} />
+  <Foundation components={faqMdxComponents} />
+</FaqAggregator>