feat(v2): version dropdown before/after items + move site "All Versions" link (#3548)

* add dropdownItemsAfter option + reorg a bit docusaurus site navbar

* fix isActive  react warning

* Update theme-classic.md

Co-authored-by: Alexey Pyltsyn <lex61rus@gmail.com>

packages/docusaurus-theme-classic/src/__tests__/validateThemeConfig.test.js

@@ -57,6 +57,8 @@ describe('themeConfig', () => {
           {
             type: 'docsVersionDropdown',
             position: 'left',
+            dropdownItemsBefore: [],
+            dropdownItemsAfter: [],
           },
           {
             to: 'docs/next/support',

packages/docusaurus-theme-classic/src/theme/NavbarItem/DocsVersionDropdownNavbarItem.tsx

@@ -21,6 +21,8 @@ export default function DocsVersionDropdownNavbarItem({
   mobile,
   docsPluginId,
   dropdownActiveClassDisabled,
+  dropdownItemsBefore,
+  dropdownItemsAfter,
   ...props
 }: Props): JSX.Element {
   const activeDocContext = useActiveDocContext(docsPluginId);
@@ -28,14 +30,7 @@ export default function DocsVersionDropdownNavbarItem({
   const latestVersion = useLatestVersion(docsPluginId);
 
   function getItems() {
-    // We don't want to render a version dropdown with 0 or 1 item
-    // If we build the site with a single docs version (onlyIncludeVersions: ['1.0.0'])
-    // We'd rather render a buttonb instead of a dropdown
-    if (versions.length <= 1) {
-      return undefined;
-    }
-
-    return versions.map((version) => {
+    const versionLinks = versions.map((version) => {
       // We try to link to the same doc, in another version
       // When not possible, fallback to the "main doc" of the version
       const versionDoc =
@@ -48,6 +43,21 @@ export default function DocsVersionDropdownNavbarItem({
         isActive: () => version === activeDocContext?.activeVersion,
       };
     });
+
+    const items = [
+      ...dropdownItemsBefore,
+      ...versionLinks,
+      ...dropdownItemsAfter,
+    ];
+
+    // We don't want to render a version dropdown with 0 or 1 item
+    // If we build the site with a single docs version (onlyIncludeVersions: ['1.0.0'])
+    // We'd rather render a buttonb instead of a dropdown
+    if (items.length <= 1) {
+      return undefined;
+    }
+
+    return items;
   }
 
   const dropdownVersion = activeDocContext.activeVersion ?? latestVersion;

packages/docusaurus-theme-classic/src/types.d.ts

@@ -308,10 +308,13 @@ declare module '@theme/NavbarItem/DefaultNavbarItem' {
 
 declare module '@theme/NavbarItem/DocsVersionDropdownNavbarItem' {
   import type {Props as DefaultNavbarItemProps} from '@theme/NavbarItem/DefaultNavbarItem';
+  import type {NavLinkProps} from '@theme/NavbarItem/DefaultNavbarItem';
 
   export type Props = DefaultNavbarItemProps & {
     readonly docsPluginId?: string;
     dropdownActiveClassDisabled?: boolean;
+    dropdownItemsBefore: NavLinkProps[];
+    dropdownItemsAfter: NavLinkProps[];
   };
 
   const DocsVersionDropdownNavbarItem: (props: Props) => JSX.Element;

packages/docusaurus-theme-classic/src/validateThemeConfig.js

@@ -69,6 +69,8 @@ const DocsVersionDropdownNavbarItemSchema = Joi.object({
   position: NavbarItemPosition,
   docsPluginId: Joi.string(),
   dropdownActiveClassDisabled: Joi.boolean(),
+  dropdownItemsBefore: Joi.array().items(DefaultNavbarItemSchema).default([]),
+  dropdownItemsAfter: Joi.array().items(DefaultNavbarItemSchema).default([]),
 });
 
 const DocItemSchema = Joi.object({

packages/docusaurus/src/client/exports/Link.tsx

@@ -25,6 +25,7 @@ interface Props {
   readonly href?: string;
   readonly activeClassName?: string;
   readonly children?: ReactNode;
+  readonly isActive?: () => boolean;
 
   // escape hatch in case broken links check is annoying for a specific link
   readonly 'data-noBrokenLinkCheck'?: boolean;
@@ -42,6 +43,7 @@ function Link({
   to,
   href,
   activeClassName,
+  isActive,
   'data-noBrokenLinkCheck': noBrokenLinkCheck,
   ...props
 }: Props): JSX.Element {
@@ -154,7 +156,7 @@ function Link({
       innerRef={handleRef}
       to={targetLink || ''}
       // avoid "React does not recognize the `activeClassName` prop on a DOM element"
-      {...(isNavLink && {activeClassName})}
+      {...(isNavLink && {isActive, activeClassName})}
     />
   );
 }

website/docs/theme-classic.md

@@ -296,7 +296,13 @@ module.exports = {
         {
           type: 'docsVersionDropdown',
           position: 'left',
-          // dropdownActiveClassDisabled: true, //
+
+          // Add additional dropdown items at the beginning/end of the dropdown.
+          dropdownItemsBefore: [],
+          dropdownItemsAfter: [{to: '/versions', label: 'All versions'}],
+
+          // Do not add the link active class when browsing docs.
+          dropdownActiveClassDisabled: true,
         },
       ],
     },

website/docusaurus.config.js

@@ -262,11 +262,6 @@ module.exports = {
         srcDark: 'img/docusaurus_keytar.svg',
       },
       items: [
-        {
-          type: 'docsVersionDropdown',
-          position: 'left',
-          dropdownActiveClassDisabled: true,
-        },
         {
           type: 'doc',
           position: 'left',
@@ -287,10 +282,17 @@ module.exports = {
           position: 'left',
           activeBaseRegex: `/community/`,
         },
+        // right
         {
-          to: '/versions',
-          label: 'All versions',
+          type: 'docsVersionDropdown',
           position: 'right',
+          dropdownActiveClassDisabled: true,
+          dropdownItemsAfter: [
+            {
+              to: '/versions',
+              label: 'All versions',
+            },
+          ],
         },
         {
           href: 'https://github.com/facebook/docusaurus',