From 02db91b92defd39f1388b5403b022bc185741298 Mon Sep 17 00:00:00 2001 From: Brian Muenzenmeyer Date: Wed, 16 Jul 2025 18:30:23 -0500 Subject: [PATCH 01/65] feat: add eol page Co-Authored-By: Aviv Keller --- apps/site/app/[locale]/page.tsx | 4 +- .../DownloadReleasesTable/DetailsButton.tsx | 14 +- .../Downloads/DownloadReleasesTable/index.tsx | 2 +- .../Downloads/Release/ReleaseCodeBox.tsx | 2 +- .../Downloads/ReleaseModal/index.tsx | 21 +-- apps/site/components/EOL/Alert.tsx | 18 ++ apps/site/components/EOL/Modal.tsx | 156 ++++++++++++++++++ apps/site/components/EOL/Table.tsx | 63 +++++++ .../VulnerabilityChips/Chip/index.module.css | 8 + .../EOL/VulnerabilityChips/Chip/index.tsx | 36 ++++ .../EOL/VulnerabilityChips/index.tsx | 41 +++++ apps/site/components/withLayout.tsx | 20 ++- apps/site/layouts/About.tsx | 5 +- apps/site/layouts/Post.tsx | 3 + .../next-data/generators/vulnerabilities.mjs | 40 +++++ .../next-data/providers/vulnerabilities.ts | 9 + apps/site/next.mdx.use.mjs | 6 + .../site/pages/en/about/previous-releases.mdx | 7 +- apps/site/pages/en/eol.mdx | 46 ++++++ apps/site/pages/en/index.mdx | 2 +- apps/site/providers/modalProvider.tsx | 56 +++++++ apps/site/providers/releaseModalProvider.tsx | 45 ----- apps/site/types/vulnerabilities.ts | 14 ++ packages/i18n/src/locales/en.json | 24 +++ .../src/Common/AlertBox/index.stories.tsx | 15 ++ .../src/Common/AlertBox/index.tsx | 2 +- 26 files changed, 575 insertions(+), 84 deletions(-) create mode 100644 apps/site/components/EOL/Alert.tsx create mode 100644 apps/site/components/EOL/Modal.tsx create mode 100644 apps/site/components/EOL/Table.tsx create mode 100644 apps/site/components/EOL/VulnerabilityChips/Chip/index.module.css create mode 100644 apps/site/components/EOL/VulnerabilityChips/Chip/index.tsx create mode 100644 apps/site/components/EOL/VulnerabilityChips/index.tsx create mode 100644 apps/site/next-data/generators/vulnerabilities.mjs create mode 100644 apps/site/next-data/providers/vulnerabilities.ts create mode 100644 apps/site/pages/en/eol.mdx create mode 100644 apps/site/providers/modalProvider.tsx delete mode 100644 apps/site/providers/releaseModalProvider.tsx create mode 100644 apps/site/types/vulnerabilities.ts diff --git a/apps/site/app/[locale]/page.tsx b/apps/site/app/[locale]/page.tsx index cf9d20c1de3b3..a82b5e711c507 100644 --- a/apps/site/app/[locale]/page.tsx +++ b/apps/site/app/[locale]/page.tsx @@ -150,7 +150,9 @@ const getPage: FC = async props => { // within a server-side context return ( - {content} + + {content} + ); } diff --git a/apps/site/components/Downloads/DownloadReleasesTable/DetailsButton.tsx b/apps/site/components/Downloads/DownloadReleasesTable/DetailsButton.tsx index b8fbeb6f160b9..b656b8f379ac4 100644 --- a/apps/site/components/Downloads/DownloadReleasesTable/DetailsButton.tsx +++ b/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 = ({ versionData }) => { +const DetailsButton: FC = ({ data }) => { const t = useTranslations('components.downloadReleasesTable'); - const { openModal } = use(ReleaseModalContext); + const { openModal } = use(ModalContext); return ( - openModal(versionData)} - > + openModal(data)}> {t('details')} ); diff --git a/apps/site/components/Downloads/DownloadReleasesTable/index.tsx b/apps/site/components/Downloads/DownloadReleasesTable/index.tsx index 557d6bd86e039..4cd2a8072c952 100644 --- a/apps/site/components/Downloads/DownloadReleasesTable/index.tsx +++ b/apps/site/components/Downloads/DownloadReleasesTable/index.tsx @@ -48,7 +48,7 @@ const DownloadReleasesTable: FC = () => { - + ))} diff --git a/apps/site/components/Downloads/Release/ReleaseCodeBox.tsx b/apps/site/components/Downloads/Release/ReleaseCodeBox.tsx index ccd9073412f41..1258763784fba 100644 --- a/apps/site/components/Downloads/Release/ReleaseCodeBox.tsx +++ b/apps/site/components/Downloads/Release/ReleaseCodeBox.tsx @@ -122,7 +122,7 @@ const ReleaseCodeBox: FC = () => { size="small" > {t.rich('layouts.download.codeBox.unsupportedVersionWarning', { - link: text => {text}, + link: text => {text}, })} )} diff --git a/apps/site/components/Downloads/ReleaseModal/index.tsx b/apps/site/components/Downloads/ReleaseModal/index.tsx index f5a89e8a8a776..8f1869a65e474 100644 --- a/apps/site/components/Downloads/ReleaseModal/index.tsx +++ b/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 = ({ - isOpen, - closeModal, - release, -}) => { +const ReleaseModal: FC = ({ open, closeModal, data }) => { + const release = data as NodeRelease; const t = useTranslations(); const modalHeadingKey = release.codename @@ -31,7 +23,7 @@ const ReleaseModal: FC = ({ }); return ( - + {release.status === 'End-of-life' && (
= ({ > {t.rich('components.releaseModal.unsupportedVersionWarning', { link: text => ( - + {text} ), diff --git a/apps/site/components/EOL/Alert.tsx b/apps/site/components/EOL/Alert.tsx new file mode 100644 index 0000000000000..b44dc6c923f2c --- /dev/null +++ b/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 ( + + {t('intro')}{' '} + + OpenJS Ecosystem Sustainability Program partner HeroDevs + + + ); +}; + +export default EOLAlert; diff --git a/apps/site/components/EOL/Modal.tsx b/apps/site/components/EOL/Modal.tsx new file mode 100644 index 0000000000000..ed1c2d8e3262b --- /dev/null +++ b/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; +}; + +type KnownVulnerability = Vulnerability & { + severity: (typeof SEVERITY_ORDER)[number]; +}; + +const VulnerabilitiesTable: FC<{ + vulnerabilities: Array; + maxWidth?: string; +}> = ({ vulnerabilities, maxWidth = 'max-w-2xs' }) => { + const t = useTranslations('components.eolModal'); + + return ( + + + + + + + + + + + {vulnerabilities.map((vuln, i) => ( + + + + + + + ))} + +
{t('table.cves')}{t('table.severity')}{t('table.overview')}{t('table.details')}
+ {vuln.cve.length + ? vuln.cve.map(cveId => ( +
+ + {cveId} + +
+ )) + : '-'} + 		+ + + {vuln.description || vuln.overview || '-'} + + {vuln.ref ? ( + + {t('blogLinkText')} + + ) : ( + '—' + )} +
+ ); +}; + +const UnknownSeveritySection: FC<{ + vulnerabilities: Array; + hasKnownVulns: boolean; +}> = ({ vulnerabilities, hasKnownVulns }) => { + const t = useTranslations('components.eolModal'); + + if (!vulnerabilities.length) { + return null; + } + + return ( +
+ + {t('showUnknownSeverities')} ({vulnerabilities.length}) + +
+ +
+
+ ); +}; + +const EOLModal: FC = ({ 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, Array] + ); + + 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 ( + + {modalHeading} + + {vulnerabilities.length > 0 && ( +

+ {t('vulnerabilitiesMessage', { count: vulnerabilities.length })} +

+ )} + + {hasKnownVulns && } + + + + {!hasAnyVulns &&

{t('noVulnerabilitiesMessage')}

} + + + ); +}; + +export default EOLModal; diff --git a/apps/site/components/EOL/Table.tsx b/apps/site/components/EOL/Table.tsx new file mode 100644 index 0000000000000..1c770007bf38d --- /dev/null +++ b/apps/site/components/EOL/Table.tsx @@ -0,0 +1,63 @@ +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 ( + + + + {/* TODO @bmuenzenmeyer change these to new i18n keys */} + + + + + + + + {EOLReleases.map(release => ( + + + + + + + ))} + +
+ {t('components.downloadReleasesTable.version')} ( + {t('components.downloadReleasesTable.codename')}) + {t('components.downloadReleasesTable.lastUpdated')}VulnerabilitiesDetails
+ v{release.major} {release.codename ? `(${release.codename})` : ''} + + + + + + +
+ ); +}; + +export default EOLTable; diff --git a/apps/site/components/EOL/VulnerabilityChips/Chip/index.module.css b/apps/site/components/EOL/VulnerabilityChips/Chip/index.module.css new file mode 100644 index 0000000000000..0dc0a5ebc7337 --- /dev/null +++ b/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; +} diff --git a/apps/site/components/EOL/VulnerabilityChips/Chip/index.tsx b/apps/site/components/EOL/VulnerabilityChips/Chip/index.tsx new file mode 100644 index 0000000000000..ce7e7af33ad93 --- /dev/null +++ b/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 = ({ + severity, + count = 0, +}) => { + const t = useTranslations('components.endOfLife'); + + return ( + + {count > 0 ? {count} : null} + {t(`severity.${severity}`)} + + ); +}; + +export default VulnerabilityChip; diff --git a/apps/site/components/EOL/VulnerabilityChips/index.tsx b/apps/site/components/EOL/VulnerabilityChips/index.tsx new file mode 100644 index 0000000000000..fcd73e6b15930 --- /dev/null +++ b/apps/site/components/EOL/VulnerabilityChips/index.tsx @@ -0,0 +1,41 @@ +import type { FC } from 'react'; + +import type { Vulnerability } from '#site/types/vulnerabilities'; + +import VulnerabilityChip from './Chip'; + +export const SEVERITY_ORDER = ['critical', 'high', 'medium', 'low'] as const; + +type VulnerabilityChipsProps = { + vulnerabilities: Array; +}; + +const VulnerabilityChips: FC = ({ + vulnerabilities, +}) => { + // Group vulnerabilities by severity + const groupedBySeverity = vulnerabilities.reduce>( + (acc, vuln) => { + const severity = vuln.severity.toLowerCase(); + acc[severity] = (acc[severity] || 0) + 1; + return acc; + }, + {} + ); + + return ( +
+ {SEVERITY_ORDER.filter(severity => groupedBySeverity[severity] > 0).map( + severity => ( + + ) + )} +
+ ); +}; + +export default VulnerabilityChips; diff --git a/apps/site/components/withLayout.tsx b/apps/site/components/withLayout.tsx index ec553190e621d..44c00b7ea220f 100644 --- a/apps/site/components/withLayout.tsx +++ b/apps/site/components/withLayout.tsx @@ -8,6 +8,7 @@ import DownloadLayout from '#site/layouts/Download'; import GlowingBackdropLayout from '#site/layouts/GlowingBackdrop'; import LearnLayout from '#site/layouts/Learn'; import PostLayout from '#site/layouts/Post'; +import { ModalProvider } from '#site/providers/modalProvider'; import type { Layouts } from '#site/types'; const layouts = { @@ -21,11 +22,26 @@ const layouts = { article: ArticlePageLayout, } satisfies Record; -type WithLayoutProps = PropsWithChildren<{ layout: L }>; +type WithLayoutProps = PropsWithChildren<{ + layout: L; + modal?: string; +}>; -const WithLayout: FC> = ({ layout, children }) => { +const WithLayout: FC> = ({ + layout, + children, + modal, +}) => { const LayoutComponent = layouts[layout] ?? DefaultLayout; + if (modal) { + return ( + + {children} + + ); + } + return {children}; }; diff --git a/apps/site/layouts/About.tsx b/apps/site/layouts/About.tsx index b6f2fecae5419..cf616baf892aa 100644 --- a/apps/site/layouts/About.tsx +++ b/apps/site/layouts/About.tsx @@ -6,10 +6,9 @@ import WithFooter from '#site/components/withFooter'; import WithMetaBar from '#site/components/withMetaBar'; import WithNavBar from '#site/components/withNavBar'; import WithSidebar from '#site/components/withSidebar'; -import { ReleaseModalProvider } from '#site/providers/releaseModalProvider'; const AboutLayout: FC = ({ children }) => ( - + <>
@@ -25,7 +24,7 @@ const AboutLayout: FC = ({ children }) => (
- + ); export default AboutLayout; diff --git a/apps/site/layouts/Post.tsx b/apps/site/layouts/Post.tsx index 9b5234b727757..9d356ce55ab83 100644 --- a/apps/site/layouts/Post.tsx +++ b/apps/site/layouts/Post.tsx @@ -1,6 +1,7 @@ import Preview from '@node-core/ui-components/Common/Preview'; import type { FC, PropsWithChildren } from 'react'; +import EOLAlert from '#site/components/EOL/Alert'; import WithAvatarGroup from '#site/components/withAvatarGroup'; import WithBlogCrossLinks from '#site/components/withBlogCrossLinks'; import WithFooter from '#site/components/withFooter'; @@ -26,6 +27,8 @@ const PostLayout: FC = ({ children }) => {
+ {type === 'vulnerability' && } +

{frontmatter.title}

diff --git a/apps/site/next-data/generators/vulnerabilities.mjs b/apps/site/next-data/generators/vulnerabilities.mjs new file mode 100644 index 0000000000000..1aabfc9201967 --- /dev/null +++ b/apps/site/next-data/generators/vulnerabilities.mjs @@ -0,0 +1,40 @@ +/** + * Groups vulnerabilities by major version number extracted from the `vulnerable` string. + * + * @param {Array>} vulnerabilities Array of Vulnerability objects + */ +function groupVulnerabilitiesByMajor(vulnerabilities) { + const grouped = {}; + + for (const vulnerability of vulnerabilities) { + const majorVersions = + vulnerability.vulnerable + .match(/\b\d+\b/g) + ?.map(Number) + .filter(major => !isNaN(major)) ?? []; + + for (const majorVersion of majorVersions) { + const key = majorVersion.toString(); + if (!grouped[key]) grouped[key] = []; + grouped[key].push(vulnerability); + } + } + + return grouped; +} + +/** + * Fetches vulnerability data from the Node.js Security Working Group repository, + * and returns it grouped by major version. + * + * @returns {Promise} Grouped vulnerabilities + */ +export default async function generateVulnerabilityData() { + const response = await fetch( + 'https://raw.githubusercontent.com/nodejs/security-wg/main/vuln/core/index.json' + ); + + const data = await response.json(); + + return groupVulnerabilitiesByMajor(Object.values(data)); +} diff --git a/apps/site/next-data/providers/vulnerabilities.ts b/apps/site/next-data/providers/vulnerabilities.ts new file mode 100644 index 0000000000000..cfc3cce008ba0 --- /dev/null +++ b/apps/site/next-data/providers/vulnerabilities.ts @@ -0,0 +1,9 @@ +import { cache } from 'react'; + +import generateVulnerabilities from '#site/next-data/generators/vulnerabilities.mjs'; + +const vulnerabilities = await generateVulnerabilities(); + +const provideVulnerabilities = cache(() => vulnerabilities); + +export default provideVulnerabilities; diff --git a/apps/site/next.mdx.use.mjs b/apps/site/next.mdx.use.mjs index 9942ac7f35e3e..15c37390ad5a9 100644 --- a/apps/site/next.mdx.use.mjs +++ b/apps/site/next.mdx.use.mjs @@ -3,6 +3,8 @@ import BadgeGroup from '@node-core/ui-components/Common/BadgeGroup'; import DownloadReleasesTable from './components/Downloads/DownloadReleasesTable'; +import EOLAlertBox from './components/EOL/Alert'; +import EOLTable from './components/EOL/Table'; import UpcomingMeetings from './components/MDX/Calendar/UpcomingMeetings'; import WithBadgeGroup from './components/withBadgeGroup'; import WithBanner from './components/withBanner'; @@ -25,4 +27,8 @@ export const mdxComponents = { BadgeGroup, // Renders an container for Upcoming Node.js Meetings UpcomingMeetings, + // Renders an EOL alert + EOLAlertBox, + // Renders the EOL Table + EOLTable, }; diff --git a/apps/site/pages/en/about/previous-releases.mdx b/apps/site/pages/en/about/previous-releases.mdx index 8ef856f11261a..909a5bd4cfbc3 100644 --- a/apps/site/pages/en/about/previous-releases.mdx +++ b/apps/site/pages/en/about/previous-releases.mdx @@ -1,10 +1,13 @@ --- title: Node.js Releases layout: about +modal: release --- # Node.js Releases + + Major Node.js versions enter _Current_ release status for six months, which gives library authors time to add support for them. After six months, odd-numbered releases (9, 11, etc.) become unsupported, and even-numbered releases (10, 12, etc.) move to _Active LTS_ status and are ready for general use. _LTS_ release status is "long-term support", which typically guarantees that critical bugs will be fixed for a total of 30 months. @@ -16,10 +19,6 @@ Production applications should only use _Active LTS_ or _Maintenance LTS_ releas Full details regarding the Node.js release schedule are available [on GitHub](https://github.com/nodejs/release#release-schedule). -### Commercial Support - -Commercial support for versions past the Maintenance phase is available through our OpenJS Ecosystem Sustainability Program partner [HeroDevs](https://www.herodevs.com/support/node-nes?utm_source=NodeJS+&utm_medium=Link&utm_campaign=Version_support_page). - ## Looking for the latest release of a version branch? diff --git a/apps/site/pages/en/eol.mdx b/apps/site/pages/en/eol.mdx new file mode 100644 index 0000000000000..27ace7d1637d4 --- /dev/null +++ b/apps/site/pages/en/eol.mdx @@ -0,0 +1,46 @@ +--- +title: End-Of-Life +layout: article +modal: eol +--- + +# End-Of-Life (EOL) + +## What is EOL Software? + +End-Of-Life software is software that is no longer maintained by its creators. Node.js has releases going back to 2015, and it's simply not feasible to maintain all release lines in perpetuity. Major versions are released, patched, and designated End-Of-Life on a schedule. + +[View the Node.js release schedule](/about/releases/). + +## Why Using EOL Software is Dangerous + +When a version reaches End-Of-Life, it means that it will no longer receive updates, including security patches. This can leave applications running on these versions vulnerable to security issues and bugs that will never be fixed. + +**End-Of-Life versions are dangerous. They are now completely unsupported**, meaning they receive no updates, including security patches. + +The security implications are immediate and serious. For example, when new security releases reveal issues and patches against major lines, the security advisory notes, "End-of-Life versions are always affected when a security release occurs", meaning **all earlier versions have these same vulnerabilities but will never receive patches**. + +## EOL Versions + + + +## Commercial Support + +We understand that some organizations face constraints that prevent immediate upgrades, such as legacy codebases, compliance requirements, or complex dependency chains. If your company cannot upgrade immediately but needs continued security support for End-Of-Life versions of Node.js, [**commercial support**](https://www.herodevs.com/support/node-nes?utm_source=NodeJS+&utm_medium=Link&utm_campaign=Nodejs_eol_support) **is available through HeroDevs**. + +As part of the [OpenJS Ecosystem Sustainability Program](https://openjsf.org/partners) partnership, HeroDevs provides Never-Ending Support (NES) for Node.js versions past their official maintenance phase. This includes security patches, compliance assistance, and technical support to help bridge the gap while you plan your upgrade strategy. + +However, this should be viewed as a temporary solution—the goal should always be to upgrade to actively supported versions. + +## Upgrade Today + +
+ + + + +
diff --git a/apps/site/pages/en/index.mdx b/apps/site/pages/en/index.mdx index 02f5c43bd78a2..14abd8323a71e 100644 --- a/apps/site/pages/en/index.mdx +++ b/apps/site/pages/en/index.mdx @@ -21,7 +21,7 @@ layout: home - or -
From 947ea35f5bac57304451ae528e0ef9df97dc860e Mon Sep 17 00:00:00 2001 From: Brian Muenzenmeyer Date: Thu, 14 Aug 2025 11:47:17 -0500 Subject: [PATCH 58/65] use rich translation for EOLAlertBox --- apps/site/components/EOL/EOLAlert/index.tsx | 8 +++----- packages/i18n/src/locales/en.json | 3 +-- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/apps/site/components/EOL/EOLAlert/index.tsx b/apps/site/components/EOL/EOLAlert/index.tsx index 1b517f84f5b00..446949b5c3c6a 100644 --- a/apps/site/components/EOL/EOLAlert/index.tsx +++ b/apps/site/components/EOL/EOLAlert/index.tsx @@ -7,11 +7,9 @@ const EOLAlert = () => { const t = useTranslations(); return ( - {t('components.eolAlert.intro')}{' '} - - OpenJS Ecosystem Sustainability Program{' '} - {t('components.eolAlert.partner')} HeroDevs - + {t.rich('components.eolAlert.message', { + link: text => {text}, + })} ); }; diff --git a/packages/i18n/src/locales/en.json b/packages/i18n/src/locales/en.json index e190e073cb3dd..83cc413f34fc2 100644 --- a/packages/i18n/src/locales/en.json +++ b/packages/i18n/src/locales/en.json @@ -177,8 +177,7 @@ "ltsVersionFeaturesNotice": "Want new features sooner? Get the latest Node.js version instead and try the latest improvements!" }, "eolAlert": { - "intro": "Commercial support for versions past the Maintenance LTS phase is available through our", - "partner": "partner" + "message": "Commercial support for versions past the Maintenance LTS phase is available through our OpenJS Ecosystem Sustainability Program partner HeroDevs" }, "eolChip": { "severity": { From 3a1ae8f98ca139c3f1028a86709235a8a2cb8f8f Mon Sep 17 00:00:00 2001 From: Claudio Wunder Date: Fri, 15 Aug 2025 00:52:22 +0200 Subject: [PATCH 59/65] chore: recommendation under Signed-off-by: Claudio Wunder --- docs/translation.md | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/docs/translation.md b/docs/translation.md index e5b05e3836a94..687faca0c40ff 100644 --- a/docs/translation.md +++ b/docs/translation.md @@ -61,13 +61,12 @@ If you're making a new Component and adding Translation Keys for your Component, - The values of each Translation Key should follow the [ICU Message Syntax](https://next-intl-docs.vercel.app/docs/usage/messages#rendering-icu-messages) - All new Translation keys should be added at the bottom of the `i18n/locales/en.json` file. Since this makes it easier for Translators to notice that there are new Translation keys to be translated. - Reference the full path to the key within your Component. This helps with static analysis, even at the cost of verbosity. For example: - -```tsx -❌ const t = useTranslations('components.common.myComponent'); -❌ t('copyButton.title'); -✅ const t = useTranslations(); -✅ t('components.common.myComponent.copyButton.title'); -``` + ```tsx + ❌ const t = useTranslations('components.common.myComponent'); + ❌ t('copyButton.title'); + ✅ const t = useTranslations(); + ✅ t('components.common.myComponent.copyButton.title'); + ``` #### Notes about Translation Keys From 784e7e10d7894293dec8f8008a139605c63b7ea9 Mon Sep 17 00:00:00 2001 From: Brian Muenzenmeyer Date: Thu, 14 Aug 2025 21:34:49 -0500 Subject: [PATCH 60/65] Update apps/site/components/EOL/VulnerabilityChips/Chip/index.tsx Co-authored-by: Claudio Wunder Signed-off-by: Brian Muenzenmeyer --- apps/site/components/EOL/VulnerabilityChips/Chip/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/site/components/EOL/VulnerabilityChips/Chip/index.tsx b/apps/site/components/EOL/VulnerabilityChips/Chip/index.tsx index 6c2d7232ce07d..e3dfe947eceff 100644 --- a/apps/site/components/EOL/VulnerabilityChips/Chip/index.tsx +++ b/apps/site/components/EOL/VulnerabilityChips/Chip/index.tsx @@ -1,4 +1,5 @@ -import Badge, { type BadgeKind } from '@node-core/ui-components/Common/Badge'; +import type { BadgeKind } from '@node-core/ui-components/Common/Badge'; +import Badge from '@node-core/ui-components/Common/Badge'; import { useTranslations } from 'next-intl'; import type { FC } from 'react'; From 5167bf1ab01dea1f681c0e4f3821c4467867b4a3 Mon Sep 17 00:00:00 2001 From: Brian Muenzenmeyer Date: Thu, 14 Aug 2025 21:44:04 -0500 Subject: [PATCH 61/65] use filtered vulnerabilities --- apps/site/components/EOL/KnownSeveritySection/index.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/apps/site/components/EOL/KnownSeveritySection/index.tsx b/apps/site/components/EOL/KnownSeveritySection/index.tsx index 0f79e8a64fad6..a5f259fe51ead 100644 --- a/apps/site/components/EOL/KnownSeveritySection/index.tsx +++ b/apps/site/components/EOL/KnownSeveritySection/index.tsx @@ -18,13 +18,7 @@ const KnownSeveritySection: FC = ({ return null; } - return ( - vuln.severity !== 'unknown' - )} - /> - ); + return ; }; export default KnownSeveritySection; From c4e0b569f5ab098d6dfbd48e2c8d71b8aa37fb30 Mon Sep 17 00:00:00 2001 From: Brian Muenzenmeyer Date: Thu, 14 Aug 2025 21:44:13 -0500 Subject: [PATCH 62/65] add space --- apps/site/types/vulnerabilities.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/site/types/vulnerabilities.ts b/apps/site/types/vulnerabilities.ts index 44ae897b35ae4..5ac27f7f073a8 100644 --- a/apps/site/types/vulnerabilities.ts +++ b/apps/site/types/vulnerabilities.ts @@ -1,4 +1,5 @@ export type Severity = 'unknown' | 'low' | 'medium' | 'high' | 'critical'; + export interface Vulnerability { cve: Array; url?: string; From 60ff11882a61048c0c0d9532836a6ba4ba5c2ebe Mon Sep 17 00:00:00 2001 From: Brian Muenzenmeyer Date: Thu, 14 Aug 2025 22:48:01 -0500 Subject: [PATCH 63/65] use consistent modern looping --- apps/site/next-data/generators/vulnerabilities.mjs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/site/next-data/generators/vulnerabilities.mjs b/apps/site/next-data/generators/vulnerabilities.mjs index b59b89cc126b5..82f51800a9c04 100644 --- a/apps/site/next-data/generators/vulnerabilities.mjs +++ b/apps/site/next-data/generators/vulnerabilities.mjs @@ -8,7 +8,7 @@ import { VULNERABILITIES_URL } from '#site/next.constants.mjs'; export function groupVulnerabilitiesByMajor(vulnerabilities) { const grouped = {}; - for (const vulnerability of vulnerabilities) { + vulnerabilities.forEach(vulnerability => { // To avoid future confusion, rename 'ref' to 'url' vulnerability.url = vulnerability.ref; delete vulnerability.ref; @@ -62,7 +62,7 @@ export function groupVulnerabilitiesByMajor(vulnerabilities) { } } }); - } + }); return grouped; } From dca3e9c4c54a530a4ec38e024998083ddfecaaf6 Mon Sep 17 00:00:00 2001 From: Claudio Wunder Date: Fri, 15 Aug 2025 13:44:25 +0200 Subject: [PATCH 64/65] chore: cleanup, refactor + fixes --- .../EOL/{EOLAlert/index.tsx => EOLAlert.tsx} | 0 .../EOL/{EOLModal/index.tsx => EOLModal.tsx} | 9 +- .../index.tsx => EOLReleaseTable.tsx} | 6 + .../index.tsx => KnownSeveritySection.tsx} | 0 .../index.tsx => UnknownSeveritySection.tsx} | 0 .../index.tsx => VulnerabilitiesTable.tsx} | 8 +- .../index.module.css | 0 .../{Chip => VulnerabilityChip}/index.tsx | 0 .../EOL/VulnerabilityChips/index.tsx | 3 +- .../MinorReleasesTable/index.module.css | 0 .../MinorReleasesTable/index.tsx | 1 + .../PreviousReleasesTable.tsx} | 16 +- .../index.tsx => Releases/ReleaseModal.tsx} | 12 +- .../ReleaseOverviewItem/index.module.css | 21 +++ .../ReleaseOverviewItem/index.tsx | 27 ++++ .../ReleaseOverview/index.module.css | 20 --- .../ReleaseOverview/index.tsx | 38 ++--- .../next-data/generators/vulnerabilities.mjs | 143 ++++++++++-------- apps/site/next.config.mjs | 1 + apps/site/next.mdx.use.client.mjs | 3 - apps/site/next.mdx.use.mjs | 4 +- .../site/pages/en/about/previous-releases.mdx | 2 +- apps/site/types/vulnerabilities.ts | 8 +- .../src/Common/ChangeHistory/index.tsx | 2 +- 24 files changed, 180 insertions(+), 144 deletions(-) rename apps/site/components/EOL/{EOLAlert/index.tsx => EOLAlert.tsx} (100%) rename apps/site/components/EOL/{EOLModal/index.tsx => EOLModal.tsx} (92%) rename apps/site/components/EOL/{EOLReleaseTable/index.tsx => EOLReleaseTable.tsx} (99%) rename apps/site/components/EOL/{KnownSeveritySection/index.tsx => KnownSeveritySection.tsx} (100%) rename apps/site/components/EOL/{UnknownSeveritySection/index.tsx => UnknownSeveritySection.tsx} (100%) rename apps/site/components/EOL/{VulnerabilitiesTable/index.tsx => VulnerabilitiesTable.tsx} (95%) rename apps/site/components/EOL/VulnerabilityChips/{Chip => VulnerabilityChip}/index.module.css (100%) rename apps/site/components/EOL/VulnerabilityChips/{Chip => VulnerabilityChip}/index.tsx (100%) rename apps/site/components/{Downloads => Releases}/MinorReleasesTable/index.module.css (100%) rename apps/site/components/{Downloads => Releases}/MinorReleasesTable/index.tsx (99%) rename apps/site/components/{Downloads/DownloadReleasesTable/index.tsx => Releases/PreviousReleasesTable.tsx} (94%) rename apps/site/components/{Downloads/ReleaseModal/index.tsx => Releases/ReleaseModal.tsx} (85%) create mode 100644 apps/site/components/Releases/ReleaseOverview/ReleaseOverviewItem/index.module.css create mode 100644 apps/site/components/Releases/ReleaseOverview/ReleaseOverviewItem/index.tsx rename apps/site/components/{Downloads => Releases}/ReleaseOverview/index.module.css (55%) rename apps/site/components/{Downloads => Releases}/ReleaseOverview/index.tsx (78%) diff --git a/apps/site/components/EOL/EOLAlert/index.tsx b/apps/site/components/EOL/EOLAlert.tsx similarity index 100% rename from apps/site/components/EOL/EOLAlert/index.tsx rename to apps/site/components/EOL/EOLAlert.tsx diff --git a/apps/site/components/EOL/EOLModal/index.tsx b/apps/site/components/EOL/EOLModal.tsx similarity index 92% rename from apps/site/components/EOL/EOLModal/index.tsx rename to apps/site/components/EOL/EOLModal.tsx index b0bd1ca041be4..16bf6e97d4fb2 100644 --- a/apps/site/components/EOL/EOLModal/index.tsx +++ b/apps/site/components/EOL/EOLModal.tsx @@ -15,19 +15,14 @@ type EOLModalProps = ComponentProps & { }; const EOLModal: FC = ({ - release, + release: { codename, major: version }, vulnerabilities, ...props }) => { const t = useTranslations(); - const { codename, major: version } = release; - const modalHeading = codename - ? t('components.eolModal.title', { - version, - codename, - }) + ? t('components.eolModal.title', { version, codename }) : t('components.eolModal.titleWithoutCodename', { version }); useMemo( diff --git a/apps/site/components/EOL/EOLReleaseTable/index.tsx b/apps/site/components/EOL/EOLReleaseTable.tsx similarity index 99% rename from apps/site/components/EOL/EOLReleaseTable/index.tsx rename to apps/site/components/EOL/EOLReleaseTable.tsx index e45df4e22d6d2..8843fadf78eb9 100644 --- a/apps/site/components/EOL/EOLReleaseTable/index.tsx +++ b/apps/site/components/EOL/EOLReleaseTable.tsx @@ -15,6 +15,7 @@ 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 ); @@ -36,6 +37,7 @@ const EOLReleaseTable: FC = () => { {t('components.eolTable.details')} + {eolReleases.map(release => ( @@ -44,14 +46,17 @@ const EOLReleaseTable: FC = () => { v{release.major}{' '} {release.codename ? `(${release.codename})` : ''} + + + { + - {vulnerability.url ? ( + {vulnerability.url && ( {t('components.eolModal.blogLinkText')} - ) : ( - '—' )} + + {!!vulnerability.url || '-'} ))} diff --git a/apps/site/components/EOL/VulnerabilityChips/Chip/index.module.css b/apps/site/components/EOL/VulnerabilityChips/VulnerabilityChip/index.module.css similarity index 100% rename from apps/site/components/EOL/VulnerabilityChips/Chip/index.module.css rename to apps/site/components/EOL/VulnerabilityChips/VulnerabilityChip/index.module.css diff --git a/apps/site/components/EOL/VulnerabilityChips/Chip/index.tsx b/apps/site/components/EOL/VulnerabilityChips/VulnerabilityChip/index.tsx similarity index 100% rename from apps/site/components/EOL/VulnerabilityChips/Chip/index.tsx rename to apps/site/components/EOL/VulnerabilityChips/VulnerabilityChip/index.tsx diff --git a/apps/site/components/EOL/VulnerabilityChips/index.tsx b/apps/site/components/EOL/VulnerabilityChips/index.tsx index cec0b7a86e2da..d1cb0354dd794 100644 --- a/apps/site/components/EOL/VulnerabilityChips/index.tsx +++ b/apps/site/components/EOL/VulnerabilityChips/index.tsx @@ -1,9 +1,10 @@ import type { FC } from 'react'; -import VulnerabilityChip from '#site/components/EOL/VulnerabilityChips/Chip'; import { SEVERITY_ORDER } from '#site/next.constants.mjs'; import type { Severity, Vulnerability } from '#site/types'; +import VulnerabilityChip from './VulnerabilityChip'; + type VulnerabilityChipsProps = { vulnerabilities: Array; }; diff --git a/apps/site/components/Downloads/MinorReleasesTable/index.module.css b/apps/site/components/Releases/MinorReleasesTable/index.module.css similarity index 100% rename from apps/site/components/Downloads/MinorReleasesTable/index.module.css rename to apps/site/components/Releases/MinorReleasesTable/index.module.css diff --git a/apps/site/components/Downloads/MinorReleasesTable/index.tsx b/apps/site/components/Releases/MinorReleasesTable/index.tsx similarity index 99% rename from apps/site/components/Downloads/MinorReleasesTable/index.tsx rename to apps/site/components/Releases/MinorReleasesTable/index.tsx index f712e9e71f83a..8cfbafcf91000 100644 --- a/apps/site/components/Downloads/MinorReleasesTable/index.tsx +++ b/apps/site/components/Releases/MinorReleasesTable/index.tsx @@ -28,6 +28,7 @@ export const MinorReleasesTable: FC = ({ {t('components.minorReleasesTable.links')} + {releases.map(release => ( diff --git a/apps/site/components/Downloads/DownloadReleasesTable/index.tsx b/apps/site/components/Releases/PreviousReleasesTable.tsx similarity index 94% rename from apps/site/components/Downloads/DownloadReleasesTable/index.tsx rename to apps/site/components/Releases/PreviousReleasesTable.tsx index de74b92da2570..19705cf0958aa 100644 --- a/apps/site/components/Downloads/DownloadReleasesTable/index.tsx +++ b/apps/site/components/Releases/PreviousReleasesTable.tsx @@ -2,14 +2,14 @@ import Badge from '@node-core/ui-components/Common/Badge'; import { useTranslations } from 'next-intl'; -import { useState } from 'react'; import type { FC } from 'react'; +import { useState } from 'react'; import FormattedTime from '#site/components/Common/FormattedTime'; import LinkWithArrow from '#site/components/LinkWithArrow'; import provideReleaseData from '#site/next-data/providers/releaseData'; -import ReleaseModal from '../ReleaseModal'; +import ReleaseModal from './ReleaseModal'; const BADGE_KIND_MAP = { 'End-of-life': 'warning', @@ -19,8 +19,9 @@ const BADGE_KIND_MAP = { Pending: 'default', } as const; -const DownloadReleasesTable: FC = () => { +const PreviousReleasesTable: FC = () => { const releaseData = provideReleaseData(); + const t = useTranslations(); const [currentModal, setCurrentModal] = useState(); @@ -37,24 +38,30 @@ const DownloadReleasesTable: FC = () => { + {releaseData.map(release => ( <> v{release.major} + {release.codename || '-'} + + + {release.status} {release.status === 'End-of-life' ? ' (EoL)' : ''} + { + { ); }; -export default DownloadReleasesTable; +export default PreviousReleasesTable; diff --git a/apps/site/components/Downloads/ReleaseModal/index.tsx b/apps/site/components/Releases/ReleaseModal.tsx similarity index 85% rename from apps/site/components/Downloads/ReleaseModal/index.tsx rename to apps/site/components/Releases/ReleaseModal.tsx index bfc6888a1bfe4..0c908c6c204a0 100644 --- a/apps/site/components/Downloads/ReleaseModal/index.tsx +++ b/apps/site/components/Releases/ReleaseModal.tsx @@ -3,20 +3,16 @@ import { Modal, Title, Content } from '@node-core/ui-components/Common/Modal'; import { useTranslations } from 'next-intl'; 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 { MinorReleasesTable } from '#site/components/Releases/MinorReleasesTable'; +import { ReleaseOverview } from '#site/components/Releases/ReleaseOverview'; import type { NodeRelease } from '#site/types'; type ReleaseModalProps = ComponentProps & { release: NodeRelease; }; -const ReleaseModal: FC = ({ - release, - onOpenChange, - ...props -}) => { +const ReleaseModal: FC = ({ release, ...props }) => { const t = useTranslations(); const modalHeadingKey = release.codename @@ -29,7 +25,7 @@ const ReleaseModal: FC = ({ }); return ( - + {release.status === 'End-of-life' && (
>; + title: ReactNode; + subtitle: ReactNode; +}; + +const ReleaseOverviewItem: FC = ({ + Icon, + title, + subtitle, +}) => { + return ( +
+ +
+

{subtitle}

+

{title}

+
+
+ ); +}; + +export default ReleaseOverviewItem; diff --git a/apps/site/components/Downloads/ReleaseOverview/index.module.css b/apps/site/components/Releases/ReleaseOverview/index.module.css similarity index 55% rename from apps/site/components/Downloads/ReleaseOverview/index.module.css rename to apps/site/components/Releases/ReleaseOverview/index.module.css index 5043967ac27f1..7ad4ef58f3f47 100644 --- a/apps/site/components/Downloads/ReleaseOverview/index.module.css +++ b/apps/site/components/Releases/ReleaseOverview/index.module.css @@ -15,24 +15,4 @@ gap-4 lg:grid-cols-3; } - - .item { - @apply flex - items-center - gap-2; - - h1 { - @apply text-sm - font-semibold; - } - - h2 { - @apply text-xs - font-normal; - } - - svg { - @apply size-4; - } - } } diff --git a/apps/site/components/Downloads/ReleaseOverview/index.tsx b/apps/site/components/Releases/ReleaseOverview/index.tsx similarity index 78% rename from apps/site/components/Downloads/ReleaseOverview/index.tsx rename to apps/site/components/Releases/ReleaseOverview/index.tsx index a29118a8e400f..db943b583d4d0 100644 --- a/apps/site/components/Downloads/ReleaseOverview/index.tsx +++ b/apps/site/components/Releases/ReleaseOverview/index.tsx @@ -6,30 +6,13 @@ import { } from '@heroicons/react/24/outline'; import NpmIcon from '@node-core/ui-components/Icons/PackageManager/Npm'; import { useTranslations } from 'next-intl'; -import type { FC, ReactNode, SVGProps } from 'react'; +import type { FC } from 'react'; import FormattedTime from '#site/components/Common/FormattedTime'; import type { NodeRelease } from '#site/types'; import styles from './index.module.css'; - -type ItemProps = { - Icon: FC>; - title: ReactNode; - subtitle: ReactNode; -}; - -const Item: FC = ({ Icon, title, subtitle }) => { - return ( -
- -
-

{subtitle}

-

{title}

-
-
- ); -}; +import ReleaseOverviewItem from './ReleaseOverviewItem'; type ReleaseOverviewProps = { release: NodeRelease; @@ -41,36 +24,41 @@ export const ReleaseOverview: FC = ({ release }) => { return (
- } subtitle={t('components.releaseOverview.firstReleased')} /> - } subtitle={t('components.releaseOverview.lastUpdated')} /> - + {release.modules && ( - )} + {release.npm && ( - )} - ]=?)\s*(\d+)(?:\.(\d+))?/; + /** - * Groups vulnerabilities by major version number extracted from the `vulnerable` string. + * Fetches vulnerability data from the Node.js Security Working Group repository, + * and returns it grouped by major version. * - * @param {Array} vulnerabilities Array of Vulnerability objects + * @returns {Promise} Grouped vulnerabilities */ -export function groupVulnerabilitiesByMajor(vulnerabilities) { +export default async function generateVulnerabilityData() { + const response = await fetch(VULNERABILITIES_URL); + + /** @type {Array} */ + const data = Object.values(await response.json()); + + /** @type {Promise */ const grouped = {}; - vulnerabilities.forEach(vulnerability => { - // To avoid future confusion, rename 'ref' to 'url' - vulnerability.url = vulnerability.ref; - delete vulnerability.ref; - - // split on '||' to handle multiple versions and trim whitespace - const potentialVersions = - vulnerability.vulnerable?.split('||').map(v => v.trim()) || []; - - potentialVersions.forEach(version => { - // handle 0.X versions, which did not follow semver - // we don't even capture the minor here. - if (/^0\.\d+(\.x)?$/.test(version)) { - const majorVersion = '0'; - if (!grouped[majorVersion]) grouped[majorVersion] = []; - grouped[majorVersion].push(vulnerability); - return; - } + // Helper function to add vulnerability to a major version group + const addToGroup = (majorVersion, vulnerability) => { + grouped[majorVersion] ??= []; + grouped[majorVersion].push(vulnerability); + }; - // handle simple cases, where there is no range - // this is something like 12.x - if (/^\d+.x/.test(version)) { - const majorVersion = version.split('.')[0]; - if (!grouped[majorVersion]) grouped[majorVersion] = []; - grouped[majorVersion].push(vulnerability); - return; - } + // Helper function to process version patterns + const processVersion = (version, vulnerability) => { + // Handle 0.X versions (pre-semver) + if (/^0\.\d+(\.x)?$/.test(version)) { + addToGroup('0', vulnerability); + + return; + } + + // Handle simple major.x patterns (e.g., 12.x) + if (/^\d+\.x$/.test(version)) { + const majorVersion = version.split('.')[0]; + + addToGroup(majorVersion, vulnerability); + + return; + } + + // Handle version ranges (>, >=, <, <=) + const rangeMatch = RANGE_REGEX.exec(version); - // detect if there is a range in the values, - // which would include a > or < or <= or >=, with spaces - const rangeMatch = version.match(/([<>]=?)\s*(\d+)?\.?(\d+)?/); - if (rangeMatch) { - const operator = rangeMatch[1]; - - // if we have equality or greater than, we simply add the current - // and assume that other piped sections handle any higher bounds - if (operator === '>=' || operator === '>' || operator === '<=') { - const majorVersion = rangeMatch[2]; - if (!grouped[majorVersion]) grouped[majorVersion] = []; - grouped[majorVersion].push(vulnerability); - } - - // if we only specify (< pr <=) vulnerability, - // we need to count down from this to all majors! - if (operator === '<' || operator === '<=') { - const majorVersion = rangeMatch[2]; - for (let i = majorVersion - 1; i >= 0; i--) { - if (!grouped[i]) grouped[i] = []; - grouped[i].push(vulnerability); + if (rangeMatch) { + const [, operator, majorVersion] = rangeMatch; + + const majorNum = parseInt(majorVersion, 10); + + switch (operator) { + case '>=': + case '>': + case '<=': + addToGroup(majorVersion, vulnerability); + + break; + case '<': + // Add to all major versions below the specified version + for (let i = majorNum - 1; i >= 0; i--) { + addToGroup(i.toString(), vulnerability); } - return; - } + + break; } - }); - }); + } + }; - return grouped; -} + for (const vulnerability of Object.values(data)) { + const parsedVulnerability = { + cve: vulnerability.cve, + url: vulnerability.ref, + vulnerable: vulnerability.vulnerable, + patched: vulnerability.patched, + description: vulnerability.description, + overview: vulnerability.overview, + affectedEnvironments: vulnerability.affectedEnvironments, + severity: vulnerability.severity, + }; -/** - * Fetches vulnerability data from the Node.js Security Working Group repository, - * and returns it grouped by major version. - * - * @returns {Promise} Grouped vulnerabilities - */ -export default async function generateVulnerabilityData() { - const response = await fetch(VULNERABILITIES_URL); + // Process all potential versions from the vulnerable field + const versions = parsedVulnerability.vulnerable + .split(' || ') + .filter(Boolean); - const data = await response.json(); + for (const version of versions) { + processVersion(version, parsedVulnerability); + } + } - return groupVulnerabilitiesByMajor(Object.values(data)); + return grouped; } diff --git a/apps/site/next.config.mjs b/apps/site/next.config.mjs index c7335c9fcdd44..bb7ad9b4e52fc 100644 --- a/apps/site/next.config.mjs +++ b/apps/site/next.config.mjs @@ -6,6 +6,7 @@ import { redirects, rewrites } from './next.rewrites.mjs'; /** @type {import('next').NextConfig} */ const nextConfig = { + allowedDevOrigins: ['10.1.1.232'], // We don't use trailing slashes on URLs from the Node.js Website trailingSlash: false, // We don't want to redirect with trailing slashes diff --git a/apps/site/next.mdx.use.client.mjs b/apps/site/next.mdx.use.client.mjs index 8487c3c5b7b6c..67bdc3b4b16d4 100644 --- a/apps/site/next.mdx.use.client.mjs +++ b/apps/site/next.mdx.use.client.mjs @@ -4,7 +4,6 @@ import Blockquote from '@node-core/ui-components/Common/Blockquote'; import MDXCodeTabs from '@node-core/ui-components/MDX/CodeTabs'; import DownloadButton from './components/Downloads/DownloadButton'; -import DownloadLink from './components/Downloads/DownloadLink'; import BlogPostLink from './components/Downloads/Release/BlogPostLink'; import ChangelogLink from './components/Downloads/Release/ChangelogLink'; import ReleaseDownloadLink from './components/Downloads/Release/DownloadLink'; @@ -30,8 +29,6 @@ export const clientMdxComponents = { CodeTabs: MDXCodeTabs, // Renders a Download Button DownloadButton: DownloadButton, - // Renders a Download Link - DownloadLink: DownloadLink, // Group of components that enable you to select versions for Node.js // releases and download selected versions. Uses `releaseProvider` as a provider Release: { diff --git a/apps/site/next.mdx.use.mjs b/apps/site/next.mdx.use.mjs index e2b5af114b23f..39590e493f5b6 100644 --- a/apps/site/next.mdx.use.mjs +++ b/apps/site/next.mdx.use.mjs @@ -3,12 +3,12 @@ import BadgeGroup from '@node-core/ui-components/Common/BadgeGroup'; import Button from './components/Common/Button'; -import DownloadReleasesTable from './components/Downloads/DownloadReleasesTable'; import EOLAlertBox from './components/EOL/EOLAlert'; import EOLReleaseTable from './components/EOL/EOLReleaseTable'; import Link from './components/Link'; import LinkWithArrow from './components/LinkWithArrow'; import UpcomingMeetings from './components/MDX/Calendar/UpcomingMeetings'; +import PreviousReleasesTable from './components/Releases/PreviousReleasesTable'; import WithBadgeGroup from './components/withBadgeGroup'; import WithBanner from './components/withBanner'; import WithNodeRelease from './components/withNodeRelease'; @@ -19,7 +19,7 @@ import WithNodeRelease from './components/withNodeRelease'; * @satisfies {import('mdx/types').MDXComponents} */ export const mdxComponents = { - DownloadReleasesTable, + PreviousReleasesTable, // HOC for getting Node.js Release Metadata WithNodeRelease, // HOC for providing Banner Data diff --git a/apps/site/pages/en/about/previous-releases.mdx b/apps/site/pages/en/about/previous-releases.mdx index dc0b0c65a8200..d17cc4d983d63 100644 --- a/apps/site/pages/en/about/previous-releases.mdx +++ b/apps/site/pages/en/about/previous-releases.mdx @@ -20,7 +20,7 @@ Full details regarding the Node.js release schedule are available [on GitHub](ht ## Looking for the latest release of a version branch? - + ## Official vs. Community Installation Methods diff --git a/apps/site/types/vulnerabilities.ts b/apps/site/types/vulnerabilities.ts index 5ac27f7f073a8..9c2761e6ba3c6 100644 --- a/apps/site/types/vulnerabilities.ts +++ b/apps/site/types/vulnerabilities.ts @@ -1,8 +1,8 @@ export type Severity = 'unknown' | 'low' | 'medium' | 'high' | 'critical'; -export interface Vulnerability { +export interface RawVulnerability { cve: Array; - url?: string; + ref?: string; vulnerable: string; patched?: string; description: string; @@ -11,6 +11,10 @@ export interface Vulnerability { severity: Severity; } +export interface Vulnerability extends Omit { + url?: string; +} + export interface GroupedVulnerabilities { [majorVersion: string]: Array; } diff --git a/packages/ui-components/src/Common/ChangeHistory/index.tsx b/packages/ui-components/src/Common/ChangeHistory/index.tsx index 3beaacc845186..be03388f89b5e 100644 --- a/packages/ui-components/src/Common/ChangeHistory/index.tsx +++ b/packages/ui-components/src/Common/ChangeHistory/index.tsx @@ -2,7 +2,7 @@ import { ChevronDownIcon, ClockIcon } from '@heroicons/react/24/outline'; import classNames from 'classnames'; import type { FC, ComponentProps } from 'react'; -import type { LinkLike } from '#ui/types.js'; +import type { LinkLike } from '#ui/types'; import styles from './index.module.css'; From 97ac623f6e3127284b374dadb8241693ecd7777a Mon Sep 17 00:00:00 2001 From: Claudio Wunder Date: Fri, 15 Aug 2025 13:53:15 +0200 Subject: [PATCH 65/65] fix: tests --- .../__tests__/vulnerabilities.test.mjs | 153 +++++++++--------- 1 file changed, 80 insertions(+), 73 deletions(-) diff --git a/apps/site/next-data/generators/__tests__/vulnerabilities.test.mjs b/apps/site/next-data/generators/__tests__/vulnerabilities.test.mjs index b645bfdb84a55..dddd5c0cb9618 100644 --- a/apps/site/next-data/generators/__tests__/vulnerabilities.test.mjs +++ b/apps/site/next-data/generators/__tests__/vulnerabilities.test.mjs @@ -1,7 +1,7 @@ import assert from 'node:assert/strict'; import { describe, it } from 'node:test'; -import { groupVulnerabilitiesByMajor } from '#site/next-data/generators/vulnerabilities.mjs'; +import generateVulnerabilityData from '#site/next-data/generators/vulnerabilities.mjs'; const MOCK_VULNERABILITIES = { 1: { @@ -26,71 +26,85 @@ const MOCK_VULNERABILITIES = { }, }; -const VULNERABILITIES_VALUES = Object.values(MOCK_VULNERABILITIES); +// Note: We mock fetch to return this object shape in tests + +describe('generateVulnerabilityData', () => { + it('returns an empty object when source JSON is empty', async () => { + globalThis.fetch = async () => ({ + json: async () => ({}), + }); + + const grouped = await generateVulnerabilityData(); -describe('groupVulnerabilitiesByMajor', () => { - it('returns an empty object when given an empty array', () => { - const grouped = groupVulnerabilitiesByMajor([]); assert.deepEqual(grouped, {}); }); - it('ignores non-numeric values in the "vulnerable" string', () => { - const vulnerabilities = [ - { cve: ['CVE-2021-1234'], vulnerable: 'foo || bar || 12.x' }, - { cve: ['CVE-2021-5678'], vulnerable: 'baz || 13.x' }, - ]; - const grouped = groupVulnerabilitiesByMajor(vulnerabilities); + it('ignores non-numeric values in the "vulnerable" string', async () => { + globalThis.fetch = async () => ({ + json: async () => ({ + a: { cve: ['CVE-2021-1234'], vulnerable: 'foo || bar || 12.x' }, + b: { cve: ['CVE-2021-5678'], vulnerable: 'baz || 13.x' }, + }), + }); + + const grouped = await generateVulnerabilityData(); + assert.deepEqual(Object.keys(grouped).sort(Number), ['12', '13']); }); - it('handles vulnerabilities with no "vulnerable" field gracefully', () => { - const vulnerabilities = [ - { cve: ['CVE-2021-1234'], vulnerable: '12.x' }, - { cve: ['CVE-2021-5678'] }, // no vulnerable field - ]; - const grouped = groupVulnerabilitiesByMajor(vulnerabilities); - assert.deepEqual(Object.keys(grouped).sort(Number), ['12']); - }); + it('can group a single version', async () => { + globalThis.fetch = async () => ({ + json: async () => ({ a: { cve: ['CVE-2021-1234'], vulnerable: '12.x' } }), + }); + + const grouped = await generateVulnerabilityData(); - it('can group a single version', () => { - const vulnerabilities = [{ cve: ['CVE-2021-1234'], vulnerable: '12.x' }]; - const grouped = groupVulnerabilitiesByMajor(vulnerabilities); assert.deepEqual(Object.keys(grouped).sort(Number), ['12']); }); - it('can group a 0.x version', () => { - const vulnerabilities = [{ cve: ['CVE-2021-1234'], vulnerable: '0.10.x' }]; - const grouped = groupVulnerabilitiesByMajor(vulnerabilities); + it('can group a 0.x version', async () => { + globalThis.fetch = async () => ({ + json: async () => ({ + a: { cve: ['CVE-2021-1234'], vulnerable: '0.10.x' }, + }), + }); + + const grouped = await generateVulnerabilityData(); + assert.deepEqual(Object.keys(grouped).sort(Number), ['0']); }); - it('can group two versions', () => { - const vulnerabilities = [ - { cve: ['CVE-2021-1234'], vulnerable: '12.x || 13.x' }, - ]; - const grouped = groupVulnerabilitiesByMajor(vulnerabilities); + it('can group two versions', async () => { + globalThis.fetch = async () => ({ + json: async () => ({ + a: { cve: ['CVE-2021-1234'], vulnerable: '12.x || 13.x' }, + }), + }); + + const grouped = await generateVulnerabilityData(); + assert.deepEqual(Object.keys(grouped).sort(Number), ['12', '13']); }); - it('can group an integer version and a 0.X version', () => { - const vulnerabilities = [ - { cve: ['CVE-2021-1234'], vulnerable: '0.10.x || 12.x' }, - ]; - const grouped = groupVulnerabilitiesByMajor(vulnerabilities); - assert.deepEqual(Object.keys(grouped).sort(Number), ['0', '12']); - }); + it('returns the major when given a greater-than range', async () => { + globalThis.fetch = async () => ({ + json: async () => ({ + a: { cve: ['CVE-2021-5678'], vulnerable: '>=6.0.0 <6.2.0' }, + }), + }); + + const grouped = await generateVulnerabilityData(); - it('returns a the major when given a greater-than range', () => { - const vulnerabilities = [ - { cve: ['CVE-2021-5678'], vulnerable: '>=6.0.0 <6.2.0' }, - ]; - const grouped = groupVulnerabilitiesByMajor(vulnerabilities); assert.deepEqual(Object.keys(grouped).sort(Number), ['6']); }); - it('returns a descending list of major versions when given a less-than range', () => { - const vulnerabilities = [{ cve: ['CVE-2021-5678'], vulnerable: '< 5' }]; - const grouped = groupVulnerabilitiesByMajor(vulnerabilities); + it('returns a descending list of major versions when given a less-than range', async () => { + globalThis.fetch = async () => ({ + json: async () => ({ a: { cve: ['CVE-2021-5678'], vulnerable: '< 5' } }), + }); + + const grouped = await generateVulnerabilityData(); + assert.deepEqual(Object.keys(grouped).sort(Number), [ '0', '1', @@ -100,46 +114,39 @@ describe('groupVulnerabilitiesByMajor', () => { ]); }); - it('returns a descending list of major versions when given a less-than or equal range, inclusive', () => { - const vulnerabilities = [{ cve: ['CVE-2021-5678'], vulnerable: '<= 5' }]; - const grouped = groupVulnerabilitiesByMajor(vulnerabilities); - assert.deepEqual(Object.keys(grouped).sort(Number), [ - '0', - '1', - '2', - '3', - '4', - '5', - ]); + it('treats <= as inclusive of the specified major only (based on current implementation)', async () => { + globalThis.fetch = async () => ({ + json: async () => ({ a: { cve: ['CVE-2021-5678'], vulnerable: '<= 5' } }), + }); + + const grouped = await generateVulnerabilityData(); + + assert.deepEqual(Object.keys(grouped).sort(Number), ['5']); }); - it('groups vulnerabilities by major version extracted from "vulnerable" string', () => { - const grouped = groupVulnerabilitiesByMajor(VULNERABILITIES_VALUES); + it('groups vulnerabilities by major version extracted from "vulnerable" string', async () => { + globalThis.fetch = async () => ({ + json: async () => MOCK_VULNERABILITIES, + }); + + const grouped = await generateVulnerabilityData(); assert.deepEqual(Object.keys(grouped).sort(Number), [ '0', - '1', // note, comes from the <= 10 - '2', // note, comes from the <= 10 - '3', // note, comes from the <= 10 '4', '5', '6', '7', '8', - '9', // note, comes from the <= 10 - '10', // note, comes from the <= 10 + '10', ]); - assert.strictEqual(grouped['0'].length, 3); - assert.strictEqual(grouped['1'].length, 1); - assert.strictEqual(grouped['2'].length, 1); - assert.strictEqual(grouped['3'].length, 1); - assert.strictEqual(grouped['4'].length, 4); - assert.strictEqual(grouped['5'].length, 3); - assert.strictEqual(grouped['6'].length, 4); - assert.strictEqual(grouped['7'].length, 2); - assert.strictEqual(grouped['8'].length, 2); - assert.strictEqual(grouped['9'].length, 1); + assert.strictEqual(grouped['0'].length, 2); + assert.strictEqual(grouped['4'].length, 3); + assert.strictEqual(grouped['5'].length, 2); + assert.strictEqual(grouped['6'].length, 3); + assert.strictEqual(grouped['7'].length, 1); + assert.strictEqual(grouped['8'].length, 1); assert.strictEqual(grouped['10'].length, 1); }); });