feat: Introduce Downloads Archive page

[canerakdas]

Description

This PR introduces a new statically generated page that displays simplified download options by major version:

Also includes a download table of other minor versions of the major version;

Since I included the minor versions as a table, the content became quite lengthy. To prevent this, I used the HTML details element. The main reason I didn't use Radix Primitive Accordion is that we want this page to be fully usable even for users who have JavaScript disabled

I am open to suggestions for to add / remove content 🙇

Validation

The links below are accessible in the preview;

• /download/{major}
• /download/archive

Related Issues

Addresses #7443

Check List

• 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]

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

Name	Status	Preview	Updated (UTC)
nodejs-org	✅ Ready (Inspect)	Visit Preview	Jun 8, 2025 4:34pm

[Copilot]

Pull Request Overview

This PR adds a new simplified downloads page that’s fully server-rendered (no JS required) and provides major‐version download summaries, with expandable minor versions under <details>. It also centralizes download utilities and updates the download URL API to use an options object.

• Introduce simplified.mdx and DownloadSimpleLayout for the new page
• Update getNodeDownloadUrl signature and its callers to use an options object
• Add DownloadsTable, Details, and WithSimplifiedDownload components

Reviewed Changes

Copilot reviewed 23 out of 23 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
util/downloadUtils/index.tsx	Exported DownloadDropdownItem type
util/downloadUtils/constants.json	Added compatibility ranges for platforms
util/tests/getNodeDownloadUrl.test.mjs	Updated tests for new getNodeDownloadUrl signature
types/layouts.ts	Added 'download-simple' layout type
pages/en/download/simplified.mdx	New MDX page with simplified download UI
next.mdx.use.mjs	Registered new MDX components (WithSimplifiedDownload, etc.)
next.dynamic.constants.mjs	Configured dynamic routing and exclusions for new page
layouts/DownloadSimple.tsx	New layout wrapping simplified download content
components/withSimplifiedDownload.tsx	HOC to provide download data and sidebar items
components/withProgressionSidebar.tsx	Refactored to accept both navKey and explicit groups
components/withMetaBar.tsx	Made items injectable for meta‐bar
components/withMarkdownContent.tsx	New HOC to load MDX content at runtime
components/withLayout.tsx	Added DownloadSimpleLayout to layout mapping
components/MDX/Details	New <Details> component for collapsible sections
components/Downloads/Release/ReleaseCodeBox.tsx	Updated “no-script” link to point at new simplified page
components/Downloads/Release/PrebuiltDownloadButtons.tsx	Switched getNodeDownloadUrl calls to object syntax
components/Downloads/DownloadsTable	New table for listing artifacts
components/Downloads/DownloadLink.tsx	Updated to new getNodeDownloadUrl API
components/Downloads/DownloadButton	Updated to new getNodeDownloadUrl API

Comments suppressed due to low confidence (1)

apps/site/components/Downloads/DownloadsTable/index.tsx:1

• Consider adding unit tests for DownloadsTable to verify it renders rows correctly for different source inputs.

'use client';

[canerakdas]

on lasted commit "Other releases" is difficult to navigate potential solution

• just use v24, v23 instead of full version
• comme back to a navbar

Using the format you suggested instead of {prefix}{major}.{minor}.{patch} turned out better, and after updating the colors and positioning, I think it became more accessible overall IMO. What do you think?

[ovflowd]

Let's block this PR until we have the codeless dropdown? Besides of that, everything else is looking amazing!

[ovflowd]

One little silly nit:

Add a Node.js Icon (favicon/icon) prefixing the version

Also,

Can we updatem these modals to show "Node.js v{major}" instead of "Node.js {major}"?

[ovflowd]

I also feel the "simplified" downloads page should include the unofficial releases (on a separate table below "Installer Packages")

[ovflowd]

Lastly, if we could update this:

To have a button that goes to the Downloads page instead of straightly downloading the binary and then another button for "getting involved" that'd be great.

In the future we want to change that to "Support Node.js" and maybe a lower text regarding EOL/ESP program. But at the very least with this PR we can change the download buttons on home to actually go to the download page.

[github-actions]

Note

Your Pull Request seems to be updating Translations of the Node.js Website.

Whilst we appreciate your intent; Any Translation update should be done through our Crowdin Project.
We recommend giving a read on our Translation Guidelines.

Thank you!

[canerakdas]

Should https://nodejs-org-git-fork-canerakdas-feat-simplified-download-openjs.vercel.app/en/about/previous-releases#looking-for-the-latest-release-of-a-version-branch now link to these archive pages?

The minor versions in the details modal actually serve as links to the archive page. It might also be a good idea to add links to the major versions directly in the table 🤔

Yeh, the modal feels redundant now that we have these dedicated archive pages w/ the same content on them -- I figured it'd be better to link directly from the table to the archive pages? Not only removes the redundant content, but also serves as another point of discovery for these new archive pages.

I’ve added navigation through versions to this table, but I still think the Modal is useful. It allows us to quickly get an overview of the versions on a single page. @nodejs/nodejs-website what do you think?

[canerakdas]

Let's block this PR until we have the codeless dropdown? Besides of that, everything else is looking amazing!

How do we plan to use this codeless dropdown?

My thinking is as follows;

• If we want the dropdown to work without JavaScript, we need to include it inside a HTML <form>

• When a version is selected from the dropdown, the form should be submitted via a regular button rendered inside a <noscript> block

• The form submission can trigger a simple API call or route handler that performs a redirect based on the selected version.

• With JS enabled, we can enhance the experience by automatically handling the selection change without needing to press a button (e.g., using router.push() in Next.js).

• This approach ensures progressive enhancement: the dropdown works both with and without JavaScript enabled.

Or we can just use details(noscript) version when JS is disabled

[AugustinMauroy]

Should https://nodejs-org-git-fork-canerakdas-feat-simplified-download-openjs.vercel.app/en/about/previous-releases#looking-for-the-latest-release-of-a-version-branch now link to these archive pages?

The minor versions in the details modal actually serve as links to the archive page. It might also be a good idea to add links to the major versions directly in the table 🤔

Yeh, the modal feels redundant now that we have these dedicated archive pages w/ the same content on them -- I figured it'd be better to link directly from the table to the archive pages? Not only removes the redundant content, but also serves as another point of discovery for these new archive pages.

I’ve added navigation through versions to this table, but I still think the Modal is useful. It allows us to quickly get an overview of the versions on a single page. @nodejs/nodejs-website what do you think?

I agree with you 100%.

[ovflowd]

@canerakdas "Want new features sooner? Get Node.js v24.1.01 instead." should probably go to the /download/current page.

[ovflowd]

On the downloads archive can "Warning
This version is out of maintenance. Please use a currently supported version." banner for EOL be expanded (larger) and also link to the ESP page on /about?

[ovflowd]

I feel we could style this text (screenshot below)

Like the text on the regular downloads page (screenshot below)

To keep it consistent.

[ovflowd]

@Harkunwar do you feel like working on the noscript version of the Dropdown? (should reside within the Dropdown component also, but the base should be its own thing

[ovflowd]

Also can "Node.js Download Archive" the Node.js have the registered symbol? :)

[Harkunwar]

@ovflowd I've already started working on the ChangeHistory component that can run without JS. That and the dropdown should share a lot of the code.

[avivkeller]

Neat! Keep me posted on that component!

[ovflowd]

Let's block this PR until we have the codeless dropdown? Besides of that, everything else is looking amazing!

How do we plan to use this codeless dropdown?

My thinking is as follows;

• If we want the dropdown to work without JavaScript, we need to include it inside a HTML <form>
• When a version is selected from the dropdown, the form should be submitted via a regular button rendered inside a <noscript> block
• The form submission can trigger a simple API call or route handler that performs a redirect based on the selected version.
• With JS enabled, we can enhance the experience by automatically handling the selection change without needing to press a button (e.g., using router.push() in Next.js).
• This approach ensures progressive enhancement: the dropdown works both with and without JavaScript enabled.

Or we can just use details(noscript) version when JS is disabled

My :2cents:

• We don't need forms, nor we need API requests
• Each item on the dropdown can be an a (anchor) element with role=button like (next/link)
  • The URL being the download archive page for said major
• The Dropdown gets toggled visible/hidden via CSS (example: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown)
• For mobile, the Dropdown should take 100% of width as we have on other navigations.
  • TO BE HONEST, I think this CSS-only Dropdown could replace the actual Dropdown, but would require all Dropdowns to only support a href's