[nit] Select ARM64 by default in the dropdown if user is visiting from M1

[trivikr]

Enter your suggestions in details:

Is your feature request related to a problem? Please describe.

Not a big issue, but I was browsing new redesigned website from M1 (on ARM architecture) and noticed that X64 was selected in the dropdown by default for prebuilt installer and binaries

https://nodejs-org-git-meta-remove-legacy-website-code-openjs.vercel.app/en/download

Prebuilt Installer

Prebuilt Binaries

Describe the solution you'd like

Select the architecture of visitors machine, if it's detectable from JavaScript.

For example, it's detectable from experimental await navigator.userAgentData.getHighEntropyValues(['architecture']) API call.

The website uses the experimental API to get bitness

nodejs.org/util/getBitness.ts

Lines 8 to 10 in 04fd007

	const entropyValues = navigator.userAgentData.getHighEntropyValues([
	'bitness',
	]);

Describe alternatives you've considered

N/A, as the user can explicitly select ARM option from the dropdown even if X64 is selected by default.

[trivikr]

The architecture might not matter in the dropdown for macOS, as both binaries link to the same .pkg installer.

[ovflowd]

Enter your suggestions in details:

Is your feature request related to a problem? Please describe.

Not a big issue, but I was browsing new redesigned website from M1 (on ARM architecture) and noticed that X64 was selected in the dropdown by default for prebuilt installer and binaries

nodejs-org-git-meta-remove-legacy-website-code-openjs.vercel.app/en/download

Prebuilt Installer
Prebuilt Binaries

Describe the solution you'd like

Select the architecture of visitors machine, if it's detectable from JavaScript.

For example, it's detectable from experimental await navigator.userAgentData.getHighEntropyValues(['architecture']) API call.

The website uses the experimental API to get bitness

nodejs.org/util/getBitness.ts

Lines 8 to 10 in 04fd007

	const entropyValues = navigator.userAgentData.getHighEntropyValues([
	'bitness',
	]);

Describe alternatives you've considered

N/A, as the user can explicitly select ARM option from the dropdown even if X64 is selected by default.

Feel free to create a PR or patch to use the right bitness. We use the getBitness in that button but I believe the Bitness doesn't say the architecture (i.e. ARM)

Because the architecture is ARM and the bitness is 64. So, technically, the result is correct.

[ovflowd]

Pretty much an idea for a PR is to introduce the "getArchitecture" utility and embed it on our util that detects the UserOS (https://github.com/nodejs/nodejs.org/blob/main/hooks/react-client/useDetectOS.ts)

So you could add an extra field "architecture" that would then be used on our BitnessDropdown (

nodejs.org/components/Downloads/Release/BitnessDropdown.tsx

Line 9 in 3808cb7

import { useDetectOS } from '@/hooks/react-client';

)

(Which is actually an architecture + bitness dropdown...)

[trivikr]

I added good first issue and website redesign labels if anyone else wants to give it a try.

[Vadimchesh]

I can take it

[rhlshah]

I have fixed the issue and have also created a PR. Please have a look