Page

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

Usage

Pass table of contents to the component.

import { DocsPage } from 'next-docs-ui/page'
 
<DocsPage toc={toc}>
  <MDXContent>...</MDXContent>
</DocsPage>

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(
  'SonMooSans/next-docs',
  'apps/docs/content/' + page._raw.sourceFilePath
)
 
<DocsPage lastUpdate={time} />

Footer

You need to manually enable it by passing the previous and next page to the footer prop.

To obtain these pages, it's recommended to use the Get Neighbours Utility.

Example

import { findNeighbour } from 'next-docs-zeta/server'
 
// Get the url of page
const url = getPageUrl(page.slug)
const neighbours = findNeighbour(tree, url)
 
<DocsPage footer={neighbours} />

Breadcrumb

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