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 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

Releases