Skip to main content

How to use Docusaurus

tip

See Set up Docusaurus for details on how to set Docusaurus up for your project.

Create a Doc​

info

For more information see Docusaurus's documentation on docs

Create a markdown file, greeting.md, and place it under the docs/repo-configuration/apps/docusaurus directory.

docusaurus # root directory of your documentation project
├── docs
│   └── repo-configuration
│       └── apps
│           └── docusaurus
│               └── greeting.md
├── src
│   └── pages
├── docusaurus.config.js
├── ...
---
description: Create a doc page with rich content.
---

# Hello from Docusaurus

Are you ready to create the documentation site for your open source project?

## Headers

will show up on the table of contents on the upper right

So that your users will know what this page is all about without scrolling down or even without reading too much.

## Only h2 and h3 will be in the TOC by default.

You can configure the TOC heading levels either per-document or in the theme configuration.

The headers are well-spaced so that the hierarchy is clear.

- lists will help you
- present the key points
- that you want your users to remember
  - and you may nest them
    - multiple times

You should now see a new entry in the sidebar beneath this doc.

Create a Sidebar​

Docusaurus can create a sidebar automatically from your filesystem structure: each folder creates a sidebar category, and each file creates a doc link.

To create a new sidebar first create a new directory in docs/ called demo with an empty file test.md.

Next modify sidebars.ts to create a new autogenerated sidebar:

const sidebars: SidebarsConfig = {
  repoConfigurationSidebar: [
    { type: "autogenerated", dirName: "repo-configuration" },
  ],
  demoSidebar: [{ type: "autogenerated", dirName: "demo" }],
};

Add the Sidebar to the Navbar​

In docusaurus.config.ts modify the themeConfig.navbar.items to include your new sidebar:

items: [
    {
        type: "docSidebar",
        sidebarId: "repoConfigurationSidebar",
        position: "left",
        label: "Repo Structure",
    },
    {
        type: "docSidebar",
        sidebarId: "demoSidebar",
        position: "left",
        label: "Demo",
    },
    {
        href: "https://github.com/Labrys-Group/create-t3-turbo-mongo",
        label: "GitHub",
        position: "right",
    },
],

Now you should be able to access the new sidebar from the navbar at the top of the page.

tip

Creating new sidebars and adding them to the navbar can help to organize content within your documentation.