added stable scrollbar-gutter (to fix jumping with scrollbars), split faqs for /v5/ and /docs/, update faq accordion mobile styles

Author: PickleNik

app/docs/faq/page.tsx

@@ -6,6 +6,8 @@ import {
 } from "fumadocs-ui/page";
 
 import { FaqAccordion, FaqItem } from "@/components/faq-accordion";
+import Link from "fumadocs-core/link";
+import { FileQuestionMark } from "lucide-react";
 
 const items: FaqItem[] = [
   {
@@ -18,11 +20,15 @@ const items: FaqItem[] = [
     title:
       "Is Nativewind v5 out yet",
     content:
-      "not yet",
+      (
+        <>
+          not yet, check out <Link href="/v5/faq" className="underline text-amber-500 hover:text-amber-600 dark:hover:text-amber-400">the v5 FAQ</Link> for more info.
+        </>
+      ),
   },
 ];
 
-export default async function Page() {
+export default async function FAQPage() {
   return (
     <>
       <div className="absolute inset-0 -z-10 w-full h-full pointer-events-none overflow-x-clip">
@@ -32,17 +38,21 @@ export default async function Page() {
       </div>
 
       <DocsPage>
-        <div className="flex items-center justify-between mb-4 md:max-xl:px-12">
+        <div className="flex justify-between mb-4 md:max-xl:px-12">
           <div className="flex-1">
             <DocsTitle>FAQ</DocsTitle>
-            <DocsDescription className="!mb-0">Frequently answered questions</DocsDescription>
+            <DocsDescription className="!mb-0 text-balance">Frequently answered questions</DocsDescription>
+          </div>
+          <div className="flex items-start md:items-center gap-2">
+            <Link href="/v5/faq" className="inline-flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-fd-muted-foreground hover:text-amber-500 bg-fd-card border border-fd-border hover:border-amber-500/30 rounded-md hover:bg-amber-500/10 transition-colors">
+              <FileQuestionMark className="size-4" />
+              v5
+            </Link>
           </div>
         </div>
-        {/* TODO: redo FAQAccordion to accept children instead of items and make this a normal mdx page */}
         <div className="md:max-xl:px-12">
           <FaqAccordion items={items} />
         </div>
-        {/* <FooterSection /> */}
       </DocsPage>
     </>
   );

app/global.css

@@ -183,6 +183,7 @@
 
 /* smooth scroll */
 html {
+  scrollbar-gutter: stable;
   scroll-behavior: smooth;
   scroll-padding-top: 3rem;
 }

app/v5/faq/page.tsx

@@ -0,0 +1,54 @@
+import {
+  DocsPage,
+  DocsTitle,
+  DocsDescription,
+} from "fumadocs-ui/page";
+
+import { FaqAccordion, type FaqItem } from "@/components/faq-accordion";
+import Link from "fumadocs-core/link";
+import { FileQuestionMark } from "lucide-react";
+
+const items: FaqItem[] = [
+  {
+    title:
+      "Is v5 out yet?",
+    content:
+      'maybe',
+  },
+  {
+    title:
+      "Is v5 stable?",
+    content:
+      "almost",
+  },
+];
+
+export default async function FAQPage() {
+  return (
+    <>
+      <div className="absolute inset-0 -z-10 w-full h-full pointer-events-none overflow-x-clip">
+        <div className="absolute top-0 xl:right-1/2 right-0 translate-x-1/2 -z-10 -translate-y-1/2 w-[64rem] h-[64rem] rounded-full bg-amber-500/10 max-md:hidden [--mask:radial-gradient(circle_at_center,red,transparent_69%)] [mask-image:var(--mask)] [webkit-mask-image:var(--mask)] pointer-events-none" />
+        <div className="fixed top-0 xl:right-1/2 right-0 translate-x-1/2 -z-10 -translate-y-1/2 w-[64rem] h-[64rem] rounded-full bg-amber-500/5 max-md:hidden [--mask:radial-gradient(circle_at_center,red,transparent_69%)] [mask-image:var(--mask)] [webkit-mask-image:var(--mask)] pointer-events-none" />
+        <div className="absolute top-0 xl:right-1/2 right-0 translate-x-1/2 -z-10 h-[64rem] w-[64rem] bg-grid-lines-xl dark:opacity-80 -translate-y-1/2 max-md:hidden [--mask:radial-gradient(circle_at_center_top,red,transparent)] [mask-image:var(--mask)] [webkit-mask-image:var(--mask)] -skew-20 pointer-events-none" />
+      </div>
+
+      <DocsPage>
+        <div className="flex justify-between mb-4 md:max-xl:px-12">
+          <div className="flex-1">
+            <DocsTitle>V5 FAQ</DocsTitle>
+            <DocsDescription className="!mb-0 text-balance">Frequently answered questions for v5</DocsDescription>
+          </div>
+          <div className="flex items-start md:items-center gap-2">
+            <Link href="/docs/faq" className="inline-flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-fd-muted-foreground hover:text-fd-primary bg-fd-card border border-fd-border hover:border-fd-primary/30 rounded-md hover:bg-fd-primary/10 transition-colors">
+              <FileQuestionMark className="size-4" />
+              v4
+            </Link>
+          </div>
+        </div>
+        <div className="md:max-xl:px-12">
+          <FaqAccordion items={items} />
+        </div>
+      </DocsPage>
+    </>
+  );
+}

components/faq-accordion.tsx

@@ -52,8 +52,8 @@ export function FaqAccordion({ items }: { items: FaqItem[] }) {
           value={`item-${index + 1}`}
         >
           <CopyLinkToHighlight title={item.title} />
-          <AccordionTrigger>
-            <div className="flex items-center">
+          <AccordionTrigger className="cursor-pointer">
+            <div className="flex items-center max-sm:w-full max-sm:pr-2 max-sm:justify-between">
               {item.title}
               {item.icon}
             </div>

content/blog/meta.json

@@ -1,6 +1,5 @@
 {
   "pages": [
-    "[FileQuestionMark][FAQ](/docs/faq/)",
     "[BookOpen][Docs](/docs/)",
     "[LayoutTemplate][Showcase](/#showcase)",
     "[Box][Resources](/resources/)",

content/v5/meta.json

@@ -1,6 +1,6 @@
 {
   "pages": [
-    "[FileQuestionMark][FAQ](/docs/faq/)",
+    "[FileQuestionMark][FAQ](/v5/faq/)",
     "[BookText][Blog](/blog/)",
     "[LayoutTemplate][Showcase](/#showcase)",
     "[Box][Resources](/resources/)",