create-fumadocs-app 15.6.3 → 15.6.5

package/template/tanstack-start/example.gitignore

@@ -1,4 +1,10 @@
-routeTree.gen.ts
 node_modules
+
+.DS_Store
+.cache
+.vercel
 .output
-.vinxi
+.nitro
+/build/
+
+.tanstack

package/template/tanstack-start/package.json

@@ -0,0 +1,35 @@
+{
+  "private": true,
+  "sideEffects": false,
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && tsc --noEmit",
+    "start": "node .output/server/index.mjs"
+  },
+  "dependencies": {
+    "@fumadocs/mdx-remote": "workspace:*",
+    "@tanstack/react-router": "^1.128.0",
+    "@tanstack/react-router-devtools": "^1.128.0",
+    "@tanstack/react-start": "^1.128.1",
+    "fumadocs-core": "workspace:*",
+    "fumadocs-ui": "workspace:*",
+    "gray-matter": "^4.0.3",
+    "lucide-static": "^0.525.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "tailwind-merge": "^3.3.1",
+    "vite": "^7.0.5",
+    "zod": "^4.0.5"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.11",
+    "@types/node": "^24.0.14",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@vitejs/plugin-react": "^4.6.0",
+    "tailwindcss": "^4.1.11",
+    "typescript": "^5.8.3",
+    "vite-tsconfig-paths": "^5.1.4"
+  }
+}

package/template/tanstack-start/src/components/NotFound.tsx

@@ -0,0 +1,28 @@
+import { Link } from '@tanstack/react-router';
+import { HomeLayout } from 'fumadocs-ui/layouts/home';
+
+export function NotFound() {
+  return (
+    <HomeLayout
+      nav={{
+        title: 'Tanstack Start',
+      }}
+      className="text-center py-32 justify-center"
+    >
+      <div className="flex flex-col items-center gap-4">
+        <h1 className="text-6xl font-bold text-fd-muted-foreground">404</h1>
+        <h2 className="text-2xl font-semibold">Page Not Found</h2>
+        <p className="text-fd-muted-foreground max-w-md">
+          The page you are looking for might have been removed, had its name
+          changed, or is temporarily unavailable.
+        </p>
+        <Link
+          to="/"
+          className="mt-4 px-4 py-2 rounded-lg bg-fd-primary text-fd-primary-foreground font-medium text-sm hover:opacity-90 transition-opacity"
+        >
+          Back to Home
+        </Link>
+      </div>
+    </HomeLayout>
+  );
+}

package/template/tanstack-start/{lib → src/lib}/source.ts

@@ -7,31 +7,19 @@ import {
 } from 'fumadocs-core/source';
 import matter from 'gray-matter';
 import * as path from 'node:path';
-import { globSync } from 'tinyglobby';
-import * as fs from 'node:fs';
+import * as icons from 'lucide-static';
 
-let files: [string, string][];
-
-if (typeof import.meta.glob === 'function') {
-  files = Object.entries(
-    import.meta.glob<true, 'raw'>('/content/docs/**/*', {
-      eager: true,
-      query: '?raw',
-      import: 'default',
-    }),
-  );
-} else {
-  files = globSync('content/docs/**/*').map((file) => {
-    return [file, fs.readFileSync(file).toString()];
-  });
-}
+const files = Object.entries(
+  import.meta.glob<true, 'raw'>('/content/**/*', {
+    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),
-  );
+  const virtualPath = path.relative('content', path.join(process.cwd(), file));
 
   if (ext === '.mdx' || ext === '.md') {
     const parsed = matter(content);
@@ -67,4 +55,12 @@ export const source = loader({
     metaData: MetaData;
   }>,
   baseUrl: '/docs',
+  // @ts-expect-error -- string
+  icon(icon) {
+    if (!icon) {
+      return;
+    }
+
+    if (icon in icons) return icons[icon as keyof typeof icons];
+  },
 });

package/template/tanstack-start/{app → src}/router.tsx

@@ -1,10 +1,13 @@
 import { createRouter as createTanStackRouter } from '@tanstack/react-router';
 import { routeTree } from './routeTree.gen';
+import { NotFound } from './components/NotFound';
 
 export function createRouter() {
   return createTanStackRouter({
     routeTree,
+    defaultPreload: 'intent',
     scrollRestoration: true,
+    defaultNotFoundComponent: NotFound,
   });
 }
 

package/template/tanstack-start/{app → src}/routes/__root.tsx

@@ -1,12 +1,13 @@
-import { type ReactNode } from 'react';
+/// <reference types="vite/client" />
 import {
   createRootRoute,
   HeadContent,
   Outlet,
   Scripts,
 } from '@tanstack/react-router';
+import * as React from 'react';
+import appCss from '~/styles/app.css?url';
 import { RootProvider } from 'fumadocs-ui/provider/base';
-import appCss from '../app.css?url';
 import { TanstackProvider } from 'fumadocs-core/framework/tanstack';
 
 export const Route = createRootRoute({
@@ -36,7 +37,7 @@ function RootComponent() {
   );
 }
 
-function RootDocument({ children }: Readonly<{ children: ReactNode }>) {
+function RootDocument({ children }: { children: React.ReactNode }) {
   return (
     <html suppressHydrationWarning>
       <head>

package/template/tanstack-start/{app → src}/routes/api/search.ts

@@ -1,20 +1,17 @@
-import { createAPIFileRoute } from '@tanstack/react-start/api';
+import { createServerFileRoute } from '@tanstack/react-start/server';
 import { createSearchAPI } from 'fumadocs-core/search/server';
-import { source } from '@/lib/source';
+import { source } from '~/lib/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,
+    title: page.data.title!,
     structuredData: structure(page.data.content),
   })),
 });
 
-export const APIRoute = createAPIFileRoute('/api/search')({
-  GET: ({ request }) => {
-    return server.GET(request);
-  },
+export const ServerRoute = createServerFileRoute('/api/search').methods({
+  GET: async ({ request }) => server.GET(request),
 });

package/template/tanstack-start/{app → src}/routes/docs/$.tsx

@@ -1,32 +1,31 @@
 import { createFileRoute, notFound } from '@tanstack/react-router';
+import { executeMdxSync } from '@fumadocs/mdx-remote/client';
 import { DocsLayout } from 'fumadocs-ui/layouts/docs';
-import { source } from '@/lib/source';
 import {
   DocsBody,
   DocsDescription,
   DocsPage,
   DocsTitle,
 } from 'fumadocs-ui/page';
-import { executeMdxSync } from '@fumadocs/mdx-remote/client';
-import defaultMdxComponents from 'fumadocs-ui/mdx';
 import { createServerFn } from '@tanstack/react-start';
-import type { PageTree } from 'fumadocs-core/server';
 import { createCompiler } from '@fumadocs/mdx-remote';
-import * as path from 'node:path';
+import { source } from '~/lib/source';
+import path from 'node:path';
+import defaultMdxComponents from 'fumadocs-ui/mdx';
+import type { PageTree } from 'fumadocs-core/server';
+import { useMemo } from 'react';
+
+const compiler = createCompiler();
 
 export const Route = createFileRoute('/docs/$')({
   component: Page,
-  async loader({ params }) {
+  loader: async ({ params }) => {
     const slugs = (params._splat ?? '').split('/');
-
     return loader({ data: slugs });
   },
 });
 
-const compiler = createCompiler({
-  development: false,
-});
-
+// a wrapper because we don't want `loader` to be called on client-side
 const loader = createServerFn({
   method: 'GET',
 })
@@ -37,7 +36,7 @@ const loader = createServerFn({
 
     const { content, ...rest } = page.data;
     const compiled = await compiler.compileFile({
-      path: path.resolve('content/docs', page.file.path),
+      path: path.resolve('content', page.path),
       value: content,
     });
 
@@ -49,21 +48,51 @@ const loader = createServerFn({
   });
 
 function Page() {
-  const { tree, compiled, ...data } = Route.useLoaderData();
-  const { toc, default: MdxContent } = executeMdxSync(compiled);
+  const data = Route.useLoaderData();
+  const {
+    default: MDX,
+    toc,
+    tree,
+  } = useMemo(() => {
+    const result = executeMdxSync(data.compiled);
+
+    function traverse(folder: PageTree.Folder | PageTree.Root) {
+      for (const node of folder.children) {
+        if (node.type === 'page' && typeof node.icon === 'string') {
+          node.icon = (
+            <span
+              dangerouslySetInnerHTML={{
+                __html: node.icon,
+              }}
+            />
+          );
+        }
+
+        if (node.type === 'folder') traverse(node);
+      }
+    }
+
+    const tree = structuredClone(data.tree) as PageTree.Root;
+    traverse(tree);
+    return { ...result, tree };
+  }, [data]);
 
   return (
     <DocsLayout
+      tree={tree}
       nav={{
-        title: 'Tanstack Start',
+        title: 'Fumadocs Tanstack',
       }}
-      tree={tree as PageTree.Root}
     >
       <DocsPage toc={toc}>
         <DocsTitle>{data.title}</DocsTitle>
-        <DocsDescription>{data.title}</DocsDescription>
+        <DocsDescription>{data.description}</DocsDescription>
         <DocsBody>
-          <MdxContent components={defaultMdxComponents} />
+          <MDX
+            components={{
+              ...defaultMdxComponents,
+            }}
+          />
         </DocsBody>
       </DocsPage>
     </DocsLayout>

package/template/tanstack-start/{app → src}/routes/index.tsx

@@ -11,11 +11,14 @@ function Home() {
       nav={{
         title: 'Tanstack Start',
       }}
-      className="text-center py-32"
+      className="text-center py-32 justify-center"
     >
       <h1 className="font-medium text-xl mb-4">Fumadocs on Tanstack Start.</h1>
       <Link
         to="/docs/$"
+        params={{
+          _splat: '',
+        }}
         className="px-3 py-2 rounded-lg bg-fd-primary text-fd-primary-foreground font-medium text-sm mx-auto"
       >
         Open Docs

package/template/tanstack-start/tsconfig.json

@@ -1,15 +1,22 @@
 {
+  "include": ["**/*.ts", "**/*.tsx"],
   "compilerOptions": {
+    "strict": true,
+    "esModuleInterop": true,
     "jsx": "react-jsx",
-    "moduleResolution": "Bundler",
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "types": ["node", "vite/client"],
     "module": "ESNext",
-    "target": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "isolatedModules": true,
+    "resolveJsonModule": true,
     "skipLibCheck": true,
-    "strictNullChecks": true,
+    "target": "ES2022",
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
     "paths": {
-      "@/*": ["./*"]
-    }
+      "~/*": ["./src/*"]
+    },
+    "noEmit": true
   }
 }

package/template/tanstack-start/vite.config.ts

@@ -0,0 +1,21 @@
+import { tanstackStart } from '@tanstack/react-start/plugin/vite';
+import { defineConfig } from 'vite';
+import tsConfigPaths from 'vite-tsconfig-paths';
+import tailwindcss from '@tailwindcss/vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  server: {
+    port: 3000,
+  },
+  plugins: [
+    tailwindcss(),
+    tsConfigPaths({
+      projects: ['./tsconfig.json'],
+    }),
+    tanstackStart({
+      customViteReactPlugin: true,
+    }),
+    react(),
+  ],
+});