npm - @hanzo/docs-create-app - Versions diffs - 16.0.50 - Mend

@hanzo/docs-create-app 16.0.50

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (204) hide show

package/template/react-router-spa/app/docs/page.tsx ADDED Viewed

@@ -0,0 +1,53 @@
+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 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 { pageTree } = useHanzoDocsLoader(loaderData);
+  return (
+    <DocsLayout {...baseOptions()} tree={pageTree}>
+      {clientLoader.useContent(loaderData.path, {
+        className: '',
+      })}
+    </DocsLayout>
+  );
+}

package/template/react-router-spa/app/docs/search.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import { createFromSource } from '@hanzo/docs/core/search/server';
+import { source } from '@/lib/source';
+const server = createFromSource(source, {
+  language: 'english',
+});
+export async function loader() {
+  return server.staticGET();
+}

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

@@ -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-spa/app/lib/source.ts ADDED Viewed

@@ -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-spa/app/root.tsx ADDED Viewed

@@ -0,0 +1,74 @@
+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';
+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 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-spa/app/routes/home.tsx ADDED Viewed

@@ -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-spa/app/routes.ts ADDED Viewed

@@ -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-spa/content/docs/index.mdx ADDED Viewed

@@ -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-spa/content/docs/test.mdx ADDED Viewed

@@ -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-spa/example.gitignore ADDED Viewed

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

package/template/react-router-spa/package.json ADDED Viewed

@@ -0,0 +1,36 @@
+{
+  "name": "example-react-router-spa",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "react-router build",
+    "dev": "react-router dev",
+    "start": "serve ./build/client",
+    "types:check": "react-router typegen && @hanzo/docs-mdx && tsc --noEmit"
+  },
+  "dependencies": {
+    "@orama/orama": "^3.1.18",
+    "@react-router/node": "^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",
+    "serve": "^14.2.5",
+    "tailwindcss": "^4.1.18",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "vite-tsconfig-paths": "^6.0.5"
+  }
+}

package/template/react-router-spa/public/favicon.ico ADDED Viewed

Binary file

package/template/react-router-spa/react-router.config.ts ADDED Viewed

@@ -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[] = [];
+    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-spa/serve.json ADDED Viewed

@@ -0,0 +1,3 @@
+{
+  "rewrites": [{ "source": "/**", "destination": "/index.html" }]
+}

package/template/react-router-spa/source.config.ts ADDED Viewed

@@ -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-spa/tsconfig.json ADDED Viewed

@@ -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-spa/vite.config.ts ADDED Viewed

@@ -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/tanstack-start/README.md ADDED Viewed

@@ -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/content/docs/index.mdx ADDED Viewed

@@ -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/content/docs/test.mdx ADDED Viewed

@@ -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/example.gitignore ADDED Viewed

@@ -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/package.json ADDED Viewed

@@ -0,0 +1,38 @@
+{
+  "name": "example-tanstack-start",
+  "private": true,
+  "type": "module",
+  "sideEffects": false,
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "start": "node .output/server/index.mjs",
+    "preview": "vite preview",
+    "types:check": "@hanzo/docs-mdx && tsc --noEmit"
+  },
+  "dependencies": {
+    "@tanstack/react-router": "1.158.4",
+    "@tanstack/react-router-devtools": "1.158.4",
+    "@tanstack/react-start": "1.159.0",
+    "@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",
+    "srvx": "^0.11.2",
+    "tailwindcss": "^4.1.18",
+    "typescript": "^5.9.3",
+    "vite-tsconfig-paths": "^6.0.5"
+  }
+}

package/template/tanstack-start/source.config.ts ADDED Viewed

@@ -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/src/components/not-found.tsx ADDED Viewed

@@ -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/src/lib/layout.shared.tsx ADDED Viewed

@@ -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/src/lib/source.ts ADDED Viewed

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

package/template/tanstack-start/src/router.tsx ADDED Viewed

@@ -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/src/routes/__root.tsx ADDED Viewed

@@ -0,0 +1,45 @@
+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';
+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>{children}</RootProvider>
+        <Scripts />
+      </body>
+    </html>
+  );
+}

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

@@ -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: async ({ request }) => server.GET(request),
+    },
+  },
+});