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({