feat: Introduce Downloads Archive page

apps/site/components/Downloads/DownloadButton/index.tsx

@@ -15,13 +15,13 @@ import styles from './index.module.css';
 type DownloadButtonProps = { release: NodeRelease };
 
 const DownloadButton: FC<PropsWithChildren<DownloadButtonProps>> = ({
-  release: { versionWithPrefix },
+  release: { versionWithPrefix: version },
   children,
 }) => {
   const { os, bitness, architecture } = useClientContext();
 
   const platform = getUserPlatform(architecture, bitness);
-  const downloadLink = getNodeDownloadUrl(versionWithPrefix, os, platform);
+  const downloadLink = getNodeDownloadUrl({ version, os, platform });
 
   return (
     <>

apps/site/components/Downloads/DownloadLink.tsx

@@ -19,12 +19,12 @@ const DownloadLink: FC<PropsWithChildren<DownloadLinkProps>> = ({
 
   const platform = getUserPlatform(architecture, bitness);
 
-  const downloadLink = getNodeDownloadUrl(
-    versionWithPrefix,
-    os,
-    platform,
-    kind
-  );
+  const downloadLink = getNodeDownloadUrl({
+    version: versionWithPrefix,
+    os: os,
+    platform: platform,
+    kind: kind,
+  });
 
   return <LinkWithArrow href={downloadLink}>{children}</LinkWithArrow>;
 };

apps/site/components/Downloads/DownloadReleasesTable/index.tsx

@@ -4,6 +4,7 @@ import type { FC } from 'react';
 
 import FormattedTime from '#site/components/Common/FormattedTime';
 import DetailsButton from '#site/components/Downloads/DownloadReleasesTable/DetailsButton';
+import Link from '#site/components/Link';
 import provideReleaseData from '#site/next-data/providers/releaseData';
 
 const BADGE_KIND_MAP = {
@@ -33,7 +34,11 @@ const DownloadReleasesTable: FC = () => {
       <tbody>
         {releaseData.map(release => (
           <tr key={release.major}>
-            <td data-label="Version">v{release.major}</td>
+            <td data-label="Version">
+              <Link href={`/download/${release.versionWithPrefix}`}>
+                v{release.major}
+              </Link>
+            </td>
             <td data-label="LTS">{release.codename || '-'}</td>
             <td data-label="Date">
               <FormattedTime date={release.currentStart} />

apps/site/components/Downloads/DownloadsTable/index.tsx

@@ -0,0 +1,47 @@
+import { useTranslations } from 'next-intl';
+import type { FC } from 'react';
+
+import Link from '#site/components/Link';
+import { OperatingSystemLabel } from '#site/util/download';
+import type { NodeDownloadArtifact } from '#site/util/download/archive';
+
+type DownloadsTableProps = {
+  source: Array<NodeDownloadArtifact>;
+};
+
+const DownloadsTable: FC<DownloadsTableProps> = ({ source }) => {
+  const t = useTranslations();
+
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th>{t('components.downloadsTable.fileName')}</th>
+          <th className="md:w-28">
+            {t('components.downloadsTable.operatingSystem')}
+          </th>
+          <th className="md:w-28">
+            {t('components.downloadsTable.architecture')}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        {source.map(release => (
+          <tr key={`${release.file}-${release.architecture}`}>
+            <td data-label={t('components.downloadsTable.fileName')}>
+              <Link href={release.url}>{release.file}</Link>
+            </td>
+            <td data-label={t('components.downloadsTable.operatingSystem')}>
+              {OperatingSystemLabel[release.os]}
+            </td>
+            <td data-label={t('components.downloadsTable.architecture')}>
+              {release.architecture}
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+export default DownloadsTable;

apps/site/components/Downloads/MinorReleasesTable/index.module.css

@@ -1,8 +1,51 @@
 @reference "../../../styles/index.css";
 
-.links {
+.additionalLinks {
   @apply flex
     h-4
     items-center
     gap-2;
 }
+
+.items {
+  @apply flex
+    h-9
+    gap-2;
+}
+
+.scrollable {
+  @apply scrollbar-thin
+    flex
+    max-h-[29rem]
+    overflow-y-auto;
+
+  table {
+    @apply xs:border-t-0
+      border-t;
+  }
+
+  th {
+    @apply xs:border-t
+      border-neutral-200
+      dark:border-neutral-800;
+  }
+}
+
+.information {
+  @apply md:w-96;
+}
+
+.links {
+  @apply md:w-44;
+}
+
+.stickyHeader {
+  @apply top-0
+    z-10
+    border-t
+    bg-white
+    text-left
+    font-semibold
+    sm:sticky
+    dark:bg-neutral-950;
+}

apps/site/components/Downloads/MinorReleasesTable/index.tsx

@@ -1,10 +1,12 @@
-'use client';
-
+import { CodeBracketSquareIcon } from '@heroicons/react/24/outline';
 import Separator from '@node-core/ui-components/Common/Separator';
+import NpmIcon from '@node-core/ui-components/Icons/PackageManager/Npm';
 import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
 
+import { ReleaseOverviewItem } from '#site/components/Downloads/ReleaseOverview';
 import Link from '#site/components/Link';
+import LinkWithArrow from '#site/components/LinkWithArrow';
 import { BASE_CHANGELOG_URL } from '#site/next.constants.mjs';
 import type { MinorVersion } from '#site/types';
 import { getNodeApiUrl } from '#site/util/url';
@@ -15,50 +17,83 @@ type MinorReleasesTableProps = {
   releases: Array<MinorVersion>;
 };
 
-export const MinorReleasesTable: FC<MinorReleasesTableProps> = ({
-  releases,
-}) => {
-  const t = useTranslations('components.minorReleasesTable');
+const MinorReleasesTable: FC<MinorReleasesTableProps> = ({ releases }) => {
+  const t = useTranslations();
 
   return (
-    <table>
-      <thead>
-        <tr>
-          <th>{t('version')}</th>
-          <th>{t('links')}</th>
-        </tr>
-      </thead>
-      <tbody>
-        {releases.map(release => (
-          <tr key={release.version}>
-            <td>v{release.version}</td>
-            <td>
-              <div className={styles.links}>
-                <Link
-                  kind="neutral"
-                  href={`https://nodejs.org/download/release/v${release.version}/`}
-                >
-                  {t('actions.release')}
-                </Link>
-                <Separator orientation="vertical" />
-                <Link
-                  kind="neutral"
-                  href={`${BASE_CHANGELOG_URL}${release.version}`}
-                >
-                  {t('actions.changelog')}
-                </Link>
-                <Separator orientation="vertical" />
-                <Link
-                  kind="neutral"
-                  href={getNodeApiUrl(`v${release.version}`)}
-                >
-                  {t('actions.docs')}
-                </Link>
-              </div>
-            </td>
+    <div className={styles.scrollable}>
+      <table>
+        <thead className={styles.stickyHeader}>
+          <tr>
+            <th>{t('components.minorReleasesTable.version')}</th>
+            <th className={styles.information}>
+              {t('components.minorReleasesTable.information')}
+            </th>
+            <th className={styles.links}>
+              {t('components.minorReleasesTable.links')}
+            </th>
           </tr>
-        ))}
-      </tbody>
-    </table>
+        </thead>
+        <tbody>
+          {releases.map(release => (
+            <tr key={release.version}>
+              <td>
+                <Link kind="neutral" href={`/download/v${release.version}`}>
+                  v{release.version}
+                </Link>
+              </td>
+              <td>
+                <div className={styles.items}>
+                  {release.modules && (
+                    <>
+                      <ReleaseOverviewItem
+                        Icon={CodeBracketSquareIcon}
+                        title={`v${release.modules}`}
+                        subtitle={t('components.releaseOverview.nApiVersion')}
+                      />
+                      <Separator orientation="vertical" />
+                    </>
+                  )}
+                  {release.npm && (
+                    <>
+                      <ReleaseOverviewItem
+                        Icon={NpmIcon}
+                        title={`v${release.npm}`}
+                        subtitle={t('components.releaseOverview.npmVersion')}
+                      />
+                      <Separator orientation="vertical" />
+                    </>
+                  )}
+                  <ReleaseOverviewItem
+                    Icon={CodeBracketSquareIcon}
+                    title={`v${release.v8}`}
+                    subtitle={t('components.releaseOverview.v8Version')}
+                  />
+                </div>
+              </td>
+              <td>
+                <div className={styles.additionalLinks}>
+                  <Link
+                    kind="neutral"
+                    href={getNodeApiUrl(`v${release.version}`)}
+                  >
+                    {t('components.minorReleasesTable.actions.docs')}
+                  </Link>
+                  <Separator orientation="vertical" />
+                  <LinkWithArrow
+                    kind="neutral"
+                    href={`${BASE_CHANGELOG_URL}${release.version}`}
+                  >
+                    {t('components.minorReleasesTable.actions.changelog')}
+                  </LinkWithArrow>
+                </div>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
   );
 };
+
+export default MinorReleasesTable;

apps/site/components/Downloads/Release/PrebuiltDownloadButtons.tsx

@@ -22,11 +22,21 @@ const PrebuiltDownloadButtons: FC = () => {
   const { release, os, platform } = useContext(ReleaseContext);
 
   const installerUrl = platform
-    ? getNodeDownloadUrl(release.versionWithPrefix, os, platform, 'installer')
+    ? getNodeDownloadUrl({
+        version: release.versionWithPrefix,
+        os: os,
+        platform: platform,
+        kind: 'installer',
+      })
     : '';
 
   const binaryUrl = platform
-    ? getNodeDownloadUrl(release.versionWithPrefix, os, platform, 'binary')
+    ? getNodeDownloadUrl({
+        version: release.versionWithPrefix,
+        os: os,
+        platform: platform,
+        kind: 'binary',
+      })
     : '';
 
   return (

apps/site/components/Downloads/Release/ReleaseCodeBox.tsx

@@ -10,6 +10,7 @@ import { useContext, useMemo } from 'react';
 import CodeBox from '#site/components/Common/CodeBox';
 import Link from '#site/components/Link';
 import LinkWithArrow from '#site/components/LinkWithArrow';
+import WithReleaseAlertBox from '#site/components/withReleaseAlertBox';
 import { createSval } from '#site/next.jsx.compiler.mjs';
 import {
   ReleaseContext,
@@ -107,37 +108,15 @@ const ReleaseCodeBox: FC = () => {
         >
           {t.rich('layouts.download.codeBox.noScriptDetected', {
             link: text => (
-              <Link href="/about/previous-releases#looking-for-latest-release-of-a-version-branch">
+              <Link href="/download/archive">
                 <b>{text}</b>
               </Link>
             ),
           })}
         </AlertBox>
       </noscript>
 
-      {release.status === 'End-of-life' && (
-        <AlertBox
-          title={t('components.common.alertBox.warning')}
-          level="warning"
-          size="small"
-        >
-          {t.rich('layouts.download.codeBox.unsupportedVersionWarning', {
-            link: text => <Link href="/about/previous-releases/">{text}</Link>,
-          })}
-        </AlertBox>
-      )}
-
-      {release.isLts && (
-        <AlertBox
-          title={t('components.common.alertBox.info')}
-          level="info"
-          size="small"
-        >
-          {t.rich('layouts.download.codeBox.ltsVersionFeaturesNotice', {
-            link: text => <Link href="/download/current">{text}</Link>,
-          })}
-        </AlertBox>
-      )}
+      <WithReleaseAlertBox status={release.status} />
 
       {!currentPlatform || currentPlatform.recommended || (
         <AlertBox

apps/site/components/Downloads/ReleaseModal/index.tsx

@@ -3,9 +3,10 @@ import { Modal, Title, Content } from '@node-core/ui-components/Common/Modal';
 import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
 
-import { MinorReleasesTable } from '#site/components/Downloads/MinorReleasesTable';
-import { ReleaseOverview } from '#site/components/Downloads/ReleaseOverview';
+import MinorReleasesTable from '#site/components/Downloads/MinorReleasesTable';
+import ReleaseOverview from '#site/components/Downloads/ReleaseOverview';
 import Link from '#site/components/Link';
+import WithReleaseAlertBox from '#site/components/withReleaseAlertBox';
 import type { NodeRelease } from '#site/types';
 
 type ReleaseModalProps = {
@@ -26,12 +27,13 @@ const ReleaseModal: FC<ReleaseModalProps> = ({
     : 'components.releaseModal.titleWithoutCodename';
 
   const modalHeading = t(modalHeadingKey, {
-    version: release.major,
+    version: `v${release.major}`,
     codename: release.codename ?? '',
   });
 
   return (
     <Modal open={isOpen} onOpenChange={closeModal}>
+      <WithReleaseAlertBox status={release.status} />
       {release.status === 'End-of-life' && (
         <div className="mb-4">
           <AlertBox