Waku | Hanzo Docs

Getting Started

Before continuing, make sure to configure:

Tailwind CSS 4.
Hanzo Docs MDX: follow the Vite setup guide and create essential files like lib/source.ts.

Installation

npm

pnpm

yarn

bun

npm i @hanzo/docs

pnpm add @hanzo/docs

yarn add @hanzo/docs

bun add @hanzo/docs

Styles

Add the following to your Tailwind CSS file:

src/styles/globals.css

@import 'tailwindcss';
@import '@hanzo/docs/ui/css/neutral.css';
@import '@hanzo/docs/ui/css/preset.css';

Create Pages

Create a file for sharing layout props:

src/lib/layout.shared.tsx

import type { BaseLayoutProps } from '@hanzo/docs/ui/layouts/shared';

export function baseOptions(): BaseLayoutProps {
  return {
    nav: {
      title: 'Waku',
    },
  };
}

Create the following routes:

src/pages/docs/_layout.tsx

src/pages/docs/[...slugs].tsx

src/pages/_api/api/search.ts

import type { ReactNode } from 'react';
import { DocsLayout } from '@hanzo/docs/ui/layouts/docs';
import { source } from '@/lib/source';
import { baseOptions } from '@/lib/layout.shared';

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <DocsLayout {...baseOptions()} tree={source.getPageTree()}>
      {children}
    </DocsLayout>
  );
}

import { source } from '@/lib/source';
import { PageProps } from 'waku/router';
import defaultMdxComponents from '@hanzo/docs-base-ui/mdx';
import { DocsBody, DocsDescription, DocsPage, DocsTitle } from '@hanzo/docs-base-ui/layouts/docs/page';

export default function DocPage({ slugs }: PageProps<'/docs/[...slugs]'>) {
  const page = source.getPage(slugs);

  if (!page) {
    return (
      <div className="text-center py-12">
        <h1 className="text-3xl font-bold mb-4 text-gray-900 dark:text-gray-100">Page Not Found</h1>
        <p className="text-gray-600 dark:text-gray-400">
          The page you are looking for does not exist.
        </p>
      </div>
    );
  }

  const MDX = page.data.body;
  return (
    <DocsPage toc={page.data.toc}>
      <DocsTitle>{page.data.title}</DocsTitle>
      <DocsDescription>{page.data.description}</DocsDescription>
      <DocsBody>
        <MDX
          components={{
            ...defaultMdxComponents,
          }}
        />
      </DocsBody>
    </DocsPage>
  );
}

export async function getConfig() {
  const pages = source
    .generateParams()
    .map((item) => (item.lang ? [item.lang, ...item.slug] : item.slug));

  return {
    render: 'static' as const,
    staticPaths: pages,
  } as const;
}

import { createFromSource } from '@hanzo/docs/core/search/server';
import { source } from '@/lib/source';

export const { GET } = createFromSource(source);

Finally, wrap your entire app under Hanzo Docs providers:

src/components/provider.tsx

src/pages/_layout.tsx

'use client';
import type { ReactNode } from 'react';
import { RootProvider } from '@hanzo/docs/ui/provider/waku';

export function Provider({ children }: { children: ReactNode }) {
  return <RootProvider>{children}</RootProvider>;
}

import '@/styles/globals.css';
import type { ReactNode } from 'react';
import { Provider } from '@/components/provider';

export default function RootLayout({ children }: { children: ReactNode }) {
  return <Provider>{children}</Provider>;
}

export const getConfig = async () => {
  return {
    render: 'static',
  };
};

Done

You can start writing documents at content/docs:

content/docs/index.mdx

---
title: Hello World
---

I love Hanzo Docs