feat: add eol page #7990

bmuenzenmeyer · 2025-07-16T23:31:03Z

Description

We now have a dedicated EOL page!

Changes not directly related to the scope

We also now have a more generic modal solution
Article layouts have site footers.

Validation

EOL Page - live preview at https://nodejs-org-git-eol-openjs.vercel.app/en/eol

EOL / Vulnerability Table

Details

Link updated here

and here

Vulnerability Blog Posts

Related Issues

closes #7906
closes #7899

Check List

All other links on all alert boxes across the website (blog post from Matteo, Download pages, Version modal, etc) go to the /EOL page - did not do Matteo's blog post yet - would rather someone else choose to editorialize that.
should /eol be in the nav? I did not include it anywhere currently

I have read the Contributing Guidelines and made commit messages that follow the guideline.
I have run pnpm format to ensure the code follows the style guide.
I have run pnpm test to check if all tests are passing.
I have run pnpm build to check if the website builds without errors.
I've covered new added functionality with unit tests if necessary.

vercel · 2025-07-16T23:31:07Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
nodejs-org	✅ Ready (Inspect)	Visit Preview	Aug 10, 2025 0:07am

bmuenzenmeyer · 2025-07-16T23:31:42Z

ran with HUSKY=0 - eslint failures on git commit on Windows. investigating

codecov · 2025-07-16T23:32:23Z

Codecov Report

❌ Patch coverage is 93.85965% with 7 lines in your changes missing coverage. Please review.
✅ Project coverage is 73.10%. Comparing base (0a9ead8) to head (f579c6f).
⚠️ Report is 13 commits behind head on main.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
apps/site/next-data/generators/vulnerabilities.mjs	92.68%	6 Missing ⚠️
...ages/ui-components/src/Common/BaseButton/index.tsx	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #7990      +/-   ##
==========================================
+ Coverage   73.02%   73.10%   +0.07%     
==========================================
  Files          95       97       +2     
  Lines        8324     8441     +117     
  Branches      214      228      +14     
==========================================
+ Hits         6079     6171      +92     
- Misses       2244     2269      +25     
  Partials        1        1

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

ovflowd · 2025-07-17T15:27:12Z

I feel this page should use a layout without the sidebar/metabar FYI

bmuenzenmeyer · 2025-07-17T16:10:12Z

I feel this page should use a layout without the sidebar/metabar FYI

that's fine - i just grabbed one quick - using page the default, does not render correctly (should open an issue for that. so using article for now)

this is page/default (not used anywhere)

apps/site/pages/en/eol.mdx

ovflowd · 2025-07-19T12:10:00Z

@avivkeller can we use the new website for CVEs? https://www.cve.org/CVERecord?id=CVE-2025-23166 instead of cve.mitre.org?

ovflowd · 2025-07-19T12:12:27Z

Also this description:

"There are 4+ known vulnerabilities associated with this Node.js release. Please review their severity and details to understand the potential impact." not sure if it is fitting. I think we should lean more into what CVEs are how to understand them what having these issues are... IDK; Throwing the "Please review their severity and details to understand the potential impact." to the end-user might not be ideal. I mean in the end that's whaty they're going to do anyways, but we could use such section to explain actual concrete details of what CVEs means, what clicking these links means, idk.

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

apps/site/components/withLayout.tsx

apps/site/providers/modalProvider.tsx

ovflowd

I'm still unsatisfied with the state of how we're doing Modals, I attempted now to provide some good examples with reasoning here. Please let's simplify things and do a few rounds of self-review 🙇

We're almost there, I can feel it <3

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

ovflowd · 2025-08-10T09:46:20Z

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

+            <ReleaseModal
+              release={release}
+              open={currentModal === release.version}
+              onOpenChange={open => open || setCurrentModal(undefined)}


Maybe the modalProps could just be onClose since we know when it is open or not ;)

So tha onClose becomes just a fn

ovflowd · 2025-08-10T09:46:51Z

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

-type ReleaseModalProps = {
-  isOpen: boolean;
-  closeModal: () => void;
+type ReleaseModalProps = ComponentProps<typeof Modal> & {


We still can have a shared prop for ModalProps fyi that accepts a generic ✨

ovflowd · 2025-08-10T09:47:20Z

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

+    <AlertBox level="warning">
+      {t('components.eolAlert.intro')}{' '}
+      <Link href="/eol">
+        OpenJS Ecosystem Sustainability Program{' '}


This whole thing should be an i18n string. Even more due to RTL languages.

ovflowd · 2025-08-10T09:47:48Z

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

+  const t = useTranslations();
+  return (
+    <AlertBox level="warning">
+      {t('components.eolAlert.intro')}{' '}


Actually this whole thing could be an i18n string. And you pass the Link as a reference. Like we do with our rich text i18n strings ;)

ovflowd · 2025-08-10T09:48:28Z

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

+};
+
+const EOLModal: FC<EOLModalProps> = ({
+  release,


Could we destruct this to:

Suggested change

release,

{ major, codename },

ovflowd · 2025-08-10T09:48:51Z

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

+  const t = useTranslations();
+
+  const modalHeading = release.codename
+    ? t('components.eolModal.title', {


Which would allow us to do:

t('components.eolModal.title', { major, codename })

ovflowd · 2025-08-10T09:49:26Z

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

+          SEVERITY_ORDER.indexOf(a.severity) -
+          SEVERITY_ORDER.indexOf(b.severity)
+      ),
+    [vulnerabilities]


Suggested change

[vulnerabilities]

[vulnerabilities.length]

Should be enough and less expensive

ovflowd · 2025-08-10T09:50:18Z

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

@@ -0,0 +1,78 @@
+'use client';


This shouldn't be a client component, does it really need to be? It forces the provdeVulnerabilities and provideReleaseData to run on client-side too.

+ Even if EOLModal is a client component, that's completely fine, as it will just slot in, afaik.

I see, that's due to useState.... 🤔

In this case, I wonder how this will behave. It will probably run these fetch() requests on the client-side, which we want to avoid.

If we move'em to another sub-component, we'll have the same situation as of: React splitting the prop data into the client-side.

At the very least Next.js will do an initial hydration, so there won't be load times for users to see this. But these requests will definitely run every time they open this page....

Yeah it is requesting on every load, although it does then cache and load from disk cache. My wonder is:

Knowing all is behind CDN, it shouldn't be an issue, and it fetches just in case the state is different, which would trigger a re-render

This could though create a situation of React complaining server content !== client content

But this should be fine due to skew protection and worst case, just re-renders.

The only thought here is, do we have other pages that are also running these fetch requests on client-side? During the development of this website, we made a conscious effort for all these requests to only be server-side, should we be fine with them being client-side? Instead of having mixed JSONs within the bundle?

ovflowd · 2025-08-10T09:50:40Z

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

+import provideVulnerabilities from '#site/next-data/providers/vulnerabilities';
+import { EOL_VERSION_IDENTIFIER } from '#site/next.constants.mjs';
+
+import EOLModal from '../EOLModal';


Full import descriptors please 🙇

ovflowd · 2025-08-10T09:57:15Z

FYI getting this on preview, we might want to change the Link to HeroDevs to a regular <a> as it is an external link

vercel bot deployed to Preview July 16, 2025 23:31 View deployment

vercel bot deployed to Preview July 16, 2025 23:56 View deployment

vercel bot deployed to Preview July 17, 2025 00:08 View deployment

vercel bot deployed to Preview July 17, 2025 00:15 View deployment

vercel bot deployed to Preview July 17, 2025 16:18 View deployment

ovflowd reviewed Jul 17, 2025

View reviewed changes

apps/site/pages/en/eol.mdx Outdated Show resolved Hide resolved

vercel bot deployed to Preview July 17, 2025 16:44 View deployment

vercel bot deployed to Preview July 17, 2025 16:52 View deployment

bmuenzenmeyer mentioned this pull request Jul 17, 2025

Dedicated EOL page #7906

Open

vercel bot deployed to Preview July 18, 2025 14:03 View deployment

vercel bot deployed to Preview July 18, 2025 19:57 View deployment

vercel bot deployed to Preview July 18, 2025 21:36 View deployment

vercel bot deployed to Preview July 18, 2025 22:18 View deployment

vercel bot deployed to Preview July 19, 2025 00:50 View deployment

vercel bot deployed to Preview July 19, 2025 00:57 View deployment

bmuenzenmeyer mentioned this pull request Jul 19, 2025

Gauging interest in backfilled severities on unknown severity CVEs nodejs/security-wg#1501

Closed

This comment was marked as resolved.

Sign in to view

vercel bot deployed to Preview July 19, 2025 14:14 View deployment

vercel bot deployed to Preview July 19, 2025 16:37 View deployment

This comment was marked as resolved.

Sign in to view

ovflowd reviewed Aug 9, 2025

View reviewed changes

apps/site/components/EOL/VulnerabilitiesTable/index.tsx Outdated Show resolved Hide resolved

ovflowd reviewed Aug 9, 2025

View reviewed changes

apps/site/components/withLayout.tsx Outdated Show resolved Hide resolved

generify modal props

1c499dd

vercel bot deployed to Preview August 9, 2025 22:05 View deployment

move checks into children components

1a7a80a

vercel bot deployed to Preview August 9, 2025 22:14 View deployment

ovflowd reviewed Aug 9, 2025

View reviewed changes

apps/site/providers/modalProvider.tsx Outdated Show resolved Hide resolved

ovflowd requested changes Aug 9, 2025

View reviewed changes

pass all vulns to children

029ee7d

avivkeller reviewed Aug 9, 2025

View reviewed changes

apps/site/components/EOL/EOLModal/index.tsx Outdated Show resolved Hide resolved

vercel bot deployed to Preview August 9, 2025 22:21 View deployment

fixup!

54fe024

vercel bot deployed to Preview August 9, 2025 22:23 View deployment

no modal provider

9a8c6c7

vercel bot deployed to Preview August 10, 2025 00:01 View deployment

rename ref to url

92cdd9a

vercel bot deployed to Preview August 10, 2025 00:05 View deployment

fix type

f579c6f

avivkeller requested a review from ovflowd August 10, 2025 00:06

vercel bot deployed to Preview August 10, 2025 00:07 View deployment

ovflowd reviewed Aug 10, 2025

View reviewed changes

Uh oh!

feat: add eol page #7990

Are you sure you want to change the base?

feat: add eol page #7990

Uh oh!

Conversation

bmuenzenmeyer commented Jul 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Validation

Related Issues

Check List

Uh oh!

vercel bot commented Jul 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bmuenzenmeyer commented Jul 16, 2025

Uh oh!

codecov bot commented Jul 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

ovflowd commented Jul 17, 2025

Uh oh!

bmuenzenmeyer commented Jul 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

ovflowd commented Jul 19, 2025

Uh oh!

ovflowd commented Jul 19, 2025

Uh oh!

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as resolved.

Uh oh!

Uh oh!

Uh oh!

ovflowd left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ovflowd Aug 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ovflowd Aug 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ovflowd commented Aug 10, 2025

Uh oh!

Uh oh!

bmuenzenmeyer commented Jul 16, 2025 •

edited

Loading

vercel bot commented Jul 16, 2025 •

edited

Loading

codecov bot commented Jul 16, 2025 •

edited

Loading

bmuenzenmeyer commented Jul 17, 2025 •

edited

Loading

ovflowd Aug 10, 2025 •

edited

Loading

ovflowd Aug 10, 2025 •

edited

Loading