Generating new sidebars and docs sections

[jq-11]

Summary

How to generate new documentations headers with custom and or automated sidebars

Create a new folder with content

./Testing 
    intro.md

copy the sidebar.js file at the root, rename it appropriatly,

sidebars.js --> testSidebars.js

update the sidebar Id appropriatly (line 18), remove line 21 it is not required

  testSidebar: [{type: 'autogenerated', dirName: '.'}],

Go to your docusaur config

1. add plugins as follows

  plugins: [
    [
      '@docusaurus/plugin-content-docs',
      {
        id: 'test',
        path: 'Testing',
        routeBasePath: 'Testing',
        sidebarPath: require.resolve('./testSidebars.js'),
      },
    ],
  ],

2. under themeConfig > navbar add the following to the items array

{to: '/Testing/intro', label: 'Test', position: 'left'},

[jq-11]

Importing components globally

src > theme

create a MDXComponents.ts or js use the folllowing as reference (this is a ts file)

import type {ComponentType} from 'react';
import MDXComponents from '@theme-original/MDXComponents';
import H5P from '@site/src/components/H5P';
import H5PLink from '@site/src/components/H5PLink';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

const components: typeof MDXComponents & {
  H5P: ComponentType<any>;
  H5PLink: ComponentType<any>;
} = {
  ...MDXComponents,
  H5P,
  H5PLink,
  Tabs,
  TabItem,
};

export default components;