Skip to main content

Docusaurus

Doc front matter fields​

https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-docs#markdown-front-matter

[ESLint](javascript/eslint.md#setup)
[ESLint](/javascript/eslint.md#setup)
[ESLint](/javascript/eslint#setup)

All options produce the same link.

Important: when using the first option you need to add .md, otherwise you get /dev/javascript/eslint#setup instead of /javascript/eslint#setup.

https://docusaurus.io/docs/sidebar

https://docusaurus.io/docs/sidebar/items

sidebars.js
const sidebars = {
  http: [
    'http/http',
    'http/https',
    'http/cors',
    'http/csp',
    // There are 2 equivalent ways to make the sidebar label different than the front matter 'title'.
    // 1) At the doc front matter set 'sidebar_label'.
    // 2) Do this:
    {
      type: 'doc',
      id: 'http/headers',
      label: 'Headers',
    },
    // We can have external links:
    {
      type: 'link',
      label: 'RFC 7231',
      href: 'https://httpwg.org/specs/rfc7231.html',
    },
  ],
}

The generated index route will be /category/aws, and the page is accessible by clicking the dropdown.

const sidebars = {
  cloud: [
    'cloud/cloud',
    'cloud/kubernetes',
    'cloud/terraform',
    {
      type: 'category',
      label: 'AWS',
      link: {
        type: 'generated-index',
        title: 'AWS',
        description: 'Amazon Web Services',
      },
      collapsed: false,
      items: [
        'cloud/aws/aws', // Actual link to this page will be '/cloud/aws'
        'cloud/aws/iam',
        'cloud/aws/ec2',
        'cloud/aws/s3',
      ],
    },
    'cloud/heroku',
  ],
}

https://docusaurus.io/docs/sidebar/items#category-shorthand

const sidebars = {
  docs: {
    Docusaurus: ['docs/doc1', 'docs/doc2', 'docs/doc3'],
    Features: ['docs/mdx'],
    'Docusaurus Tutorial': [
      'docs/create-a-page',
      'docs/create-a-document',
      'docs/markdown-features',
    ],
  },
}

Debug​

http://localhost:3000/__docusaurus/debug

https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-debug

Routes​

Routes panel: http://localhost:3000/__docusaurus/debug/routes

https://docusaurus.io/docs/advanced/routing

Upgrade​

This is the message shown at the terminal when you do npm start:

   ╭────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
   │                                                                                                                │
   │                                         Update available 2.2.0 → 2.4.1                                         │
   │                                                                                                                │
   │                To upgrade Docusaurus packages with the latest version, run the following command:              │
   │     `npm i @docusaurus/core@latest @docusaurus/preset-classic@latest @docusaurus/module-type-aliases@latest`   │
   │                                                                                                                │
   ╰────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

OLD This is the message shown at the terminal when you do yarn start:

yarn run v1.22.19
$ BROWSER=none docusaurus start
   ╭───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
   │                                                                                                                       │
   │                                            Update available 2.0.1 → 2.1.0                                             │
   │                                                                                                                       │
   │                   To upgrade Docusaurus packages with the latest version, run the following command:                  │
   │     `yarn upgrade @docusaurus/core@latest @docusaurus/preset-classic@latest @docusaurus/module-type-aliases@latest`   │
   │                                                                                                                       │
   ╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

You can also do:

yarn upgrade --latest @docusaurus/core @docusaurus/preset-classic @docusaurus/module-type-aliases

Also take a look at the other packages versions:

Styling​

Uses Infima: https://infima.dev

https://docusaurus.io/docs/styling-layout

MDX​

A component can be registered globally so that you don't have to import it on every .mdx file. See docs and this tweet.

Code blocks supported languages​

https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/vendor/prism/includeLangs.js

https://docusaurus.io/docs/markdown-features/code-blocks#supported-languages

Server components​

https://twitter.com/sebastienlorber/status/1598615824927002624

Releases​