Skip to main content

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',
        },
      ],
    },
  },
};

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
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",
        },
      ],
    },
  ],
};

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'],
          },
        ],
      },
    ],
  ],
};