refactor(website): switch from 'nextra' to 'fumadocs'

Author: Rel1cx

cspell.json

@@ -61,7 +61,6 @@
     "metas",
     "monaspace",
     "neovov",
-    "nextra",
     "nocheck",
     "noninteractive",
     "noto",

examples/next-app/package.json

@@ -19,7 +19,7 @@
     "@eslint-react/eslint-plugin": "^1.24.1",
     "@eslint/config-inspector": "^1.0.0",
     "@eslint/js": "^9.18.0",
-    "@next/eslint-plugin-next": "^15.1.5",
+    "@next/eslint-plugin-next": "^15.1.6",
     "@types/negotiator": "^0.6.3",
     "@types/node": "^22.10.7",
     "@types/react": "^19.0.7",

package.json

@@ -118,9 +118,6 @@
       "@types/react": "^19.0.7",
       "@types/react-dom": "^19.0.3",
       "cross-spawn": "^7.0.6",
-      "next": "^15.1.5",
-      "nextra": "^3.3.1",
-      "nextra-theme-docs": "^3.3.1",
       "react": "^19.0.0",
       "react-dom": "^19.0.0",
       "ts-api-utils": "^2.0.0",

pnpm-lock.yaml

@@ -1,39 +1,28 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-*.log
-# dependencies
+# deps
 /node_modules
-/.pnp
-.pnp.js
 
-# testing
-/coverage
-/dev
+# generated content
+.contentlayer
+.content-collections
+.source
 
-# next.js
+# test & build
+/coverage
 /.next/
 /out/
-
-# production
 /build
+*.tsbuildinfo
 
 # misc
 .DS_Store
 *.pem
-
-# debug
+/.pnp
+.pnp.js
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-.pnpm-debug.log*
 
-# local env files
+# others
 .env*.local
-
-# vercel
 .vercel
-
-# typescript
-*.tsbuildinfo
-
-# direnv
-.direnv/
+next-env.d.ts

website/.gitignore

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+import { HomeLayout } from "fumadocs-ui/layouts/home";
+import { baseOptions } from "#/app/layout.config";
+
+export default function Layout({ children }: { children: ReactNode }) {
+  return <HomeLayout {...baseOptions}>{children}</HomeLayout>;
+}

website/app/(home)/layout.tsx

@@ -0,0 +1,78 @@
+import { ESLintReact } from "#/components/eslint-react";
+import { TweetCards } from "#/components/tweet-cards";
+import { Link } from "next-view-transitions";
+
+const features = [
+  ["Flexible", "Increased flexibility with more granular severity control."],
+  ["Comprehensive", "First-class support for TypeScript, React 19, polymorphic components."],
+  ["Advanced Analysis", "Handles complex scenarios and identifies problems that other tools might miss."],
+] as const;
+
+const packages = [
+  ["eslint-plugin-react-x", "Core rules (renderer-agnostic, compatible with x-platform)."],
+  ["eslint-plugin-react-dom", "DOM specific rules for React DOM."],
+  ["eslint-plugin-react-web-api", "Rules for interacting with Web APIs."],
+  ["eslint-plugin-react-hooks-extra", "Extra React Hooks rules."],
+  ["eslint-plugin-react-naming-convention", "Naming convention rules."],
+] as const;
+
+const tweets = [
+  "1865166494709026873",
+  "1839913920984678890",
+  "1841248980354941038",
+  "1859137094976696467",
+];
+
+export default function HomePage() {
+  return (
+    <main className="w-full min-w-0 max-w-6xl px-8 pt-4 pb-12 md:px-12 mx-auto">
+      <ESLintReact />
+      <article className="prose max-w-none">
+        <p>Welcome to the ESLint React documentation.</p>
+        <p>A set of composable ESLint rules for libraries and frameworks that use React as a UI runtime.</p>
+        <h2>Features</h2>
+        <ul>
+          {features.map(([title, description]) => (
+            <li key={title}>
+              <strong>{title}</strong>: {description}
+            </li>
+          ))}
+        </ul>
+        <h2>Public packages</h2>
+        <h3>All-in-one plugins</h3>
+        <ul>
+          <li>
+            <span>
+              <Link href="https://www.npmjs.com/package/@eslint-react/eslint-plugin">
+                @eslint-react/eslint-plugin
+              </Link>{" "}
+              - The main ESLint plugin package including all rules and config presets in this repository.
+            </span>
+          </li>
+        </ul>
+        <h3>Modular plugins</h3>
+        <ul>
+          {packages.map(([name, description]) => (
+            <li key={name}>
+              <span>
+                <Link href={`https://www.npmjs.com/package/${name}`}>
+                  {name}
+                </Link>{" "}
+                - {description}
+              </span>
+            </li>
+          ))}
+        </ul>
+        <TweetCards
+          className="not-prose"
+          tweets={tweets}
+        />
+        <h2>FAQ</h2>
+        <Link href="/docs/faq">Frequently Asked Questions ↗</Link>
+        <h2>License</h2>
+        This project is licensed under the MIT License - see the{" "}
+        <a href="https://github.com/Rel1cx/eslint-react/blob/main/LICENSE">LICENSE</a> file for details.
+      </article>
+    </main>
+  );
+}

website/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);

website/app/api/search/route.ts

@@ -1,4 +1,7 @@
-@import "tailwindcss";
+/* @import "tailwindcss"; */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
 :root {
   --font-family-body:

website/styles/base.css renamed to website/app/base.css

@@ -0,0 +1,41 @@
+import { source } from "#/lib/source";
+import { DocsPage, DocsBody, DocsDescription, DocsTitle } from "fumadocs-ui/page";
+import { notFound } from "next/navigation";
+import defaultMdxComponents from "fumadocs-ui/mdx";
+
+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 MDX = page.data.body;
+
+  return (
+    <DocsPage toc={page.data.toc} full={!!page.data.full}>
+      <DocsTitle>{page.data.title}</DocsTitle>
+      <DocsDescription>{page.data.description}</DocsDescription>
+      <DocsBody>
+        <MDX components={{ ...defaultMdxComponents }} />
+      </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,
+    description: page.data.description,
+  };
+}