Vite | Hanzo Docs

Setup

Installation

npm

pnpm

yarn

bun

npm i @hanzo/docs @types/mdx

pnpm add @hanzo/docs @types/mdx

yarn add @hanzo/docs @types/mdx

bun add @hanzo/docs @types/mdx

Create the configuration file:

source.config.ts

import { defineDocs } from '@hanzo/docs/mdx/config';

export const docs = defineDocs({
  dir: 'content/docs',
});

Add the Vite plugin:

Vite

Waku

vite.config.ts

import { defineConfig } from 'vite';
import mdx from '@hanzo/docs/mdx/vite';
import * as MdxConfig from './source.config';

export default defineConfig({
  plugins: [
    mdx(MdxConfig),
    // ...
  ],
});

waku.config.ts

import { type Config, defineConfig } from 'waku/config';
import mdx from '@hanzo/docs/mdx/vite';
import * as MdxConfig from './source.config.js';
import tsconfigPaths from 'vite-tsconfig-paths';
import type { UserConfig } from 'vite';

export default defineConfig({
  vite: {
    plugins: [
      mdx(MdxConfig),
      tsconfigPaths(),
    ],
  } satisfies UserConfig as Config['vite'],
});

Setup an import alias (recommended):

tsconfig.json

{
  "compilerOptions": {
    "paths": {
      "@hanzo/docs-mdx:collections/*": [".source/*"]
    }
  }
}

You might need to configure vite-tsconfig-paths plugin for path alias.

Integrate with Hanzo Docs

To integrate with Hanzo Docs, make a lib/source.ts file:

app/lib/source.ts

import { docs } from '@hanzo/docs-mdx:collections/server';
import { loader } from '@hanzo/docs/core/source';

export const source = loader({
  baseUrl: '/docs',
  source: docs.toHanzo DocsSource(),
});

The .source folder will be generated when you run development server or production build.

Done

You can now write content in content/docs folder.

What is Next?

Accessing Collections

Learn how to access collection outputs.

Lazy Loading

Hit performance bottleneck? You can try lazy loading.