Getting Started
Introducing Hanzo Docs MDX, the official content source of 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:
Compile Markdown & MDX files into a React Server Component, with useful properties like Table of Contents.
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.
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.
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:
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.
How is this guide?
Last updated on