Configure Docusaurus

Most ConsenSys documentation sites are built using Docusaurus. A Docusaurus site organizes most of its configuration in the docusaurus.config.js file, including the following key elements.

Top navigation

Configure the top navigation in the navbar section of the theme configuration.

Example navbar configuration

docusaurus.config.js

module.exports = {
  themeConfig: {
    navbar: {
      title: 'Site Title',
      logo: {
        alt: 'Site Logo',
        src: 'img/logo.svg',
        srcDark: 'img/logo_dark.svg',
        href: 'https://docusaurus.io/',
        target: '_self',
        width: 32,
        height: 32,
        className: 'custom-navbar-logo-class',
        style: {border: 'solid red'},
      },
      items: [
        {
          type: 'doc',
          position: 'left',
          docId: 'introduction',
          label: 'Docs',
        },
        {to: 'blog', label: 'Blog', position: 'left'},
        {
          type: 'docsVersionDropdown',
          position: 'right',
        },
        {
          type: 'localeDropdown',
          position: 'right',
        },
        {
          href: 'https://github.com/facebook/docusaurus',
          position: 'right',
          className: 'header-github-link',
          'aria-label': 'GitHub repository',
        },
      ],
    },
  },
};

Sidebar

Pass the sidebar to the sidebarPath key in your docs instance, whether it's to the docs section of the classic preset or directly to the content-docs plugin. Define and customize your sidebar in a separate sidebar file (sidebars.js by default). You can manually configure your sidebar items in sidebars.js, or auto-generate sidebar items. Auto-generated sidebar items require including metadata in the individual pages if you want to configure relative position, custom label, custom URL, etc.

Example sidebar configuration

sidebars.js

module.exports = {
  docs: [
    "index",
    {
      type: "category",
      label: "Contribute to the docs",
      link: {
        type: "generated-index",
        slug: "/contribute"
      },
      items: [
        {
          type: "autogenerated",
          dirName: "contribute",
        },
      ],
    },
    {
      type: "category",
      label: "Create a new doc site",
      link: {
        type: "generated-index",
        slug: "/create",
      },
      items: [
        {
          type: "autogenerated",
          dirName: "create",
        },
      ],
    },
    {
      type: "category",
      label: "Configure advanced features",
      link: {
        type: "generated-index",
        slug: "/configure",
      },
      items: [
        {
          type: "autogenerated",
          dirName: "configure",
        },
      ],
    },
  ],
};

docusaurus.config.js

module.exports = {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          sidebarPath: require.resolve('./sidebars.js'),
        },
      },
    ],
  ],
};

Footer

Configure the footer in the footer section of the theme configuration.

Example footer configuration

docusaurus.config.js

module.exports = {
  themeConfig: {
    footer: {
      links: [
        {
          title: "Docs",
          items: [
            {
              label: "Introduction",
              to: "introduction",
            },
            {
              label: "Get started",
              to: "/category/get-started",
            },
            {
              label: "How to guides",
              to: "/category/how-to",
            },
            {
              label: "Tutorials",
              to: "/category/tutorials",
            },
          ],
        },
        {
          title: "Reference",
          items: [
            {
              label: "Command line",
              to: "reference/cli",
            },
            {
              label: "REST API",
              to: "/reference/rest",
            },
          ],
        },
        {
          title: "Community",
          items: [
            {
              label: "ConsenSys Discord",
              href: "https://discord.gg/ChtFaC4",
            },
            {
              label: "Teku GitHub",
              href: "https://github.com/ConsenSys/teku",
            },
            {
              label: "Teku documentation GitHub",
              href: "https://github.com/ConsenSys/doc.teku",
            },
          ],
        },
      ],
      copyright: `© ${new Date().getFullYear()} ConsenSys, Inc.`,
    },
  },
};

Redirects

Use the plugin-client-redirects plugin to configure redirects.

Example redirects configuration

docusaurus.config.js

module.exports = {
  plugins: [
    [
      '@docusaurus/plugin-client-redirects',
      {
        redirects: [
          // /docs/oldDoc -> /docs/newDoc
          {
            to: '/docs/newDoc',
            from: '/docs/oldDoc',
          },
          // Redirect from multiple old paths to the new path
          {
            to: '/docs/newDoc2',
            from: ['/docs/oldDocFrom2019', '/docs/legacyDocFrom2016'],
          },
        ],
      },
    ],
  ],
};