Page

Page is the base element of a documentation, it includes Table of contents, Footer, and Breadcrumb.

Usage

Pass the current page URL and its table of contents to the component.

import { DocsPage, DocsBody } from 'next-docs-ui/page';
 
<DocsPage url={url} toc={toc}>
  <DocsBody>...</DocsBody>
</DocsPage>

Body

To apply the Typography styles, wrap your content in the DocsBody component.

import { DocsBody } from 'next-docs-ui/page';
 
<DocsBody>
  <h1>This heading looks good!</h1>
</DocsBody>

Table of Contents

It is an array with all the headings in your document. For Markdown or MDX documents, You can parse TOC by using the TOC Utility.

Also, you can easily customise or disable TOC in your documentation.

Last Update Time

Since you might have different version controls (e.g. Github) or it's from remote sources like Sanity, Next Docs UI doesn't display last updated time by default.

For Git hosted documents, you can use getGitLastEditTime provided by Next Docs Zeta.

import { getGitLastEditTime } from 'next-docs-zeta/server'
 
const time = await getGitLastEditTime(
  'fuma-nama/next-docs',
  'apps/docs/content/' + page._raw.sourceFilePath
)
 
<DocsPage lastUpdate={time} />

Footer

Footer is a navigation element that has two buttons to jump to the next and previous pages. By default, it uses the findNeighbour utility to find neighbour pages.

You may override or disable it by passing false.

Breadcrumb

For now, You can't control the behaviours of breadcrumb.