How to add top-level pages to sidebar?

[borekb]

We have something like this in sidebars.js:

module.exports = {
  sidebar: {
    Introduction: ['introduction/welcome'],
    Tutorial: [
      'tutorial/01',
      'tutorial/02',
      'tutorial/03',
      'tutorial/04',
    ],
    Guides: [
      'guides/data-fetching',
      'guides/styling',
    ],
  },
}

We'd like to add a top-level "What's new" page, not nested under any category.

I was able to achieve that by using the "array notation", something like this:

module.exports = {
  sidebar: [
    {
      type: 'category',
      label: 'Introduction',
      items: ['introduction/welcome']
    },
    {
      type: 'category',
      label: 'Tutorial',
      items: [...]
    },
    'whats-new', // <- top-level page
  ]

Our sidebar is long so this syntax is a bit ugly. Is there a way to add a top-level page using the simpler, object notation?

(I should say that it's not that difficult to write a function that transforms the object to an array notation, but if there's way to avoid that, that would be good.)

[slorber]

Afaik no because object keys means categories, and values means list of items.

We already transform object to array notation, see https://github.com/facebook/docusaurus/blob/master/packages/docusaurus-plugin-content-docs/src/sidebars.ts#L62

What kind of API are you suggesting?

module.exports = {
  sidebar: {
   `whats-new sidebar label`: `whats-new doc id`,
    Introduction: ['introduction/welcome'],
    Tutorial: [
      'tutorial/01',
    ],
    Guides: [
      'guides/data-fetching',
    ],
  },
}

I find it a bit confusing, and it would create a new way to create a sidebar doc label (ie we have 3 ways now)

Another possibility:

module.exports = {
  sidebar: [
   `whats-new`,
   {
      Introduction: ['introduction/welcome'],
      Tutorial: [
        'tutorial/01',
      ],
      Guides: [
        'guides/data-fetching',
      ],
    },
  },
}

This means that by default, any sidebar array object item that does not have a type would be considered as a list of categories object. I'd prefer this option.

[borekb]

Thanks, I actually used Object.entries().map in a real config 😄.

From the two options, I tried both to see if they work or not. My intuition was to try the first one first – and I'd be personally fine with it. (It's not perfect but the object is a shorthand already, I wouldn't mind having this additional "feature" in it.)

The 2nd one is also fine – perhaps more "proper" but less intuitive.