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/DetailsButton.tsx

@@ -5,24 +5,20 @@ import type { FC } from 'react';
 import { use } from 'react';
 
 import LinkWithArrow from '#site/components/LinkWithArrow';
-import { ReleaseModalContext } from '#site/providers/releaseModalProvider';
-import type { NodeRelease } from '#site/types';
+import { ModalContext } from '#site/providers/modalProvider';
 
 type DetailsButtonProps = {
-  versionData: NodeRelease;
+  data: unknown;
 };
 
-const DetailsButton: FC<DetailsButtonProps> = ({ versionData }) => {
-  const t = useTranslations('components.downloadReleasesTable');
+const DetailsButton: FC<DetailsButtonProps> = ({ data }) => {
+  const t = useTranslations();
 
-  const { openModal } = use(ReleaseModalContext);
+  const { openModal } = use(ModalContext);
 
   return (
-    <LinkWithArrow
-      className="cursor-pointer"
-      onClick={() => openModal(versionData)}
-    >
-      {t('details')}
+    <LinkWithArrow className="cursor-pointer" onClick={() => openModal(data)}>
+      {t('components.downloadReleasesTable.details')}
     </LinkWithArrow>
   );
 };

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

@@ -1,10 +1,15 @@
+'use client';
+
 import Badge from '@node-core/ui-components/Common/Badge';
 import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
 
 import FormattedTime from '#site/components/Common/FormattedTime';
 import DetailsButton from '#site/components/Downloads/DownloadReleasesTable/DetailsButton';
 import provideReleaseData from '#site/next-data/providers/releaseData';
+import { ModalProvider } from '#site/providers/modalProvider';
+
+import ReleaseModal from '../ReleaseModal';
 
 const BADGE_KIND_MAP = {
   'End-of-life': 'warning',
@@ -19,41 +24,43 @@ const DownloadReleasesTable: FC = () => {
   const t = useTranslations();
 
   return (
-    <table id="tbVersions" className="download-table full-width">
-      <thead>
-        <tr>
-          <th>{t('components.downloadReleasesTable.version')}</th>
-          <th>{t('components.downloadReleasesTable.codename')}</th>
-          <th>{t('components.downloadReleasesTable.firstReleased')}</th>
-          <th>{t('components.downloadReleasesTable.lastUpdated')}</th>
-          <th>{t('components.downloadReleasesTable.status')}</th>
-          <th></th>
-        </tr>
-      </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>
+    <ModalProvider Component={ReleaseModal}>
+      <table id="tbVersions">
+        <thead>
+          <tr>
+            <th>{t('components.downloadReleasesTable.version')}</th>
+            <th>{t('components.downloadReleasesTable.codename')}</th>
+            <th>{t('components.downloadReleasesTable.firstReleased')}</th>
+            <th>{t('components.downloadReleasesTable.lastUpdated')}</th>
+            <th>{t('components.downloadReleasesTable.status')}</th>
+            <th></th>
           </tr>
-        ))}
-      </tbody>
-    </table>
+        </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>
+                <DetailsButton data={release} />
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </ModalProvider>
   );
 };
 

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

@@ -6,33 +6,27 @@ import type { 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';
+import type { ModalProps, NodeRelease } from '#site/types';
 
-type ReleaseModalProps = {
-  isOpen: boolean;
-  closeModal: () => void;
-  release: NodeRelease;
-};
-
-const ReleaseModal: FC<ReleaseModalProps> = ({
-  isOpen,
+const ReleaseModal: FC<ModalProps<NodeRelease>> = ({
+  open,
   closeModal,
-  release,
+  data,
 }) => {
   const t = useTranslations();
 
-  const modalHeadingKey = release.codename
+  const modalHeadingKey = data.codename
     ? 'components.releaseModal.title'
     : 'components.releaseModal.titleWithoutCodename';
 
   const modalHeading = t(modalHeadingKey, {
-    version: release.major,
-    codename: release.codename ?? '',
+    version: data.major,
+    codename: data.codename ?? '',
   });
 
   return (
-    <Modal open={isOpen} onOpenChange={closeModal}>
-      {release.status === 'End-of-life' && (
+    <Modal open={open} onOpenChange={closeModal}>
+      {data.status === 'End-of-life' && (
         <div className="mb-4">
           <AlertBox
             title={t('components.common.alertBox.warning')}
@@ -41,10 +35,7 @@ const ReleaseModal: FC<ReleaseModalProps> = ({
           >
             {t.rich('components.releaseModal.unsupportedVersionWarning', {
               link: text => (
-                <Link
-                  onClick={closeModal}
-                  href="/about/previous-releases#release-schedule"
-                >
+                <Link onClick={closeModal} href="/eol">
                   {text}
                 </Link>
               ),
@@ -53,7 +44,7 @@ const ReleaseModal: FC<ReleaseModalProps> = ({
         </div>
       )}
 
-      {release.isLts && (
+      {data.isLts && (
         <div className="mb-4">
           <AlertBox
             title={t('components.common.alertBox.info')}
@@ -70,11 +61,11 @@ const ReleaseModal: FC<ReleaseModalProps> = ({
       <Title>{modalHeading}</Title>
 
       <Content>
-        <ReleaseOverview release={release} />
+        <ReleaseOverview release={data} />
 
         <h5>{t('components.releaseModal.minorVersions')}</h5>
 
-        <MinorReleasesTable releases={release.minorVersions} />
+        <MinorReleasesTable releases={data.minorVersions} />
       </Content>
     </Modal>
   );

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

@@ -0,0 +1,19 @@
+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('components.eolAlert.intro')}{' '}
+      <Link href="/eol">
+        OpenJS Ecosystem Sustainability Program{' '}
+        {t('components.eolAlert.partner')} HeroDevs
+      </Link>
+    </AlertBox>
+  );
+};
+
+export default EOLAlert;

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

@@ -0,0 +1,65 @@
+import { Modal, Title, Content } from '@node-core/ui-components/Common/Modal';
+import { useTranslations } from 'next-intl';
+import { useMemo, type FC } from 'react';
+
+import UnknownSeveritySection from '#site/components/EOL/UnknownSeveritySection';
+import VulnerabilitiesTable from '#site/components/EOL/VulnerabilitiesTable';
+import { SEVERITY_ORDER } from '#site/next.constants.mjs';
+import type { ModalProps } from '#site/types';
+import type { EOLModalData } from '#site/types/vulnerabilities';
+
+const EOLModal: FC<ModalProps<EOLModalData>> = ({
+  open,
+  closeModal,
+  data: { release, vulnerabilities },
+}) => {
+  const t = useTranslations();
+
+  const modalHeading = release.codename
+    ? t('components.eolModal.title', {
+        version: release.major,
+        codename: release.codename,
+      })
+    : t('components.eolModal.titleWithoutCodename', { version: release.major });
+
+  useMemo(
+    () =>
+      vulnerabilities.sort(
+        (a, b) =>
+          SEVERITY_ORDER.indexOf(a.severity) -
+          SEVERITY_ORDER.indexOf(b.severity)
+      ),
+    [vulnerabilities]
+  );
+
+  return (
+    <Modal open={open} onOpenChange={closeModal}>
+      <Title>{modalHeading}</Title>
+      <Content>
+        {vulnerabilities.length > 0 && (
+          <p className="m-1">
+            {t('components.eolModal.vulnerabilitiesMessage', {
+              count: vulnerabilities.length,
+            })}
+          </p>
+        )}
+
+        <VulnerabilitiesTable
+          vulnerabilities={vulnerabilities.filter(
+            vuln => vuln.severity !== 'unknown'
+          )}
+        />
+
+        <UnknownSeveritySection vulnerabilities={vulnerabilities} />
+
+        {!vulnerabilities.length && (
+          <p className="m-1">
+            {t('components.eolModal.noVulnerabilitiesMessage')}
+          </p>
+        )}
+      </Content>
+    </Modal>
+  );
+};
+
+export default EOLModal;