feat(download): externalize labels and constants to JSON file

[Vishal-K-988]

Moved hardcoded OS, installation methods, and package manager labels from downloadUtils.tsx to a separate downloadConstants.json file for better maintainability. Updated the utility to import and use data from JSON without changing existing behavior.

Fixes: #7561

Description

This PR introduces a refactor to externalize static label constants used for Operating Systems, Installation Methods, and Package Managers into a separate downloadConstants.json file. The goal is to improve maintainability and allow future updates without modifying TypeScript source files.

The downloadUtils.tsx file was updated to import these values directly from the new JSON file. No changes were made to user-facing behavior or UI rendering — functionality remains identical.

Validation

• Ran pnpm dev and verified the Downloads page renders correctly with all dropdowns displaying expected options.
• Confirmed that dropdown labels match those from the previous implementation.
• Ran pnpm format, pnpm lint, pnpm test, and pnpm build with no errors.
• Ensured that JSON structure mirrors the existing constant format used in downloadUtils.tsx.

Related Issues

Fixes: #7561

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.

[avivkeller]

This changes a lot of unrelated code

[avivkeller]

There's also a lot more constants that can also be moved to this JSON file.

On my local development branch, I also put the objects where the comparability is into the JSON file.

[codecov-commenter]

Codecov Report

Attention: Patch coverage is 99.20424% with 3 lines in your changes missing coverage. Please review.

Project coverage is 75.01%. Comparing base (fd87584) to head (75fa432).

✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
apps/site/util/downloadUtils/index.tsx	98.67%	2 Missing ⚠️
apps/site/util/downloadUtils/constants.json	99.55%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #7750      +/-   ##
==========================================
+ Coverage   74.85%   75.01%   +0.15%     
==========================================
  Files          98       99       +1     
  Lines        7895     7949      +54     
  Branches      200      198       -2     
==========================================
+ Hits         5910     5963      +53     
- Misses       1984     1985       +1     
  Partials        1        1              

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

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[vercel]

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

Name	Status	Preview	Updated (UTC)
nodejs-org	✅ Ready (Inspect)	Visit Preview	May 17, 2025 0:15am

[Vishal-K-988]

@avivkeller can you review!

[avivkeller]

@Vishal-K-988 I had a development branch of this a little while ago. If you'd like, I can merge it into this PR to give you a "boost"? If not, that's fine too.

[Vishal-K-988]

Hey Aviv,

I have resolved the issue and the changes we had discussed!
HOPEFULLY!

Hey @avivkeller can you please look into this

[avivkeller]

This PR still changes unrelated files, can you revert those changes?

[Vishal-K-988]

This PR still changes unrelated files, can you revert those changes?

like ?

[avivkeller]

Getting closer!

[avivkeller]

This PR still changes unrelated files, can you revert those changes?

like ?

https://github.com/nodejs/nodejs.org/pull/7750/files#diff-63a9c44a44acf85fea213a857769990937107cf072831e1a26808cfde9d096b9
https://github.com/nodejs/nodejs.org/pull/7750/files#diff-fdd12c6085420f029c4e1edbedbe20f8a264f9c9017bf0bc6178f45e16b94035
https://github.com/nodejs/nodejs.org/pull/7750/files#diff-32824c984905bb02bc7ffcef96a77addd1f1602cff71a11fbbfdd7f53ee026bb

[Vishal-K-988]

Hey @avivkeller
Waiting for further changes !!!!

The yaml tile I'm not adding or changing.
I guess when committing eslint maybe be changing it !

Not sure !

[avivkeller]

Not to worry. Let's ignore it for now, and once this is ready, I'll commit to fix it.

[avivkeller]

@Vishal-K-988 This looks good. Do you mind if I push a commit to your PR which:

1. Updates formatting
2. Removes the unrelated changes
3. Performs some minor improvements to index.tsx?

(FYI @bjohansebas I've resolved your reviews since I will address them shortly)

[Vishal-K-988]

@Vishal-K-988 This looks good. Do you mind if I push a commit to your PR which:

1. Updates formatting
2. Removes the unrelated changes
3. Performs some minor improvements to index.tsx?

(FYI @bjohansebas I've resolved your reviews since I will address them shortly)

That sounds great, thank you for offering! Please feel free to push that commit with the formatting updates, removal of unrelated changes, and minor improvements to index.tsx. I'm still in the process of learning and understanding best practices, so seeing your commit will be really helpful for me to grasp where I might be missing things or could improve. I appreciate your guidance!

[avivkeller]

I'm still in the process of learning and understanding best practices, so seeing your commit will be really helpful for me to grasp where I might be missing things or could improve.

You're doing great! The only things needing to be adjusted (which I did via this commit) were the styling, plus I rebased. Secondly, I just extracted createIcon into it's own helper, and simplified a few other functions-just because I saw the opportunity. Once 48 hours pass, I'll be happy to merge this. 48 Hours have passed, so once another approval is given, we'll be happy to merge this.

[github-actions]

Lighthouse Results

URL	Performance	Accessibility	Best Practices	SEO	Report
/en	🟢 98	🟢 100	🟢 100	🟢 91	🔗
/en/about	🟢 100	🟢 100	🟢 100	🟠 82	🔗
/en/about/previous-releases	🟢 100	🟢 100	🟢 100	🟠 83	🔗
/en/download	🟢 98	🟢 100	🟢 100	🟢 91	🔗
/en/blog	🟢 100	🟢 100	🟢 96	🟢 92	🔗

[bjohansebas]

Note that the Docker icon is not showing
Production:

This pr:

[avivkeller]

That's a side effect of my commit, so I'll investigate and fix it. 😅

[avivkeller]

Yep: I changed a .icon to a .id lol. I'm amending the commit now.

[bjohansebas]

LGTM