Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: allow using pure HTML as label in navbar links #7079

Merged
merged 2 commits into from
Apr 7, 2022
Merged

feat: allow using pure HTML as label in navbar links #7079

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2d18f7f
feat: allow using pure HTML as label in navbar links
lex111 Mar 31, 2022
fb06f09
JSX nesting refactor
slorber Apr 7, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 16 additions & 2 deletions packages/docusaurus-theme-classic/src/__tests__/validateThemeConfig.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,13 +112,27 @@ describe('themeConfig', () => {
docId: 'intro',
label: 'Introduction',
},
// Doc link with HTML as label
{
type: 'doc',
position: 'left',
docId: 'intro',
html: '<b>Introduction</b>',
},
// Regular link
{
to: '/guide/',
label: 'Guide',
position: 'left',
activeBaseRegex: '/guide/',
},
// Regular link with HTML as label
{
to: '/guide/',
html: '<b>Guide</b>',
position: 'left',
activeBaseRegex: '/guide/',
},
// Regular dropdown
{
label: 'Community',
Expand All @@ -136,10 +150,10 @@ describe('themeConfig', () => {
},
],
},
// Dropdown with name
// Dropdown with label as HTML
{
type: 'dropdown',
label: 'Tools',
label: 'Tools <sup>new</sup>',
position: 'left',
items: [
{
Expand Down
1 change: 1 addition & 0 deletions packages/docusaurus-theme-classic/src/theme-classic.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -651,6 +651,7 @@ declare module '@theme/NavbarItem/NavbarNavLink' {
readonly activeBaseRegex?: string;
readonly exact?: boolean;
readonly label?: ReactNode;
readonly html?: string;
readonly prependBaseUrlToHref?: string;
}

Expand Down
66 changes: 41 additions & 25 deletions packages/docusaurus-theme-classic/src/theme/NavbarItem/NavbarNavLink.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ export default function NavbarNavLink({
to,
href,
label,
html,
activeClassName = '',
prependBaseUrlToHref,
...props
Expand All @@ -33,32 +34,47 @@ export default function NavbarNavLink({
const isExternalLink = label && href && !isInternalUrl(href);
const isDropdownLink = activeClassName === dropdownLinkActiveClass;

// Link content is set through html XOR label
const linkContentProps = html
? {dangerouslySetInnerHTML: {__html: html}}
: {
children: (
<>
{label}
{isExternalLink && (
<IconExternalLink
{...(isDropdownLink && {width: 12, height: 12})}
/>
)}
</>
Josh-Cena marked this conversation as resolved.
Show resolved Hide resolved
),
};

if (href) {
return (
<Link
href={prependBaseUrlToHref ? normalizedHref : href}
{...props}
{...linkContentProps}
/>
);
}

return (
<Link
{...(href
? {
href: prependBaseUrlToHref ? normalizedHref : href,
}
: {
isNavLink: true,
activeClassName: !props.className?.includes(activeClassName)
? activeClassName
: '',
to: toUrl,
...(activeBasePath || activeBaseRegex
? {
isActive: (_match, location) =>
activeBaseRegex
? isRegexpStringMatch(activeBaseRegex, location.pathname)
: location.pathname.startsWith(activeBaseUrl),
}
: null),
})}
{...props}>
{label}
{isExternalLink && (
<IconExternalLink {...(isDropdownLink && {width: 12, height: 12})} />
)}
</Link>
to={toUrl}
isNavLink
activeClassName={
!props.className?.includes(activeClassName) ? activeClassName : ''
}
{...((activeBasePath || activeBaseRegex) && {
isActive: (_match, location) =>
activeBaseRegex
? isRegexpStringMatch(activeBaseRegex, location.pathname)
: location.pathname.startsWith(activeBaseUrl),
})}
{...props}
{...linkContentProps}
/>
);
}
2 changes: 2 additions & 0 deletions packages/docusaurus-theme-classic/src/validateThemeConfig.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,8 +49,10 @@ const NavbarItemPosition = Joi.string().equal('left', 'right').default('left');

const NavbarItemBaseSchema = Joi.object({
label: Joi.string(),
html: Joi.string(),
className: Joi.string(),
})
.nand('html', 'label')
// We allow any unknown attributes on the links (users may need additional
// attributes like target, aria-role, data-customAttribute...)
.unknown();
Expand Down
3 changes: 3 additions & 0 deletions website/docs/api/themes/theme-configuration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -259,6 +259,7 @@ Accepted fields:
| --- | --- | --- | --- |
| `type` | `'default'` | Optional | Sets the type of this item to a link. |
| `label` | `string` | **Required** | The name to be shown for this item. |
| `html` | `string` | Optional | Same as `label`, but renders pure HTML instead of text content. |
| `to` | `string` | **Required** | Client-side routing, used for navigating within the website. The baseUrl will be automatically prepended to this value. |
| `href` | `string` | **Required** | A full-page navigation, used for navigating outside of the website. **Only one of `to` or `href` should be used.** |
| `prependBaseUrlToHref` | `boolean` | `false` | Prepends the baseUrl to `href` values. |
Expand Down Expand Up @@ -288,6 +289,8 @@ module.exports = {
// Only one of "to" or "href" should be used
// href: 'https://www.facebook.com',
label: 'Introduction',
// Only one of "label" or "html" should be used
// html: '<b>Introduction</b>'
position: 'left',
activeBaseRegex: 'docs/(next|v8)',
target: '_blank',
Expand Down