feat: allow using pure HTML as label in navbar links #7079
Conversation
✅ [V2]
To edit notification comments on pull requests, go to your Netlify site settings. |
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-7079--docusaurus-2.netlify.app/ |
|
Size Change: +217 B (0%) Total Size: 804 kB
ℹ️ View Unchanged
|
|
It doesn't seem that easy. Currently we have translatable html-content fields?
I don't get what you mean |
|
If translation is done through Crowdin and synced during CI, malicious actors can easily inline JS or markup in the code translation, and lead to XSS. This is essentially calling |
|
Looks fine to me 👍 Agree there's a security risk in translating this HTML fragment. What about merging this as is? It's a niche use-case and translating HTML fragments is probably not the best idea anyway. There are workarounds like build the site with multiple configs and env variables etc |
|
Sounds good, although in the future we should probably somehow find a way to provide translations for such HTML-like messages. |
| ? {dangerouslySetInnerHTML: {__html: html}} | ||
| : { | ||
| children: ( | ||
| <> | ||
| {label} | ||
| {isExternalLink && ( | ||
| <IconExternalLink | ||
| {...(isDropdownLink && {width: 12, height: 12})} | ||
| /> | ||
| )} | ||
| </> | ||
| ), | ||
| })} | ||
| /> |
There was a problem hiding this comment.
Non-blocking but this looks a bit messy & too deeply nested for me. If you can find a better way to structure this (I don't have much idea about how) before merge feel free to refactor it
There was a problem hiding this comment.
I have that feeling too, but can't think of a better solution.
packages/docusaurus-theme-classic/src/theme/NavbarItem/NavbarNavLink.tsx
Show resolved
Hide resolved
Motivation
Although a new
htmltype for navbar items is coming soon, it does not solve the issue of having to use HTML as label for a navbar link. It can be useful to style text content of a link or add an SVG icon inside it without using custom CSS.Have you read the Contributing Guidelines on pull requests?
Yes
Test Plan
See tests as examples. Is it worth to use the option on the website as applying of dogfooding approach?
Related PRs