feat: add eol page

apps/site/app/[locale]/page.tsx

@@ -150,7 +150,9 @@ const getPage: FC<DynamicParams> = async props => {
     // within a server-side context
     return (
       <MatterProvider {...sharedContext}>
-        <WithLayout layout={frontmatter.layout}>{content}</WithLayout>
+        <WithLayout layout={frontmatter.layout} modal={frontmatter.modal}>
+          {content}
+        </WithLayout>
       </MatterProvider>
     );
   }

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

@@ -19,7 +19,7 @@ const DownloadReleasesTable: FC = () => {
   const t = useTranslations();
 
   return (
-    <table id="tbVersions" className="download-table full-width">
+    <table id="tbVersions">
       <thead>
         <tr>
           <th>{t('components.downloadReleasesTable.version')}</th>
@@ -47,8 +47,8 @@ const DownloadReleasesTable: FC = () => {
                 {release.status === 'End-of-life' ? ' (EoL)' : ''}
               </Badge>
             </td>
-            <td className="download-table-last">
-              <DetailsButton versionData={release} />
+            <td>
+              <DetailsButton data={release} />
             </td>
           </tr>
         ))}

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,19 +6,11 @@ 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 { ModalProps } from '#site/providers/modalProvider';
 import type { NodeRelease } from '#site/types';
 
-type ReleaseModalProps = {
-  isOpen: boolean;
-  closeModal: () => void;
-  release: NodeRelease;
-};
-
-const ReleaseModal: FC<ReleaseModalProps> = ({
-  isOpen,
-  closeModal,
-  release,
-}) => {
+const ReleaseModal: FC<ModalProps> = ({ open, closeModal, data }) => {
+  const release = data as NodeRelease;
   const t = useTranslations();
 
   const modalHeadingKey = release.codename
@@ -31,7 +23,7 @@ const ReleaseModal: FC<ReleaseModalProps> = ({
   });
 
   return (
-    <Modal open={isOpen} onOpenChange={closeModal}>
+    <Modal open={open} onOpenChange={closeModal}>
       {release.status === 'End-of-life' && (
         <div className="mb-4">
           <AlertBox
@@ -41,10 +33,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>
               ),

apps/site/components/EOL/Alert.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/Modal.tsx

@@ -0,0 +1,168 @@
+import { Modal, Title, Content } from '@node-core/ui-components/Common/Modal';
+import classNames from 'classnames';
+import { useTranslations } from 'next-intl';
+import type { FC } from 'react';
+
+import VulnerabilityChip from '#site/components/EOL/VulnerabilityChips/Chip';
+import LinkWithArrow from '#site/components/LinkWithArrow';
+import type { ModalProps } from '#site/providers/modalProvider';
+import type { NodeRelease } from '#site/types';
+import type { Vulnerability } from '#site/types/vulnerabilities';
+
+import { SEVERITY_ORDER } from './VulnerabilityChips';
+
+type EOLModalData = {
+  release: NodeRelease;
+  vulnerabilities: Array<Vulnerability>;
+};
+
+type KnownVulnerability = Vulnerability & {
+  severity: (typeof SEVERITY_ORDER)[number];
+};
+
+const VulnerabilitiesTable: FC<{
+  vulnerabilities: Array<Vulnerability>;
+  maxWidth?: string;
+}> = ({ vulnerabilities, maxWidth = 'max-w-2xs' }) => {
+  const t = useTranslations();
+
+  return (
+    <table className="w-full">
+      <thead>
+        <tr>
+          <th>{t('components.eolModal.table.cves')}</th>
+          <th>{t('components.eolModal.table.severity')}</th>
+          <th>{t('components.eolModal.table.overview')}</th>
+          <th>{t('components.eolModal.table.details')}</th>
+        </tr>
+      </thead>
+      <tbody>
+        {vulnerabilities.map((vuln, i) => (
+          <tr key={i}>
+            <td>
+              {vuln.cve.length
+                ? vuln.cve.map(cveId => (
+                    <div key={cveId}>
+                      <LinkWithArrow
+                        href={`https://www.cve.org/CVERecord?id=${cveId}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        {cveId}
+                      </LinkWithArrow>
+                    </div>
+                  ))
+                : '-'}
+            </td>
+            <td>
+              <VulnerabilityChip severity={vuln.severity} />
+            </td>
+            <td className={classNames(maxWidth, 'truncate')}>
+              {vuln.description || vuln.overview || '-'}
+            </td>
+            <td>
+              {vuln.ref ? (
+                <LinkWithArrow
+                  href={vuln.ref}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {t('components.eolModal.blogLinkText')}
+                </LinkWithArrow>
+              ) : (
+                '—'
+              )}
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+const UnknownSeveritySection: FC<{
+  vulnerabilities: Array<Vulnerability>;
+  hasKnownVulns: boolean;
+}> = ({ vulnerabilities, hasKnownVulns }) => {
+  const t = useTranslations();
+
+  if (!vulnerabilities.length) {
+    return null;
+  }
+
+  return (
+    <details open={!hasKnownVulns}>
+      <summary className="cursor-pointer font-semibold">
+        {t('components.eolModal.showUnknownSeverities')} (
+        {vulnerabilities.length})
+      </summary>
+      <div className="mt-4">
+        <VulnerabilitiesTable
+          vulnerabilities={vulnerabilities}
+          maxWidth={'max-w-3xs'}
+        />
+      </div>
+    </details>
+  );
+};
+
+const EOLModal: FC<ModalProps> = ({ open, closeModal, data }) => {
+  const { release, vulnerabilities } = data as EOLModalData;
+  const t = useTranslations();
+
+  const modalHeading = t(
+    release.codename
+      ? 'components.eolModal.title'
+      : 'components.eolModal.titleWithoutCodename',
+    {
+      version: release.major,
+      codename: release.codename ?? '',
+    }
+  );
+
+  const [knownVulns, unknownVulns] = vulnerabilities.reduce(
+    (acc, vuln) => {
+      acc[vuln.severity === 'unknown' ? 1 : 0].push(vuln as KnownVulnerability);
+      return acc;
+    },
+    [[], []] as [Array<KnownVulnerability>, Array<Vulnerability>]
+  );
+
+  knownVulns.sort(
+    (a, b) =>
+      SEVERITY_ORDER.indexOf(a.severity) - SEVERITY_ORDER.indexOf(b.severity)
+  );
+
+  const hasKnownVulns = knownVulns.length > 0;
+  const hasAnyVulns = hasKnownVulns || unknownVulns.length > 0;
+
+  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>
+        )}
+
+        {hasKnownVulns && <VulnerabilitiesTable vulnerabilities={knownVulns} />}
+
+        <UnknownSeveritySection
+          vulnerabilities={unknownVulns}
+          hasKnownVulns={hasKnownVulns}
+        />
+
+        {!hasAnyVulns && (
+          <p className="m-1">
+            {t('components.eolModal.noVulnerabilitiesMessage')}
+          </p>
+        )}
+      </Content>
+    </Modal>
+  );
+};
+
+export default EOLModal;