Skip to main content

Docusaurus 2.2

· 3 min read
Sébastien Lorber
Docusaurus maintainer, This Week In React editor

We are happy to announce Docusaurus 2.2.

The upgrade should be easy: as explained in our release process documentation, minor versions respect Semantic Versioning.

Docusaurus 2.2 social card

Highlights

Mermaid diagrams

In #7490, we added support for Mermaid diagrams. This fills the gap between GitHub Flavored Markdown which also added support recently. You can create Mermaid diagrams using Markdown code blocks:

```mermaid
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Health check
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
```
http://localhost:3000

Make sure to check the documentation, and the more advanced examples

Config headTags

In #8151, we added the ability to apply arbitrary HTML <head> tags to all pages of your site.

docusaurus.config.js
module.exports = {
headTags: [
{
tagName: 'link',
attributes: {
rel: 'icon',
href: '/img/docusaurus.png',
},
},
],
};

Accessibility

We did several accessibility improvements:

  • #8207: improves keyboard navigation for mobile drawer hamburger button
  • #8161: improves keyboard navigation for tabs
  • #8204: makes the skip to content button support progressive enhancement
  • #8174: improves screen reader announcement when toggling between light/dark mode

Developer Experience

We made validation stricter and improved error messages:

  • #8234: in case of doc processing failure, prints the problematic markdown file path in the error message
  • #8192 and #8159: validates siteConfig.url more strictly and with better error message
  • #8066: makes config url and baseUrl fail-safe and less sensitive to the presence or absence of a leading or trailing slash

Translations

We completed the default theme translation support for multiple languages:

  • 🇹🇷 #8105: completes Turkish translations
  • 🇷🇺 #8253: completes Russian translations
  • 🇫🇷 #8243: completes French translations
  • 🇯🇵 #8075: completes Japanese translations
tip

Completing theme translations is an ongoing effort and an easy way to contribute to Docusaurus. We add new theme features regularly, for which we often need new translations.

Other changes

Other notable changes include:

  • #8210: the docusaurus swizzle CLI has a new --config option
  • #8109: mobile navigation performance optimizations, prefetch resources earlier
  • #8059: versions/locales navbar dropdowns preserve hash and querystring on navigation
  • #8227: the client redirect plugin preserves hash and querystring on redirect

Check the 2.2.0 changelog entry for an exhaustive list of changes.