feat: Download layout (#6353)

* feat: Download layout

* refactor: utils methods moved into the file

* refactor/docs: deprecated url path

* refactor/docs: download utils

* refactor: markdown formatting

* fix: download URL paths

* feat: exclude option for os dropdown

* refactor: separated type import

* refactor: styling updates

* refactor: type definitions moved into the own file

* test: unit tests for download utils

* fix: icons added into the download/source buttons

* fix: LinkWithArrow import path

* docs/refactor: source button

* refactor: review updates

* chore: code-review and code improvements

* feat: finished download page

* chore: minor fixes

* chore: code-review and bug fixes

* chore: prevent page reload on tab change

* chore: improve activelink matching

* feat: proper download versions and prebuilt binaries

* feat: added more support text for each respective version

* chore: minor bitness fixes for macOS

* refactor: cleanup of certain logic and added docker package manager

* chore: fix shiki interop client-server

* chore: fix unit test

* chore: minor text correction

* chore: nvm uses v prefix

* chore: rename label to ARM64 to keep it easier to understand

* refactor: reduce layout shift and improve select accessibility

* chore: reduce layout shift, simplify codebox and cleanup text

* Apply suggestions from code review

Signed-off-by: Brian Muenzenmeyer <[e-mail]>

* added Docker platform logo, grouped by usage and alphabetized

* chore: minor changes and fixes

* chore: reduce build times by making build of these routes on-demand

* fix: keep same bitness if compatible on OS change, verify OS supports bitness

---------

Signed-off-by: Brian Muenzenmeyer <[e-mail]>
Co-authored-by: Claudio Wunder <[e-mail]>
Co-authored-by: Brian Muenzenmeyer <[e-mail]>

.husky/pre-commit

···
 
 # lint and format staged files
 npx lint-staged
+
+# verify typescript staged files
+npx tsc --build .

app/[locale]/next-data/api-data/route.ts

···
 
 // Enforces that this route is used as static rendering
 // @see https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamic
-export const dynamic = 'force-static';
+export const dynamic = 'error';
 
 // Ensures that this endpoint is invalidated and re-executed every X minutes
 // so that when new deployments happen, the data is refreshed

app/[locale]/next-data/blog-data/[category]/[page]/route.ts

···
 
 // Enforces that this route is cached and static as much as possible
 // @see https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamic
-export const dynamic = 'force-static';
+export const dynamic = 'error';
 
 // Ensures that this endpoint is invalidated and re-executed every X minutes
 // so that when new deployments happen, the data is refreshed

app/[locale]/next-data/page-data/route.ts

···
 
 // Enforces that this route is used as static rendering
 // @see https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamic
-export const dynamic = 'force-static';
+export const dynamic = 'error';
 
 // Ensures that this endpoint is invalidated and re-executed every X minutes
 // so that when new deployments happen, the data is refreshed

app/[locale]/next-data/release-data/route.ts

···
 
 // Enforces that this route is used as static rendering
 // @see https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamic
-export const dynamic = 'force-static';
+export const dynamic = 'error';
 
 // Ensures that this endpoint is invalidated and re-executed every X minutes
 // so that when new deployments happen, the data is refreshed

components/Common/ActiveLink/index.tsx

···
 import type { ComponentProps, FC } from 'react';
 
 import Link from '@/components/Link';
-import { useClientContext } from '@/hooks';
+import { usePathname } from '@/navigation.mjs';
 
 type ActiveLocalizedLinkProps = ComponentProps<typeof Link> & {
   activeClassName?: string;
···
   href = '',
   ...props
 }) => {
-  const { pathname } = useClientContext();
+  const pathname = usePathname();
 
   const finalClassName = classNames(className, {
     [activeClassName]: allowSubPath

components/Common/Breadcrumbs/index.tsx

···
-import { useMemo, type FC } from 'react';
+import type { FC } from 'react';
+import { useMemo } from 'react';
 
 import BreadcrumbHomeLink from '@/components/Common/Breadcrumbs/BreadcrumbHomeLink';
 import BreadcrumbItem from '@/components/Common/Breadcrumbs/BreadcrumbItem';

components/Common/CodeBox/index.tsx

···
 
 // Transforms a code element with plain text content into a more structured
 // format for rendering with line numbers
-const transformCode = (code: ReactNode): ReactNode => {
+const transformCode = (code: ReactNode, language: string): ReactNode => {
   if (!isValidElement(code)) {
     // Early return when the `CodeBox` child is not a valid element since the
     // type is a ReactNode, and can assume any value
···
   // being an empty string, so we need to remove it
   const lines = content.split('\n');
 
+  const extraStyle = language.length === 0 ? { fontFamily: 'monospace' } : {};
+
   return (
-    <code style={{ fontFamily: 'monospace' }}>
+    <code style={extraStyle}>
       {lines
         .flatMap((line, lineIndex) => {
           const columns = line.split(' ');
···
   return (
     <div className={styles.root}>
       <pre ref={ref} className={styles.content} tabIndex={0}>
-        {transformCode(children)}
+        {transformCode(children, language)}
       </pre>
 
       {language && (

components/Common/LinkTabs/index.module.css

···
   }
 }
 
-.tabsSelect > div {
-  @apply my-6
-    hidden
-    w-full
-    xs:flex;
+.tabsSelect {
+  @apply sm:visible
+    md:hidden;
+
+  > span {
+    @apply my-6
+      hidden
+      w-full
+      xs:flex;
+  }
 }

components/Common/ProgressionSidebar/index.module.css

···
       xs:hidden;
   }
 
-  > div {
+  > span {
     @apply hidden
       w-full
       xs:flex;

components/Common/ProgressionSidebar/index.tsx

···
 
   return (
     <nav className={styles.wrapper}>
+      <WithRouterSelect
+        label={t('components.common.sidebar.title')}
+        values={selectItems}
+        defaultValue={currentItem?.value}
+      />
+
       {groups.map(({ groupName, items }) => (
         <ProgressionSidebarGroup
           key={groupName.toString()}
···
           items={items}
         />
       ))}
-
-      <WithRouterSelect
-        label={t('components.common.sidebar.title')}
-        values={selectItems}
-        defaultValue={currentItem?.value}
-      />
     </nav>
   );
 };

components/Common/Select/index.module.css

···
 .select {
-  @apply flex
-    w-fit
+  @apply inline-flex
     flex-col
     gap-1.5;
 
···
 
   .trigger span {
     @apply flex
+      h-5
       items-center
       gap-2;
   }
···
   .text {
     @apply text-neutral-900
       data-[highlighted]:bg-neutral-100
+      data-[disabled]:text-neutral-600
       data-[highlighted]:text-neutral-900
       dark:text-white
-      dark:data-[highlighted]:bg-neutral-900;
+      dark:data-[highlighted]:bg-neutral-900
+      dark:data-[disabled]:text-neutral-700;
   }
 
   &.dropdown {

components/Common/Select/index.tsx

···
   label: FormattedMessage;
   value: string;
   iconImage?: React.ReactNode;
+  disabled?: boolean;
 };
 
 type SelectGroup = {
···
   label?: string;
   inline?: boolean;
   onChange?: (value: string) => void;
+  className?: string;
 };
 
 const Select: FC<SelectProps> = ({
···
   label,
   inline,
   onChange,
+  className,
 }) => {
   const id = useId();
 
···
   }, [values]);
 
   return (
-    <div className={classNames(styles.select, { [styles.inline]: inline })}>
-      {label && (
+    <span
+      className={classNames(
+        styles.select,
+        { [styles.inline]: inline },
+        className
+      )}
+    >
+      {label && !inline && (
         <label className={styles.label} htmlFor={id}>
           {label}
         </label>
       )}
+
       <Primitive.Root value={defaultValue} onValueChange={onChange}>
         <Primitive.Trigger
           className={styles.trigger}
···
                     </Primitive.Label>
                   )}
 
-                  {items.map(({ value, label, iconImage }) => (
+                  {items.map(({ value, label, iconImage, disabled }) => (
                     <Primitive.Item
                       key={value}
                       value={value}
+                      disabled={disabled}
                       className={classNames(styles.item, styles.text)}
                     >
                       <Primitive.ItemText>
···
           </Primitive.Content>
         </Primitive.Portal>
       </Primitive.Root>
-    </div>
+    </span>
   );
 };
 

components/Containers/NavBar/NavItem/index.tsx

···
     allowSubPath={href.startsWith('/')}
   >
     <span className={styles.label}>{children}</span>
+
     {type === 'nav' && href.startsWith('http') && (
       <ArrowUpRightIcon className={styles.icon} />
     )}

components/Containers/Sidebar/index.module.css

···
       xs:hidden;
   }
 
-  > div {
+  > span {
     @apply hidden
       w-full
       xs:flex;

components/Downloads/DownloadButton/index.tsx

···
 import Button from '@/components/Common/Button';
 import { useDetectOS } from '@/hooks';
 import type { NodeRelease } from '@/types';
-import { downloadUrlByOS } from '@/util/downloadUrlByOS';
+import { getNodeDownloadUrl } from '@/util/getNodeDownloadUrl';
 
 import styles from './index.module.css';
 
···
   children,
 }) => {
   const { os, bitness } = useDetectOS();
-  const downloadLink = downloadUrlByOS(versionWithPrefix, os, bitness);
+  const downloadLink = getNodeDownloadUrl(versionWithPrefix, os, bitness);
 
   return (
     <>

components/Downloads/DownloadLink.tsx

···
 
 import { useDetectOS } from '@/hooks';
 import type { NodeRelease } from '@/types';
-import { downloadUrlByOS } from '@/util/downloadUrlByOS';
+import { getNodeDownloadUrl } from '@/util/getNodeDownloadUrl';
 
 type DownloadLinkProps = { release: NodeRelease };
 
···
   children,
 }) => {
   const { os, bitness } = useDetectOS();
-  const downloadLink = downloadUrlByOS(versionWithPrefix, os, bitness);
+  const downloadLink = getNodeDownloadUrl(versionWithPrefix, os, bitness);
 
   return <a href={downloadLink}>{children}</a>;
 };

components/Downloads/Release/BitnessDropdown.tsx

···
+'use client';
+
+import { useTranslations } from 'next-intl';
+import type { FC } from 'react';
+import { useEffect, useContext, useMemo } from 'react';
+import semVer from 'semver';
+
+import Select from '@/components/Common/Select';
+import { useDetectOS } from '@/hooks/react-client';
+import { ReleaseContext } from '@/providers/releaseProvider';
+import { bitnessItems, formatDropdownItems } from '@/util/downloadUtils';
+
+const parseNumericBitness = (bitness: string) =>
+  /^\d+$/.test(bitness) ? Number(bitness) : bitness;
+
+const BitnessDropdown: FC = () => {
+  const { bitness: userBitness } = useDetectOS();
+  const { bitness, os, release, setBitness } = useContext(ReleaseContext);
+  const t = useTranslations();
+
+  // we also reset the bitness when the OS changes, because different OSs have
+  // different bitnesses available
+  useEffect(() => setBitness(userBitness), [setBitness, userBitness]);
+
+  // @TODO: We should have a proper utility that gives
+  // disabled OSs, Platforms, based on specific criteria
+  // this can be an optimisation for the future
+  // to remove this logic from this component
+  const disabledItems = useMemo(() => {
+    const disabledItems = [];
+
+    if (os === 'WIN' && semVer.satisfies(release.version, '< 19.9.0')) {
+      disabledItems.push('arm64');
+    }
+
+    if (os === 'LINUX' && semVer.satisfies(release.version, '< 4.0.0')) {
+      disabledItems.push('arm64', 'armv7l');
+    }
+
+    if (os === 'LINUX' && semVer.satisfies(release.version, '< 4.4.0')) {
+      disabledItems.push('ppc64le');
+    }
+
+    if (os === 'LINUX' && semVer.satisfies(release.version, '< 6.6.0')) {
+      disabledItems.push('s390x');
+    }
+
+    return disabledItems;
+  }, [os, release.version]);
+
+  // @TODO: We should have a proper utility that gives
+  // disabled OSs, Platforms, based on specific criteria
+  // this can be an optimisation for the future
+  // to remove this logic from this component
+  useEffect(() => {
+    const mappedBittnessesValues = bitnessItems[os].map(({ value }) => value);
+
+    const currentBittnessExcluded =
+      // Different OSs support different Bitnessess, hence we should also check
+      // if besides the current bitness not being supported for a given release version
+      // we also should check if it is not supported by the OS
+      disabledItems.includes(String(bitness)) ||
+      !mappedBittnessesValues.includes(String(bitness));
+
+    const nonExcludedBitness = mappedBittnessesValues.find(
+      bittness => !disabledItems.includes(bittness)
+    );
+
+    if (currentBittnessExcluded && nonExcludedBitness) {
+      setBitness(nonExcludedBitness);
+    }
+    // we shouldn't react when "actions" change
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [os, disabledItems]);
+
+  return (
+    <Select
+      label={t('layouts.download.dropdown.bitness')}
+      values={formatDropdownItems({
+        items: bitnessItems[os],
+        disabledItems,
+      })}
+      defaultValue={String(bitness)}
+      onChange={bitness => setBitness(parseNumericBitness(bitness))}
+      className="w-28"
+      inline={true}
+    />
+  );
+};
+
+export default BitnessDropdown;

components/Downloads/Release/BlogPostLink.tsx

···
+'use client';
+
+import type { FC, PropsWithChildren } from 'react';
+import { useContext } from 'react';
+
+import LinkWithArrow from '@/components/Downloads/Release/LinkWithArrow';
+import { ReleaseContext } from '@/providers/releaseProvider';
+
+const BlogPostLink: FC<PropsWithChildren> = ({ children }) => {
+  const { release } = useContext(ReleaseContext);
+  const version = release.versionWithPrefix;
+
+  return (
+    <LinkWithArrow href={`/blog/release/${version}`}>{children}</LinkWithArrow>
+  );
+};
+
+export default BlogPostLink;

components/Downloads/Release/DownloadButton.tsx

···
+'use client';
+
+import { CloudArrowDownIcon } from '@heroicons/react/24/outline';
+import { useTranslations } from 'next-intl';
+import { useContext } from 'react';
+import type { FC } from 'react';
+
+import Button from '@/components/Common/Button';
+import { ReleaseContext } from '@/providers/releaseProvider';
+import { getNodeDownloadUrl } from '@/util/getNodeDownloadUrl';
+
+type DownloadButtonProps = { kind: 'installer' | 'binary' | 'source' };
+
+const DownloadButton: FC<DownloadButtonProps> = ({ kind = 'installer' }) => {
+  const t = useTranslations();
+  const { release, os, bitness } = useContext(ReleaseContext);
+
+  const version = release.versionWithPrefix;
+  const url = getNodeDownloadUrl(version, os, bitness, kind);
+
+  return (
+    <div className="mb-2 mt-6">
+      <Button href={url} disabled={!version}>
+        <CloudArrowDownIcon />
+
+        {t('layouts.download.buttons.prebuilt', { version })}
+      </Button>
+    </div>
+  );
+};
+
+export default DownloadButton;

components/Downloads/Release/LinkWithArrow.tsx

···
+import { ArrowUpRightIcon } from '@heroicons/react/24/solid';
+import type { FC, PropsWithChildren } from 'react';
+
+import Link from '@/components/Link';
+
+type AccessibleAnchorProps = { href?: string };
+
+const LinkWithArrow: FC<PropsWithChildren<AccessibleAnchorProps>> = ({
+  children,
+  ...props
+}) => (
+  <Link {...props}>
+    {children}
+    <ArrowUpRightIcon className="ml-1 inline w-3 fill-white" />
+  </Link>
+);
+export default LinkWithArrow;

components/Downloads/Release/NpmVersion.tsx

···
+'use client';
+
+import { useContext } from 'react';
+import type { FC } from 'react';
+
+import { ReleaseContext } from '@/providers/releaseProvider';
+
+const NpmVersion: FC = () => {
+  const {
+    release: { npm },
+  } = useContext(ReleaseContext);
+
+  return <>{npm}</>;
+};
+
+export default NpmVersion;

components/Downloads/Release/OperatingSystemDropdown.tsx

···
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { useContext, useEffect, useMemo } from 'react';
+import type { FC } from 'react';
+
+import Select from '@/components/Common/Select';
+import Apple from '@/components/Icons/Platform/Apple';
+import Linux from '@/components/Icons/Platform/Linux';
+import Microsoft from '@/components/Icons/Platform/Microsoft';
+import { useDetectOS } from '@/hooks/react-client';
+import { ReleaseContext } from '@/providers/releaseProvider';
+import type { UserOS } from '@/types/userOS';
+import {
+  formatDropdownItems,
+  operatingSystemItems,
+} from '@/util/downloadUtils';
+
+type OperatingSystemDropdownProps = { exclude: Array<UserOS> };
+
+const OperatingSystemDropdown: FC<OperatingSystemDropdownProps> = ({
+  exclude = [],
+}) => {
+  const { os: userOS } = useDetectOS();
+  const { platform, os, setOS } = useContext(ReleaseContext);
+  const t = useTranslations();
+
+  // we shouldn't react when "actions" change
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => setOS(userOS), [userOS]);
+
+  // @TODO: We should have a proper utility that gives
+  // disabled OSs, Platforms, based on specific criteria
+  // this can be an optimisation for the future
+  // to remove this logic from this component
+  const disabledItems = useMemo(() => {
+    const disabledItems = exclude;
+
+    if (platform === 'BREW') {
+      disabledItems.push('WIN');
+    }
+
+    if (platform === 'DOCKER') {
+      disabledItems.push('LINUX');
+    }
+
+    return disabledItems;
+  }, [exclude, platform]);
+
+  // @TODO: We should have a proper utility that gives
+  // disabled OSs, Platforms, based on specific criteria
+  // this can be an optimisation for the future
+  // to remove this logic from this component
+  useEffect(() => {
+    const currentOSExcluded = disabledItems.includes(os);
+
+    const nonExcludedOS = operatingSystemItems
+      .map(({ value }) => value)
+      .find(os => !disabledItems.includes(os));
+
+    if (currentOSExcluded && nonExcludedOS) {
+      setOS(nonExcludedOS);
+    }
+    // we shouldn't react when "actions" change
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [os, disabledItems]);
+
+  return (
+    <Select
+      label={t('layouts.download.dropdown.os')}
+      values={formatDropdownItems({
+        items: operatingSystemItems,
+        disabledItems,
+        icons: {
+          WIN: <Microsoft width={16} height={16} />,
+          MAC: <Apple width={16} height={16} />,
+          LINUX: <Linux width={16} height={16} />,
+        },
+      })}
+      defaultValue={os}
+      onChange={value => setOS(value as UserOS)}
+      className="w-[8.5rem]"
+      inline={true}
+    />
+  );
+};
+
+export default OperatingSystemDropdown;

components/Downloads/Release/PlatformDropdown.tsx

···
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { useContext, useEffect, useMemo } from 'react';
+import type { FC } from 'react';
+
+import Select from '@/components/Common/Select';
+import Docker from '@/components/Icons/Platform/Docker';
+import Homebrew from '@/components/Icons/Platform/Homebrew';
+import NVM from '@/components/Icons/Platform/NVM';
+import { ReleaseContext } from '@/providers/releaseProvider';
+import type { PackageManager } from '@/types/release';
+import { formatDropdownItems, platformItems } from '@/util/downloadUtils';
+
+const supportedHomebrewVersions = ['Active LTS', 'Maintenance LTS', 'Current'];
+
+const PlatformDropdown: FC = () => {
+  const { release, os, platform, setPlatform } = useContext(ReleaseContext);
+  const t = useTranslations();
+
+  // @TODO: We should have a proper utility that gives
+  // disabled OSs, Platforms, based on specific criteria
+  // this can be an optimisation for the future
+  // to remove this logic from this component
+  const disabledItems = useMemo(() => {
+    const disabledItems = [];
+
+    if (os === 'WIN') {
+      disabledItems.push('BREW');
+    }
+
+    if (os === 'LINUX') {
+      disabledItems.push('DOCKER');
+    }
+
+    const releaseSupportsHomebrew = supportedHomebrewVersions.includes(
+      release.status
+    );
+
+    if (!releaseSupportsHomebrew) {
+      disabledItems.push('BREW');
+    }
+
+    return disabledItems;
+  }, [os, release.status]);
+
+  // @TODO: We should have a proper utility that gives
+  // disabled OSs, Platforms, based on specific criteria
+  // this can be an optimisation for the future
+  // to remove this logic from this component
+  useEffect(() => {
+    const currentPlatformExcluded = disabledItems.includes(platform);
+
+    const nonExcludedPlatform = platformItems
+      .map(({ value }) => value)
+      .find(platform => !disabledItems.includes(platform));
+
+    if (currentPlatformExcluded && nonExcludedPlatform) {
+      setPlatform(nonExcludedPlatform);
+    }
+    // we shouldn't react when "actions" change
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [release.status, disabledItems, platform]);
+
+  return (
+    <Select
+      label={t('layouts.download.dropdown.platform')}
+      values={formatDropdownItems({
+        items: platformItems,
+        icons: {
+          NVM: <NVM width={16} height={16} />,
+          BREW: <Homebrew width={16} height={16} />,
+          DOCKER: <Docker width={16} height={16} />,
+        },
+        disabledItems,
+      })}
+      defaultValue={platform}
+      onChange={platform => setPlatform(platform as PackageManager)}
+      className="w-28"
+      inline={true}
+    />
+  );
+};
+
+export default PlatformDropdown;

components/Downloads/Release/ReleaseCodeBox.tsx

···
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { useContext, useEffect, useState } from 'react';
+import type { FC } from 'react';
+
+import CodeBox from '@/components/Common/CodeBox';
+import { ReleaseContext } from '@/providers/releaseProvider';
+import { getShiki, highlightToHtml } from '@/util/getHighlighter';
+import { getNodeDownloadSnippet } from '@/util/getNodeDownloadSnippet';
+
+// We cannot do top-level awaits on utilities or code that is imported by client-only components
+// hence we only declare a Promise and let it be fulfilled by the first call to the function
+const memoizedShiki = getShiki();
+
+const ReleaseCodeBox: FC = () => {
+  const {
+    platform,
+    os,
+    release: { major },
+  } = useContext(ReleaseContext);
+
+  const [code, setCode] = useState('');
+  const t = useTranslations();
+
+  useEffect(() => {
+    const updatedCode = getNodeDownloadSnippet(major, os)[platform];
+    // Docker and NVM support downloading tags/versions by their full release number
+    // but usually we should recommend users to download "major" versions
+    // since our Downlooad Buttons get the latest minor of a major, it does make sense
+    // to request installation of a major via a package manager
+    memoizedShiki
+      .then(shiki => highlightToHtml(shiki)(updatedCode, 'bash'))
+      .then(setCode);
+  }, [major, os, platform]);
+
+  return (
+    <div className="mb-2 mt-6 flex min-h-80 flex-col gap-2">
+      {code && (
+        <CodeBox language="Bash">
+          <code dangerouslySetInnerHTML={{ __html: code }} />
+        </CodeBox>
+      )}
+
+      <span className="text-center text-xs text-neutral-800 dark:text-neutral-200">
+        {t('layouts.download.codeBox.communityWarning')}
+      </span>
+    </div>
+  );
+};
+
+export default ReleaseCodeBox;

components/Downloads/Release/ReleaseStatus.tsx

···
+'use client';
+
+import { useContext } from 'react';
+import type { FC } from 'react';
+
+import { ReleaseContext } from '@/providers/releaseProvider';
+
+const ReleaseStatus: FC = () => {
+  const {
+    release: { status },
+  } = useContext(ReleaseContext);
+
+  return <>{status}</>;
+};
+
+export default ReleaseStatus;

components/Downloads/Release/ReleaseVersion.tsx

···
+'use client';
+
+import { useContext } from 'react';
+import type { FC } from 'react';
+
+import { ReleaseContext } from '@/providers/releaseProvider';
+
+const ReleaseVersion: FC = () => {
+  const {
+    release: { version },
+  } = useContext(ReleaseContext);
+
+  return <>{version}</>;
+};
+
+export default ReleaseVersion;

components/Downloads/Release/SourceButton.tsx

···
+'use client';
+
+import { CloudArrowDownIcon } from '@heroicons/react/24/outline';
+import { useTranslations } from 'next-intl';
+import { useContext } from 'react';
+import type { FC } from 'react';
+
+import Button from '@/components/Common/Button';
+import { ReleaseContext } from '@/providers/releaseProvider';
+
+const SourceButton: FC = () => {
+  const t = useTranslations();
+  const { release } = useContext(ReleaseContext);
+
+  const version = release.versionWithPrefix;
+  const url = `https://nodejs.org/dist/${version}/node-${version}.tar.gz`;
+
+  return (
+    <div className="mb-2 mt-6 flex items-center gap-2">
+      <Button href={url} disabled={!version}>
+        <CloudArrowDownIcon />
+        {t('layouts.download.buttons.source', {
+          version: version,
+        })}
+      </Button>
+    </div>
+  );
+};
+
+export default SourceButton;

components/Downloads/Release/VerifyingBinariesLink.tsx

···
+import type { FC, PropsWithChildren } from 'react';
+
+import LinkWithArrow from '@/components/Downloads/Release/LinkWithArrow';
+
+const VerifyingBinariesLink: FC<PropsWithChildren> = ({ children }) => (
+  <LinkWithArrow href="https://github.com/nodejs/node#verifying-binaries">
+    {children}
+  </LinkWithArrow>
+);
+
+export default VerifyingBinariesLink;

components/Downloads/Release/VersionDropdown.tsx

···
+'use client';
+
+import { useTranslations } from 'next-intl';
+import type { FC } from 'react';
+import { useContext } from 'react';
+
+import Select from '@/components/Common/Select';
+import { ReleaseContext } from '@/providers/releaseProvider';
+
+const getDropDownStatus = (version: string, status: string) => {
+  if (status === 'Active LTS') {
+    return `${version} (LTS)`;
+  }
+
+  if (status === 'Current') {
+    return `${version} (Current)`;
+  }
+
+  return version;
+};
+
+const VersionDropdown: FC = () => {
+  const { releases, release, setVersion } = useContext(ReleaseContext);
+  const t = useTranslations();
+
+  return (
+    <Select
+      label={t('layouts.download.dropdown.version')}
+      values={releases.map(({ status, versionWithPrefix }) => ({
+        value: versionWithPrefix,
+        label: getDropDownStatus(versionWithPrefix, status),
+      }))}
+      defaultValue={release.versionWithPrefix}
+      onChange={setVersion}
+      className="w-40"
+      inline={true}
+    />
+  );
+};
+
+export default VersionDropdown;

components/Home/HomeDownloadButton.tsx

···
 import { useDetectOS } from '@/hooks';
 import { DIST_URL } from '@/next.constants.mjs';
 import type { NodeRelease } from '@/types';
-import { downloadUrlByOS } from '@/util/downloadUrlByOS';
+import { getNodeDownloadUrl } from '@/util/getNodeDownloadUrl';
 import { getNodejsChangelog } from '@/util/getNodeJsChangelog';
 
 const HomeDownloadButton: FC<NodeRelease> = ({
···
   const { os, bitness } = useDetectOS();
   const t = useTranslations();
 
-  const nodeDownloadLink = downloadUrlByOS(versionWithPrefix, os, bitness);
+  const nodeDownloadLink = getNodeDownloadUrl(versionWithPrefix, os, bitness);
   const nodeApiLink = `${DIST_URL}latest-v${major}.x/docs/api/`;
   const nodeAllDownloadsLink = `/download${isLts ? '/' : '/current'}`;
 

components/Icons/Platform/Docker.tsx

···
+import type { FC, SVGProps } from 'react';
+
+const Docker: FC<SVGProps<SVGSVGElement>> = props => (
+  <svg
+    width="32"
+    height="32"
+    viewBox="0 0 756.26 596.9"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fill="#1d63ed"
+      strokeWidth="0px"
+      d="M743.96,245.25c-18.54-12.48-67.26-17.81-102.68-8.27-1.91-35.28-20.1-65.01-53.38-90.95l-12.32-8.27-8.21,12.4c-16.14,24.5-22.94,57.14-20.53,86.81,1.9,18.28,8.26,38.83,20.53,53.74-46.1,26.74-88.59,20.67-276.77,20.67H.06c-.85,42.49,5.98,124.23,57.96,190.77,5.74,7.35,12.04,14.46,18.87,21.31,42.26,42.32,106.11,73.35,201.59,73.44,145.66.13,270.46-78.6,346.37-268.97,24.98.41,90.92,4.48,123.19-57.88.79-1.05,8.21-16.54,8.21-16.54l-12.3-8.27ZM189.67,206.39h-81.7v81.7h81.7v-81.7ZM295.22,206.39h-81.7v81.7h81.7v-81.7ZM400.77,206.39h-81.7v81.7h81.7v-81.7ZM506.32,206.39h-81.7v81.7h81.7v-81.7ZM84.12,206.39H2.42v81.7h81.7v-81.7ZM189.67,103.2h-81.7v81.7h81.7v-81.7ZM295.22,103.2h-81.7v81.7h81.7v-81.7ZM400.77,103.2h-81.7v81.7h81.7v-81.7ZM400.77,0h-81.7v81.7h81.7V0Z"
+    />
+  </svg>
+);
+
+export default Docker;

components/Icons/Platform/Generic.tsx

···
     height="32"
     viewBox="0 0 32 32"
     fill="none"
+    stroke="#CBD4D9"
     xmlns="http://www.w3.org/2000/svg"
     {...props}
   >
     <path
       d="M16 29.333c7.364 0 13.333-5.97 13.333-13.333 0-7.364-5.97-13.334-13.333-13.334C8.636 2.666 2.667 8.636 2.667 16S8.637 29.333 16 29.333Z"
-      stroke="#000"
       strokeWidth="2.667"
       strokeLinecap="round"
       strokeLinejoin="round"

components/Link.tsx

···
 import { Link as LocalizedLink } from '@/navigation.mjs';
 
 type LinkProps = Omit<ComponentProps<typeof LocalizedLink>, 'href'> & {
-  href: string | undefined;
+  href?: string;
 };
 
 const Link: FC<LinkProps> = ({ children, href, ...props }) => {

components/__design__/platform-logos.stories.tsx

···
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
 import Apple from '@/components/Icons/Platform/Apple';
+import Docker from '@/components/Icons/Platform/Docker';
 import Generic from '@/components/Icons/Platform/Generic';
 import Homebrew from '@/components/Icons/Platform/Homebrew';
 import Linux from '@/components/Icons/Platform/Linux';
···
   render: () => (
     <div className="flex flex-row gap-4">
       <div className="flex flex-col items-center gap-4">
-        <Linux width={64} height={64} />
         <Apple width={64} height={64} />
-        <NVM width={64} height={64} />
+        <Linux width={64} height={64} />
+        <Microsoft width={64} height={64} />
       </div>
       <div className="flex flex-col items-center gap-4">
-        <Microsoft width={64} height={64} />
+        <Docker width={64} height={64} />
         <Homebrew width={64} height={64} />
+        <NVM width={64} height={64} />
+      </div>
+      <div className="flex flex-col items-center gap-4">
         <Generic width={64} height={64} />
       </div>
     </div>

components/withDownloadCategories.tsx

···
+import { getTranslations } from 'next-intl/server';
+import type { FC, PropsWithChildren } from 'react';
+
+import { useClientContext } from '@/hooks/react-server';
+import getReleaseData from '@/next-data/releaseData';
+import { ReleaseProvider } from '@/providers/releaseProvider';
+import type { NodeReleaseStatus } from '@/types';
+import { getDownloadCategory, mapCategoriesToTabs } from '@/util/downloadUtils';
+
+import LinkTabs from './Common/LinkTabs';
+import WithNodeRelease from './withNodeRelease';
+
+const WithDownloadCategories: FC<PropsWithChildren> = async ({ children }) => {
+  const t = await getTranslations();
+  const releases = await getReleaseData();
+
+  const { pathname } = useClientContext();
+  const { page, category, subCategory } = getDownloadCategory(pathname);
+
+  const initialRelease: Array<NodeReleaseStatus> = pathname.includes('current')
+    ? ['Current']
+    : ['Active LTS', 'Maintenance LTS'];
+
+  return (
+    <LinkTabs
+      activeTab={category}
+      label={t('layouts.download.selectCategory')}
+      tabs={mapCategoriesToTabs({
+        page: page,
+        categories: [
+          {
+            category: 'download',
+            label: t('layouts.download.categories.download'),
+          },
+          {
+            category: 'prebuilt-binaries',
+            label: t('layouts.download.categories.prebuilt-binaries'),
+          },
+          {
+            category: 'package-manager',
+            label: t('layouts.download.categories.package-manager'),
+          },
+          {
+            category: 'source-code',
+            label: t('layouts.download.categories.source-code'),
+          },
+        ],
+        subCategory: subCategory,
+      })}
+    >
+      <WithNodeRelease status={initialRelease}>
+        {({ release }) => (
+          <ReleaseProvider initialRelease={release} releases={releases}>
+            {children}
+          </ReleaseProvider>
+        )}
+      </WithNodeRelease>
+    </LinkTabs>
+  );
+};
+
+export default WithDownloadCategories;

components/withLayout.tsx

···
 import AboutLayout from '@/layouts/New/About';
 import BlogLayout from '@/layouts/New/Blog';
 import DefaultLayout from '@/layouts/New/Default';
+import DownloadLayout from '@/layouts/New/Download';
 import HomeLayout from '@/layouts/New/Home';
 import LearnLayout from '@/layouts/New/Learn';
 import PostLayout from '@/layouts/New/Post';
···
   'blog-post.hbs': PostLayout,
   'blog-category.hbs': BlogLayout,
   'search.hbs': SearchLayout,
+  'download.hbs': DownloadLayout,
 } satisfies Record<Layouts, FC>;
 
 type WithLayout<L = Layouts | LegacyLayouts> = PropsWithChildren<{ layout: L }>;

i18n/locales/en.json

···
         "description": "This page has thrown a non-recoverable error."
       },
       "backToHome": "Back to Home"
+    },
+    "download": {
+      "selectCategory": "Categories",
+      "categories": {
+        "download": "Prebuilt Installer",
+        "prebuilt-binaries": "Prebuilt Binaries",
+        "package-manager": "Package Manager",
+        "source-code": "Source Code"
+      },
+      "buttons": {
+        "prebuilt": "Download Node.js {version}",
+        "source": "Download Node.js {version} source"
+      },
+      "dropdown": {
+        "bitness": "Bitness",
+        "os": "Operating System",
+        "version": "Version",
+        "platform": "Platform"
+      },
+      "codeBox": {
+        "communityWarning": "Package Managers and their installation scripts are not maintained by the Node.js project.s"
+      }
     }
   },
   "pages": {

layouts/New/Download.tsx

···
+import type { FC, PropsWithChildren } from 'react';
+
+import WithDownloadCategories from '@/components/withDownloadCategories';
+import WithFooter from '@/components/withFooter';
+import WithNavBar from '@/components/withNavBar';
+import { useClientContext } from '@/hooks/react-server';
+
+import styles from './layouts.module.css';
+
+const DownloadLayout: FC<PropsWithChildren> = async ({ children }) => {
+  const {
+    frontmatter: { title, subtitle },
+  } = useClientContext();
+
+  return (
+    <>
+      <WithNavBar />
+
+      <div className={styles.downloadLayout}>
+        <main>
+          <h1>{title}</h1>
+
+          <p>{subtitle}</p>
+
+          <WithDownloadCategories>{children}</WithDownloadCategories>
+        </main>
+      </div>
+
+      <WithFooter />
+    </>
+  );
+};
+
+export default DownloadLayout;

layouts/New/layouts.module.css

···
   }
 }
 
-.blogLayout {
+.blogLayout,
+.downloadLayout {
   @apply flex
     w-full
     justify-center
···
     xs:dark:bg-none;
 
   main {
-    @apply max-w-8xl
+    @apply max-w-5xl
       gap-4
       px-4
       py-12
       md:px-14
       lg:px-28;
+  }
+}
+
+.downloadLayout {
+  section:nth-last-child(1) {
+    @apply flex
+      flex-col
+      gap-2;
+
+    p {
+      @apply text-sm;
+    }
+  }
+
+  section:nth-last-child(2) p {
+    @apply flex
+      flex-row
+      flex-wrap
+      items-center
+      gap-2
+      text-base;
   }
 }
 

next.dynamic.constants.mjs

···
 export const IGNORED_ROUTES = [
   // This is used to ignore all blog routes except for the English language
   ({ locale, pathname }) =>
-    locale !== defaultLocale.code && /^blog\//.test(pathname),
+    locale !== defaultLocale.code && /^blog/.test(pathname),
+  // Do not statically build the redesign pages on the static export
+  // @deprecated this should be removed once we remove the legacy website
+  ({ pathname }) => /^new-design/.test(pathname),
 ];
 
 /**

next.mdx.shiki.mjs

···
 import { toString } from 'hast-util-to-string';
 import { SKIP, visit } from 'unist-util-visit';
 
-import { highlightToHast } from './util/getHighlighter';
+import { getShiki, highlightToHast } from './util/getHighlighter';
 
 // This is what Remark will use as prefix within a <pre> className
 // to attribute the current language of the <pre> element
 const languagePrefix = 'language-';
+
+// We do a top-level await, since the Unist-tree visitor
+// is synchronous, and it makes more sense to do a top-level
+// await, rather than an await inside the visitor function
+const memoizedShiki = await getShiki();
 
 /**
  * Retrieve the value for the given meta key.
···
       const languageId = codeLanguage.slice(languagePrefix.length);
 
       // Parses the <pre> contents and returns a HAST tree with the highlighted code
-      const { children } = highlightToHast(preElementContents, languageId);
+      const { children } = highlightToHast(memoizedShiki)(
+        preElementContents,
+        languageId
+      );
 
       // Adds the original language back to the <pre> element
       children[0].properties.class = classNames(

next.mdx.use.mjs

···
 import DownloadButton from './components/Downloads/DownloadButton';
 import DownloadLink from './components/Downloads/DownloadLink';
 import DownloadReleasesTable from './components/Downloads/DownloadReleasesTable';
+import BitnessDropdown from './components/Downloads/Release/BitnessDropdown';
+import BlogPostLink from './components/Downloads/Release/BlogPostLink';
+import ReleaseDownloadButton from './components/Downloads/Release/DownloadButton';
+import LinkWithArrow from './components/Downloads/Release/LinkWithArrow';
+import NpmVersion from './components/Downloads/Release/NpmVersion';
+import OperatingSystemDropdown from './components/Downloads/Release/OperatingSystemDropdown';
+import PlatformDropdown from './components/Downloads/Release/PlatformDropdown';
+import ReleaseCodeBox from './components/Downloads/Release/ReleaseCodeBox';
+import ReleaseStatus from './components/Downloads/Release/ReleaseStatus';
+import ReleaseVersion from './components/Downloads/Release/ReleaseVersion';
+import SourceButton from './components/Downloads/Release/SourceButton';
+import VerifyingBinariesLink from './components/Downloads/Release/VerifyingBinariesLink';
+import VersionDropdown from './components/Downloads/Release/VersionDropdown';
 import HomeDownloadButton from './components/Home/HomeDownloadButton';
 import Link from './components/Link';
 import UpcomingEvents from './components/MDX/Calendar/UpcomingEvents';
···
   UpcomingSummits: UpcomingSummits,
   // Renders an container for Upcoming Node.js Events
   UpcomingEvents: UpcomingEvents,
+  // Links with External Arrow
+  LinkWithArrow: LinkWithArrow,
+  // Group of components that enable you to select versions for Node.js
+  // releases and download selected versions. Uses `releaseProvider` as a provider
+  Release: {
+    // Renders a drop-down menu from which the version can select
+    VersionDropdown: VersionDropdown,
+    // Renders a drop-down menu from which the platform can select
+    PlatformDropdown: PlatformDropdown,
+    // Renders a drop-down menu from which the bitness can select
+    BitnessDropdown: BitnessDropdown,
+    // Renders a drop-down menu from which the operating system can select
+    OperatingSystemDropdown: OperatingSystemDropdown,
+    // Renders a npm version of the selected release
+    NpmVersion: NpmVersion,
+    // Renders a release version of the selected release
+    Version: ReleaseVersion,
+    // Renders a release status of the selected release
+    Status: ReleaseStatus,
+    // Renders a Blog Post Link for the selected release
+    BlogPostLink: BlogPostLink,
+    // Renders a Verifying Binaries Link
+    VerifyingBinariesLink: VerifyingBinariesLink,
+    // Renders a Download Button for the selected release
+    DownloadButton: ReleaseDownloadButton,
+    // Renders a Source Download Button for the selected release
+    SourceButton: SourceButton,
+    // Renders a Release CodeBox
+    ReleaseCodeBox: ReleaseCodeBox,
+  },
 };
 
 /**

next.rewrites.mjs

···
   // This allows us to remap legacy website URLs to the temporary redesign ones
   // @todo: remove this once website redesign is done
   if (ENABLE_WEBSITE_REDESIGN) {
-    mappedRewrites.push({
-      source: localesMatch,
-      destination: '/:locale/new-design',
-    });
+    mappedRewrites.push(
+      {
+        source: localesMatch,
+        destination: '/:locale/new-design',
+      },
+      {
+        source: '/:locale/download',
+        destination: '/:locale/new-design/download',
+      },
+      {
+        source: '/:locale/download/:path',
+        destination: '/:locale/new-design/download/:path',
+      },
+      {
+        source: '/:locale/download/:path/:version',
+        destination: '/:locale/new-design/download/:path/:version',
+      }
+    );
   }
 
   return { afterFiles: mappedRewrites };

package-lock.json

···
         "autoprefixer": "~10.4.16",
         "classnames": "~2.5.1",
         "cross-env": "7.0.3",
+        "dedent": "1.5.1",
         "feed": "~4.2.2",
         "github-slugger": "~2.0.0",
         "glob": "~10.3.10",
···
       }
     },
     "node_modules/dedent": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz",
-      "integrity": "sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==",
-      "dev": true
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/dedent/-/dedent-1.5.1.tgz",
+      "integrity": "sha512-+LxW+KLWxu3HW3M2w2ympwtqPrqYRzU8fqi6Fhd18fBALe15blJPI/I4+UHveMVG6lJqB4JNd4UG0S5cnVHwIg==",
+      "peerDependencies": {
+        "babel-plugin-macros": "^3.1.0"
+      },
+      "peerDependenciesMeta": {
+        "babel-plugin-macros": {
+          "optional": true
+        }
+      }
     },
     "node_modules/deep-equal": {
       "version": "2.2.3",
···
         "fast-json-parse": "^1.0.3",
         "objectorarray": "^1.0.5"
       }
+    },
+    "node_modules/endent/node_modules/dedent": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz",
+      "integrity": "sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==",
+      "dev": true
     },
     "node_modules/enhanced-resolve": {
       "version": "5.15.0",
···
       },
       "funding": {
         "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
-    "node_modules/jest-circus/node_modules/dedent": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/dedent/-/dedent-1.5.1.tgz",
-      "integrity": "sha512-+LxW+KLWxu3HW3M2w2ympwtqPrqYRzU8fqi6Fhd18fBALe15blJPI/I4+UHveMVG6lJqB4JNd4UG0S5cnVHwIg==",
-      "dev": true,
-      "peerDependencies": {
-        "babel-plugin-macros": "^3.1.0"
-      },
-      "peerDependenciesMeta": {
-        "babel-plugin-macros": {
-          "optional": true
-        }
       }
     },
     "node_modules/jest-circus/node_modules/pretty-format": {

package.json

···
     "autoprefixer": "~10.4.16",
     "classnames": "~2.5.1",
     "cross-env": "7.0.3",
+    "dedent": "1.5.1",
     "feed": "~4.2.2",
     "github-slugger": "~2.0.0",
     "glob": "~10.3.10",

pages/en/new-design/download/current.mdx

···
+---
+layout: download.hbs
+title: Download Node.js®
+subtitle: Download Node.js the way you want.
+---
+
+<section>
+  I want the <Release.VersionDropdown /> version of Node.js for <Release.OperatingSystemDropdown exclude={["LINUX"]} /> running <Release.BitnessDropdown />
+
+  <Release.DownloadButton kind="installer" />
+</section>
+
+<section>
+Node.js includes <LinkWithArrow href="https://npmjs.com">npm</LinkWithArrow> (<Release.NpmVersion />) and corepack.
+
+Read the blog post for <Release.BlogPostLink>this version</Release.BlogPostLink>
+
+Learn how to <Release.VerifyingBinariesLink>verify signed SHASUMS</Release.VerifyingBinariesLink>
+
+Check out all available Node.js <LinkWithArrow href="https://nodejs.org/dist/">download options</LinkWithArrow>
+
+</section>

pages/en/new-design/download/index.mdx

···
+---
+layout: download.hbs
+title: Download Node.js®
+subtitle: Download Node.js the way you want.
+---
+
+<section>
+  I want the <Release.VersionDropdown /> version of Node.js for <Release.OperatingSystemDropdown exclude={["LINUX"]} /> running <Release.BitnessDropdown />
+
+  <Release.DownloadButton kind="installer" />
+</section>
+
+<section>
+Node.js includes <LinkWithArrow href="https://npmjs.com">npm</LinkWithArrow> (<Release.NpmVersion />) and corepack.
+
+Read the blog post for <Release.BlogPostLink>this version</Release.BlogPostLink>
+
+Learn how to <Release.VerifyingBinariesLink>verify signed SHASUMS</Release.VerifyingBinariesLink>
+
+Check out all available Node.js <LinkWithArrow href="https://nodejs.org/dist/">download options</LinkWithArrow>
+
+</section>

pages/en/new-design/download/package-manager/all.md

···
+---
+layout: docs.hbs
+title: Installing Node.js via package manager
+---
+
+# Installing Node.js via Package Managers
+
+> The packages on this page are maintained and supported by their respective packagers, **not** the Node.js core team. Please report any issues you encounter to the package maintainer. If it turns out your issue is a bug in Node.js itself, the maintainer will report the issue upstream.
+
+---
+
+- [Alpine Linux](#alpine-linux)
+- [Android](#android)
+- [Arch Linux](#arch-linux)
+- [CentOS, Fedora and Red Hat Enterprise Linux](#centos-fedora-and-red-hat-enterprise-linux)
+- [Debian and Ubuntu based Linux distributions](#debian-and-ubuntu-based-linux-distributions)
+- [fnm](#fnm)
+- [FreeBSD](#freebsd)
+- [Gentoo](#gentoo)
+- [IBM i](#ibm-i)
+- [macOS](#macos)
+- [n](#n)
+- [NetBSD](#netbsd)
+- [Nodenv](#nodenv)
+- [nvm](#nvm)
+- [nvs](#nvs)
+- [OpenBSD](#openbsd)
+- [openSUSE and SLE](#opensuse-and-sle)
+- [SmartOS and illumos](#smartos-and-illumos)
+- [Snap](#snap)
+- [Solus](#solus)
+- [Void Linux](#void-linux)
+- [Windows](#windows-1)
+- [z/OS](#zos)
+
+---
+
+## Alpine Linux
+
+Node.js LTS and npm packages are available in the Main Repository.
+
+```bash
+apk add nodejs npm
+```
+
+Node.js Current can be installed from the Community Repository.
+
+```bash
+apk add nodejs-current
+```
+
+## Android
+
+Android support is still experimental in Node.js, so precompiled binaries are not yet provided by Node.js developers.
+
+However, there are some third-party solutions. For example, [Termux](https://termux.com/) community provides terminal emulator and Linux environment for Android, as well as own package manager and [extensive collection](https://github.com/termux/termux-packages) of many precompiled applications. This command in Termux app will install the last available Node.js version:
+
+```bash
+pkg install nodejs
+```
+
+Currently, Termux Node.js binaries are linked against `system-icu` (depending on `libicu` package).
+
+## Arch Linux
+
+Node.js and npm packages are available in the Community Repository.
+
+```bash
+pacman -S nodejs npm
+```
+
+## CentOS, Fedora and Red Hat Enterprise Linux
+
+Node.js is available as a module called `nodejs` in CentOS/RHEL 8 and Fedora.
+
+```bash
+dnf module install nodejs:<stream>
+```
+
+where `<stream>` corresponds to the major version of Node.js.
+To see a list of available streams:
+
+```bash
+dnf module list nodejs
+```
+
+For example, to install Node.js 18:
+
+```bash
+dnf module install nodejs:18/common
+```
+
+### Alternatives
+
+These resources provide packages compatible with CentOS, Fedora, and RHEL.
+
+- [Node.js snaps](#snap) maintained and supported at https://github.com/nodejs/snap
+- [Node.js binary distributions](#debian-and-ubuntu-based-linux-distributions) maintained and supported by [NodeSource](https://github.com/nodesource/distributions)
+
+## Debian and Ubuntu based Linux distributions
+
+[Node.js binary distributions](https://github.com/nodesource/distributions) are available from NodeSource.
+
+### Alternatives
+
+Packages compatible with Debian and Ubuntu based Linux distributions are available via [Node.js snaps](#snap).
+
+## fnm
+
+Fast and simple Node.js version manager built in Rust used to manage multiple released Node.js versions. It allows you to perform operations like install, uninstall, switch Node versions automatically based on the current directory, etc.
+To install fnm, use this [install script](https://github.com/Schniz/fnm#using-a-script-macoslinux).
+
+fnm has cross-platform support (macOS, Windows, Linux) & all popular shells (Bash, Zsh, Fish, PowerShell, Windows Command Line Prompt).
+fnm is built with speed in mind and compatibility support for `.node-version` and `.nvmrc` files.
+
+## FreeBSD
+
+The most recent release of Node.js is available via the [www/node](https://www.freshports.org/www/node) port.
+
+Install a binary package via [pkg](https://www.freebsd.org/cgi/man.cgi?pkg):
+
+```bash
+pkg install node
+```
+
+Or compile it on your own using [ports](https://www.freebsd.org/cgi/man.cgi?ports):
+
+```bash
+cd /usr/ports/www/node && make install
+```
+
+## Gentoo
+
+Node.js is available in the portage tree.
+
+```bash
+emerge nodejs
+```
+
+## IBM i
+
+LTS versions of Node.js are available from IBM, and are available via [the 'yum' package manager](https://ibm.biz/ibmi-rpms). The package name is `nodejs` followed by the major version number (for instance, `nodejs12`, `nodejs14` etc)
+
+To install Node.js 14.x from the command line, run the following as a user with \*ALLOBJ special authority:
+
+```bash
+yum install nodejs14
+```
+
+Node.js can also be installed with the IBM i Access Client Solutions product. See [this support document](http://www-01.ibm.com/support/docview.wss?uid=nas8N1022619) for more details
+
+## macOS
+
+Download the [macOS Installer](/#home-downloadhead) directly from the [nodejs.org](https://nodejs.org/) web site.
+
+_If you want to download the package with bash:_
+
+```bash
+curl "https://nodejs.org/dist/latest/$(curl -s https://nodejs.org/dist/latest/ | grep "pkg" | cut -d'"' -f 2)" -o "$HOME/Downloads/node-latest.pkg" && sudo installer -store -pkg "$HOME/Downloads/node-latest.pkg" -target "/"
+```
+
+### Alternatives
+
+Using **[Homebrew](https://brew.sh/)**:
+
+```bash
+brew install node
+```
+
+Using **[MacPorts](https://www.macports.org/)**:
+
+```bash
+port install nodejs<major version>
+
+# Example
+port install nodejs7
+```
+
+Using **[pkgsrc](https://pkgsrc.joyent.com/install-on-macos/)**:
+
+Install the binary package:
+
+```bash
+pkgin -y install nodejs
+```
+
+Or build manually from pkgsrc:
+
+```bash
+cd pkgsrc/lang/nodejs && bmake install
+```
+
+## n
+
+`n` is a simple to use Node.js version manager for Mac and Linux. Specify the target version to install using a rich syntax,
+or select from a menu of previously downloaded versions. The versions are installed system-wide or user-wide, and for more
+targeted use you can run a version directly from the cached downloads.
+
+See the [homepage](https://github.com/tj/n) for install methods (bootstrap, npm, Homebrew, third-party), and all the usage details.
+
+If you already have `npm` then installing `n` and then the newest LTS `node` version is as simple as:
+
+```
+npm install -g n
+n lts
+```
+
+## NetBSD
+
+Node.js is available in the pkgsrc tree:
+
+```bash
+cd /usr/pkgsrc/lang/nodejs && make install
+```
+
+Or install a binary package (if available for your platform) using pkgin:
+
+```bash
+pkgin -y install nodejs
+```
+
+## Nodenv
+
+`nodenv` is a lightweight node version manager, similar to `nvm`. It's simple and predictable. A rich plugin ecosystem lets you tailor it to suit your needs. Use `nodenv` to pick a Node version for your application and guarantee that your development environment matches production.
+
+Nodenv installation instructions are maintained [on its Github page](https://github.com/nodenv/nodenv#installation). Please visit that page to ensure you're following the latest version of the installation steps.
+
+## nvm
+
+Node Version Manager is a bash script used to manage multiple released Node.js versions. It allows
+you to perform operations like install, uninstall, switch version, etc.
+To install nvm, use this [install script](https://github.com/nvm-sh/nvm#install--update-script).
+
+On Unix / OS X systems Node.js built from source can be installed using
+[nvm](https://github.com/creationix/nvm) by installing into the location that nvm expects:
+
+```bash
+env VERSION=`python tools/getnodeversion.py` make install DESTDIR=`nvm_version_path v$VERSION` PREFIX=""
+```
+
+After this you can use `nvm` to switch between released versions and versions
+built from source.
+For example, if the version of Node.js is v8.0.0-pre:
+
+```bash
+nvm use 8
+```
+
+Once the official release is out you will want to uninstall the version built
+from source:
+
+```bash
+nvm uninstall 8
+```
+
+## nvs
+
+#### Windows
+
+The `nvs` version manager is cross-platform and can be used on Windows, macOS, and Unix-like systems
+
+To install `nvs` on Windows go to the [release page](https://github.com/jasongin/nvs/releases) here and download the MSI installer file of the latest release.
+
+You can also use `chocolatey` to install it:
+
+```bash
+choco install nvs
+```
+
+#### macOS,UnixLike
+
+You can find the documentation regarding the installation steps of `nvs` in macOS/Unix-like systems [here](https://github.com/jasongin/nvs/blob/master/doc/SETUP.md#mac-linux)
+
+#### Usage
+
+After this you can use `nvs` to switch between different versions of node.
+
+To add the latest version of node:
+
+```bash
+nvs add latest
+```
+
+Or to add the latest LTS version of node:
+
+```bash
+nvs add lts
+```
+
+Then run the `nvs use` command to add a version of node to your `PATH` for the current shell:
+
+```bash
+$ nvs use lts
+PATH -= %LOCALAPPDATA%\nvs\default
+PATH += %LOCALAPPDATA%\nvs\node\14.17.0\x64
+```
+
+To add it to `PATH` permanently, use `nvs link`:
+
+```bash
+nvs link lts
+```
+
+## OpenBSD
+
+Node.js is available through the ports system.
+
+```bash
+/usr/ports/lang/node
+```
+
+Using [pkg_add](https://man.openbsd.org/OpenBSD-current/man1/pkg_add.1) on OpenBSD:
+
+```bash
+pkg_add node
+```
+
+## openSUSE and SLE
+
+Node.js is available in the main repositories under the following packages:
+
+- **openSUSE Leap 15.2**: `nodejs10`, `nodejs12`, `nodejs14`
+- **openSUSE Tumbleweed**: `nodejs20`
+- **SUSE Linux Enterprise Server (SLES) 12**: `nodejs10`, `nodejs12`, and `nodejs14`
+  (The "Web and Scripting Module" must be [enabled](https://www.suse.com/releasenotes/x86_64/SUSE-SLES/12-SP5/#intro-modulesExtensionsRelated).)
+- **SUSE Linux Enterprise Server (SLES) 15 SP2**: `nodejs10`, `nodejs12`, and `nodejs14`
+  (The "Web and Scripting Module" must be [enabled](https://www.suse.com/releasenotes/x86_64/SUSE-SLES/15/#Intro.Module).)
+
+For example, to install Node.js 14.x on openSUSE Leap 15.2, run the following as root:
+
+```bash
+zypper install nodejs14
+```
+
+Different major versions of Node can be installed and used concurrently.
+
+## SmartOS and illumos
+
+SmartOS images come with pkgsrc pre-installed. On other illumos distributions, first install **[pkgsrc](https://pkgsrc.joyent.com/install-on-illumos/)**, then you may install the binary package as normal:
+
+```bash
+pkgin -y install nodejs
+```
+
+Or build manually from pkgsrc:
+
+```bash
+cd pkgsrc/lang/nodejs && bmake install
+```
+
+## Snap
+
+[Node.js snaps](https://github.com/nodejs/snap) are available as [`node`](https://snapcraft.io/node) on the Snap store.
+
+## Solus
+
+Solus provides Node.js in its main repository.
+
+```bash
+sudo eopkg install nodejs
+```
+
+## Void Linux
+
+Void Linux ships Node.js stable in the main repository.
+
+```bash
+xbps-install -Sy nodejs
+```
+
+## Windows
+
+Download the [Windows Installer](/#home-downloadhead) directly from the [nodejs.org](https://nodejs.org/) web site.
+
+### Alternatives
+
+Using **[Winget](https://aka.ms/winget-cli)**:
+
+```bash
+winget install OpenJS.NodeJS
+# or for LTS
+winget install OpenJS.NodeJS.LTS
+```
+
+After running one of the two commands above, it may be necessary to restart the
+terminal emulator before the `node` CLI command becomes available.
+
+Using **[Chocolatey](https://chocolatey.org/)**:
+
+```bash
+cinst nodejs
+# or for full install with npm
+cinst nodejs.install
+```
+
+Using **[Scoop](https://scoop.sh/)**:
+
+```bash
+scoop install nodejs
+# or for LTS
+scoop install nodejs-lts
+```
+
+## z/OS
+
+IBM&reg; SDK for Node.js - z/OS&reg; is available in two installation formats,
+SMP/E and PAX. Select the installation format that applies to you:
+
+- [Installing and configuring SMP/E edition of Node.js on z/OS](https://www.ibm.com/docs/en/sdk-nodejs-zos/14.0?topic=configuring-installing-smpe-edition)
+- [Installing and configuring PAX edition of Node.js on z/OS](https://www.ibm.com/docs/en/sdk-nodejs-zos/14.0?topic=configuring-installing-pax-edition)

pages/en/new-design/download/package-manager/current.mdx

···
+---
+layout: download.hbs
+title: Download Node.js®
+subtitle: Download Node.js the way you want.
+---
+
+<section>
+  Install Node.js <Release.VersionDropdown /> on  <Release.OperatingSystemDropdown /> using <Release.PlatformDropdown />
+
+  <Release.ReleaseCodeBox />
+</section>
+
+<section>
+Node.js includes <LinkWithArrow href="https://npmjs.com">npm</LinkWithArrow> (<Release.NpmVersion />) and corepack.
+
+Read the blog post for <Release.BlogPostLink>this version</Release.BlogPostLink>
+
+Learn how to <Release.VerifyingBinariesLink>verify signed SHASUMS</Release.VerifyingBinariesLink>
+
+Check out other community supported <LinkWithArrow href="/download/package-manager/all">package managers</LinkWithArrow>
+
+</section>

pages/en/new-design/download/package-manager/index.mdx

···
+---
+layout: download.hbs
+title: Download Node.js®
+subtitle: Download Node.js the way you want.
+---
+
+<section>
+  Install Node.js <Release.VersionDropdown /> on <Release.OperatingSystemDropdown /> using <Release.PlatformDropdown />
+
+  <Release.ReleaseCodeBox />
+</section>
+
+<section>
+Node.js includes <LinkWithArrow href="https://npmjs.com">npm</LinkWithArrow> (<Release.NpmVersion />) and corepack.
+
+Read the blog post for <Release.BlogPostLink>this version</Release.BlogPostLink>
+
+Learn how to <Release.VerifyingBinariesLink>verify signed SHASUMS</Release.VerifyingBinariesLink>
+
+Check out other community supported <LinkWithArrow href="/download/package-manager/all">package managers</LinkWithArrow>
+
+</section>

pages/en/new-design/download/prebuilt-binaries/current.mdx

···
+---
+layout: download.hbs
+title: Download Node.js®
+subtitle: Download Node.js the way you want.
+---
+
+<section>
+  I want the <Release.VersionDropdown /> version of Node.js for <Release.OperatingSystemDropdown /> running <Release.BitnessDropdown />
+
+  <Release.DownloadButton kind="binary" />
+</section>
+
+<section>
+Node.js includes <LinkWithArrow href="https://npmjs.com">npm</LinkWithArrow> (<Release.NpmVersion />) and corepack.
+
+Read the blog post for <Release.BlogPostLink>this version</Release.BlogPostLink>
+
+Learn how to <Release.VerifyingBinariesLink>verify signed SHASUMS</Release.VerifyingBinariesLink>
+
+Check out <LinkWithArrow href="https://nodejs.org/download/nightly/">Nightly</LinkWithArrow> prebuilt binaries or <LinkWithArrow href="https://unofficial-builds.nodejs.org/download/">Unofficial Builds</LinkWithArrow> for other platforms
+
+</section>

pages/en/new-design/download/prebuilt-binaries/index.mdx

···
+---
+layout: download.hbs
+title: Download Node.js®
+subtitle: Download Node.js the way you want.
+---
+
+<section>
+  I want the <Release.VersionDropdown /> version of Node.js for <Release.OperatingSystemDropdown /> running <Release.BitnessDropdown />
+
+  <Release.DownloadButton kind="binary" />
+</section>
+
+<section>
+Node.js includes <LinkWithArrow href="https://npmjs.com">npm</LinkWithArrow> (<Release.NpmVersion />) and corepack.
+
+Read the blog post for <Release.BlogPostLink>this version</Release.BlogPostLink>
+
+Learn how to <Release.VerifyingBinariesLink>verify signed SHASUMS</Release.VerifyingBinariesLink>
+
+Check out <LinkWithArrow href="https://nodejs.org/download/nightly/">Nightly</LinkWithArrow> prebuilt binaries or <LinkWithArrow href="https://unofficial-builds.nodejs.org/download/">Unofficial Builds</LinkWithArrow> for other platforms
+
+</section>

pages/en/new-design/download/source-code/current.mdx

···
+---
+layout: download.hbs
+title: Download Node.js®
+subtitle: Download Node.js the way you want.
+---
+
+<section>
+  I want the <Release.VersionDropdown /> version of the Node.js source code.
+
+  <Release.SourceButton kind="source" />
+</section>
+
+<section>
+Node.js includes <LinkWithArrow href="https://npmjs.com">npm</LinkWithArrow> (<Release.NpmVersion />) and corepack.
+
+Read the blog post for <Release.BlogPostLink>this version</Release.BlogPostLink>
+
+Learn how to <Release.VerifyingBinariesLink>verify signed SHASUMS</Release.VerifyingBinariesLink>
+
+Check out how to <LinkWithArrow href="https://github.com/nodejs/node/blob/main/BUILDING.md#building-nodejs-on-supported-platforms">build Node.js</LinkWithArrow> from source.
+
+</section>

pages/en/new-design/download/source-code/index.mdx

···
+---
+layout: download.hbs
+title: Download Node.js®
+subtitle: Download Node.js the way you want.
+---
+
+<section>
+  I want the <Release.VersionDropdown /> version of the Node.js source code.
+
+  <Release.SourceButton kind="source" />
+</section>
+
+<section>
+Node.js includes <LinkWithArrow href="https://npmjs.com">npm</LinkWithArrow> (<Release.NpmVersion />) and corepack.
+
+Read the blog post for <Release.BlogPostLink>this version</Release.BlogPostLink>
+
+Learn how to <Release.VerifyingBinariesLink>verify signed SHASUMS</Release.VerifyingBinariesLink>
+
+Check out how to <LinkWithArrow href="https://github.com/nodejs/node/blob/main/BUILDING.md#building-nodejs-on-supported-platforms">build Node.js</LinkWithArrow> from source.
+
+</section>

pages/en/new-design/index.mdx

···
           <DownloadButton release={release}>Download Node.js (LTS)</DownloadButton>
           <small>
             Downloads Node.js <b>{release.versionWithPrefix}</b>
-            <sup title="Downloads Node.js binary for your current platform">1</sup> with long-term support.
+            <sup title="Downloads a Node.js installer for your current platform">1</sup> with long-term support.
             Node.js can also be installed via <a href="/download/package-manager">package managers</a>.
           </small>
         </>
···
         <small>
           Want new features sooner?
           Get <b>Node.js <DownloadLink release={release}>{release.versionWithPrefix}</DownloadLink></b>
-          <sup title="Downloads Node.js binary for your current platform">1</sup> instead.
+          <sup title="Downloads a Node.js installer for your current platform">1</sup> instead.
         </small>
       )}
     </WithNodeRelease>

providers/releaseProvider.tsx

···
+'use client';
+
+import type { Dispatch, PropsWithChildren, FC } from 'react';
+import { createContext, useMemo, useReducer } from 'react';
+
+import type { NodeRelease } from '@/types';
+import type {
+  ReleaseDispatchActions,
+  ReleaseAction,
+  ReleaseContextType,
+  ReleaseProviderProps,
+  ReleaseState,
+} from '@/types/release';
+
+const initialState: ReleaseState = {
+  releases: [],
+  release: {} as NodeRelease,
+  os: 'OTHER',
+  bitness: '',
+  platform: 'NVM',
+};
+
+const createDispatchActions = (
+  dispatch: Dispatch<ReleaseAction>
+): ReleaseDispatchActions => ({
+  setVersion: payload => dispatch({ type: 'SET_VERSION', payload }),
+  setOS: payload => dispatch({ type: 'SET_OS', payload }),
+  setBitness: payload => dispatch({ type: 'SET_BITNESS', payload }),
+  setPlatform: payload => dispatch({ type: 'SET_PLATFORM', payload }),
+});
+
+export const ReleaseContext = createContext<ReleaseContextType>({
+  ...initialState,
+  ...createDispatchActions(() => {}),
+});
+
+export const ReleaseProvider: FC<PropsWithChildren<ReleaseProviderProps>> = ({
+  children,
+  releases,
+  initialRelease,
+}) => {
+  const getReleaseFromVersion = (version: string) =>
+    releases.find(({ versionWithPrefix }) => versionWithPrefix === version) ??
+    ({} as NodeRelease);
+
+  const releaseReducer = (state: ReleaseState, action: ReleaseAction) => {
+    switch (action.type) {
+      case 'SET_VERSION':
+        return { ...state, release: getReleaseFromVersion(action.payload) };
+      case 'SET_OS':
+        return { ...state, os: action.payload };
+      case 'SET_BITNESS':
+        return { ...state, bitness: action.payload };
+      case 'SET_PLATFORM':
+        return { ...state, platform: action.payload };
+      default:
+        return state;
+    }
+  };
+
+  const [state, dispatch] = useReducer(releaseReducer, {
+    ...initialState,
+    releases: releases,
+    release: initialRelease,
+  });
+
+  const actions = useMemo(() => createDispatchActions(dispatch), [dispatch]);
+
+  return (
+    <ReleaseContext.Provider value={{ ...state, ...actions }}>
+      {children}
+    </ReleaseContext.Provider>
+  );
+};

types/layouts.ts

···
   | 'page.hbs'
   | 'blog-category.hbs'
   | 'blog-post.hbs'
-  | 'search.hbs';
+  | 'search.hbs'
+  | 'download.hbs';
 
 // @TODO: These are legacy layouts that are going to be replaced with the `nodejs/nodejs.dev` Layouts in the future
 export type LegacyLayouts =

types/release.ts

···
+import type { ReactNode } from 'react';
+
+import type { NodeRelease } from '@/types/releases';
+import type { UserOS } from '@/types/userOS';
+
+export type PackageManager = 'NVM' | 'BREW' | 'DOCKER';
+
+export interface ReleaseState {
+  os: UserOS;
+  release: NodeRelease;
+  releases: Array<NodeRelease>;
+  bitness: string | number;
+  platform: PackageManager;
+}
+
+export type ReleaseAction =
+  | { type: 'SET_OS'; payload: UserOS }
+  | { type: 'SET_VERSION'; payload: string }
+  | { type: 'SET_BITNESS'; payload: string | number }
+  | { type: 'SET_PLATFORM'; payload: PackageManager };
+
+export interface ReleaseDispatchActions {
+  setVersion: (version: string) => void;
+  setOS: (os: UserOS) => void;
+  setBitness: (bitness: string | number) => void;
+  setPlatform: (platform: PackageManager) => void;
+}
+
+export interface ReleaseContextType
+  extends ReleaseState,
+    ReleaseDispatchActions {}
+
+export interface ReleaseProviderProps {
+  children: ReactNode;
+  releases: Array<NodeRelease>;
+  initialRelease: NodeRelease;
+}

util/__tests__/downloadUrlByOS.test.mjs util/__tests__/getNodeDownloadUrl.mjs

···
-import { downloadUrlByOS } from '@/util/downloadUrlByOS';
+import { getNodeDownloadUrl } from '@/util/getNodeDownloadUrl';
 
 const version = 'v18.16.0';
 
-describe('downloadUrlByOS', () => {
+describe('getNodeDownloadUrl', () => {
   it('returns the correct download URL for Mac', () => {
     const os = 'MAC';
     const bitness = 86;
     const expectedUrl = 'https://nodejs.org/dist/v18.16.0/node-v18.16.0.pkg';
 
-    expect(downloadUrlByOS(version, os, bitness)).toBe(expectedUrl);
+    expect(getNodeDownloadUrl(version, os, bitness)).toBe(expectedUrl);
   });
 
   it('returns the correct download URL for Windows (32-bit)', () => {
···
     const expectedUrl =
       'https://nodejs.org/dist/v18.16.0/node-v18.16.0-x86.msi';
 
-    expect(downloadUrlByOS(version, os, bitness)).toBe(expectedUrl);
+    expect(getNodeDownloadUrl(version, os, bitness)).toBe(expectedUrl);
   });
 
   it('returns the correct download URL for Windows (64-bit)', () => {
···
     const expectedUrl =
       'https://nodejs.org/dist/v18.16.0/node-v18.16.0-x64.msi';
 
-    expect(downloadUrlByOS(version, os, bitness)).toBe(expectedUrl);
+    expect(getNodeDownloadUrl(version, os, bitness)).toBe(expectedUrl);
   });
 
   it('returns the default download URL for other operating systems', () => {
···
     const bitness = 86;
     const expectedUrl = 'https://nodejs.org/dist/v18.16.0/node-v18.16.0.tar.xz';
 
-    expect(downloadUrlByOS(version, os, bitness)).toBe(expectedUrl);
+    expect(getNodeDownloadUrl(version, os, bitness)).toBe(expectedUrl);
   });
 });

util/__tests__/downloadUtils.test.mjs

···
+import {
+  getDownloadCategory,
+  mapCategoriesToTabs,
+  formatDropdownItems,
+} from '@/util/downloadUtils';
+
+describe('formatDropdownItems', () => {
+  it('should format dropdown items correctly', () => {
+    const items = [
+      { value: 'item1', label: 'Item 1' },
+      { value: 'item2', label: 'Item 2' },
+    ];
+    const disabledItems = ['item2'];
+    const icons = { item1: 'icon' };
+    const defaultIcon = 'defaultIcon';
+
+    const result = formatDropdownItems({
+      items: items,
+      disabledItems: disabledItems,
+      icons: icons,
+      defaultIcon: defaultIcon,
+    });
+
+    expect(result).toEqual([
+      { value: 'item1', label: 'Item 1', disabled: false, iconImage: 'icon' },
+      {
+        value: 'item2',
+        label: 'Item 2',
+        disabled: true,
+        iconImage: 'defaultIcon',
+      },
+    ]);
+  });
+
+  it('should mark all items as disabled when all items are in the disabledItems list', () => {
+    const items = [
+      { value: 'item1', label: 'Item 1' },
+      { value: 'item2', label: 'Item 2' },
+    ];
+    const disabledItems = ['item1', 'item2'];
+
+    const result = formatDropdownItems({
+      items: items,
+      disabledItems: disabledItems,
+    });
+
+    expect(result).toEqual([
+      { value: 'item1', label: 'Item 1', disabled: true },
+      { value: 'item2', label: 'Item 2', disabled: true },
+    ]);
+  });
+
+  it('should not mark any items as disabled when disabledItems list is empty', () => {
+    const items = [
+      { value: 'item1', label: 'Item 1' },
+      { value: 'item2', label: 'Item 2' },
+    ];
+
+    const result = formatDropdownItems({ items: items });
+
+    expect(result).toEqual([
+      { value: 'item1', label: 'Item 1', disabled: false },
+      { value: 'item2', label: 'Item 2', disabled: false },
+    ]);
+  });
+});
+
+describe('getDownloadCategory', () => {
+  it('should return correct category information for /download/current', () => {
+    const result = getDownloadCategory('/download/current');
+
+    expect(result).toEqual({
+      page: 'download',
+      category: 'download',
+      subCategory: 'current',
+    });
+  });
+
+  it('should return correct category information for /download/category/subcategory', () => {
+    const result = getDownloadCategory('/download/category/subcategory');
+
+    expect(result).toEqual({
+      page: 'download',
+      category: 'category',
+      subCategory: 'subcategory',
+    });
+  });
+
+  it('should return correct category information for /download/category', () => {
+    const result = getDownloadCategory('/download/category');
+
+    expect(result).toEqual({
+      page: 'download',
+      category: 'category',
+      subCategory: undefined,
+    });
+  });
+});
+
+describe('mapCategoriesToTabs', () => {
+  it('should return correct tabs for download page when subcategory current', () => {
+    const result = mapCategoriesToTabs({
+      page: 'download',
+      categories: [
+        {
+          category: 'download',
+          label: 'Download',
+        },
+        {
+          category: 'package-manager',
+          label: 'Package Manager',
+        },
+      ],
+      subCategory: 'current',
+    });
+
+    expect(result).toEqual([
+      { key: 'download', label: 'Download', link: '/download/current' },
+      {
+        key: 'package-manager',
+        label: 'Package Manager',
+        link: '/download/package-manager/current',
+      },
+    ]);
+  });
+
+  it('should return correct tabs for download page when subcategory not defined', () => {
+    const result = mapCategoriesToTabs({
+      page: 'download',
+      categories: [
+        {
+          category: 'download',
+          label: 'Download',
+        },
+        {
+          category: 'package-manager',
+          label: 'Package Manager',
+        },
+      ],
+    });
+
+    expect(result).toEqual([
+      { key: 'download', label: 'Download', link: '/download' },
+      {
+        key: 'package-manager',
+        label: 'Package Manager',
+        link: '/download/package-manager',
+      },
+    ]);
+  });
+});

util/downloadUrlByOS.ts

···
-import { DIST_URL } from '@/next.constants.mjs';
-import type { UserOS } from '@/types/userOS';
-
-export const downloadUrlByOS = (
-  versionWithPrefix: string,
-  os: UserOS,
-  bitness: number
-): string => {
-  const baseURL = `${DIST_URL}${versionWithPrefix}`;
-
-  switch (os) {
-    case 'MAC':
-      return `${baseURL}/node-${versionWithPrefix}.pkg`;
-    case 'WIN':
-      return `${baseURL}/node-${versionWithPrefix}-x${bitness}.msi`;
-    case 'LINUX':
-      return `${baseURL}/node-${versionWithPrefix}-linux-x64.tar.xz`;
-    default:
-      return `${baseURL}/node-${versionWithPrefix}.tar.xz`;
-  }
-};

util/downloadUtils.ts

···
+import { ENABLE_WEBSITE_REDESIGN } from '@/next.constants.mjs';
+import type { PackageManager } from '@/types/release';
+import type { UserOS } from '@/types/userOS';
+
+// A utility enum to help convert `userOs` data type to user-readable format
+export enum OperatingSystem {
+  WIN = 'Windows',
+  MAC = 'MacOS',
+  LINUX = 'Linux',
+  OTHER = 'Other',
+}
+
+export const operatingSystemItems = [
+  {
+    label: OperatingSystem.WIN,
+    value: 'WIN' as UserOS,
+  },
+  {
+    label: OperatingSystem.MAC,
+    value: 'MAC' as UserOS,
+  },
+  {
+    label: OperatingSystem.LINUX,
+    value: 'LINUX' as UserOS,
+  },
+];
+
+export const platformItems = [
+  {
+    label: 'NVM',
+    value: 'NVM' as PackageManager,
+  },
+  {
+    label: 'Brew',
+    value: 'BREW' as PackageManager,
+  },
+  {
+    label: 'Docker',
+    value: 'DOCKER' as PackageManager,
+  },
+];
+
+export const bitnessItems = {
+  WIN: [
+    {
+      label: '64-bit',
+      value: '64',
+    },
+    {
+      label: '32-bit',
+      value: '86',
+    },
+    {
+      label: 'ARM64',
+      value: 'arm64',
+    },
+  ],
+  MAC: [
+    {
+      label: '64-bit',
+      value: '64',
+    },
+    {
+      label: 'ARM64',
+      value: 'arm64',
+    },
+  ],
+  LINUX: [
+    {
+      label: '64-bit',
+      value: '64',
+    },
+    {
+      label: 'ARMv7',
+      value: 'armv7l',
+    },
+    {
+      label: 'ARM64',
+      value: 'arm64',
+    },
+    {
+      label: 'Power LE',
+      value: 'ppc64le',
+    },
+    {
+      label: 'System Z',
+      value: 's390x',
+    },
+  ],
+  OTHER: [],
+};
+
+type formatDropdownItemsType = {
+  items: Array<{ label: string; value: string }>;
+  disabledItems?: Array<string>;
+  icons?: Record<string, JSX.Element>;
+  defaultIcon?: JSX.Element;
+};
+
+// Formats the dropdown items to be used in the `Select` component in the
+// download page and adds the icons, and disabled status to the dropdown items.
+export const formatDropdownItems = ({
+  items,
+  disabledItems = [],
+  icons = {},
+  defaultIcon,
+}: formatDropdownItemsType) =>
+  items.map(item => ({
+    ...item,
+    disabled: disabledItems.includes(item.value),
+    iconImage: icons[item.value] || defaultIcon,
+  }));
+
+// Returns the page, category and subCategoy information to be used in the page
+// from the pathname information on the download pages.
+export const getDownloadCategory = (pathname: string) => {
+  /** @deprecated once the website redesign happens remove this code block  */
+  if (ENABLE_WEBSITE_REDESIGN) {
+    pathname = pathname.replace('/new-design', '');
+  }
+
+  const segments = pathname.split('/').filter(Boolean);
+  const [, c] = segments;
+
+  if (c === 'current' || typeof c === 'undefined') {
+    segments.unshift('download');
+  }
+
+  const [page, category, subCategory] = segments;
+
+  return { page, category, subCategory };
+};
+
+type CategoryTabMappingParams = {
+  page: string;
+  categories: Array<{ category: string; label: string }>;
+  subCategory: string;
+};
+
+// Utility method used to create URLs and labels to be used in Tabs
+export const mapCategoriesToTabs = ({
+  page,
+  categories,
+  subCategory,
+}: CategoryTabMappingParams) =>
+  categories.map(({ category, label }) => ({
+    key: category,
+    label: label,
+    link:
+      category === 'download'
+        ? `/${[page, subCategory].filter(Boolean).join('/')}`
+        : `/${[page, category, subCategory].filter(Boolean).join('/')}`,
+  }));

util/getHighlighter.ts

···
 import { getHighlighterCore } from 'shiki/core';
+import type { HighlighterCore } from 'shiki/core';
 import getWasm from 'shiki/wasm';
 
 import { LANGUAGES, DEFAULT_THEME } from '@/shiki.config.mjs';
 
 // This creates a memoized minimal Shikiji Syntax Highlighter
-const memoizedShikiji = await getHighlighterCore({
-  themes: [DEFAULT_THEME],
-  langs: LANGUAGES,
-  loadWasm: getWasm,
-});
+export const getShiki = () =>
+  getHighlighterCore({
+    themes: [DEFAULT_THEME],
+    langs: LANGUAGES,
+    loadWasm: getWasm,
+  });
 
-export const highlightToHtml = (code: string, language: string) =>
-  memoizedShikiji.codeToHtml(code, { lang: language, theme: DEFAULT_THEME });
+export const highlightToHtml =
+  (shiki: HighlighterCore) => (code: string, language: string) =>
+    // Shiki will always return the Highlighted code encapsulated in a <pre> and <code> tag
+    // since our own CodeBox component handles the <code> tag, we just want to extract
+    // the inner highlighted code to the CodeBox
+    shiki
+      .codeToHtml(code, { lang: language, theme: DEFAULT_THEME })
+      .match(/<code>(.+?)<\/code>/s)![1];
 
-export const highlightToHast = (code: string, language: string) =>
-  memoizedShikiji.codeToHast(code, { lang: language, theme: DEFAULT_THEME });
+export const highlightToHast =
+  (shiki: HighlighterCore) => (code: string, language: string) =>
+    shiki.codeToHast(code, { lang: language, theme: DEFAULT_THEME });

util/getNodeDownloadSnippet.ts

···
+import dedent from 'dedent';
+
+import type { UserOS } from '@/types/userOS';
+
+export const getNodeDownloadSnippet = (major: number, os: UserOS) => {
+  if (os === 'LINUX' || os === 'MAC') {
+    const platformSnippets = {
+      NVM: dedent`
+        # Installs NVM (Node Version Manager)
+        curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
+
+        # Installs Node.js
+        nvm install v${major}
+
+        # Checks that Node is installed
+        node -v
+
+        # Checks your NPM version
+        npm -v`,
+      BREW: dedent`
+        # Installs Brew (macOS/Linux Package Manager)
+        curl -o- https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh | bash
+
+        # Installs Node.js
+        brew install node@${major}
+
+        # Checks that Node is installed
+        node -v
+
+        # Checks your NPM version
+        npm -v`,
+      DOCKER: '',
+    };
+
+    if (os === 'MAC') {
+      platformSnippets.DOCKER = dedent`
+        # Installs Brew (macOS Package Manager)
+        curl -o- https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh | bash
+
+        # Installs Docker Desktop
+        brew install docker --cask
+
+        # Pull Node.js Docker Image
+        docker pull node:${major}-${major >= 4 ? 'alpine' : 'slim'}
+      `;
+    }
+
+    return platformSnippets;
+  }
+
+  if (os === 'WIN') {
+    return {
+      NVM: dedent`
+        # Installs Chocolatey (Windows Package Manager)
+        Set-ExecutionPolicy Bypass -Scope Process -Force;
+        [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072;
+        iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'));
+
+        # Installs NVM (Node Version Manager)
+        choco install nvm
+
+        # Installs Node.js
+        nvm install v${major}
+
+        # Checks that Node is installed
+        node -v
+
+        # Checks your NPM version
+        npm -v`,
+      DOCKER: dedent`
+        # Installs Chocolatey (Windows Package Manager)
+        Set-ExecutionPolicy Bypass -Scope Process -Force;
+        [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072;
+        iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'));
+
+        # Installs Docker Desktop
+        choco install docker-desktop
+
+        # Pull Node.js Docker Image
+        docker pull node:${major}-${major >= 4 ? 'alpine' : 'slim'}
+      `,
+      BREW: '',
+    };
+  }
+
+  return { NVM: '', BREW: '', DOCKER: '' };
+};

util/getNodeDownloadUrl.ts

···
+import { DIST_URL } from '@/next.constants.mjs';
+import type { UserOS } from '@/types/userOS';
+
+export const getNodeDownloadUrl = (
+  versionWithPrefix: string,
+  os: UserOS,
+  bitness: string | number,
+  kind: 'installer' | 'binary' | 'source' = 'installer'
+): string => {
+  const baseURL = `${DIST_URL}${versionWithPrefix}`;
+
+  if (kind === 'source') {
+    return `${baseURL}/node-${versionWithPrefix}.tar.gz`;
+  }
+
+  switch (os) {
+    case 'MAC':
+      if (kind === 'installer') {
+        return `${baseURL}/node-${versionWithPrefix}.pkg`;
+      }
+
+      if (typeof bitness === 'string') {
+        return `${baseURL}/node-${versionWithPrefix}-darwin-${bitness}.tar.gz`;
+      }
+
+      return `${baseURL}/node-${versionWithPrefix}-darwin-x${bitness}.tar.gz`;
+    case 'WIN': {
+      if (kind === 'installer') {
+        if (typeof bitness === 'string') {
+          return `${baseURL}/node-${versionWithPrefix}-${bitness}.msi`;
+        }
+
+        return `${baseURL}/node-${versionWithPrefix}-x${bitness}.msi`;
+      }
+
+      if (typeof bitness === 'string') {
+        return `${baseURL}/node-${versionWithPrefix}-win-${bitness}.zip`;
+      }
+
+      return `${baseURL}/node-${versionWithPrefix}-win-x${bitness}.zip`;
+    }
+    case 'LINUX':
+      if (typeof bitness === 'string') {
+        return `${baseURL}/node-${versionWithPrefix}-linux-${bitness}.tar.xz`;
+      }
+
+      return `${baseURL}/node-${versionWithPrefix}-linux-x${bitness}.tar.xz`;
+    default:
+      return `${baseURL}/node-${versionWithPrefix}.tar.gz`;
+  }
+};