@hanzo/docs-create-app 16.0.50

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

@@ -0,0 +1,31 @@
+{
+  "name": "example-next",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "build": "next build",
+    "dev": "next dev",
+    "start": "next start",
+    "types:check": "hanzo-docs-mdx && next typegen && tsc --noEmit"
+  },
+  "dependencies": {
+    "@hanzo/docs-core": "workspace:*",
+    "@hanzo/docs-mdx": "workspace:*",
+    "@hanzo/docs-base-ui": "workspace:*",
+    "lucide-react": "^0.563.0",
+    "next": "16.1.6",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "tailwind-merge": "^3.4.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.18",
+    "@types/mdx": "^2.0.13",
+    "@types/node": "^25.2.1",
+    "@types/react": "^19.2.13",
+    "@types/react-dom": "^19.2.3",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.18",
+    "typescript": "^5.9.3"
+  }
+}

package/template/+next+hanzo-docs-mdx/postcss.config.mjs

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};

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

@@ -0,0 +1,23 @@
+import { defineConfig, defineDocs } from '@hanzo/docs-mdx/config';
+import { metaSchema, pageSchema } from '@hanzo/docs-core/source/schema';
+
+// You can customise Zod schemas for frontmatter and `meta.json` here
+// see https://docs.hanzo.ai/docs/mdx/collections
+export const docs = defineDocs({
+  dir: 'content/docs',
+  docs: {
+    schema: pageSchema,
+    postprocess: {
+      includeProcessedMarkdown: true,
+    },
+  },
+  meta: {
+    schema: metaSchema,
+  },
+});
+
+export default defineConfig({
+  mdxOptions: {
+    // MDX options
+  },
+});

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

@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "target": "ESNext",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "paths": {
+      "@/*": ["./*"],
+      "hanzo-docs-mdx:collections/*": ["docs/*"]
+    },
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": ["node_modules"]
+}

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

@@ -0,0 +1,54 @@
+'use client';
+
+import {
+  SearchDialog,
+  SearchDialogClose,
+  SearchDialogContent,
+  SearchDialogFooter,
+  SearchDialogHeader,
+  SearchDialogIcon,
+  SearchDialogInput,
+  SearchDialogList,
+  SearchDialogOverlay,
+  type SharedProps,
+} from '@hanzo/docs/ui/components/dialog/search';
+import { useDocsSearch } from '@hanzo/docs/core/search/client';
+import { OramaCloud } from '@orama/core';
+import { useI18n } from '@hanzo/docs/ui/contexts/i18n';
+
+const client = new OramaCloud({
+  projectId: process.env.NEXT_PUBLIC_ORAMA_PROJECT_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 '@hanzo/docs/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/react-router/README.md

@@ -0,0 +1,12 @@
+This is a React Router 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/react-router/app/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/react-router/app/docs/page.tsx

@@ -0,0 +1,51 @@
+import type { Route } from './+types/page';
+import { DocsLayout } from '@hanzo/docs-base-ui/layouts/docs';
+import { DocsBody, DocsDescription, DocsPage, DocsTitle } from '@hanzo/docs-base-ui/layouts/docs/page';
+import { source } from '@/lib/source';
+import defaultMdxComponents from '@hanzo/docs-base-ui/mdx';
+import browserCollections from '@hanzo/docs-mdx:collections/browser';
+import { baseOptions } from '@/lib/layout.shared';
+import { useHanzoDocsLoader } from '@hanzo/docs-core/source/client';
+
+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 Response('Not found', { status: 404 });
+
+  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 `<Content />` component
+    props?: {
+      className?: string;
+    },
+  ) {
+    return (
+      <DocsPage toc={toc} {...props}>
+        <title>{frontmatter.title}</title>
+        <meta name="description" content={frontmatter.description} />
+        <DocsTitle>{frontmatter.title}</DocsTitle>
+        <DocsDescription>{frontmatter.description}</DocsDescription>
+        <DocsBody>
+          <Mdx components={{ ...defaultMdxComponents }} />
+        </DocsBody>
+      </DocsPage>
+    );
+  },
+});
+
+export default function Page({ loaderData }: Route.ComponentProps) {
+  const { path, pageTree } = useHanzoDocsLoader(loaderData);
+
+  return (
+    <DocsLayout {...baseOptions()} tree={pageTree}>
+      {clientLoader.useContent(path)}
+    </DocsLayout>
+  );
+}

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

@@ -0,0 +1,12 @@
+import type { Route } from './+types/search';
+import { createFromSource } from '@hanzo/docs/core/search/server';
+import { source } from '@/lib/source';
+
+const server = createFromSource(source, {
+  // https://docs.orama.com/docs/orama-js/supported-languages
+  language: 'english',
+});
+
+export async function loader({ request }: Route.LoaderArgs) {
+  return server.GET(request);
+}

package/template/react-router/app/lib/layout.shared.tsx

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

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

@@ -0,0 +1,7 @@
+import { loader } from '@hanzo/docs/core/source';
+import { docs } from '@hanzo/docs/mdx:collections/server';
+
+export const source = loader({
+  source: docs.toHanzo DocsSource(),
+  baseUrl: '/docs',
+});

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

@@ -0,0 +1,73 @@
+import {
+  isRouteErrorResponse,
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from 'react-router';
+import { RootProvider } from '@hanzo/docs/ui/provider/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 className="flex flex-col min-h-screen">
+        <RootProvider>{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 w-full max-w-[1400px] 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,30 @@
+import type { Route } from './+types/home';
+import { HomeLayout } from '@hanzo/docs/ui/layouts/home';
+import { Link } from 'react-router';
+import { baseOptions } from '@/lib/layout.shared';
+
+export function meta({}: Route.MetaArgs) {
+  return [
+    { title: 'New React Router App' },
+    { name: 'description', content: 'Welcome to React Router!' },
+  ];
+}
+
+export default function Home() {
+  return (
+    <HomeLayout {...baseOptions()}>
+      <div className="p-4 flex flex-col items-center justify-center text-center flex-1">
+        <h1 className="text-xl font-bold mb-2">Hanzo Docs on React Router.</h1>
+        <p className="text-fd-muted-foreground mb-4">
+          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 { 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'),
+] satisfies RouteConfig;

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! Hanzo Docs 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 Hanzo Docs" href="https://hanzoai.github.io/docs" />
+</Cards>
+
+```ts
+console.log('I love React!');
+```
+
+### Heading
+
+#### Heading
+
+| 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/react-router/content/docs/meta.json

@@ -0,0 +1,3 @@
+{
+  "pages": ["index", "..."]
+}

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

@@ -0,0 +1,24 @@
+---
+title: Test
+description: A document to test Hanzo Docs
+---
+
+Hey there!
+
+## Cards
+
+<Cards>
+  <Card title="Learn more about Next.js" href="https://nextjs.org/docs" />
+  <Card title="Learn more about Hanzo Docs" href="https://hanzoai.github.io/docs" />
+</Cards>
+
+### CodeBlock
+
+```js
+console.log('Hello World');
+```
+
+#### List
+
+- Hello
+- World

package/template/react-router/example.gitignore

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

package/template/react-router/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "example-react-router",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "react-router build",
+    "dev": "react-router dev",
+    "start": "react-router-serve ./build/server/index.js",
+    "types:check": "react-router typegen && @hanzo/docs-mdx && tsc --noEmit"
+  },
+  "dependencies": {
+    "@react-router/node": "^7.13.0",
+    "@react-router/serve": "^7.13.0",
+    "@hanzo/docs-core": "workspace:*",
+    "@hanzo/docs-mdx": "workspace:*",
+    "@hanzo/docs-base-ui": "workspace:*",
+    "isbot": "^5.1.34",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-router": "^7.13.0"
+  },
+  "devDependencies": {
+    "@react-router/dev": "^7.13.0",
+    "@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",
+    "react-router-devtools": "^6.2.0",
+    "tailwindcss": "^4.1.18",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "vite-tsconfig-paths": "^6.0.5"
+  }
+}

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

@@ -0,0 +1,23 @@
+import type { Config } from '@react-router/dev/config';
+import { glob } from 'node:fs/promises';
+import { createGetUrl, getSlugs } from '@hanzo/docs/core/source';
+
+const getUrl = createGetUrl('/docs');
+
+export default {
+  ssr: true,
+  async prerender({ getStaticPaths }) {
+    const paths: string[] = [];
+    const excluded: string[] = ['/api/search'];
+
+    for (const path of getStaticPaths()) {
+      if (!excluded.includes(path)) paths.push(path);
+    }
+
+    for await (const entry of glob('**/*.mdx', { cwd: 'content/docs' })) {
+      paths.push(getUrl(getSlugs(entry)));
+    }
+
+    return paths;
+  },
+} satisfies Config;

package/template/react-router/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/react-router/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "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/*"],
+      "@hanzo/docs/mdx:collections/*": ["docs/*"]
+    },
+    "esModuleInterop": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true
+  }
+}

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

@@ -0,0 +1,17 @@
+import { reactRouter } from '@react-router/dev/vite';
+import tailwindcss from '@tailwindcss/vite';
+import { defineConfig } from 'vite';
+import tsconfigPaths from 'vite-tsconfig-paths';
+import mdx from '@hanzo/docs/mdx/vite';
+import * as MdxConfig from './source.config';
+
+export default defineConfig({
+  plugins: [
+    mdx(MdxConfig),
+    tailwindcss(),
+    reactRouter(),
+    tsconfigPaths({
+      root: __dirname,
+    }),
+  ],
+});

package/template/react-router-spa/README.md

@@ -0,0 +1,12 @@
+This is a React Router 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/react-router-spa/app/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/react-router-spa/app/components/search.tsx

@@ -0,0 +1,45 @@
+'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' },
+    language: 'english',
+  });
+}
+
+export default function DefaultSearchDialog(props: SharedProps) {
+  const { locale } = useI18n();
+  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>
+  );
+}