feat: add eol page

apps/site/components/Common/Button.tsx

@@ -1,6 +1,5 @@
-import BaseButton, {
-  type ButtonProps,
-} from '@node-core/ui-components/Common/BaseButton';
+import BaseButton from '@node-core/ui-components/Common/BaseButton';
+import type { ButtonProps } from '@node-core/ui-components/Common/BaseButton';
 import type { FC, ComponentProps } from 'react';
 
 import Link from '#site/components/Link';

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

@@ -1,11 +1,16 @@
+'use client';
+
 import Badge from '@node-core/ui-components/Common/Badge';
 import { useTranslations } from 'next-intl';
+import { useState } from 'react';
 import type { FC } from 'react';
 
 import FormattedTime from '#site/components/Common/FormattedTime';
-import DetailsButton from '#site/components/Downloads/DownloadReleasesTable/DetailsButton';
+import LinkWithArrow from '#site/components/LinkWithArrow';
 import provideReleaseData from '#site/next-data/providers/releaseData';
 
+import ReleaseModal from '../ReleaseModal';
+
 const BADGE_KIND_MAP = {
   'End-of-life': 'warning',
   'Maintenance LTS': 'neutral',
@@ -18,8 +23,10 @@ const DownloadReleasesTable: FC = () => {
   const releaseData = provideReleaseData();
   const t = useTranslations();
 
+  const [currentModal, setCurrentModal] = useState<string | undefined>();
+
   return (
-    <table id="tbVersions" className="download-table full-width">
+    <table id="tbVersions">
       <thead>
         <tr>
           <th>{t('components.downloadReleasesTable.version')}</th>
@@ -32,25 +39,37 @@ const DownloadReleasesTable: FC = () => {
       </thead>
       <tbody>
         {releaseData.map(release => (
-          <tr key={release.major}>
-            <td data-label="Version">v{release.major}</td>
-            <td data-label="LTS">{release.codename || '-'}</td>
-            <td data-label="Date">
-              <FormattedTime date={release.currentStart} />
-            </td>
-            <td data-label="Date">
-              <FormattedTime date={release.releaseDate} />
-            </td>
-            <td data-label="Status">
-              <Badge kind={BADGE_KIND_MAP[release.status]} size="small">
-                {release.status}
-                {release.status === 'End-of-life' ? ' (EoL)' : ''}
-              </Badge>
-            </td>
-            <td className="download-table-last">
-              <DetailsButton versionData={release} />
-            </td>
-          </tr>
+          <>
+            <tr key={release.major}>
+              <td data-label="Version">v{release.major}</td>
+              <td data-label="LTS">{release.codename || '-'}</td>
+              <td data-label="Date">
+                <FormattedTime date={release.currentStart} />
+              </td>
+              <td data-label="Date">
+                <FormattedTime date={release.releaseDate} />
+              </td>
+              <td data-label="Status">
+                <Badge kind={BADGE_KIND_MAP[release.status]} size="small">
+                  {release.status}
+                  {release.status === 'End-of-life' ? ' (EoL)' : ''}
+                </Badge>
+              </td>
+              <td>
+                <LinkWithArrow
+                  className="cursor-pointer"
+                  onClick={() => setCurrentModal(release.version)}
+                >
+                  {t('components.downloadReleasesTable.details')}
+                </LinkWithArrow>
+              </td>
+            </tr>
+            <ReleaseModal
+              release={release}
+              open={currentModal === release.version}
+              onOpenChange={open => open || setCurrentModal(undefined)}
+            />
+          </>
         ))}
       </tbody>
     </table>

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

@@ -18,14 +18,14 @@ type MinorReleasesTableProps = {
 export const MinorReleasesTable: FC<MinorReleasesTableProps> = ({
   releases,
 }) => {
-  const t = useTranslations('components.minorReleasesTable');
+  const t = useTranslations();
 
   return (
     <table>
       <thead>
         <tr>
-          <th>{t('version')}</th>
-          <th>{t('links')}</th>
+          <th>{t('components.minorReleasesTable.version')}</th>
+          <th>{t('components.minorReleasesTable.links')}</th>
         </tr>
       </thead>
       <tbody>
@@ -38,21 +38,21 @@ export const MinorReleasesTable: FC<MinorReleasesTableProps> = ({
                   kind="neutral"
                   href={`https://nodejs.org/download/release/v${release.version}/`}
                 >
-                  {t('actions.release')}
+                  {t('components.minorReleasesTable.actions.release')}
                 </Link>
                 <Separator orientation="vertical" />
                 <Link
                   kind="neutral"
                   href={`${BASE_CHANGELOG_URL}${release.version}`}
                 >
-                  {t('actions.changelog')}
+                  {t('components.minorReleasesTable.actions.changelog')}
                 </Link>
                 <Separator orientation="vertical" />
                 <Link
                   kind="neutral"
                   href={getNodeApiUrl(`v${release.version}`)}
                 >
-                  {t('actions.docs')}
+                  {t('components.minorReleasesTable.actions.docs')}
                 </Link>
               </div>
             </td>

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

@@ -122,7 +122,7 @@ const ReleaseCodeBox: FC = () => {
           size="small"
         >
           {t.rich('layouts.download.codeBox.unsupportedVersionWarning', {
-            link: text => <Link href="/about/previous-releases/">{text}</Link>,
+            link: text => <Link href="/eol">{text}</Link>,
           })}
         </AlertBox>
       )}

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

@@ -1,23 +1,21 @@
 import AlertBox from '@node-core/ui-components/Common/AlertBox';
 import { Modal, Title, Content } from '@node-core/ui-components/Common/Modal';
 import { useTranslations } from 'next-intl';
-import type { FC } from 'react';
+import type { ComponentProps, FC } from 'react';
 
 import { MinorReleasesTable } from '#site/components/Downloads/MinorReleasesTable';
 import { ReleaseOverview } from '#site/components/Downloads/ReleaseOverview';
 import Link from '#site/components/Link';
 import type { NodeRelease } from '#site/types';
 
-type ReleaseModalProps = {
-  isOpen: boolean;
-  closeModal: () => void;
+type ReleaseModalProps = ComponentProps<typeof Modal> & {
   release: NodeRelease;
 };
 
 const ReleaseModal: FC<ReleaseModalProps> = ({
-  isOpen,
-  closeModal,
   release,
+  onOpenChange,
+  ...props
 }) => {
   const t = useTranslations();
 
@@ -31,7 +29,7 @@ const ReleaseModal: FC<ReleaseModalProps> = ({
   });
 
   return (
-    <Modal open={isOpen} onOpenChange={closeModal}>
+    <Modal onOpenChange={onOpenChange} {...props}>
       {release.status === 'End-of-life' && (
         <div className="mb-4">
           <AlertBox
@@ -40,14 +38,7 @@ const ReleaseModal: FC<ReleaseModalProps> = ({
             size="small"
           >
             {t.rich('components.releaseModal.unsupportedVersionWarning', {
-              link: text => (
-                <Link
-                  onClick={closeModal}
-                  href="/about/previous-releases#release-schedule"
-                >
-                  {text}
-                </Link>
-              ),
+              link: text => <Link href="/eol">{text}</Link>,
             })}
           </AlertBox>
         </div>

apps/site/components/EOL/EOLAlert/index.tsx

@@ -0,0 +1,17 @@
+import AlertBox from '@node-core/ui-components/Common/AlertBox';
+import { useTranslations } from 'next-intl';
+
+import Link from '#site/components/Link';
+
+const EOLAlert = () => {
+  const t = useTranslations();
+  return (
+    <AlertBox level="warning">
+      {t.rich('components.eolAlert.message', {
+        link: text => <Link href="/eol">{text}</Link>,
+      })}
+    </AlertBox>
+  );
+};
+
+export default EOLAlert;

apps/site/components/EOL/EOLModal/index.tsx

@@ -0,0 +1,70 @@
+import { Modal, Title, Content } from '@node-core/ui-components/Common/Modal';
+import { useTranslations } from 'next-intl';
+import { useMemo } from 'react';
+import type { FC, ComponentProps } from 'react';
+
+import KnownSeveritySection from '#site/components/EOL/KnownSeveritySection';
+import UnknownSeveritySection from '#site/components/EOL/UnknownSeveritySection';
+import { SEVERITY_ORDER } from '#site/next.constants.mjs';
+import type { NodeRelease } from '#site/types/releases';
+import type { Vulnerability } from '#site/types/vulnerabilities';
+
+type EOLModalProps = ComponentProps<typeof Modal> & {
+  release: NodeRelease;
+  vulnerabilities: Array<Vulnerability>;
+};
+
+const EOLModal: FC<EOLModalProps> = ({
+  release,
+  vulnerabilities,
+  ...props
+}) => {
+  const t = useTranslations();
+
+  const { codename, major: version } = release;
+
+  const modalHeading = codename
+    ? t('components.eolModal.title', {
+        version,
+        codename,
+      })
+    : t('components.eolModal.titleWithoutCodename', { version });
+
+  useMemo(
+    () =>
+      vulnerabilities.sort(
+        (a, b) =>
+          SEVERITY_ORDER.indexOf(a.severity) -
+          SEVERITY_ORDER.indexOf(b.severity)
+      ),
+    // Only change when the vulnerabilities change
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [vulnerabilities.length]
+  );
+
+  return (
+    <Modal {...props}>
+      <Title>{modalHeading}</Title>
+      <Content>
+        {vulnerabilities.length > 0 && (
+          <p className="m-1">
+            {t('components.eolModal.vulnerabilitiesMessage', {
+              count: vulnerabilities.length,
+            })}
+          </p>
+        )}
+
+        <KnownSeveritySection vulnerabilities={vulnerabilities} />
+        <UnknownSeveritySection vulnerabilities={vulnerabilities} />
+
+        {!vulnerabilities.length && (
+          <p className="m-1">
+            {t('components.eolModal.noVulnerabilitiesMessage')}
+          </p>
+        )}
+      </Content>
+    </Modal>
+  );
+};
+
+export default EOLModal;

apps/site/components/EOL/EOLReleaseTable/index.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { Fragment, useState } from 'react';
+import type { FC } from 'react';
+
+import FormattedTime from '#site/components/Common/FormattedTime';
+import EOLModal from '#site/components/EOL/EOLModal';
+import VulnerabilityChips from '#site/components/EOL/VulnerabilityChips';
+import LinkWithArrow from '#site/components/LinkWithArrow';
+import provideReleaseData from '#site/next-data/providers/releaseData';
+import provideVulnerabilities from '#site/next-data/providers/vulnerabilities';
+import { EOL_VERSION_IDENTIFIER } from '#site/next.constants.mjs';
+
+const EOLReleaseTable: FC = () => {
+  const releaseData = provideReleaseData();
+  const vulnerabilities = provideVulnerabilities();
+  const eolReleases = releaseData.filter(
+    release => release.status === EOL_VERSION_IDENTIFIER
+  );
+
+  const t = useTranslations();
+
+  const [currentModal, setCurrentModal] = useState<string | undefined>();
+
+  return (
+    <table id="tbVulnerabilities">
+      <thead>
+        <tr>
+          <th>
+            {t('components.eolTable.version')} (
+            {t('components.eolTable.codename')})
+          </th>
+          <th>{t('components.eolTable.lastUpdated')}</th>
+          <th>{t('components.eolTable.vulnerabilities')}</th>
+          <th>{t('components.eolTable.details')}</th>
+        </tr>
+      </thead>
+      <tbody>
+        {eolReleases.map(release => (
+          <Fragment key={release.major}>
+            <tr>
+              <td data-label="Version">
+                v{release.major}{' '}
+                {release.codename ? `(${release.codename})` : ''}
+              </td>
+              <td data-label="Date">
+                <FormattedTime date={release.releaseDate} />
+              </td>
+              <td>
+                <VulnerabilityChips
+                  vulnerabilities={vulnerabilities[release.major]}
+                />
+              </td>
+              <td>
+                <LinkWithArrow
+                  className="cursor-pointer"
+                  onClick={() => setCurrentModal(release.version)}
+                >
+                  {t('components.downloadReleasesTable.details')}
+                </LinkWithArrow>
+              </td>
+            </tr>
+            <EOLModal
+              release={release}
+              vulnerabilities={vulnerabilities[release.major]}
+              open={currentModal === release.version}
+              onOpenChange={open => open || setCurrentModal(undefined)}
+            />
+          </Fragment>
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+export default EOLReleaseTable;