feat(docs): Migrate documentation from Nextra to fumaDocs, upgrade to react 19 (#178)

Co-authored-by: Bennett <[email protected]>

Author: adityacodepublic

apps/docs/.github/screenshot.png

@@ -1,2 +1,30 @@
+# deps
 .next
 node_modules
+/node_modules
+
+# generated content
+.contentlayer
+.content-collections
+.source
+
+# test & build
+/coverage
+/.next/
+/out/
+/build
+*.tsbuildinfo
+
+# misc
+.DS_Store
+*.pem
+/.pnp
+.pnp.js
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# others
+.env*.local
+.vercel
+next-env.d.ts

apps/docs/.gitignore

@@ -1,23 +1,45 @@
-# Nextra Docs Template
+# docs
 
-This is a template for creating documentation with [Nextra](https://nextra.site).
+This is a Next.js application generated with
+[Create Fumadocs](https://github.com/fuma-nama/fumadocs).
 
-[**Live Demo →**](https://nextra-docs-template.vercel.app)
+Run development server:
 
-[![](.github/screenshot.png)](https://nextra-docs-template.vercel.app)
+```bash
+npm run dev
+# or
+pnpm dev
+# or
+yarn dev
+```
 
-## Quick Start
+Open http://localhost:3000 with your browser to see the result.
 
-Click the button to clone this repository and deploy it on Vercel:
+## Explore
 
-[![](https://vercel.com/button)](https://vercel.com/new/clone?s=https%3A%2F%2Fgithub.com%2Fshuding%2Fnextra-docs-template&showOptionalTeamCreation=false)
+In the project, you can see:
 
-## Local Development
+- `lib/source.ts`: Code for content source adapter, [`loader()`](https://fumadocs.dev/docs/headless/source-api) provides the interface to access your content.
+- `app/layout.config.tsx`: Shared options for layouts, optional but preferred to keep.
 
-First, run `pnpm i` to install the dependencies.
+| Route                     | Description                                            |
+| ------------------------- | ------------------------------------------------------ |
+| `app/(home)`              | The route group for your landing page and other pages. |
+| `app/docs`                | The documentation layout and pages.                    |
+| `app/api/search/route.ts` | The Route Handler for search.                          |
 
-Then, run `pnpm dev` to start the development server and visit localhost:3000.
+### Fumadocs MDX
 
-## License
+A `source.config.ts` config file has been included, you can customise different options like frontmatter schema.
 
-This project is licensed under the MIT License.
+Read the [Introduction](https://fumadocs.dev/docs/mdx) for further details.
+
+## Learn More
+
+To learn more about Next.js and Fumadocs, take a look at the following
+resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js
+  features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+- [Fumadocs](https://fumadocs.vercel.app) - learn about Fumadocs

apps/docs/README.md

@@ -0,0 +1,36 @@
+// import { BenefitsSection } from "@/components/landing/sections/benefits";
+// import { CommunitySection } from "@/components/landing/sections/community";
+// import { ContactSection } from "@/components/landing/sections/contact";
+// import { FAQSection } from "@/components/landing/sections/faq";
+// import { FeaturesSection } from "@/components/landing/sections/features";
+// import { FooterSection } from "@/components/landing/sections/footer";
+// import { PricingSection } from "@/components/landing/sections/pricing";
+// import { ServicesSection } from "@/components/landing/sections/services";
+// import { SponsorsSection } from "@/components/landing/sections/sponsors";
+// import { TeamSection } from "@/components/landing/sections/team";
+// import { TestimonialSection } from "@/components/landing/sections/testimonial";
+import { Navbar } from "@/components/landing/navbar";
+import { HeroSection } from "@/components/landing/sections/hero";
+
+export default function Home() {
+  return (
+    <div className="min-h-screen bg-background p-6 flex flex-col items-center">
+      <title>AutoForm - Instant forms for your schemas</title>
+
+      <Navbar />
+      <HeroSection />
+      {/* <SponsorsSection /> */}
+      {/* <BenefitsSection />
+      <FeaturesSection />
+      <ServicesSection />
+      <TestimonialSection />
+      <TeamSection />
+      <CommunitySection />
+      <PricingSection />
+      <ContactSection /> 
+      <FAQSection />
+      <FooterSection />
+      */}
+    </div>
+  );
+}

apps/docs/app/(home)/page.tsx

@@ -0,0 +1,4 @@
+import { source } from '@/lib/source';
+import { createFromSource } from 'fumadocs-core/search/server';
+
+export const { GET } = createFromSource(source);

apps/docs/app/api/search/route.ts

@@ -0,0 +1,52 @@
+import { source } from "@/lib/source";
+import {
+  DocsPage,
+  DocsBody,
+  DocsDescription,
+  DocsTitle,
+} from "fumadocs-ui/page";
+import { notFound } from "next/navigation";
+import { createRelativeLink } from "fumadocs-ui/mdx";
+import { getMDXComponents } from "@/mdx-components";
+
+export default async function Page(props: {
+  params: Promise<{ slug?: string[] }>;
+}) {
+  const params = await props.params;
+  const page = source.getPage(params.slug);
+  if (!page) notFound();
+
+  const MDXContent = page.data.body;
+
+  return (
+    <DocsPage toc={page.data.toc} full={page.data.full}>
+      <DocsTitle>{page.data.title}</DocsTitle>
+      <DocsDescription>{page.data.description}</DocsDescription>
+      <DocsBody>
+        <MDXContent
+          components={getMDXComponents({
+            // this allows you to link to other pages with relative file paths
+            a: createRelativeLink(source, page),
+          })}
+        />
+      </DocsBody>
+    </DocsPage>
+  );
+}
+
+export async function generateStaticParams() {
+  return source.generateParams();
+}
+
+export async function generateMetadata(props: {
+  params: Promise<{ slug?: string[] }>;
+}) {
+  const params = await props.params;
+  const page = source.getPage(params.slug);
+  if (!page) notFound();
+
+  return {
+    title: `${page.data.title} | Autoform`,
+    description: page.data.description,
+  };
+}

apps/docs/app/docs/[[...slug]]/page.tsx

@@ -0,0 +1,12 @@
+import { DocsLayout } from "fumadocs-ui/layouts/docs";
+import type { ReactNode } from "react";
+import { baseOptions } from "@/app/layout.config";
+import { source } from "@/lib/source";
+
+export default function Layout({ children }: { children: ReactNode }) {
+  return (
+    <DocsLayout tree={source.pageTree} {...baseOptions}>
+      {children}
+    </DocsLayout>
+  );
+}

apps/docs/app/docs/layout.tsx

@@ -0,0 +1,64 @@
+@import "tailwindcss";
+@import "fumadocs-ui/css/neutral.css";
+@import "fumadocs-ui/css/preset.css";
+
+@theme {
+  --color-background: hsl(0 0% 100%);
+  --color-foreground: hsl(240 10% 3.9%);
+  --color-card: hsl(0 0% 100%);
+  --color-card-foreground: hsl(240 10% 3.9%);
+  --color-popover: hsl(0 0% 100%);
+  --color-popover-foreground: hsl(240 10% 3.9%);
+  --color-primary: hsl(24.6 95% 53.1%);
+  --color-primary-foreground: hsl(60 9.1% 97.8%);
+  --color-secondary: hsl(240 4.8% 95.9%);
+  --color-secondary-foreground: hsl(240 5.9% 10%);
+  --color-muted: hsl(240 4.8% 95.9%);
+  --color-muted-foreground: hsl(240 3.8% 46.1%);
+  --color-accent: hsl(240 4.8% 95.9%);
+  --color-accent-foreground: hsl(240 5.9% 10%);
+  --color-destructive: hsl(0 84.2% 60.2%);
+  --color-destructive-foreground: hsl(0 0% 98%);
+  --color-border: hsl(240 5.9% 90%);
+  --color-input: hsl(240 5.9% 90%);
+  --color-ring: hsl(240 10% 3.9%);
+  --color-chart-1: hsl(12 76% 61%);
+  --color-chart-2: hsl(173 58% 39%);
+  --color-chart-3: hsl(197 37% 24%);
+  --color-chart-4: hsl(43 74% 66%);
+  --color-chart-5: hsl(27 87% 67%);
+  --radius: 0.5rem;
+
+  /* Fumadocs colors (light mode) */
+  --color-fd-background: hsl(0 0% 100%);
+  --color-fd-card: hsl(240, 14%, 98%);
+  --color-fd-secondary: hsl(240, 20%, 95%);
+  --color-fd-primary: hsl(0, 0%, 15%);
+}
+
+.dark {
+  --color-background: hsl(240 10% 3.9%);
+  --color-foreground: hsl(0 0% 98%);
+  --color-card: hsl(240 10% 3.9%);
+  --color-card-foreground: hsl(0 0% 98%);
+  --color-popover: hsl(240 10% 3.9%);
+  --color-popover-foreground: hsl(0 0% 98%);
+  --color-primary: hsl(0 0% 98%);
+  --color-primary-foreground: hsl(240 5.9% 10%);
+  --color-secondary: hsl(240 3.7% 15.9%);
+  --color-secondary-foreground: hsl(0 0% 98%);
+  --color-muted: hsl(240 3.7% 15.9%);
+  --color-muted-foreground: hsl(240 5% 64.9%);
+  --color-accent: hsl(240 3.7% 15.9%);
+  --color-accent-foreground: hsl(0 0% 98%);
+  --color-destructive: hsl(0 62.8% 30.6%);
+  --color-destructive-foreground: hsl(0 0% 98%);
+  --color-border: hsl(240 3.7% 15.9%);
+  --color-input: hsl(240 3.7% 15.9%);
+  --color-ring: hsl(240 4.9% 83.9%);
+  --color-chart-1: hsl(220 70% 50%);
+  --color-chart-2: hsl(160 60% 45%);
+  --color-chart-3: hsl(30 80% 55%);
+  --color-chart-4: hsl(280 65% 60%);
+  --color-chart-5: hsl(340 75% 55%);
+}

apps/docs/app/global.css

@@ -0,0 +1,23 @@
+import type { BaseLayoutProps } from "fumadocs-ui/layouts/shared";
+import { ChevronsDown } from "lucide-react";
+/**
+ * Shared layout configurations
+ *
+ * you can customise layouts individually from:
+ * Home Layout: app/(home)/layout.tsx
+ * Docs Layout: app/docs/layout.tsx
+ */
+export const baseOptions: BaseLayoutProps = {
+  nav: {
+    title: (
+      <div className="flex items-center gap-2">
+        <ChevronsDown className="bg-gradient-to-tr border-secondary from-primary via-primary/70 to-primary rounded-lg w-9 h-9 mr-2 border text-white" />
+        AutoForm
+      </div>
+    ),
+    transparentMode: "top",
+  },
+  // see https://fumadocs.dev/docs/ui/navigation/links
+  links: [],
+  githubUrl: "https://github.com/vantezzen/autoform.git",
+};

apps/docs/app/layout.config.tsx

@@ -0,0 +1,18 @@
+import './global.css';
+import { RootProvider } from 'fumadocs-ui/provider';
+import { Inter } from 'next/font/google';
+import type { ReactNode } from 'react';
+
+const inter = Inter({
+  subsets: ['latin'],
+});
+
+export default function Layout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en" className={inter.className} suppressHydrationWarning>
+      <body className="flex flex-col min-h-screen">
+        <RootProvider>{children}</RootProvider>
+      </body>
+    </html>
+  );
+}