Version dropdown benchmarks and spec

To prepare for versioned benchmarks and specs, we set a dropdown
for both secions.

This is close to being a dirty hack :(

We do not display the dropdown we the path does not match the
plugin Id.

Inspired by facebook/docusaurus#7227

docs/docusaurus.config.js

@@ -193,6 +193,16 @@ const config = {
             label: "API Reference",
             position: "left",
           },
+          {
+            type: 'custom-localDocsVersionDropdown',
+            position: "right",
+            docsPluginId: "specification",
+          },
+          {
+            type: 'custom-localDocsVersionDropdown',
+            position: "right",
+            docsPluginId: "benchmarks",
+          },
           {
             href: "https://github.com/input-output-hk/hydra",
             label: "GitHub",

docs/src/components/NavbarItems/LocalDocsVersionDropdown.tsx

@@ -0,0 +1,104 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import {
+  useVersions,
+  useActiveDocContext,
+} from '@docusaurus/plugin-content-docs/client';
+import { useDocsPreferredVersion } from '@docusaurus/theme-common';
+import { useDocsVersionCandidates } from '@docusaurus/theme-common/internal';
+import { translate } from '@docusaurus/Translate';
+import { useLocation } from '@docusaurus/router';
+import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
+import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
+import type { Props } from '@theme/NavbarItem/DocsVersionDropdownNavbarItem';
+import type { GlobalVersion } from '@docusaurus/plugin-content-docs/client';
+
+
+const getVersionMainDoc = (version: GlobalVersion) =>
+  version.docs.find((doc) => doc.id === version.mainDocId)!;
+
+export default function localDocsVersionDropdown({
+  mobile,
+  docsPluginId,
+  dropdownActiveClassDisabled,
+  ...props
+}: Props): JSX.Element | null {
+
+  const { search, hash, pathname } = useLocation();
+  const activeDocContext = useActiveDocContext(docsPluginId);
+  const versions = useVersions(docsPluginId);
+  const { savePreferredVersionName } = useDocsPreferredVersion(docsPluginId);
+
+  if (!pathname.includes(`/${docsPluginId}`)) {
+    // We only render the version if the path matches the docsPluginId
+    // Yes, this is a very dirty hack :(
+    return null;
+  }
+
+  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 =
+      activeDocContext.alternateDocVersions[version.name] ??
+      getVersionMainDoc(version);
+    return {
+      label: version.label,
+      // preserve ?search#hash suffix on version switches
+      to: `${versionDoc.path}${search}${hash}`,
+      isActive: () => version === activeDocContext.activeVersion,
+      onClick: () => savePreferredVersionName(version.name),
+    };
+  });
+  const items = [
+    ...versionLinks,
+  ];
+
+  const dropdownVersion = useDocsVersionCandidates(docsPluginId)[0];
+
+  // Mobile dropdown is handled a bit differently
+  const dropdownLabel =
+    mobile && items.length > 1
+      ? translate({
+        id: 'theme.navbar.mobileVersionsDropdown.label',
+        message: 'Versions',
+        description:
+          'The label for the navbar versions dropdown on mobile view',
+      })
+      : dropdownVersion.label;
+  const dropdownTo =
+    mobile && items.length > 1
+      ? undefined
+      : getVersionMainDoc(dropdownVersion).path;
+
+  // 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 button instead of a dropdown
+  if (items.length <= 1) {
+    return (
+      <DefaultNavbarItem
+        {...props}
+        mobile={mobile}
+        label={dropdownLabel}
+        to={dropdownTo}
+        isActive={dropdownActiveClassDisabled ? () => false : undefined}
+      />
+    );
+  }
+
+  return (
+    <DropdownNavbarItem
+      {...props}
+      mobile={mobile}
+      label={dropdownLabel}
+      to={dropdownTo}
+      items={items}
+      isActive={dropdownActiveClassDisabled ? () => false : undefined}
+    />
+  );
+}

docs/src/theme/NavbarItem/ComponentTypes.js

@@ -0,0 +1,7 @@
+import ComponentTypes from '@theme-original/NavbarItem/ComponentTypes';
+import LocalDocsVersionDropdown from '@site/src/components/NavbarItems/LocalDocsVersionDropdown';
+
+export default {
+  ...ComponentTypes,
+  'custom-localDocsVersionDropdown': LocalDocsVersionDropdown,
+};