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,23 +5,19 @@ 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 DetailsButton: FC<DetailsButtonProps> = ({ data }) => {
   const t = useTranslations('components.downloadReleasesTable');
 
-  const { openModal } = use(ReleaseModalContext);
+  const { openModal } = use(ModalContext);
 
   return (
-    <LinkWithArrow
-      className="cursor-pointer"
-      onClick={() => openModal(versionData)}
-    >
+    <LinkWithArrow className="cursor-pointer" onClick={() => openModal(data)}>
       {t('details')}
     </LinkWithArrow>
   );

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

@@ -48,7 +48,7 @@ const DownloadReleasesTable: FC = () => {
               </Badge>
             </td>
             <td className="download-table-last">
-              <DetailsButton versionData={release} />
+              <DetailsButton data={release} />
             </td>
           </tr>
         ))}

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

apps/site/components/EOL/Modal.tsx

@@ -0,0 +1,156 @@
+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('components.eolModal');
+
+  return (
+    <table className="w-full">
+      <thead>
+        <tr>
+          <th>{t('table.cves')}</th>
+          <th>{t('table.severity')}</th>
+          <th>{t('table.overview')}</th>
+          <th>{t('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('blogLinkText')}
+                </LinkWithArrow>
+              ) : (
+                '—'
+              )}
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+const UnknownSeveritySection: FC<{
+  vulnerabilities: Array<Vulnerability>;
+  hasKnownVulns: boolean;
+}> = ({ vulnerabilities, hasKnownVulns }) => {
+  const t = useTranslations('components.eolModal');
+
+  if (!vulnerabilities.length) {
+    return null;
+  }
+
+  return (
+    <details open={!hasKnownVulns}>
+      <summary className="cursor-pointer font-semibold">
+        {t('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('components.eolModal');
+
+  const modalHeading = t(release.codename ? 'title' : '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('vulnerabilitiesMessage', { count: vulnerabilities.length })}
+          </p>
+        )}
+
+        {hasKnownVulns && <VulnerabilitiesTable vulnerabilities={knownVulns} />}
+
+        <UnknownSeveritySection
+          vulnerabilities={unknownVulns}
+          hasKnownVulns={hasKnownVulns}
+        />
+
+        {!hasAnyVulns && <p className="m-1">{t('noVulnerabilitiesMessage')}</p>}
+      </Content>
+    </Modal>
+  );
+};
+
+export default EOLModal;

apps/site/components/EOL/Table.tsx

@@ -0,0 +1,62 @@
+import { getTranslations } from 'next-intl/server';
+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 provideVulnerabilities from '#site/next-data/providers/vulnerabilities';
+
+import VulnerabilityChips from './VulnerabilityChips';
+
+const EOLTable: FC = async () => {
+  const releaseData = provideReleaseData();
+  const vulnerabilities = await provideVulnerabilities();
+  const EOLReleases = releaseData.filter(
+    release => release.status === 'End-of-life'
+  );
+
+  const t = await getTranslations();
+
+  return (
+    <table id="tbVulnerabilities" className="download-table full-width">
+      <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 => (
+          <tr key={release.major}>
+            <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 className="download-table-last">
+              <DetailsButton
+                data={{
+                  release: release,
+                  vulnerabilities: vulnerabilities[release.major],
+                }}
+              />
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+export default EOLTable;

apps/site/components/EOL/VulnerabilityChips/Chip/index.module.css

@@ -0,0 +1,8 @@
+@reference "../../../../styles/index.css";
+
+.chipCount {
+  @apply mr-1
+    rounded-sm
+    bg-gray-800/20
+    px-1.5;
+}

apps/site/components/EOL/VulnerabilityChips/Chip/index.tsx

@@ -0,0 +1,36 @@
+import Badge from '@node-core/ui-components/Common/Badge';
+import { useTranslations } from 'next-intl';
+import type { FC } from 'react';
+
+import styles from './index.module.css';
+
+export const SEVERITY_ORDER = ['critical', 'high', 'medium', 'low'] as const;
+
+const SEVERITY_KIND_MAP = {
+  unknown: 'neutral',
+  low: 'default',
+  medium: 'info',
+  high: 'warning',
+  critical: 'error',
+} as const;
+
+type VulnerabilityChipProps = {
+  severity: keyof typeof SEVERITY_KIND_MAP;
+  count?: number;
+};
+
+const VulnerabilityChip: FC<VulnerabilityChipProps> = ({
+  severity,
+  count = 0,
+}) => {
+  const t = useTranslations('components.endOfLife');
+
+  return (
+    <Badge size="small" kind={SEVERITY_KIND_MAP[severity]} className="mr-0.5">
+      {count > 0 ? <span className={styles.chipCount}>{count}</span> : null}
+      {t(`severity.${severity}`)}
+    </Badge>
+  );
+};
+
+export default VulnerabilityChip;