feat(theme-classic): allow using html in dropdown items

facebook · Mar 29, 2022 · 9ce578e · 9ce578e
1 parent 37a5dfa
commit 9ce578e
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 3 deletions.
diff --git a/packages/docusaurus-theme-classic/src/__tests__/validateThemeConfig.test.ts b/packages/docusaurus-theme-classic/src/__tests__/validateThemeConfig.test.ts
@@ -142,6 +142,9 @@ describe('themeConfig', () => {
             label: 'Tools',
             position: 'left',
             items: [
+              {
+                html: '<b>Supported package managers</b>',
+              },
               {
                 type: 'doc',
                 docId: 'npm',
@@ -167,6 +170,9 @@ describe('themeConfig', () => {
               },
             ],
             dropdownItemsAfter: [
+              {
+                html: '<hr/>',
+              },
               {
                 to: '/versions',
                 label: 'All versions',
@@ -216,6 +222,23 @@ describe('themeConfig', () => {
     ).toThrowErrorMatchingInlineSnapshot(`"Bad navbar item type joke"`);
   });
 
+  it('rejects navbar item with HTML-only content', () => {
+    const config = {
+      navbar: {
+        items: [
+          {
+            html: '<span>---</span>',
+          },
+        ],
+      },
+    };
+    expect(() =>
+      testValidateThemeConfig(config),
+    ).toThrowErrorMatchingInlineSnapshot(
+      `"Navbar items with only HTML contents are not allowed"`,
+    );
+  });
+
   it('rejects nested dropdowns', () => {
     const config = {
       navbar: {

diff --git a/packages/docusaurus-theme-classic/src/theme-classic.d.ts b/packages/docusaurus-theme-classic/src/theme-classic.d.ts
@@ -633,6 +633,7 @@ declare module '@theme/NavbarItem/DefaultNavbarItem' {
     readonly isDropdownItem?: boolean;
     readonly className?: string;
     readonly position?: 'left' | 'right';
+    readonly html?: string;
   };
 
   export interface Props extends DesktopOrMobileNavBarItemProps {

diff --git a/packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem.tsx b/packages/docusaurus-theme-classic/src/theme/NavbarItem/DefaultNavbarItem.tsx
@@ -33,7 +33,11 @@ function DefaultNavbarItemDesktop({
   );
 
   if (isDropdownItem) {
-    return <li>{element}</li>;
+    return props.html ? (
+      <li dangerouslySetInnerHTML={{__html: props.html}} />
+    ) : (
+      <li>{element}</li>
+    );
   }
 
   return element;
@@ -44,7 +48,12 @@ function DefaultNavbarItemMobile({
   isDropdownItem,
   ...props
 }: DesktopOrMobileNavBarItemProps) {
-  return (
+  return props.html ? (
+    <li
+      className="menu__list-item"
+      dangerouslySetInnerHTML={{__html: props.html}}
+    />
+  ) : (
     <li className="menu__list-item">
       <NavbarNavLink className={clsx('menu__link', className)} {...props} />
     </li>

diff --git a/packages/docusaurus-theme-classic/src/validateThemeConfig.ts b/packages/docusaurus-theme-classic/src/validateThemeConfig.ts
@@ -65,12 +65,21 @@ const DefaultNavbarItemSchema = NavbarItemBaseSchema.append({
   items: Joi.forbidden().messages({
     'any.unknown': 'Nested dropdowns are not allowed',
   }),
+  html: Joi.forbidden().messages({
+    'any.unknown': 'Navbar items with only HTML contents are not allowed',
+  }),
 })
   .xor('href', 'to')
   .messages({
     'object.xor': 'One and only one between "to" and "href" should be provided',
   });
 
+const DefaultDropdownSubitemSchema = DefaultNavbarItemSchema.append({
+  html: Joi.string(),
+})
+  .xor('href', 'to', 'html')
+  .nand('html', 'label');
+
 const DocsVersionNavbarItemSchema = NavbarItemBaseSchema.append({
   type: Joi.string().equal('docsVersion').required(),
   to: Joi.string(),
@@ -119,7 +128,7 @@ const DropdownSubitemSchema = Joi.object({
     },
     {
       is: itemWithType(undefined),
-      then: DefaultNavbarItemSchema,
+      then: DefaultDropdownSubitemSchema,
     },
     {
       is: Joi.alternatives().try(

diff --git a/website/docs/api/themes/theme-configuration.md b/website/docs/api/themes/theme-configuration.md
@@ -342,6 +342,9 @@ module.exports = {
               label: 'Facebook',
               href: 'https://www.facebook.com',
             },
+            {
+              html: '<hr/>',
+            },
             {
               type: 'doc',
               label: 'Social',

diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
@@ -410,6 +410,12 @@ const config = {
             position: 'right',
             dropdownActiveClassDisabled: true,
             dropdownItemsAfter: [
+              {
+                html: '<hr style="margin: 0.3rem 0;">',
+              },
+              {
+                html: '<b style="display: block; font-size: 0.875rem; padding: .2rem .5rem;">Archived versions</b>',
+              },
               ...ArchivedVersionsDropdownItems.map(
                 ([versionName, versionUrl]) => ({
                   label: versionName,
@@ -420,6 +426,9 @@ const config = {
                 href: 'https://v1.docusaurus.io',
                 label: '1.x.x',
               },
+              {
+                html: '<hr style="margin: 0.3rem 0;">',
+              },
               {
                 to: '/versions',
                 label: 'All versions',
@@ -430,6 +439,9 @@ const config = {
             type: 'localeDropdown',
             position: 'right',
             dropdownItemsAfter: [
+              {
+                html: '<hr style="margin: 0.3rem 0;">',
+              },
               {
                 href: 'https://github.com/facebook/docusaurus/issues/3526',
                 label: 'Help Us Translate',