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/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/EOL/EOLAlert.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.tsx

@@ -0,0 +1,65 @@
+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: { codename, major: version },
+  vulnerabilities,
+  ...props
+}) => {
+  const t = useTranslations();
+
+  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.tsx

@@ -0,0 +1,83 @@
+'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;

apps/site/components/EOL/KnownSeveritySection.tsx

@@ -0,0 +1,24 @@
+import type { FC } from 'react';
+
+import VulnerabilitiesTable from '#site/components/EOL/VulnerabilitiesTable';
+import type { Vulnerability } from '#site/types/vulnerabilities';
+
+type KnownSeveritySectionProps = {
+  vulnerabilities: Array<Vulnerability>;
+};
+
+const KnownSeveritySection: FC<KnownSeveritySectionProps> = ({
+  vulnerabilities,
+}) => {
+  const knownVulnerabilities = vulnerabilities.filter(
+    v => v.severity !== 'unknown'
+  );
+
+  if (!knownVulnerabilities.length) {
+    return null;
+  }
+
+  return <VulnerabilitiesTable vulnerabilities={knownVulnerabilities} />;
+};
+
+export default KnownSeveritySection;

apps/site/components/EOL/UnknownSeveritySection.tsx

@@ -0,0 +1,40 @@
+import { useTranslations } from 'next-intl';
+import type { FC } from 'react';
+
+import VulnerabilitiesTable from '#site/components/EOL/VulnerabilitiesTable';
+import type { Vulnerability } from '#site/types/vulnerabilities';
+
+type UnknownSeveritySectionProps = {
+  vulnerabilities: Array<Vulnerability>;
+};
+
+const UnknownSeveritySection: FC<UnknownSeveritySectionProps> = ({
+  vulnerabilities,
+}) => {
+  const t = useTranslations();
+
+  const unknownVulnerabilities = vulnerabilities.filter(
+    v => v.severity === 'unknown'
+  );
+
+  if (!unknownVulnerabilities.length) {
+    return null;
+  }
+
+  return (
+    <details open={unknownVulnerabilities.length === vulnerabilities.length}>
+      <summary className="cursor-pointer font-semibold">
+        {t('components.eolModal.showUnknownSeverities')} (
+        {unknownVulnerabilities.length})
+      </summary>
+      <div className="mt-4">
+        <VulnerabilitiesTable
+          vulnerabilities={unknownVulnerabilities}
+          maxWidth={'max-w-3xs'}
+        />
+      </div>
+    </details>
+  );
+};
+
+export default UnknownSeveritySection;