create-fumadocs-app 16.0.0 → 16.0.2

package/dist/index.js

@@ -1,15 +1,19 @@
 #!/usr/bin/env node
 import {
+  copy,
   create,
   cwd,
+  depVersions,
   getPackageManager,
   managers,
+  pick,
+  sourceDir,
   templates
-} from "./chunk-KVKS2K3W.js";
+} from "./chunk-6C2B326N.js";
 
 // src/index.ts
-import fs from "fs/promises";
-import path from "path";
+import fs2 from "fs/promises";
+import path2 from "path";
 import {
   cancel,
   confirm,
@@ -23,6 +27,85 @@ import {
 } from "@clack/prompts";
 import pc from "picocolors";
 import { program } from "commander";
+
+// src/plugins/orama-cloud.ts
+import path from "path";
+import fs from "fs/promises";
+var oramaCloud = {
+  packageJson(packageJson) {
+    return {
+      ...packageJson,
+      scripts: {
+        ...packageJson.scripts,
+        build: `${packageJson.build} && bun scripts/sync-content.ts`
+      },
+      dependencies: {
+        ...packageJson.dependencies,
+        ...pick(depVersions, ["@orama/core"])
+      }
+    };
+  },
+  readme(content) {
+    return `${content}
+
+## Orama Cloud
+    
+This project uses Orama Cloud for 3rd party search solution.
+
+See https://fumadocs.dev/docs/headless/search/orama-cloud for integrating Orama Cloud to Fumadocs.`;
+  },
+  async afterWrite() {
+    const { dest, template, options } = this;
+    const appDir = path.join(dest, options.useSrcDir ? "src" : ".");
+    await copy(path.join(sourceDir, "template/+orama-cloud/@root"), dest);
+    await copy(path.join(sourceDir, "template/+orama-cloud/@app"), appDir);
+    const filePath = {
+      "+next+fuma-docs-mdx": ".next/server/app/static.json.body",
+      "tanstack-start": ".output/public/static.json",
+      "react-router": "build/client/static.json",
+      "react-router-spa": "build/client/static.json",
+      waku: "dist/public/static.json"
+    }[template.value];
+    const SyncContentScript = `import { type OramaDocument, sync } from 'fumadocs-core/search/orama-cloud';
+import * as fs from 'node:fs/promises';
+import { OramaCloud } from '@orama/core';
+
+// the path of pre-rendered \`static.json\`
+const filePath = ${JSON.stringify(filePath)};
+
+async function main() {
+  const orama = new OramaCloud({
+    projectId: process.env.NEXT_PUBLIC_ORAMA_PROJECT_ID,
+    apiKey: process.env.ORAMA_PRIVATE_API_KEY,
+  });
+
+  const content = await fs.readFile(filePath);
+  const records = JSON.parse(content.toString()) as OramaDocument[];
+
+  await sync(orama, {
+    index: process.env.NEXT_PUBLIC_ORAMA_DATASOURCE_ID,
+    documents: records,
+  });
+
+  console.log(\`search updated: \${records.length} records\`);
+}
+
+void main();
+`;
+    await fs.mkdir(path.join(dest, "scripts"), { recursive: true });
+    await fs.writeFile(
+      path.join(dest, "scripts/sync-content.ts"),
+      SyncContentScript
+    );
+    await copy(
+      path.join(sourceDir, `template/+orama-cloud/${template.value}`),
+      appDir
+    );
+  }
+};
+var orama_cloud_default = oramaCloud;
+
+// src/index.ts
 program.argument("[name]", "the project name");
 program.option("--src", "(Next.js only) enable `src/` directory");
 program.option("--no-src", "(Next.js only) disable `src/` directory");
@@ -35,9 +118,9 @@ program.option("--no-install", "Disable installing packages automatically");
 program.option("--no-git", "Disable auto Git repository initialization");
 program.option(
   "--template <name>",
-  `template to choose: ${templates.join(", ")}`,
+  `template to choose: ${templates.map((v) => v.value).join(", ")}`,
   (value) => {
-    if (!templates.includes(value)) {
+    if (!templates.some((item) => item.value === value)) {
       throw new Error(`Invalid template: ${value}.`);
     }
     return value;
@@ -71,29 +154,7 @@ async function main(config) {
         return select({
           message: "Choose a template",
           initialValue: "+next+fuma-docs-mdx",
-          options: [
-            {
-              value: "+next+fuma-docs-mdx",
-              label: "Next.js: Fumadocs MDX",
-              hint: "recommended"
-            },
-            {
-              value: "+next+content-collections",
-              label: "Next.js: Content Collections"
-            },
-            {
-              value: "waku",
-              label: "Waku: Fumadocs MDX"
-            },
-            {
-              value: "react-router",
-              label: "React Router: Fumadocs MDX (not RSC)"
-            },
-            {
-              value: "tanstack-start",
-              label: "Tanstack Start: Fumadocs MDX (not RSC)"
-            }
-          ]
+          options: templates
         });
       },
       src: async (v) => {
@@ -131,6 +192,23 @@ async function main(config) {
           ]
         });
       },
+      search: () => {
+        return select({
+          message: "Choose a search solution?",
+          options: [
+            {
+              value: "orama",
+              label: "Default",
+              hint: "local search powered by Orama, recommended"
+            },
+            {
+              value: "orama-cloud",
+              label: "Orama Cloud",
+              hint: "3rd party search solution, signup needed"
+            }
+          ]
+        });
+      },
       installDeps: () => {
         if (config.install !== void 0)
           return Promise.resolve(config.install);
@@ -147,8 +225,8 @@ async function main(config) {
     }
   );
   const projectName = options.name.toLowerCase().replace(/\s/, "-");
-  const dest = path.resolve(cwd, projectName);
-  const destDir = await fs.readdir(dest).catch(() => null);
+  const dest = path2.resolve(cwd, projectName);
+  const destDir = await fs2.readdir(dest).catch(() => null);
   if (destDir && destDir.length > 0) {
     const del = await confirm({
       message: `directory ${projectName} already exists, do you want to delete its files?`
@@ -162,7 +240,7 @@ async function main(config) {
       info2.start(`Deleting files in ${projectName}`);
       await Promise.all(
         destDir.map((item) => {
-          return fs.rm(path.join(dest, item), {
+          return fs2.rm(path2.join(dest, item), {
             recursive: true,
             force: true
           });
@@ -175,13 +253,13 @@ async function main(config) {
   info.start(`Generating Project`);
   await create({
     packageManager: manager,
-    tailwindcss: true,
     template: options.template,
     outputDir: dest,
     installDeps: options.installDeps,
     lint: options.lint,
     useSrcDir: options.src,
     initializeGit: config.git ?? true,
+    plugins: options.search === "orama-cloud" ? [orama_cloud_default] : [],
     log: (message) => {
       info.message(message);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-fumadocs-app",
-  "version": "16.0.0",
+  "version": "16.0.2",
   "description": "Create a new documentation site with Fumadocs",
   "keywords": [
     "NextJs",
@@ -45,6 +45,7 @@
     "clean": "rimraf dist",
     "dev": "tsup --watch",
     "lint": "eslint .",
-    "types:check": "tsc --noEmit"
+    "types:check": "tsc --noEmit",
+    "sync": "bun ./scripts/sync.ts"
   }
 }

package/template/+next+fuma-docs-mdx/app/(home)/page.tsx

@@ -0,0 +1,16 @@
+import Link from 'next/link';
+
+export default function HomePage() {
+  return (
+    <div className="flex flex-col justify-center text-center flex-1">
+      <h1 className="text-2xl font-bold mb-4">Hello World</h1>
+      <p>
+        You can open{' '}
+        <Link href="/docs" className="font-medium underline">
+          /docs
+        </Link>{' '}
+        and see the documentation.
+      </p>
+    </div>
+  );
+}

package/template/{+next+tailwindcss → +next+fuma-docs-mdx}/app/layout.tsx

@@ -1,5 +1,5 @@
-import '@/app/global.css';
 import { RootProvider } from 'fumadocs-ui/provider/next';
+import './global.css';
 import { Inter } from 'next/font/google';
 
 const inter = Inter({

package/template/{+next → +next+fuma-docs-mdx}/example.gitignore

@@ -2,8 +2,6 @@
 /node_modules
 
 # generated content
-.contentlayer
-.content-collections
 .source
 
 # test & build

package/template/+next+fuma-docs-mdx/lib/layout.shared.tsx

@@ -0,0 +1,9 @@
+import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
+
+export function baseOptions(): BaseLayoutProps {
+  return {
+    nav: {
+      title: 'My App',
+    },
+  };
+}

package/template/+next+fuma-docs-mdx/lib/source.ts

@@ -21,7 +21,7 @@ export function getPageImage(page: InferPageType<typeof source>) {
 export async function getLLMText(page: InferPageType<typeof source>) {
   const processed = await page.data.getText('processed');
 
-  return `# ${page.data.title} (${page.url})
+  return `# ${page.data.title}
 
 ${processed}`;
 }

package/template/{+next → +next+fuma-docs-mdx}/mdx-components.tsx

@@ -1,7 +1,6 @@
 import defaultMdxComponents from 'fumadocs-ui/mdx';
 import type { MDXComponents } from 'mdx/types';
 
-// use this function to get MDX components, you will need it for rendering MDX
 export function getMDXComponents(components?: MDXComponents): MDXComponents {
   return {
     ...defaultMdxComponents,

package/template/+next+fuma-docs-mdx/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "example-next-mdx",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "build": "next build",
+    "dev": "next dev",
+    "start": "next start"
+  },
+  "dependencies": {
+    "fumadocs-core": "workspace:*",
+    "fumadocs-mdx": "workspace:*",
+    "fumadocs-ui": "workspace:*",
+    "lucide-react": "^0.546.0",
+    "next": "16.0.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.15",
+    "@types/mdx": "^2.0.13",
+    "@types/node": "^24.9.1",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.15",
+    "typescript": "^5.9.3"
+  }
+}

package/template/+next+fuma-docs-mdx/source.config.ts

@@ -8,6 +8,7 @@ import {
 // You can customise Zod schemas for frontmatter and `meta.json` here
 // see https://fumadocs.dev/docs/mdx/collections
 export const docs = defineDocs({
+  dir: 'content/docs',
   docs: {
     schema: frontmatterSchema,
     postprocess: {

package/template/+next+fuma-docs-mdx/tsconfig.json

@@ -16,8 +16,8 @@
     "jsx": "preserve",
     "incremental": true,
     "paths": {
-      "@/.source": [".source"],
-      "@/*": ["./*"]
+      "@/*": ["./*"],
+      "@/.source": [".source"]
     },
     "plugins": [
       {

package/template/{+next → +orama-cloud/+next+fuma-docs-mdx}/app/layout.tsx

@@ -1,6 +1,7 @@
 import { RootProvider } from 'fumadocs-ui/provider/next';
-import 'fumadocs-ui/style.css';
+import './global.css';
 import { Inter } from 'next/font/google';
+import SearchDialog from '@/components/search';
 
 const inter = Inter({
   subsets: ['latin'],
@@ -9,14 +10,8 @@ const inter = Inter({
 export default function Layout({ children }: LayoutProps<'/'>) {
   return (
     <html lang="en" className={inter.className} suppressHydrationWarning>
-      <body
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          minHeight: '100vh',
-        }}
-      >
-        <RootProvider>{children}</RootProvider>
+      <body className="flex flex-col min-h-screen">
+        <RootProvider search={{ SearchDialog }}>{children}</RootProvider>
       </body>
     </html>
   );

package/template/+orama-cloud/+next+fuma-docs-mdx/app/static.json/route.ts

@@ -0,0 +1,7 @@
+import { exportSearchIndexes } from '@/lib/export-search-indexes';
+
+export const revalidate = false;
+
+export async function GET() {
+  return Response.json(await exportSearchIndexes());
+}

package/template/+orama-cloud/@app/components/search.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import {
+  SearchDialog,
+  SearchDialogClose,
+  SearchDialogContent,
+  SearchDialogFooter,
+  SearchDialogHeader,
+  SearchDialogIcon,
+  SearchDialogInput,
+  SearchDialogList,
+  SearchDialogOverlay,
+  type SharedProps,
+} from 'fumadocs-ui/components/dialog/search';
+import { useDocsSearch } from 'fumadocs-core/search/client';
+import { OramaCloud } from '@orama/core';
+import { useI18n } from 'fumadocs-ui/contexts/i18n';
+
+const client = new OramaCloud({
+  projectId: process.env.NEXT_PUBLIC_ORAMA_DATASOURCE_ID,
+  apiKey: process.env.NEXT_PUBLIC_ORAMA_API_KEY,
+});
+
+export default function CustomSearchDialog(props: SharedProps) {
+  const { locale } = useI18n(); // (optional) for i18n
+  const { search, setSearch, query } = useDocsSearch({
+    type: 'orama-cloud',
+    client,
+    locale,
+  });
+
+  return (
+    <SearchDialog
+      search={search}
+      onSearchChange={setSearch}
+      isLoading={query.isLoading}
+      {...props}
+    >
+      <SearchDialogOverlay />
+      <SearchDialogContent>
+        <SearchDialogHeader>
+          <SearchDialogIcon />
+          <SearchDialogInput />
+          <SearchDialogClose />
+        </SearchDialogHeader>
+        <SearchDialogList items={query.data !== 'empty' ? query.data : null} />
+        <SearchDialogFooter>
+          <a
+            href="https://orama.com"
+            rel="noreferrer noopener"
+            className="ms-auto text-xs text-fd-muted-foreground"
+          >
+            Search powered by Orama
+          </a>
+        </SearchDialogFooter>
+      </SearchDialogContent>
+    </SearchDialog>
+  );
+}

package/template/+orama-cloud/@app/lib/export-static-indexes.ts

@@ -0,0 +1,14 @@
+import { source } from '@/lib/source';
+import type { OramaDocument } from 'fumadocs-core/search/orama-cloud';
+
+export async function exportSearchIndexes() {
+  return source.getPages().map((page) => {
+    return {
+      id: page.url,
+      structured: page.data.structuredData,
+      url: page.url,
+      title: page.data.title,
+      description: page.data.description,
+    } satisfies OramaDocument;
+  });
+}

package/template/+orama-cloud/@root/.env.example

@@ -0,0 +1,6 @@
+NEXT_PUBLIC_ORAMA_DATASOURCE_ID="Rest API data source ID"
+NEXT_PUBLIC_ORAMA_PROJECT_ID="project ID"
+NEXT_PUBLIC_ORAMA_API_KEY="public API key"
+
+# keep it secretly!
+ORAMA_PRIVATE_API_KEY="private API key"

package/template/+orama-cloud/react-router/app/root.tsx

@@ -0,0 +1,76 @@
+import {
+  isRouteErrorResponse,
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from 'react-router';
+import { RootProvider } from 'fumadocs-ui/provider/react-router';
+import type { Route } from './+types/root';
+import './app.css';
+import SearchDialog from '@/components/search';
+
+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 className="flex flex-col min-h-screen">
+        <RootProvider search={{ SearchDialog }}>{children}</RootProvider>
+        <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/+orama-cloud/react-router/app/routes/static.ts

@@ -0,0 +1,5 @@
+import { exportSearchIndexes } from '@/lib/export-search-indexes';
+
+export async function loader() {
+  return Response.json(await exportSearchIndexes());
+}

package/template/+orama-cloud/react-router/app/routes.ts

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

package/template/+orama-cloud/react-router-spa/app/root.tsx

@@ -0,0 +1,76 @@
+import {
+  isRouteErrorResponse,
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from 'react-router';
+import { RootProvider } from 'fumadocs-ui/provider/react-router';
+import type { Route } from './+types/root';
+import './app.css';
+import SearchDialog from '@/components/search';
+
+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 className="flex flex-col min-h-screen">
+        <RootProvider search={{ SearchDialog }}>{children}</RootProvider>
+        <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/+orama-cloud/react-router-spa/app/routes/static.ts

@@ -0,0 +1,5 @@
+import { exportSearchIndexes } from '@/lib/export-search-indexes';
+
+export async function loader() {
+  return Response.json(await exportSearchIndexes());
+}

package/template/+orama-cloud/react-router-spa/app/routes.ts

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