Other Features

The boilerplate comes with a few other features that you might find useful.

Table of Contents

ContentLayer will generate a table of contents for you based on the headings in your markdown files.

By default, it looks for any heading up to 3rd level (i.e. #, ##, ###, etc.) and will generate a table of contents based on those headings. You can change this behavior by setting the maxLevel config option in contentlayer.config.js.

1return collectHeadingsTree(headings, { maxLevel: 4 })

The currently visible section will always be highlighted in the table of contents. You can click on it to smoothly scroll to the section.

Next/Previous Links

The boilerplate will automatically generate next/previous links for you based on the order of the files in the navigation variable defined in /components/layout/nav-menu.tsx file.

1const navigation: MenuItem[] = [
2  {
3    title: "Getting Started",
4    items: [
5      {
6        title: "Quick Start",
7        href: "/docs/getting-started/quick-start",
8        icon: <IconNorthStar />,
9      },
10      {
11        title: "Configuration",
12        href: "/docs/getting-started/config",
13        icon: <IconSettingsAutomation />,
14      },
15    ],
16    // ...
17  }
18]

The pages will be ordered based on the order of the items in the array. If you want to change the order of the pages, simply change the order of the items in the array.

Any pages that are not in the navigation array will not have next/previous links. Also, the links will generate next/previous links even if the pages are in different sections.

Items must have a target attribute set to _self in order to appear in the navigation.

Syntax Highlighting

The boilerplate comes with syntax highlighting out of the box. It uses React Syntax Highlighter and Prism under the hood.

You can change the theme for any of the available themes in React Syntax Highlighter.

Light/Dark Mode Switcher

The boilerplate comes with a light/dark mode switcher out of the box. It uses Next Themes to switch between light and dark mode.

More coming soon...

We are working on adding more features to the boilerplate. If you have any suggestions, please let me know on Twitter, GitHub or email.