version selector

Author: avivkeller

package-lock.json

@@ -45,7 +45,7 @@
     "@clack/prompts": "^0.11.0",
     "@heroicons/react": "^2.2.0",
     "@node-core/rehype-shiki": "1.0.1-1ccb8ae3260e261531c3f44674b8a98ff8918c30",
-    "@node-core/ui-components": "1.0.1-76b9440b92d63dfcc72150e14795f6958c55c2ce",
+    "@node-core/ui-components": "1.0.1-0bb5d49b96e1f11e1ef6cf965861929693053ca6",
     "@orama/orama": "^3.1.7",
     "@orama/plugin-data-persistence": "^3.1.7",
     "@orama/react-components": "^0.8.0",

package.json

@@ -2,6 +2,8 @@ import { buildSideBarDocPages } from './utils/buildBarProps.mjs';
 import buildContent from './utils/buildContent.mjs';
 import {
   getCompatibleVersions,
+  getVersionFromSemVer,
+  getVersionURL,
   groupNodesByModule,
 } from '../../utils/generators.mjs';
 import { getRemarkRecma } from '../../utils/remark.mjs';
@@ -48,7 +50,13 @@ export default {
         );
 
         const sideBarProps = {
-          versions: versions.map(({ version }) => `v${version.version}`),
+          versions: versions.map(({ version }) => {
+            const parsed = getVersionFromSemVer(version);
+            return {
+              value: getVersionURL(parsed, entry.api),
+              label: `v${parsed}`,
+            };
+          }),
           currentVersion: `v${version.version}`,
           docPages,
         };

src/generators/jsx-ast/index.mjs

@@ -1,12 +1,10 @@
 'use strict';
 
-import {
-  DOC_API_BASE_URL_VERSION,
-  DOC_API_BLOB_EDIT_BASE_URL,
-} from '../../../constants.mjs';
+import { DOC_API_BLOB_EDIT_BASE_URL } from '../../../constants.mjs';
 import {
   getCompatibleVersions,
   getVersionFromSemVer,
+  getVersionURL,
 } from '../../../utils/generators.mjs';
 
 /**
@@ -63,9 +61,8 @@ const buildVersions = (api, added, versions) => {
     const parsedVersion = getVersionFromSemVer(version);
 
     const ltsLabel = isLts ? '<b>LTS</b>' : '';
-    const linkToApi = `${DOC_API_BASE_URL_VERSION}${parsedVersion}/api/${api}.html`;
 
-    return `<li><a href="${linkToApi}">${parsedVersion} ${ltsLabel}</a></li>`;
+    return `<li><a href="${getVersionURL(parsedVersion, api)}">${parsedVersion} ${ltsLabel}</a></li>`;
   });
 
   return (

src/generators/legacy-html/utils/buildDropdowns.mjs

@@ -1,3 +1,4 @@
+import Select from '@node-core/ui-components/Common/Select/index.js';
 import SideBar from '@node-core/ui-components/Containers/SideBar';
 import { useEffect, useState } from 'react';
 
@@ -25,17 +26,21 @@ const getCurrentDoc = () => {
   return filename + hash;
 };
 
+/**
+ * Redirect to a URL
+ * @param {string} url URL
+ */
+const redirect = url => (window.location.href = url);
+
 /**
  * Sidebar component for MDX documentation with version selection and page navigation
  * @param {SideBarProps} props - Component props
- * @param {Array<string>} props.versions - Available documentation versions
+ * @param {Array<{ value: string, label: string }>} props.versions - Available documentation versions
  * @param {string} props.currentVersion - Currently selected version
  * @param {Array<DocPage>} props.docPages - Documentation pages structure
  * @returns {JSX.Element} The rendered sidebar component
  */
-export default function DocumentationSideBar({
-  /* versions, currentVersion, */ docPages,
-}) {
+export default ({ versions, currentVersion, docPages }) => {
   const [pathname, setPathname] = useState(CLIENT ? getCurrentDoc() : '');
 
   useEffect(() => {
@@ -54,12 +59,15 @@ export default function DocumentationSideBar({
   }));
 
   return (
-    <SideBar
-      pathname={pathname}
-      groups={groups}
-      onSelect={url => {
-        window.location.href = url;
-      }}
-    />
+    <SideBar pathname={pathname} groups={groups} onSelect={redirect}>
+      <div>
+        <Select
+          label="Node.js version"
+          values={versions}
+          placeholder={currentVersion}
+          onChange={redirect}
+        />
+      </div>
+    </SideBar>
   );
-}
+};

src/generators/web/client/components/SideBar.jsx

@@ -2,6 +2,8 @@
 
 import { coerce, compare, major } from 'semver';
 
+import { DOC_API_BASE_URL_VERSION } from '../constants.mjs';
+
 /**
  * Groups all the API metadata nodes by module (`api` property) so that we can process each different file
  * based on the module it belongs to.
@@ -33,6 +35,15 @@ export const getVersionFromSemVer = version =>
     ? `${version.major}.x`
     : `${version.major}.${version.minor}.x`;
 
+/**
+ * Gets the documentation URL for an API and version
+ *
+ * @param {string} version The version to be parsed
+ * @param {string} api The document
+ */
+export const getVersionURL = (version, api) =>
+  `${DOC_API_BASE_URL_VERSION}${version}/api/${api}.html`;
+
 /**
  * @TODO: This should not be necessary, and indicates errors within the API docs
  * @TODO: Hookup into a future Validation/Linting API