Page Tree Builder

Usage

Create a builder instance, and pass your pages and meta files as options.

import { createPageTreeBuilder } from 'next-docs-zeta/server';
 
const builder = createPageTreeBuilder({
  metas,
  pages,
});
 
const pageTree = builder.build();

Multiple Trees

You can build multiple trees with the same builder instance.

builder.build({ root: 'docs/ui' });
builder.build({ root: 'docs/headless' });

Internationalization

You can also build internationalized page tree with the buildI18n method, it returns a language-to-page-tree map.

builder.buildI18n({ languages });

Pages Structure

Shared conventions for structuring your pages.

File

By default, it uses MDX and supports title and description frontmatter:

---
title: My Page
description: Best document ever
---
 
## Learn More

You may edit the configuration file to add additional properties.

Folder

You can use folders to organize multiple pages, the uppercased name of the folder will be used as the display name.

Meta

You can also customize the folder name, order of pages, or adding a separator by creating a meta.json in the folder.

{
  "title": "Name of Folder",
  "pages": ["guide", "---Separator---", "components"] // file name of pages
}

Separator

As you see, you can define a separator in meta by adding a item surrounded by ---.

Rest

Tired to specify the order of every single page in meta.json? You can use ... to automatically add and sort remaining items.

{
  "title": "Folder",
  "pages": ["guide", "---Separator---", "..."]
}

Extract

You can extract the items from a folder with ...folder_name.

{
  "title": "Folder",
  "pages": ["guide", "...folder"]
}

Icons

It is supported to have custom icons for a page or a folder. Add an icon property to the frontmatter or meta.json, and configure icon handler via resolveIcon option.

---
title: My Page
icon: MyIcon
---

createPageTreeBuilder({
  resolveIcon: (icon) => {
    // load icon from library
    const res = require('lucide-react');
    icon = icon.trim();
 
    if (res[icon]) return createElement(res[icon]);
    return undefined;
  },
});

With Locale

You can create a page for specific language by adding .{locale} to your MDX file name. Pages can't be language-specific, you must create a page for default locale in order to have its localized version.

For meta files, you have to add -{locale} to the file name instead (e.g. meta-cn.json).

Assume your default language is en.