Skip to main content

Docusaurus Cheatsheet

Create a new project​

npx create-docusaurus@latest my-website classic --typescript
npm run start

Makefile

.PHONY: start update count-build-files

start:
	npm run start

count-build-files:
	@echo "Number of files in build directory: $(shell find build -type f | wc -l)"

update:
	npm i @docusaurus/core@latest @docusaurus/plugin-google-gtag@latest @docusaurus/preset-classic@latest @docusaurus/module-type-aliases@latest @docusaurus/tsconfig@latest @docusaurus/types@latest

Edit docusaurus.config.ts to change items:

  • type by default is a link item
    • dropdown provides a dropdown menu
    • docSidebar allowing using sidebarId instead of to so you can change the sidebar without updating the navbar
  • position has left or `right
const config: Config = {
    // ...
    // themConfig > navBar
    title: 'at15',
    logo: {
        alt: 'at15 logo',
        src: 'img/at15.png',
    },
    items: [
        {to: '/blog', label: 'Blog', position: 'left'},
        {
            type: 'docSidebar',
            sidebarId: 'cheatSheetSidebar',
            position: 'left',
            label: 'CheatSheet',
        },
        {
            type: 'dropdown',
            label: 'Programming Languages',
            position: 'left',
            items: [
                {
                    label: 'General',
                    to: '/docs/programming-language',
                },
                {
                    label: 'Java',
                    to: '/docs/java',
                },
            ]
        },
        {
            label: 'About',
            position: 'right',
            to: '/about',
        },
    ]
}

The default sidebar is generated for the entire docs folder. However you can mix manual and generated sidebars. For example for each folder under docs you want to have a separate sidebar.

docs
   book
   flutter
   tennis
const sidebars: SidebarsConfig = {
    // By default, Docusaurus generates a sidebar from the docs folder structure
    // tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],

    bookSidebar: [{type: 'autogenerated', dirName: 'book'}],
    flutterSidebar: [{type: 'autogenerated', dirName: 'flutter'}],
    tennisSidebar: [{type: 'autogenerated', dirName: 'tennis'}],
}

Table of Content​

https://docusaurus.io/docs/markdown-features/toc#table-of-contents-heading-level

{
  themeConfig: {
    tableOfContents: {
      minHeadingLevel: 2, 
      maxHeadingLevel: 5
    }
  }
}