create-fumadocs-app 15.1.3 → 15.2.1

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()],
+});

package/template/tanstack-start/README.md

@@ -0,0 +1,12 @@
+This is a Tanstack Start 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/tanstack-start/app/api.ts

@@ -0,0 +1,6 @@
+import {
+  createStartAPIHandler,
+  defaultAPIFileRouteHandler,
+} from '@tanstack/react-start/api';
+
+export default createStartAPIHandler(defaultAPIFileRouteHandler);

package/template/tanstack-start/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/tanstack-start/app/client.tsx

@@ -0,0 +1,7 @@
+import { hydrateRoot } from 'react-dom/client';
+import { StartClient } from '@tanstack/react-start';
+import { createRouter } from './router';
+
+const router = createRouter();
+
+hydrateRoot(document, <StartClient router={router} />);

package/template/tanstack-start/app/router.tsx

@@ -0,0 +1,15 @@
+import { createRouter as createTanStackRouter } from '@tanstack/react-router';
+import { routeTree } from './routeTree.gen';
+
+export function createRouter() {
+  return createTanStackRouter({
+    routeTree,
+    scrollRestoration: true,
+  });
+}
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: ReturnType<typeof createRouter>;
+  }
+}

package/template/tanstack-start/app/routes/__root.tsx

@@ -0,0 +1,49 @@
+import { type ReactNode } from 'react';
+import { Outlet, createRootRoute, HeadContent } from '@tanstack/react-router';
+import { RootProvider } from 'fumadocs-ui/provider/base';
+import appCss from '../app.css?url';
+import { TanstackProvider } from 'fumadocs-core/framework/tanstack';
+import { Scripts } from '@tanstack/react-router';
+
+export const Route = createRootRoute({
+  head: () => ({
+    meta: [
+      {
+        charSet: 'utf-8',
+      },
+      {
+        name: 'viewport',
+        content: 'width=device-width, initial-scale=1',
+      },
+      {
+        title: 'Fumadocs on TanStack Start',
+      },
+    ],
+    links: [{ rel: 'stylesheet', href: appCss }],
+  }),
+  component: RootComponent,
+});
+
+function RootComponent() {
+  return (
+    <RootDocument>
+      <Outlet />
+    </RootDocument>
+  );
+}
+
+function RootDocument({ children }: Readonly<{ children: ReactNode }>) {
+  return (
+    <html suppressHydrationWarning>
+      <head>
+        <HeadContent />
+      </head>
+      <body>
+        <TanstackProvider>
+          <RootProvider>{children}</RootProvider>
+        </TanstackProvider>
+        <Scripts />
+      </body>
+    </html>
+  );
+}

package/template/tanstack-start/app/routes/api/search.ts

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

package/template/tanstack-start/app/routes/docs/$.tsx

@@ -0,0 +1,71 @@
+import { createFileRoute, notFound } from '@tanstack/react-router';
+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';
+
+export const Route = createFileRoute('/docs/$')({
+  component: Page,
+  async loader({ params }) {
+    const slugs = (params._splat ?? '').split('/');
+
+    return loader({ data: slugs });
+  },
+});
+
+const compiler = createCompiler({
+  development: false,
+});
+
+const loader = createServerFn({
+  method: 'GET',
+})
+  .validator((slugs: string[]) => slugs)
+  .handler(async ({ data: slugs }) => {
+    const page = source.getPage(slugs);
+    if (!page) throw notFound();
+
+    const { content, ...rest } = page.data;
+    const compiled = await compiler.compileFile({
+      path: path.resolve('content/docs', page.file.path),
+      value: content,
+    });
+
+    return {
+      tree: source.pageTree as object,
+      ...rest,
+      compiled: compiled.toString(),
+    };
+  });
+
+function Page() {
+  const { tree, compiled, ...data } = Route.useLoaderData();
+  const { toc, default: MdxContent } = executeMdxSync(compiled);
+
+  return (
+    <DocsLayout
+      nav={{
+        title: 'Tanstack Start',
+      }}
+      tree={tree as PageTree.Root}
+    >
+      <DocsPage toc={toc}>
+        <DocsTitle>{data.title}</DocsTitle>
+        <DocsDescription>{data.title}</DocsDescription>
+        <DocsBody>
+          <MdxContent components={defaultMdxComponents} />
+        </DocsBody>
+      </DocsPage>
+    </DocsLayout>
+  );
+}

package/template/tanstack-start/app/routes/index.tsx

@@ -0,0 +1,25 @@
+import { createFileRoute, Link } from '@tanstack/react-router';
+import { HomeLayout } from 'fumadocs-ui/layouts/home';
+
+export const Route = createFileRoute('/')({
+  component: Home,
+});
+
+function Home() {
+  return (
+    <HomeLayout
+      nav={{
+        title: 'Tanstack Start',
+      }}
+      className="text-center py-32"
+    >
+      <h1 className="font-medium text-xl mb-4">Fumadocs on Tanstack Start.</h1>
+      <Link
+        to="/docs/$"
+        className="px-3 py-2 rounded-lg bg-fd-primary text-fd-primary-foreground font-medium text-sm mx-auto"
+      >
+        Open Docs
+      </Link>
+    </HomeLayout>
+  );
+}

package/template/tanstack-start/app/ssr.tsx

@@ -0,0 +1,13 @@
+// app/ssr.tsx
+import {
+  createStartHandler,
+  defaultStreamHandler,
+} from '@tanstack/react-start/server';
+import { getRouterManifest } from '@tanstack/react-start/router-manifest';
+
+import { createRouter } from './router';
+
+export default createStartHandler({
+  createRouter,
+  getRouterManifest,
+})(defaultStreamHandler);

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

@@ -0,0 +1,43 @@
+import { defineConfig } from '@tanstack/react-start/config';
+import tsConfigPaths from 'vite-tsconfig-paths';
+import tailwindcss from '@tailwindcss/vite';
+
+export default defineConfig({
+  server: {
+    hooks: {
+      'prerender:routes': async (routes) => {
+        const { source } = await import('./lib/source');
+        const pages = source.getPages();
+
+        for (const page of pages) {
+          routes.add(page.url);
+        }
+      },
+    },
+    prerender: {
+      routes: ['/'],
+      crawlLinks: true,
+    },
+  },
+  vite: {
+    build: {
+      rollupOptions: {
+        // Shiki results in a huge bundle because Rollup tries to bundle every language/theme
+        external: ['shiki'],
+        // most React.js libraries now include 'use client'
+        onwarn(warning, warn) {
+          if (warning.code === 'MODULE_LEVEL_DIRECTIVE') {
+            return;
+          }
+          warn(warning);
+        },
+      },
+    },
+    plugins: [
+      tsConfigPaths({
+        projects: ['./tsconfig.json'],
+      }),
+      tailwindcss(),
+    ],
+  },
+});

package/template/tanstack-start/content/docs/index.mdx

@@ -0,0 +1,35 @@
+---
+title: Hello World
+description: |
+  Your first `document`
+  You'll love it!
+---
+
+Hey there! Fumadocs is a docs framework built for Next.js, but do you know it also works on Tanstack Start?
+
+## Heading
+
+Hello World!
+
+<Cards>
+  <Card
+    title="Learn more about Tanstack Start"
+    href="https://tanstack.com/start"
+  />
+  <Card title="Learn more about Fumadocs" href="https://fumadocs.vercel.app" />
+</Cards>
+
+### CodeBlock
+
+```ts
+console.log('Hello World');
+```
+
+#### Table
+
+| Head                            | Description                         |
+| ------------------------------- | ----------------------------------- |
+| `hello`                         | Hello World                         |
+| very **important**              | Hey                                 |
+| _Surprisingly_                  | Fumadocs                            |
+| very long text that looks weird | hello world hello world hello world |

package/template/tanstack-start/example.gitignore

@@ -0,0 +1,4 @@
+routeTree.gen.ts
+node_modules
+.output
+.vinxi

package/template/tanstack-start/lib/source.ts

@@ -0,0 +1,70 @@
+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';
+import FastGlob from 'fast-glob';
+import * as fs from 'node:fs';
+
+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 = FastGlob.sync('content/docs/**/*').map((file) => {
+    return [file, fs.readFileSync(file).toString()];
+  });
+}
+
+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/tanstack-start/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "moduleResolution": "Bundler",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "types": ["node", "vite/client"],
+    "module": "ESNext",
+    "target": "ESNext",
+    "skipLibCheck": true,
+    "strictNullChecks": true,
+    "paths": {
+      "@/*": ["./*"]
+    }
+  }
+}