feat: allow custom navbarItem types to pass through validation

[slorber]

Motivation

This implements a temporary workaround to support custom navbar item types:

• Provide items with type: "custom-x" in navbar items (+ arbitrary props) (for now the custom- prefix is mandatory)
• Swizzle @theme/NavbarItem/ComponentTypes to register your custom-x component

Note this is a temporary workaround until we provide a better API to register custom navbar item types.

See also: #7227 (comment)

Have you read the Contributing Guidelines on pull requests?

yes

Test Plan

dogfood + preview + validation tests

The test section of the website will show a custom navbar item:

https://deploy-preview-7231--docusaurus-2.netlify.app/tests/docs/

[netlify]

✅ [V2]

Name	Link
🔨 Latest commit	2a05d0b
🔍 Latest deploy log	https://app.netlify.com/sites/docusaurus-2/deploys/626bab83e99c1b0008fc8e55
😎 Deploy Preview	https://deploy-preview-7231--docusaurus-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[github-actions]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🟠 Performance	50
🟢 Accessibility	100
🟠 Best practices	83
🟢 SEO	100
🟢 PWA	90

Lighthouse ran on https://deploy-preview-7231--docusaurus-2.netlify.app/

[slorber]

cc @jaredcbaum , looks relevant for what you did on Ionic doc here:

• https://github.com/ionic-team/ionic-docs/blob/main/docusaurus-theme-classic/src/index.js
• https://github.com/ionic-team/ionic-docs/blob/main/src/theme/NavbarItem/index.tsx

Looking forward to making all this easier in #7227

[jaredcbaum]

I attempted another workaround in the latest batch of updates to the ionic docs. This abstracts the validation logic to the Docusaurus config file. I was/am attempting to abstract a common theme that could also have custom schemas based on which site it was used on. I only got far enough for the navbar but theoretically it could be used for other schemas.

https://github.com/ionic-team/ionic-docs/blob/feat/plugin-abstraction/docusaurus.config.js#L211-L239
https://github.com/ionic-team/docusaurus-theme-classic-wrapper/blob/main/src/index.js#L28-L32

I think this is dancing around a bigger problem though, which is custom navbar parts. It seems as though this is in the works, but figured I'd post in case anyone was looking for an immediate workaround.

[jaredcbaum]

Also, just an idea but I think it would work well to have a generated list of the "native" NavbarItems from the original theme and anything else would be considered custom. In theory it could eliminate the need to prefix with "custom-"

[slorber]

Thanks @jaredcbaum, another workaround remains useful until we have proper support for this 👍

Also, just an idea but I think it would work well to have a generated list of the "native" NavbarItems from the original theme and anything else would be considered custom. In theory it could eliminate the need to prefix with "custom-"

We could as well allow unknown navbar item types in our navigation instead of constraining to custom-* pattern. But that also means we don't catch typos anymore, which we likely want to avoid for regular users that don't implement custom navbar items.

For now prefixing things with custom-* is likely good enough and would catch typos too.

[github-actions]

Size Change: -580 B (0%)

Total Size: 802 kB

Filename	Size	Change
website/build/assets/js/main.********.js	607 kB	-580 B (0%)

ℹ️ View Unchanged

Filename	Size
website/.docusaurus/globalData.json	50.1 kB
website/build/assets/css/styles.********.css	107 kB
website/build/index.html	38.8 kB

_{compressed-size-action}