Hide unsupported from versions dropdown menu; add single page for nav…

…igating to unsupported versions (#808)

* Swizzle version dropdown component

* Add unsupported versions; remove front-matter config

* Hide unsupported versions from version dropdown menu

* Create unsupported-versions.mdx

* Hide unsupported Japanese versions of docs

i18n/versioned_docs/ja-jp/docusaurus-plugin-content-pages/unsupported-versions.mdx

@@ -0,0 +1,16 @@
+---
+---
+
+# サポートされていないバージョン
+
+import TranslationBanner from '/src/components/_translation-ja-jp.mdx';
+
+<TranslationBanner />
+
+ScalarDB の次のバージョンはサポートされなくなりました。
+
+- [ScalarDB 3.8](/docs/3.8/)
+- [ScalarDB 3.7](/docs/3.7/)
+- [ScalarDB 3.6](/docs/3.6/)
+- [ScalarDB 3.5](/docs/3.5/)
+- [ScalarDB 3.4](/docs/3.4/)

src/pages/unsupported-versions.mdx

@@ -1,11 +1,12 @@
 ---
-toc: false
 ---
 
 # Unsupported Versions
 
 The following versions of ScalarDB are no longer supported:
 
+- [ScalarDB 3.8](/docs/3.8/)
+- [ScalarDB 3.7](/docs/3.7/)
 - [ScalarDB 3.6](/docs/3.6/)
 - [ScalarDB 3.5](/docs/3.5/)
 - [ScalarDB 3.4](/docs/3.4/)

src/theme/NavbarItem/DocsVersionDropdownNavbarItem.js

@@ -0,0 +1,114 @@
+import React from 'react';
+import {
+  useVersions,
+  useActiveDocContext,
+  useDocsVersionCandidates,
+  useDocsPreferredVersion,
+} from '@docusaurus/plugin-content-docs/client';
+import {translate} from '@docusaurus/Translate';
+import {useLocation} from '@docusaurus/router';
+import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem';
+import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
+
+function getVersionMainDoc(version) {
+  return version.docs.find((doc) => doc.id === version.mainDocId);
+}
+
+function getVersionTargetDoc(version, activeDocContext) {
+  // We try to link to the same doc, in another version
+  // When not possible, fallback to the "main doc" of the version
+  return (
+    activeDocContext.alternateDocVersions[version.name] ??
+    getVersionMainDoc(version)
+  );
+}
+
+export default function DocsVersionDropdownNavbarItem({
+  mobile,
+  docsPluginId,
+  dropdownActiveClassDisabled,
+  dropdownItemsBefore = [],
+  dropdownItemsAfter = [],
+  ...props
+}) {
+  const {search, hash} = useLocation();
+  const activeDocContext = useActiveDocContext(docsPluginId);
+  const versions = useVersions(docsPluginId);
+  const {savePreferredVersionName} = useDocsPreferredVersion(docsPluginId);
+
+  // Filter out versions with "unsupported" or "サポートされていない" in the label
+  const supportedVersions = versions.filter((version) => {
+    const label = version.label.toLowerCase();
+    return (
+      !label.includes('(unsupported)') &&
+      !label.includes('(サポートされていない)')
+    );
+  });
+
+  function versionToLink(version) {
+    const targetDoc = getVersionTargetDoc(version, activeDocContext);
+    return {
+      label: version.label,
+      // preserve ?search#hash suffix on version switches
+      to: `${targetDoc.path}${search}${hash}`,
+      isActive: () => version === activeDocContext.activeVersion,
+      onClick: () => savePreferredVersionName(version.name),
+    };
+  }
+
+  const items = [
+    ...dropdownItemsBefore,
+    ...supportedVersions.map(versionToLink),
+    ...dropdownItemsAfter,
+    {
+      label: translate({
+        id: 'navbar.unsupportedVersions',
+        message: 'Unsupported Versions',
+      }),
+      to: '/unsupported-versions',
+    },
+  ];
+
+  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
+      : getVersionTargetDoc(dropdownVersion, activeDocContext).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}
+    />
+  );
+}