Swizzle with Context Provider?

[AndrewSepic]

I've created a swizzle of the theme-classic DocCardList component. But instead of using useCurrentSidebarCategory(); to generate the items for the list, I want this to exist at the top level of my docs site. ie: src/docs/. No folder within /docs, no categories etc..

I've swizzled the DocCardList and attempted to use useDocsSidebar() which throws an error that it's outside of the DocSidebarProvider. I swizzled a theme/Root.js component to add the provider

import { DocsSidebarProvider } from '@docusaurus/theme-common/internal';

// Default implementation, that you can customize
export default function Root({ children }) {
  return <DocsSidebarProvider>{children}</DocsSidebarProvider>;
}

While the error is no longer thrown myuseDocsSidebar() call returns null when trying to access the sidebar data in the swizzled DocCardList component.

Is it possible to Swizzle a Context Provider? Is there some logic here that I'm missing?

Lastly, is there an easier way to accomplish my goal of building a DocCardList based on the top level pages (ie: there are no categories or folders in src/docs/.

[slorber]

You don't have to use context/provider for this, the component accepts props too. Just give it an hardcoded array of items as props and it will work.

<DocCardList items={[]}/>

Note: this is not publicly documented so we can't guarantee the shape of the items objects will remain retrocompatible forever.

---

Using <DocCardList/> at a doc at the root of your docs sidebar should be permitted. If we don't support that, please open a bug report with a docusaurus.new repro, and we'll look into supporting that.

[AndrewSepic]

Thanks for the reply. I'm aware the component accepts props as well, and happy to use props but I'd like to retrieve the array of sidebar items from my markdown pages at src/docs/ ___. And I'm not aware of how to do that without using useDocsSidebar() either above DocCardList or within it. The default implementation of DocCardList uses useCurrentSidebarCategory(); to generate those pages and will not work at the docs root.

[slorber]

Please open a bug report and we'll add automatic support for this

This temporary workaround should work:

import DocCardList from '@theme/DocCardList';
import { useDocsSidebar } from '@docusaurus/theme-common/internal';

<DocCardList items={useDocsSidebar().items} />

https://stackblitz.com/edit/github-mu7uz9?file=docs%2Fintro.mdx

The above sandbox should work with just <DocCardList />, but currently it doesn't work: this is a bug.

[AndrewSepic]

@slorber The work around works nicely in my use case. I will open a bug report! I appreciate it.

[slorber]

Will be fixed in #10847