Personalize the TOC based on document category and frontmatter

[LunaticMuch]

I have a case where, for part of the documentation, I need to add some metadata to my page.
Visually, I think the best way is to have a box, above the TOC.

Pages that requires it can just have, in the frontmatter, something like:

displayMetadata: true

and then I can have an object like

metadata: []

Questions are:

1. shall I eject the TOC (which is not safe) or is there another safer alternative?
2. can I read frontmatter info during build time to populate the content?

[slorber]

It looks similar to what @lanegoolsby is trying to do, see my answer here: #7644 (comment)

shall I eject the TOC (which is not safe) or is there another safer alternative?

It depends

The first question to ask yourself is: do you want to customize all Docusaurus TOCs (desktop? mobile?) at once, or just a specific case (desktop only? docs only?)

can I read frontmatter info during build time to populate the content?

I'm not sure what you mean by that 🤷‍♂️ But:

• For docs, you can use useDoc().frontMatter.displayMetadata
• For blog posts, you can use useBlogPost().frontMatter.displayMetadata

---

Don't be too afraid by "internal", "unsafe" etc, those are too scary but what we mean in the end is just that we may have to do breaking changes on those apis someday, not that you shouldn't use those. If you only use these on your site's code, then you'd be able to adjust your code once we do breaking changes. It's very unlikely that we'll completely remove the TOC component or the 2 hooks above.

[LunaticMuch]

I actually did something that works.

1. Swizzled the TOC
2. used import useFrontMatter from "@theme/useFrontMatter";
3. extracted what I needed from the frontmatter with const { metadata } = useFrontMatter();

[slorber]

Great 👍

useFrontMatter() is not a core api (but may be someday), I guess you are using https://github.com/roydukkey/docusaurus-theme-frontmatter ?

[lanegoolsby]

I can swizzle the TOC component fine, that works great. Where I'm stuck is in trying to convert the swizzled component into a custom plugin.

[lanegoolsby]

I have a working example using the useDoc hook Sebastian mentioned above.

My example is using a custom plugin, so a bunch of that is unnecessary if you can get away with swizzling. In my case I need the custom code to be reusable across multiple sites so needing to create the plugin complicates things a little.