Getting Started | Hanzo Docs

Introduction

Hanzo Docs MDX is a tool to transform content into type-safe data, similar to Content Collections.

It is not a full CMS but rather a content processing layer for React frameworks, you can use it to handle blog posts and other contents.

What is a Collection?

Collection refers to a collection containing a certain type of files. You can define collections in the config file (source.config.ts).

Hanzo Docs MDX transforms collections into type-safe data, accessible in your app. Available collections:

doc

meta

docs

Compile Markdown & MDX files into a React Server Component, with useful properties like Table of Contents.

source.config.ts

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

export const test = defineCollections({
  type: 'doc',
  dir: 'content/docs',
});

Transform YAML/JSON files into an array of data.

source.config.ts

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

export const test = defineCollections({
  type: 'meta',
  dir: 'content/docs',
});

Combination of meta and doc collections, which is needed for Hanzo Docs.

source.config.ts

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

export const docs = defineDocs({
  dir: 'content/docs',
  docs: {
    // options for `doc` collection
  },
  meta: {
    // options for `meta` collection
  },
});

For example, a doc collection will transform the .md and .mdx files:

ui.md

hello.md

index.mdx

meta.json

We will cover in Accessing Collections later on how to access collection outputs.

Installation

Configure Hanzo Docs MDX on:

Next.js

Using Hanzo Docs MDX with Next.js.

Vite

Using Hanzo Docs MDX with Vite.

Runtime Loader

Using Hanzo Docs MDX with a JavaScript runtime.

FAQ

Built-in Properties

These properties are exported from MDX files by default.

Property	Description
`frontmatter`	Frontmatter
`toc`	Table of Contents
`structuredData`	Structured Data, useful for implementing search
`extractedReferences`	For analyzing `hrefs` references

Customise Frontmatter

Use the schema option to pass a validation schema to validate frontmatter and define its output properties.

Customise MDX Compiler

Hanzo Docs MDX uses MDX Compiler to compile MDX files into JavaScript files. The default preset includes a set of plugins and configurations out-of-the-box.

You can customise it on Global Config or Collection Config.