create-fumadocs-app 15.1.3 → 15.2.0

package/dist/{chunk-K4QGKCVK.js → chunk-R4Y2JVJN.js}

@@ -60,7 +60,7 @@ function tryGitInit(root) {
 }
 
 // src/versions.js
-var versions = { "fumadocs-core": "15.1.3", "fumadocs-ui": "15.1.3", "fumadocs-mdx": "11.5.7", "@fumadocs/content-collections": "1.1.8" };
+var versions = { "fumadocs-core": "15.2.0", "fumadocs-ui": "15.2.0", "fumadocs-mdx": "11.5.7", "@fumadocs/mdx-remote": "1.3.0", "@fumadocs/content-collections": "1.1.8" };
 
 // ../create-app-versions/package.json
 var package_default = {
@@ -73,17 +73,28 @@ var package_default = {
     "@content-collections/core": "^0.8.2",
     "@content-collections/mdx": "^0.2.2",
     "@content-collections/next": "^0.2.6",
-    "@tailwindcss/postcss": "^4.0.15",
+    "@react-router/dev": "^7.4.1",
+    "@react-router/node": "^7.4.1",
+    "@react-router/serve": "^7.4.1",
+    "@tailwindcss/postcss": "^4.0.17",
+    "@tailwindcss/vite": "^4.0.17",
     "@types/mdx": "^2.0.13",
-    "@types/node": "22.13.11",
+    "@types/node": "22.13.14",
     "@types/react": "^19.0.12",
     "@types/react-dom": "^19.0.4",
-    next: "15.2.3",
+    "gray-matter": "^4.0.3",
+    isbot: "^5.1.17",
+    next: "15.2.4",
     postcss: "^8.5.3",
-    react: "^19.0.0",
-    "react-dom": "^19.0.0",
-    tailwindcss: "^4.0.15",
-    typescript: "^5.8.2"
+    react: "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-router": "^7.4.1",
+    "react-router-devtools": "^1.1.8",
+    shiki: "^3.2.1",
+    tailwindcss: "^4.0.17",
+    typescript: "^5.8.2",
+    vite: "^6.2.3",
+    "vite-tsconfig-paths": "^5.1.4"
   }
 };
 
@@ -137,35 +148,56 @@ async function create(options) {
   } = options;
   const projectName = path.basename(options.outputDir);
   const dest = path.resolve(cwd, options.outputDir);
+  const isNext = options.template === "content-collections" || options.template === "fuma-docs-mdx";
   function defaultRename(file) {
     file = file.replace("example.gitignore", ".gitignore");
     if (!options.useSrcDir) {
       return file;
     }
-    for (const dir of ["app", "lib"]) {
-      const relative = path.relative(path.join(dest, dir), file);
+    if (isNext) {
+      for (const dir of ["app", "lib"]) {
+        const relative = path.relative(path.join(dest, dir), file);
+        if (!relative.startsWith(`..${path.sep}`)) {
+          return path.join(dest, "src", dir, relative);
+        }
+      }
+    } else if (options.template === "react-router") {
+      const relative = path.relative(path.join(dest, "app"), file);
       if (!relative.startsWith(`..${path.sep}`)) {
-        return path.join(dest, "src", dir, relative);
+        return path.join(dest, "src", relative);
       }
     }
     return file;
   }
-  await copy(path.join(sourceDir, `template/+shared`), dest, defaultRename);
+  if (isNext) {
+    await copy(path.join(sourceDir, `template/+next`), dest, defaultRename);
+  }
   await copy(
     path.join(sourceDir, `template/${options.template}`),
     dest,
     defaultRename
   );
-  if (options.tailwindcss) {
+  if (isNext && options.tailwindcss) {
     await copy(
-      path.join(sourceDir, `template/+tailwindcss`),
+      path.join(sourceDir, `template/+next+tailwindcss`),
       dest,
       defaultRename
     );
+    if (options.useSrcDir) {
+      const cssPath = path.join(dest, "src/app/global.css");
+      await fs.writeFile(
+        cssPath,
+        (await fs.readFile(cssPath)).toString().replace("../", "../../")
+      );
+    }
     log("Configured Tailwind CSS");
   }
-  if (options.eslint) {
-    await copy(path.join(sourceDir, `template/+eslint`), dest, defaultRename);
+  if (isNext && options.eslint) {
+    await copy(
+      path.join(sourceDir, `template/+next+eslint`),
+      dest,
+      defaultRename
+    );
     log("Configured ESLint");
   }
   if (options.useSrcDir) {
@@ -178,16 +210,12 @@ async function create(options) {
       });
     }
     await fs.writeFile(tsconfigPath, JSON.stringify(config, null, 2));
-    if (options.tailwindcss) {
-      const cssPath = path.join(dest, "src/app/global.css");
-      await fs.writeFile(
-        cssPath,
-        (await fs.readFile(cssPath)).toString().replace("../", "../../")
-      );
-    }
   }
   const packageJson = createPackageJson(projectName, options);
-  await fs.writeFile(path.join(dest, "package.json"), packageJson);
+  await fs.writeFile(
+    path.join(dest, "package.json"),
+    JSON.stringify(packageJson, null, 2)
+  );
   const readMe = await getReadme(dest, projectName);
   await fs.writeFile(path.join(dest, "README.md"), readMe);
   if (installDeps) {
@@ -219,65 +247,92 @@ async function copy(from, to, rename = (s) => s) {
   }
 }
 function createPackageJson(projectName, options) {
-  const packageJson = {
+  if (options.template === "react-router") {
+    return {
+      name: projectName,
+      private: true,
+      type: "module",
+      scripts: {
+        build: "react-router build",
+        dev: "react-router dev",
+        start: "react-router-serve ./build/server/index.js",
+        typecheck: "react-router typegen && tsc"
+      },
+      dependencies: {
+        ...pick(versions, [
+          "@fumadocs/mdx-remote",
+          "fumadocs-core",
+          "fumadocs-ui"
+        ]),
+        ...pick(package_default.dependencies, [
+          "@react-router/node",
+          "@react-router/serve",
+          "gray-matter",
+          "isbot",
+          "react",
+          "react-dom",
+          "react-router",
+          "shiki"
+        ])
+      },
+      devDependencies: pick(package_default.dependencies, [
+        "@react-router/dev",
+        "@tailwindcss/vite",
+        "@types/node",
+        "@types/react",
+        "@types/react-dom",
+        "react-router-devtools",
+        "tailwindcss",
+        "typescript",
+        "vite",
+        "vite-tsconfig-paths"
+      ])
+    };
+  }
+  return {
     name: projectName,
     version: "0.0.0",
     private: true,
     scripts: {
       build: "next build",
       dev: "next dev",
-      start: "next start"
+      start: "next start",
+      ...options.template === "fuma-docs-mdx" ? {
+        postinstall: "fumadocs-mdx"
+      } : null
     },
     dependencies: {
       ...pick(package_default.dependencies, ["next", "react", "react-dom"]),
-      ...pick(versions, ["fumadocs-ui", "fumadocs-core"])
+      ...pick(versions, ["fumadocs-ui", "fumadocs-core"]),
+      ...options.template === "content-collections" ? {
+        ...pick(package_default.dependencies, [
+          "@content-collections/mdx",
+          "@content-collections/core",
+          "@content-collections/next"
+        ]),
+        ...pick(versions, ["@fumadocs/content-collections"])
+      } : null,
+      ...options.template === "fuma-docs-mdx" ? pick(versions, ["fumadocs-mdx"]) : null
     },
-    devDependencies: pick(package_default.dependencies, [
-      "@types/node",
-      "@types/react",
-      "@types/react-dom",
-      "typescript"
-    ])
-  };
-  if (options.template === "content-collections") {
-    Object.assign(
-      packageJson.dependencies,
-      pick(package_default.dependencies, [
-        "@content-collections/mdx",
-        "@content-collections/core",
-        "@content-collections/next"
+    devDependencies: {
+      ...pick(package_default.dependencies, [
+        "@types/node",
+        "@types/react",
+        "@types/react-dom",
+        "typescript"
       ]),
-      pick(versions, ["@fumadocs/content-collections"])
-    );
-  }
-  if (options.template === "fuma-docs-mdx") {
-    packageJson.scripts.postinstall = "fumadocs-mdx";
-    Object.assign(
-      packageJson.dependencies,
-      pick(versions, ["fumadocs-mdx"])
-    );
-    Object.assign(
-      packageJson.devDependencies,
-      pick(package_default.dependencies, ["@types/mdx"])
-    );
-  }
-  if (options.tailwindcss) {
-    Object.assign(
-      packageJson.devDependencies,
-      pick(package_default.dependencies, [
+      ...options.tailwindcss ? pick(package_default.dependencies, [
         "@tailwindcss/postcss",
         "tailwindcss",
         "postcss"
-      ])
-    );
-  }
-  if (options.eslint) {
-    Object.assign(packageJson.devDependencies, {
-      eslint: "^8",
-      "eslint-config-next": package_default.dependencies.next
-    });
-  }
-  return JSON.stringify(packageJson, void 0, 2);
+      ]) : null,
+      ...options.template === "fuma-docs-mdx" ? pick(package_default.dependencies, ["@types/mdx"]) : null,
+      ...options.eslint ? {
+        eslint: "^8",
+        "eslint-config-next": package_default.dependencies.next
+      } : null
+    }
+  };
 }
 function pick(obj, keys) {
   const result = {};

package/dist/create-app.js

@@ -1,6 +1,6 @@
 import {
   create
-} from "./chunk-K4QGKCVK.js";
+} from "./chunk-R4Y2JVJN.js";
 export {
   create
 };

package/dist/index.js

@@ -3,10 +3,9 @@ import {
   create,
   cwd,
   getPackageManager
-} from "./chunk-K4QGKCVK.js";
+} from "./chunk-R4Y2JVJN.js";
 
 // src/index.ts
-import { existsSync } from "node:fs";
 import fs from "node:fs/promises";
 import path from "node:path";
 import {
@@ -32,23 +31,32 @@ async function main() {
         defaultValue: "my-app"
       }),
       template: () => select({
-        message: "Choose a content source",
+        message: "Choose a template",
         initialValue: "fuma-docs-mdx",
         options: [
           {
             value: "fuma-docs-mdx",
-            label: "Fumadocs MDX",
+            label: "Next.js: Fumadocs MDX",
             hint: "recommended"
           },
-          { value: "content-collections", label: "Content Collections" }
+          {
+            value: "content-collections",
+            label: "Next.js: Content Collections"
+          },
+          {
+            value: "react-router",
+            label: "React Router: MDX Remote"
+          }
         ]
       }),
       src: () => confirm({ message: "Use `/src` directory?", initialValue: false }),
-      tailwindcss: () => confirm({ message: "Use Tailwind CSS for styling?" }),
-      eslint: () => confirm({
-        message: "Add default ESLint configuration?",
-        initialValue: false
-      }),
+      eslint: (v) => {
+        if (v.results.template === "react-router") return;
+        return confirm({
+          message: "Add default ESLint configuration?",
+          initialValue: false
+        });
+      },
       installDeps: () => confirm({
         message: `Do you want to install packages automatically? (detected as ${manager})`
       })
@@ -62,9 +70,10 @@ async function main() {
   );
   const projectName = options.name.toLowerCase().replace(/\s/, "-");
   const dest = path.resolve(cwd, projectName);
-  if (existsSync(dest)) {
+  const destDir = await fs.readdir(dest).catch(() => null);
+  if (destDir && destDir.length > 0) {
     const del = await confirm({
-      message: `${projectName} already exists, do you want to delete it?`
+      message: `directory ${projectName} already exists, do you want to delete its files?`
     });
     if (isCancel(del)) {
       cancel();
@@ -72,23 +81,27 @@ async function main() {
     }
     if (del) {
       const info2 = spinner();
-      info2.start(`Deleting ${projectName}`);
-      await fs.rm(dest, {
-        recursive: true,
-        force: true
-      });
-      info2.stop(`Deleted ${projectName}`);
+      info2.start(`Deleting files in ${projectName}`);
+      await Promise.all(
+        destDir.map((item) => {
+          return fs.rm(path.join(dest, item), {
+            recursive: true,
+            force: true
+          });
+        })
+      );
+      info2.stop(`Deleted files in ${projectName}`);
     }
   }
   const info = spinner();
   info.start(`Generating Project`);
   await create({
     packageManager: manager,
-    tailwindcss: options.tailwindcss,
+    tailwindcss: true,
     template: options.template,
     outputDir: dest,
     installDeps: options.installDeps,
-    eslint: options.eslint,
+    eslint: options.eslint === true,
     useSrcDir: options.src,
     log: (message) => {
       info.message(message);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-fumadocs-app",
-  "version": "15.1.3",
+  "version": "15.2.0",
   "description": "Create a new documentation site with Fumadocs",
   "keywords": [
     "NextJs",
@@ -25,7 +25,7 @@
   },
   "devDependencies": {
     "@types/cross-spawn": "^6.0.6",
-    "@types/node": "22.13.11",
+    "@types/node": "22.13.14",
     "fast-glob": "^3.3.3",
     "eslint-config-custom": "0.0.0",
     "tsconfig": "0.0.0"

package/template/react-router/README.md

@@ -0,0 +1,12 @@
+This is a React Router application generated with
+[Create Fumadocs](https://github.com/fuma-nama/fumadocs).
+
+Run development server:
+
+```bash
+npm run dev
+# or
+pnpm dev
+# or
+yarn dev
+```

package/template/react-router/app/app.css

@@ -0,0 +1,6 @@
+@import 'tailwindcss';
+@import 'fumadocs-ui/css/neutral.css';
+@import 'fumadocs-ui/css/preset.css';
+
+/* path of `fumadocs-ui` relative to the CSS file */
+@source '../node_modules/fumadocs-ui/dist/**/*.js';

package/template/react-router/app/docs/page.tsx

@@ -0,0 +1,63 @@
+import type { Route } from './+types/page';
+import { DocsLayout } from 'fumadocs-ui/layouts/docs';
+import {
+  DocsBody,
+  DocsDescription,
+  DocsPage,
+  DocsTitle,
+} from 'fumadocs-ui/page';
+import { source } from '@/source';
+import defaultMdxComponents from 'fumadocs-ui/mdx';
+import { executeMdxSync } from '@fumadocs/mdx-remote/client';
+import type { PageTree } from 'fumadocs-core/server';
+import { createCompiler } from '@fumadocs/mdx-remote';
+
+export function meta({}: Route.MetaArgs) {
+  return [
+    { title: 'New React Router App' },
+    { name: 'description', content: 'Welcome to React Router!' },
+  ];
+}
+const compiler = createCompiler({
+  development: false,
+});
+
+export async function loader({ params }: Route.LoaderArgs) {
+  const slugs = params['*'].split('/').filter((v) => v.length > 0);
+  const page = source.getPage(slugs);
+  if (!page) throw new Error('Not found');
+
+  const compiled = String(
+    await compiler.compileFile({
+      value: page.data.content,
+    }),
+  );
+
+  return {
+    page,
+    compiled,
+    tree: source.pageTree,
+  };
+}
+
+export default function Page(props: Route.ComponentProps) {
+  const { page, compiled, tree } = props.loaderData;
+  const { default: Mdx, toc } = executeMdxSync(compiled);
+
+  return (
+    <DocsLayout
+      nav={{
+        title: 'React Router',
+      }}
+      tree={tree as PageTree.Root}
+    >
+      <DocsPage toc={toc}>
+        <DocsTitle>{page.data.title}</DocsTitle>
+        <DocsDescription>{page.data.description}</DocsDescription>
+        <DocsBody>
+          <Mdx components={defaultMdxComponents} />
+        </DocsBody>
+      </DocsPage>
+    </DocsLayout>
+  );
+}

package/template/react-router/app/docs/search.ts

@@ -0,0 +1,18 @@
+import type { Route } from './+types/search';
+import { createSearchAPI } from 'fumadocs-core/search/server';
+import { source } from '@/source';
+import { structure } from 'fumadocs-core/mdx-plugins';
+
+const server = createSearchAPI('advanced', {
+  indexes: source.getPages().map((page) => ({
+    id: page.url,
+    url: page.url,
+    title: page.data.title ?? '',
+    description: page.data.description,
+    structuredData: structure(page.data.content),
+  })),
+});
+
+export async function loader({ request }: Route.LoaderArgs) {
+  return server.GET(request);
+}

package/template/react-router/app/root.tsx

@@ -0,0 +1,78 @@
+import {
+  isRouteErrorResponse,
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from 'react-router';
+import { RootProvider } from 'fumadocs-ui/provider/base';
+import { ReactRouterProvider } from 'fumadocs-core/framework/react-router';
+import type { Route } from './+types/root';
+import './app.css';
+
+export const links: Route.LinksFunction = () => [
+  { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
+  {
+    rel: 'preconnect',
+    href: 'https://fonts.gstatic.com',
+    crossOrigin: 'anonymous',
+  },
+  {
+    rel: 'stylesheet',
+    href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
+  },
+];
+
+export function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <ReactRouterProvider>
+          <RootProvider>{children}</RootProvider>
+        </ReactRouterProvider>
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+
+export default function App() {
+  return <Outlet />;
+}
+
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+  let message = 'Oops!';
+  let details = 'An unexpected error occurred.';
+  let stack: string | undefined;
+
+  if (isRouteErrorResponse(error)) {
+    message = error.status === 404 ? '404' : 'Error';
+    details =
+      error.status === 404
+        ? 'The requested page could not be found.'
+        : error.statusText || details;
+  } else if (import.meta.env.DEV && error && error instanceof Error) {
+    details = error.message;
+    stack = error.stack;
+  }
+
+  return (
+    <main className="pt-16 p-4 container mx-auto">
+      <h1>{message}</h1>
+      <p>{details}</p>
+      {stack && (
+        <pre className="w-full p-4 overflow-x-auto">
+          <code>{stack}</code>
+        </pre>
+      )}
+    </main>
+  );
+}

package/template/react-router/app/routes/home.tsx

@@ -0,0 +1,34 @@
+import type { Route } from './+types/home';
+import { HomeLayout } from 'fumadocs-ui/layouts/home';
+import { Link } from 'react-router';
+
+export function meta({}: Route.MetaArgs) {
+  return [
+    { title: 'New React Router App' },
+    { name: 'description', content: 'Welcome to React Router!' },
+  ];
+}
+
+export default function Home() {
+  return (
+    <HomeLayout
+      className="text-center"
+      nav={{
+        title: 'React Router',
+      }}
+    >
+      <div className="py-12">
+        <h1 className="text-xl font-bold mb-2">Fumadocs on React Router.</h1>
+        <p className="text-fd-muted-foreground mb-8">
+          The truly flexible docs framework on React.js.
+        </p>
+        <Link
+          className="text-sm bg-fd-primary text-fd-primary-foreground rounded-full font-medium px-4 py-2.5"
+          to="/docs"
+        >
+          Open Docs
+        </Link>
+      </div>
+    </HomeLayout>
+  );
+}

package/template/react-router/app/routes.ts

@@ -0,0 +1,7 @@
+import { type RouteConfig, index, route } from '@react-router/dev/routes';
+
+export default [
+  index('routes/home.tsx'),
+  route('docs/*', 'docs/page.tsx'),
+  route('api/search', 'docs/search.ts'),
+] satisfies RouteConfig;

package/template/react-router/app/source.ts

@@ -0,0 +1,60 @@
+import {
+  loader,
+  type MetaData,
+  type PageData,
+  type Source,
+  type VirtualFile,
+} from 'fumadocs-core/source';
+import matter from 'gray-matter';
+import * as path from 'node:path';
+
+const files = Object.entries(
+  import.meta.glob<true, 'raw'>('/content/docs/**/*', {
+    eager: true,
+    query: '?raw',
+    import: 'default',
+  }),
+);
+
+const virtualFiles: VirtualFile[] = files.flatMap(([file, content]) => {
+  const ext = path.extname(file);
+  const virtualPath = path.relative(
+    'content/docs',
+    path.join(process.cwd(), file),
+  );
+
+  if (ext === '.mdx' || ext === '.md') {
+    const parsed = matter(content);
+
+    return {
+      type: 'page',
+      path: virtualPath,
+      data: {
+        ...parsed.data,
+        content: parsed.content,
+      },
+    };
+  }
+
+  if (ext === '.json') {
+    return {
+      type: 'meta',
+      path: virtualPath,
+      data: JSON.parse(content),
+    };
+  }
+
+  return [];
+});
+
+export const source = loader({
+  source: {
+    files: virtualFiles,
+  } as Source<{
+    pageData: PageData & {
+      content: string;
+    };
+    metaData: MetaData;
+  }>,
+  baseUrl: '/docs',
+});

package/template/react-router/content/docs/index.mdx

@@ -0,0 +1,32 @@
+---
+title: Hello World
+description: |
+  Your first `document`
+  You'll love it!
+---
+
+Hey there! Fumadocs is the docs framework that also works on React Router!
+
+## Heading
+
+Hello World
+
+<Cards>
+  <Card title="Learn more about React Router" href="https://reactrouter.com" />
+  <Card title="Learn more about Fumadocs" href="https://fumadocs.vercel.app" />
+</Cards>
+
+```ts
+console.log('I love React!');
+```
+
+### Heading
+
+#### Heading
+
+| Head                            | Description                         |
+| ------------------------------- | ----------------------------------- |
+| `hello`                         | Hello World                         |
+| very **important**              | Hey                                 |
+| _Surprisingly_                  | Fumadocs                            |
+| very long text that looks weird | hello world hello world hello world |

package/template/react-router/content/docs/test.mdx

@@ -0,0 +1,8 @@
+---
+title: Fumadocs
+description: You can just be minimal.
+---
+
+## Overview
+
+Fumadocs is a docs framework.

package/template/react-router/example.gitignore

@@ -0,0 +1,6 @@
+.DS_Store
+/node_modules/
+
+# React Router
+/.react-router/
+/build/

package/template/react-router/react-router.config.ts

@@ -0,0 +1,9 @@
+import type { Config } from '@react-router/dev/config';
+import { source } from './app/source';
+
+export default {
+  ssr: true,
+  async prerender({ getStaticPaths }) {
+    return [...getStaticPaths(), ...source.getPages().map((page) => page.url)];
+  },
+} satisfies Config;

package/template/react-router/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "include": [
+    "**/*",
+    "**/.server/**/*",
+    "**/.client/**/*",
+    ".react-router/types/**/*"
+  ],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "types": ["node", "vite/client"],
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "rootDirs": [".", "./.react-router/types"],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./app/*"]
+    },
+    "esModuleInterop": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true
+  }
+}

package/template/react-router/vite.config.ts

@@ -0,0 +1,13 @@
+import { reactRouter } from '@react-router/dev/vite';
+import tailwindcss from '@tailwindcss/vite';
+import { defineConfig } from 'vite';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+export default defineConfig({
+  build: {
+    rollupOptions: {
+      external: ['shiki'],
+    },
+  },
+  plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
+});