@hanzo/docs-create-app 16.0.50

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

@@ -0,0 +1,72 @@
+import { createFileRoute, notFound } from '@tanstack/react-router';
+import { DocsLayout } from '@hanzo/docs-base-ui/layouts/docs';
+import { createServerFn } from '@tanstack/react-start';
+import { source } from '@/lib/source';
+import browserCollections from '@hanzo/docs-mdx:collections/browser';
+import { DocsBody, DocsDescription, DocsPage, DocsTitle } from '@hanzo/docs-base-ui/layouts/docs/page';
+import defaultMdxComponents from '@hanzo/docs-base-ui/mdx';
+import { baseOptions } from '@/lib/layout.shared';
+import { useHanzoDocsLoader } from '@hanzo/docs-core/source/client';
+import { Suspense } from 'react';
+
+export const Route = createFileRoute('/docs/$')({
+  component: Page,
+  loader: async ({ params }) => {
+    const slugs = params._splat?.split('/') ?? [];
+    const data = await serverLoader({ data: slugs });
+    await clientLoader.preload(data.path);
+    return data;
+  },
+});
+
+const serverLoader = createServerFn({
+  method: 'GET',
+})
+  .inputValidator((slugs: string[]) => slugs)
+  .handler(async ({ data: slugs }) => {
+    const page = source.getPage(slugs);
+    if (!page) throw notFound();
+
+    return {
+      path: page.path,
+      pageTree: await source.serializePageTree(source.getPageTree()),
+    };
+  });
+
+const clientLoader = browserCollections.docs.createClientLoader({
+  component(
+    { toc, frontmatter, default: MDX },
+    // you can define props for the component
+    props: {
+      className?: string;
+    },
+  ) {
+    return (
+      <DocsPage toc={toc} {...props}>
+        <DocsTitle>{frontmatter.title}</DocsTitle>
+        <DocsDescription>{frontmatter.description}</DocsDescription>
+        <DocsBody>
+          <MDX
+            components={{
+              ...defaultMdxComponents,
+            }}
+          />
+        </DocsBody>
+      </DocsPage>
+    );
+  },
+});
+
+function Page() {
+  const data = useHanzoDocsLoader(Route.useLoaderData());
+
+  return (
+    <DocsLayout {...baseOptions()} tree={data.pageTree}>
+      <Suspense>
+        {clientLoader.useContent(data.path, {
+          className: '',
+        })}
+      </Suspense>
+    </DocsLayout>
+  );
+}

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

@@ -0,0 +1,26 @@
+import { createFileRoute, Link } from '@tanstack/react-router';
+import { HomeLayout } from '@hanzo/docs/ui/layouts/home';
+import { baseOptions } from '@/lib/layout.shared';
+
+export const Route = createFileRoute('/')({
+  component: Home,
+});
+
+function Home() {
+  return (
+    <HomeLayout {...baseOptions()}>
+      <div className="flex flex-col flex-1 justify-center px-4 py-8 text-center">
+        <h1 className="font-medium text-xl mb-4">Hanzo Docs 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
+        </Link>
+      </div>
+    </HomeLayout>
+  );
+}

package/template/tanstack-start/src/styles/app.css

@@ -0,0 +1,3 @@
+@import 'tailwindcss';
+@import '@hanzo/docs-base-ui/css/neutral.css';
+@import '@hanzo/docs-base-ui/css/preset.css';

package/template/tanstack-start/tsconfig.json

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

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

@@ -0,0 +1,33 @@
+import react from '@vitejs/plugin-react';
+import { tanstackStart } from '@tanstack/react-start/plugin/vite';
+import { defineConfig } from 'vite';
+import tsConfigPaths from 'vite-tsconfig-paths';
+import tailwindcss from '@tailwindcss/vite';
+import mdx from '@hanzo/docs-mdx/vite';
+import { nitro } from 'nitro/vite';
+
+export default defineConfig({
+  server: {
+    port: 3000,
+  },
+  plugins: [
+    mdx(await import('./source.config')),
+    tailwindcss(),
+    tsConfigPaths({
+      projects: ['./tsconfig.json'],
+    }),
+    tanstackStart({
+      prerender: {
+        enabled: true,
+      },
+    }),
+    react(),
+    // please see https://tanstack.com/start/latest/docs/framework/react/guide/hosting#nitro for guides on hosting
+    nitro({
+      preset: 'vercel',
+      vercel: {
+        entryFormat: 'node',
+      },
+    }),
+  ],
+});

package/template/tanstack-start-spa/README.md

@@ -0,0 +1,12 @@
+This is a Tanstack Start application generated with
+[Create Hanzo Docs](https://github.com/hanzoai/docs).
+
+Run development server:
+
+```bash
+npm run dev
+# or
+pnpm dev
+# or
+yarn dev
+```

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

@@ -0,0 +1,31 @@
+---
+title: Hello World
+description: Your favourite docs framework.
+icon: Rocket
+---
+
+Hey there! Hanzo Docs is the docs framework that 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 Hanzo Docs" href="https://hanzoai.github.io/docs" />
+</Cards>
+
+### CodeBlock
+
+```ts
+console.log('Hello World');
+```
+
+#### Table
+
+| Head                            | Description                         |
+| ------------------------------- | ----------------------------------- |
+| `hello`                         | Hello World                         |
+| very **important**              | Hey                                 |
+| _Surprisingly_                  | Hanzo Docs                            |
+| very long text that looks weird | hello world hello world hello world |

package/template/tanstack-start-spa/content/docs/test.mdx

@@ -0,0 +1,12 @@
+---
+title: Test
+description: This is another page
+---
+
+Hello World again!
+
+## Installation
+
+```npm
+npm i hanzo-docs-core hanzo-docs-ui
+```

package/template/tanstack-start-spa/example.gitignore

@@ -0,0 +1,18 @@
+node_modules
+
+.DS_Store
+.cache
+.vercel
+.output
+.nitro
+/build/
+/api/
+/server/build
+/public/build
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+.tanstack
+
+docs

package/template/tanstack-start-spa/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "example-tanstack-start-spa",
+  "private": true,
+  "type": "module",
+  "sideEffects": false,
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "start": "serve dist/client",
+    "preview": "vite preview",
+    "types:check": "@hanzo/docs-mdx && tsc --noEmit"
+  },
+  "dependencies": {
+    "@orama/orama": "^3.1.18",
+    "@tanstack/react-router": "1.158.4",
+    "@tanstack/react-router-devtools": "1.158.4",
+    "@tanstack/react-start": "1.159.0",
+    "@tanstack/start-static-server-functions": "1.159.1",
+    "@hanzo/docs-core": "workspace:*",
+    "@hanzo/docs-mdx": "workspace:*",
+    "@hanzo/docs-base-ui": "workspace:*",
+    "lucide-react": "^0.563.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "vite": "^7.3.1"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.18",
+    "@types/mdx": "^2.0.13",
+    "@types/node": "^25.2.1",
+    "@types/react": "^19.2.13",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.3",
+    "nitro": "npm:nitro-nightly@3.0.1-20260128-211656-ae83c97e",
+    "serve": "^14.2.5",
+    "srvx": "^0.11.2",
+    "tailwindcss": "^4.1.18",
+    "typescript": "^5.9.3",
+    "vite-tsconfig-paths": "^6.0.5"
+  }
+}

package/template/tanstack-start-spa/source.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig, defineDocs } from '@hanzo/docs/mdx/config';
+
+export const docs = defineDocs({
+  dir: 'content/docs',
+});
+
+export default defineConfig();

package/template/tanstack-start-spa/src/components/not-found.tsx

@@ -0,0 +1,28 @@
+import { Link } from '@tanstack/react-router';
+import { HomeLayout } from '@hanzo/docs/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-spa/src/components/search.tsx

@@ -0,0 +1,46 @@
+'use client';
+import {
+  SearchDialog,
+  SearchDialogClose,
+  SearchDialogContent,
+  SearchDialogHeader,
+  SearchDialogIcon,
+  SearchDialogInput,
+  SearchDialogList,
+  SearchDialogOverlay,
+  type SharedProps,
+} from '@hanzo/docs/ui/components/dialog/search';
+import { useDocsSearch } from '@hanzo/docs/core/search/client';
+import { create } from '@orama/orama';
+import { useI18n } from '@hanzo/docs/ui/contexts/i18n';
+
+function initOrama() {
+  return create({
+    schema: { _: 'string' },
+    // https://docs.orama.com/docs/orama-js/supported-languages
+    language: 'english',
+  });
+}
+
+export default function DefaultSearchDialog(props: SharedProps) {
+  const { locale } = useI18n(); // (optional) for i18n
+  const { search, setSearch, query } = useDocsSearch({
+    type: 'static',
+    initOrama,
+    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} />
+      </SearchDialogContent>
+    </SearchDialog>
+  );
+}

package/template/tanstack-start-spa/src/lib/layout.shared.tsx

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

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

@@ -0,0 +1,9 @@
+import { loader } from '@hanzo/docs-core/source';
+import { lucideIconsPlugin } from '@hanzo/docs-core/source/lucide-icons';
+import { docs } from '@hanzo/docs-mdx:collections/server';
+
+export const source = loader({
+  source: docs.toHanzoDocsSource(),
+  baseUrl: '/docs',
+  plugins: [lucideIconsPlugin()],
+});

package/template/tanstack-start-spa/src/router.tsx

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

package/template/tanstack-start-spa/src/routes/__root.tsx

@@ -0,0 +1,46 @@
+import { createRootRoute, HeadContent, Outlet, Scripts } from '@tanstack/react-router';
+import * as React from 'react';
+import appCss from '@/styles/app.css?url';
+import { RootProvider } from '@hanzo/docs/ui/provider/tanstack';
+import SearchDialog from '@/components/search';
+
+export const Route = createRootRoute({
+  head: () => ({
+    meta: [
+      {
+        charSet: 'utf-8',
+      },
+      {
+        name: 'viewport',
+        content: 'width=device-width, initial-scale=1',
+      },
+      {
+        title: 'Hanzo Docs on TanStack Start',
+      },
+    ],
+    links: [{ rel: 'stylesheet', href: appCss }],
+  }),
+  component: RootComponent,
+});
+
+function RootComponent() {
+  return (
+    <RootDocument>
+      <Outlet />
+    </RootDocument>
+  );
+}
+
+function RootDocument({ children }: { children: React.ReactNode }) {
+  return (
+    <html suppressHydrationWarning>
+      <head>
+        <HeadContent />
+      </head>
+      <body className="flex flex-col min-h-screen">
+        <RootProvider search={{ SearchDialog }}>{children}</RootProvider>
+        <Scripts />
+      </body>
+    </html>
+  );
+}

package/template/tanstack-start-spa/src/routes/api/search.ts

@@ -0,0 +1,16 @@
+import { createFileRoute } from '@tanstack/react-router';
+import { source } from '@/lib/source';
+import { createFromSource } from '@hanzo/docs/core/search/server';
+
+const server = createFromSource(source, {
+  // https://docs.orama.com/docs/orama-js/supported-languages
+  language: 'english',
+});
+
+export const Route = createFileRoute('/api/search')({
+  server: {
+    handlers: {
+      GET: () => server.staticGET(),
+    },
+  },
+});

package/template/tanstack-start-spa/src/routes/docs/$.tsx

@@ -0,0 +1,74 @@
+import { createFileRoute, notFound } from '@tanstack/react-router';
+import { DocsLayout } from '@hanzo/docs-base-ui/layouts/docs';
+import { createServerFn } from '@tanstack/react-start';
+import { source } from '@/lib/source';
+import browserCollections from '@hanzo/docs-mdx:collections/browser';
+import { DocsBody, DocsDescription, DocsPage, DocsTitle } from '@hanzo/docs-base-ui/layouts/docs/page';
+import defaultMdxComponents from '@hanzo/docs-base-ui/mdx';
+import { baseOptions } from '@/lib/layout.shared';
+import { staticFunctionMiddleware } from '@tanstack/start-static-server-functions';
+import { useHanzoDocsLoader } from '@hanzo/docs-core/source/client';
+import { Suspense } from 'react';
+
+export const Route = createFileRoute('/docs/$')({
+  component: Page,
+  loader: async ({ params }) => {
+    const slugs = params._splat?.split('/') ?? [];
+    const data = await loader({ data: slugs });
+    await clientLoader.preload(data.path);
+    return data;
+  },
+});
+
+const loader = createServerFn({
+  method: 'GET',
+})
+  .inputValidator((slugs: string[]) => slugs)
+  .middleware([staticFunctionMiddleware])
+  .handler(async ({ data: slugs }) => {
+    const page = source.getPage(slugs);
+    if (!page) throw notFound();
+
+    return {
+      path: page.path,
+      pageTree: await source.serializePageTree(source.getPageTree()),
+    };
+  });
+
+const clientLoader = browserCollections.docs.createClientLoader({
+  component(
+    { toc, frontmatter, default: MDX },
+    // you can define props for the component
+    props: {
+      className?: string;
+    },
+  ) {
+    return (
+      <DocsPage toc={toc} {...props}>
+        <DocsTitle>{frontmatter.title}</DocsTitle>
+        <DocsDescription>{frontmatter.description}</DocsDescription>
+        <DocsBody>
+          <MDX
+            components={{
+              ...defaultMdxComponents,
+            }}
+          />
+        </DocsBody>
+      </DocsPage>
+    );
+  },
+});
+
+function Page() {
+  const data = useHanzoDocsLoader(Route.useLoaderData());
+
+  return (
+    <DocsLayout {...baseOptions()} tree={data.pageTree}>
+      <Suspense>
+        {clientLoader.useContent(data.path, {
+          className: '',
+        })}
+      </Suspense>
+    </DocsLayout>
+  );
+}

package/template/tanstack-start-spa/src/routes/index.tsx

@@ -0,0 +1,26 @@
+import { createFileRoute, Link } from '@tanstack/react-router';
+import { HomeLayout } from '@hanzo/docs-base-ui/layouts/home';
+import { baseOptions } from '@/lib/layout.shared';
+
+export const Route = createFileRoute('/')({
+  component: Home,
+});
+
+function Home() {
+  return (
+    <HomeLayout {...baseOptions()}>
+      <div className="flex flex-col items-center justify-center text-center flex-1">
+        <h1 className="font-medium text-xl mb-4">Hanzo Docs 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
+        </Link>
+      </div>
+    </HomeLayout>
+  );
+}

package/template/tanstack-start-spa/src/styles/app.css

@@ -0,0 +1,3 @@
+@import 'tailwindcss';
+@import '@hanzo/docs-base-ui/css/neutral.css';
+@import '@hanzo/docs-base-ui/css/preset.css';

package/template/tanstack-start-spa/tsconfig.json

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

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

@@ -0,0 +1,42 @@
+import react from '@vitejs/plugin-react';
+import { tanstackStart } from '@tanstack/react-start/plugin/vite';
+import { defineConfig } from 'vite';
+import tsConfigPaths from 'vite-tsconfig-paths';
+import tailwindcss from '@tailwindcss/vite';
+import mdx from '@hanzo/docs-mdx/vite';
+import { nitro } from 'nitro/vite';
+
+export default defineConfig({
+  server: {
+    port: 3000,
+  },
+  plugins: [
+    mdx(await import('./source.config')),
+    tailwindcss(),
+    tsConfigPaths({
+      projects: ['./tsconfig.json'],
+    }),
+    tanstackStart({
+      spa: {
+        enabled: true,
+        prerender: {
+          outputPath: 'index.html',
+          enabled: true,
+          crawlLinks: true,
+        },
+      },
+
+      pages: [
+        {
+          path: '/docs',
+        },
+        {
+          path: '/api/search',
+        },
+      ],
+    }),
+    react(),
+    // please see https://tanstack.com/start/latest/docs/framework/react/guide/hosting#nitro for guides on hosting
+    nitro(),
+  ],
+});

package/template/waku/README.md

@@ -0,0 +1,11 @@
+This is a Waku application generated with [Create Hanzo Docs](https://github.com/hanzoai/docs).
+
+Run development server:
+
+```bash
+npm run dev
+# or
+pnpm dev
+# or
+yarn dev
+```