Can Docusaurus read all files in a folder?

user_2147704 0
Viewed 702

With Docusaurus sidebars.js can be specified like this:

module.exports = {
  docs: [
    {
      type: 'category',
      label: 'Docs',
      items: [
        {
          type: 'category',
          label: 'Widgets',
          items: 
          [
            'widgets/getting-started',
            'widgets/create-a-page',
            'widgets/create-a-document',
            'widgets/create-a-blog-post',
            'widgets/markdown-features',
            'widgets/thank-you',
          ],
        },
        {
          type: 'category',
          label: 'Next category',
          items: 
          [
            'next/getting-started'
          ]
        }        
      ]
    },
  ],
};

This means I need to put every file I create into the sidemenu.js. Is it possible to just put a wildcard, such as *.* and just dynamically read all files in a folder?

docusaurus
1 Answers

Extract from the Docusaurus documentation (https://docusaurus.io/docs/sidebar)

Docusaurus can create a sidebar automatically from your filesystem structure: each folder creates a sidebar category.

An autogenerated item is converted by Docusaurus to a sidebar slice: a list of items of type doc and category.

type SidebarItemAutogenerated = {
  type: 'autogenerated';
  dirName: string; // Source folder to generate the sidebar slice from (relative to docs)
};

Docusaurus can generate a sidebar from your docs folder:

sidebars.js:

module.exports = {
  myAutogeneratedSidebar: [
    {
      type: 'autogenerated',
      dirName: '.', // '.' means the current docs folder
    },
  ],
};

You can also use multiple autogenerated items in a sidebar, and interleave them with regular sidebar items:

sidebars.js:

module.exports = {
  mySidebar: [
    'intro',
    {
      type: 'category',
      label: 'Tutorials',
      items: [
        'tutorial-intro',
        {
          type: 'autogenerated',
          dirName: 'tutorials/easy', // Generate sidebar slice from docs/tutorials/easy
        },
        'tutorial-medium',
        {
          type: 'autogenerated',
          dirName: 'tutorials/advanced', // Generate sidebar slice from docs/tutorials/hard
        },
        'tutorial-end',
      ],
    },
    {
      type: 'autogenerated',
      dirName: 'guides', // Generate sidebar slice from docs/guides
    },
    {
      type: 'category',
      label: 'Community',
      items: ['team', 'chat'],
    },
  ],
};

So as in the example above, for your example you should use type: 'autogenerated' and dirName: 'widgets'.

I advise you to read the Sidebar documentation carefully to apply this correctly

user_50651830
Related