nodejs · Vishal-K-988 · May 16, 2025 · May 16, 2025 · May 16, 2025 · May 18, 2025
@@ -1,18 +1,18 @@
 repos:
-- repo: https://github.com/gitleaks/gitleaks
-  rev: v8.16.3
-  hooks:
-  - id: gitleaks
-- repo: https://github.com/jumanjihouse/pre-commit-hooks
-  rev: 3.0.0
-  hooks:
-  - id: shellcheck
-- repo: https://github.com/pre-commit/mirrors-eslint
-  rev: v8.38.0
-  hooks:
-  - id: eslint
-- repo: https://github.com/pre-commit/pre-commit-hooks
-  rev: v4.4.0
-  hooks:
-  - id: end-of-file-fixer
-  - id: trailing-whitespace
+  - repo: https://github.com/gitleaks/gitleaks
+    rev: v8.16.3
+    hooks:
+      - id: gitleaks
+  - repo: https://github.com/jumanjihouse/pre-commit-hooks
+    rev: 3.0.0
+    hooks:
+      - id: shellcheck
+  - repo: https://github.com/pre-commit/mirrors-eslint
+    rev: v8.38.0
+    hooks:
+      - id: eslint
+  - repo: https://github.com/pre-commit/pre-commit-hooks
+    rev: v4.4.0
+    hooks:
+      - id: end-of-file-fixer
+      - id: trailing-whitespace
@@ -53,16 +53,18 @@ const OperatingSystemDropdown: FC<OperatingSystemDropdownProps> = () => {
   );
 
   return (
-    <Select<UserOS>
-      values={parsedOperatingSystems}
-      defaultValue={release.os !== 'LOADING' ? release.os : undefined}
-      loading={release.os === 'LOADING'}
-      placeholder={t('layouts.download.dropdown.unknown')}
-      ariaLabel={t('layouts.download.dropdown.os')}
-      onChange={value => release.setOS(value)}
-      className="min-w-[8.5rem]"
-      inline={true}
-    />
+    <div>
+      <Select<UserOS>
+        values={parsedOperatingSystems}
+        defaultValue={release.os !== 'LOADING' ? release.os : undefined}
+        loading={release.os === 'LOADING'}
+        placeholder={t('layouts.download.dropdown.unknown')}
+        ariaLabel={t('layouts.download.dropdown.os')}
+        onChange={value => release.setOS(value)}
+        className="min-w-[8.5rem]"
+        inline={true}
+      />
+    </div>
   );
 };
 

@@ -0,0 +1,29 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import type { FC } from 'react';
+
+const WSLMessage: FC = () => {
+  const t = useTranslations();
+  return (
+    <>
+      <div className="mt-4 rounded-lg border border-blue-200 bg-blue-50 p-4 dark:border-blue-800 dark:bg-blue-900/20">
+        <h3 className="mb-2 text-lg font-semibold text-blue-800 dark:text-blue-200">
+          {t('layouts.download.wsl.title')}
+        </h3>
+        <p className="text-blue-700 dark:text-blue-300">
+          {t('layouts.download.wsl.description')}
+        </p>
+        <a
+          href="https://docs.microsoft.com/en-us/windows/wsl/install"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="mt-2 inline-block text-blue-600 hover:underline dark:text-blue-400"
+        >
+          {t('layouts.download.wsl.learnMore')}
+        </a>
+      </div>
+    </>
+  );
+};
+export default WSLMessage;
@@ -0,0 +1,16 @@
+'use client';
+
+import { useContext } from 'react';
+
+import { ReleaseContext } from '#site/providers/releaseProvider';
+
+import WSLMessage from './WSLMessage';
+
+const WindowsWSLMessage = () => {
+  const { os } = useContext(ReleaseContext);
+  // consitioms to chekc ifo the operating system is selcted as Linux or not
+  if (os !== 'WIN') return null;
+  return <WSLMessage />;
+};
+
+export default WindowsWSLMessage;
@@ -15,6 +15,8 @@ import ReleasePlatformDropdown from './components/Downloads/Release/PlatformDrop
 import ReleasePrebuiltDownloadButtons from './components/Downloads/Release/PrebuiltDownloadButtons';
 import ReleaseCodeBox from './components/Downloads/Release/ReleaseCodeBox';
 import ReleaseVersionDropdown from './components/Downloads/Release/VersionDropdown';
+import WindowsWSLMessage from './components/Downloads/WindowsWSLMessage';
+import WSLMessage from './components/Downloads/WSLMessage';
 import Link from './components/Link';
 import LinkWithArrow from './components/LinkWithArrow';
 import MDXCodeBox from './components/MDX/CodeBox';
@@ -30,6 +32,9 @@ import { ReleaseProvider } from './providers/releaseProvider';
 export const clientMdxComponents = {
   // Renders MDX CodeTabs
   CodeTabs: MDXCodeTabs,
+  // Renders LinuxWSLMessage
+  WindowsWSLMessage: WindowsWSLMessage,
+
   // Renders a Button Component for `button` tags
   Button: Button,
   // Links with External Arrow
@@ -40,6 +45,8 @@ export const clientMdxComponents = {
   DownloadButton: DownloadButton,
   // Renders a Download Link
   DownloadLink: DownloadLink,
+  // Renders WSL Message
+  WSLMessage: WSLMessage,
   // Group of components that enable you to select versions for Node.js
   // releases and download selected versions. Uses `releaseProvider` as a provider
   Release: {

@@ -3,25 +3,23 @@ layout: download
 title: Download Node.js®
 ---
 
-<section>
+<WindowsWSLMessage />
 
-Get Node.js® <Release.VersionDropdown /> for <Release.OperatingSystemDropdown /> using <Release.InstallationMethodDropdown /> with <Release.PackageManagerDropdown />
+<section>
+  Get Node.js® <Release.VersionDropdown /> for <Release.OperatingSystemDropdown /> using <Release.InstallationMethodDropdown /> with <Release.PackageManagerDropdown />
 
 <Release.ReleaseCodeBox />
 
-<Release.Provider>
-
-Or get a prebuilt Node.js® for <Release.OperatingSystemDropdown /> running a <Release.PlatformDropdown /> architecture.
+  <Release.Provider>
+    Or get a prebuilt Node.js® for <Release.OperatingSystemDropdown /> running a <Release.PlatformDropdown /> architecture.
 
-<Release.PrebuiltDownloadButtons />
-
-</Release.Provider>
+    <Release.PrebuiltDownloadButtons />
 
+  </Release.Provider>
 </section>
 
 <section>
-
-Read the <Release.ChangelogLink>changelog</Release.ChangelogLink> or <Release.BlogPostLink>blog post</Release.BlogPostLink> for this version.
+  Read the <Release.ChangelogLink>changelog</Release.ChangelogLink> or <Release.BlogPostLink>blog post</Release.BlogPostLink> for this version.
 
 Learn more about [Node.js releases](/about/previous-releases), including the release schedule and LTS status.
 

@@ -3,6 +3,7 @@ layout: download
 title: Descarga Node.js®
 ---
 
+<WindowsWSLMessage />
 <section>
   Obtiene Node.js® <Release.VersionDropdown /> para <Release.OperatingSystemDropdown /> usando <Release.InstallationMethodDropdown /> con <Release.PackageManagerDropdown />
 

@@ -3,6 +3,8 @@ layout: download
 title: Télécharger Node.js®
 ---
 
+<WindowsWSLMessage />
+
 <section>
   Obtenir Node.js® <Release.VersionDropdown /> pour <Release.OperatingSystemDropdown /> l'utiliser <Release.InstallationMethodDropdown /> avec <Release.PackageManagerDropdown />
 

@@ -3,6 +3,8 @@ layout: download
 title: Unduh Node.js®
 ---
 
+<WindowsWSLMessage />
+
 <section>
   Dapatkan Node.js® <Release.VersionDropdown /> untuk <Release.OperatingSystemDropdown /> menggunakan <Release.InstallationMethodDropdown /> dengan <Release.PackageManagerDropdown />
 

@@ -3,6 +3,8 @@ layout: download
 title: Node.js®をダウンロードする
 ---
 
+<WindowsWSLMessage />
+
 <section>
   <Release.OperatingSystemDropdown />用のNode.js® <Release.VersionDropdown />と<Release.PackageManagerDropdown />を<Release.InstallationMethodDropdown />を使ってダウンロードする
 

@@ -3,6 +3,8 @@ layout: download
 title: Node.js® 다운로드
 ---
 
+<WindowsWSLMessage />
+
 <section>
 Node.js® <Release.VersionDropdown />를 <Release.OperatingSystemDropdown /> 환경에서 <Release.InstallationMethodDropdown /> 방식으로 <Release.PackageManagerDropdown />를(을) 사용해 설치하세요.
 

@@ -3,6 +3,8 @@ layout: download
 title: Descarregar a Node.js®
 ---
 
+<WindowsWSLMessage />
+
 <section>
   Obter a Node.js® <Release.VersionDropdown /> para <Release.OperatingSystemDropdown /> usando <Release.InstallationMethodDropdown /> com <Release.PackageManagerDropdown />
 

@@ -3,6 +3,8 @@ layout: download
 title: Завантажити Node.js®
 ---
 
+<WindowsWSLMessage />
+
 <section>
   Отримати Node.js® <Release.VersionDropdown /> для <Release.OperatingSystemDropdown /> за допомогою <Release.InstallationMethodDropdown /> з <Release.PackageManagerDropdown />
 

@@ -3,6 +3,8 @@ layout: download
 title: 下載 Node.js®
 ---
 
+<WindowsWSLMessage />
+
 <section>
   取得適用於 <Release.OperatingSystemDropdown /> 的 Node.js® <Release.VersionDropdown /> 透過 <Release.InstallationMethodDropdown /> 包含 <Release.PackageManagerDropdown />
 

@@ -1,14 +1,17 @@
-import type constants from '../util/downloadUtils/constants.json';
 
-// Extract OS key type from the systems object
-export type UserOS = keyof typeof constants.systems;
+import type { OperatingSystemLabel } from '../util/downloadUtils/constants.json';
+import type downloadConstants from '../util/downloadUtils/constants.json';
 
-// Derive the union type of UserPlatform from the userOptions
-export type UserPlatform = (typeof constants.userOptions.platforms)[number];
+// This infers the keys from OperatingSystemLabel as the UserOS type.
+export type UserOS = keyof typeof OperatingSystemLabel;
 
-// Derive the union type of UserBitness from the userOptions
-export type UserBitness = (typeof constants.userOptions.bitness)[number];
+// Derive the union type of UserPlatform from the JSON array values.
+export type UserPlatform = (typeof downloadConstants.UserPlatform)[number];
 
-// Derive the union type of UserArchitecture from the userOptions
+// Derive the union type of UserBitness from the JSON array values.
+export type UserBitness = (typeof downloadConstants.UserBitness)[number];
+
+// Derive the union type of UserArchitecture from the JSON array values.
 export type UserArchitecture =
-  (typeof constants.userOptions.architecture)[number];
+  (typeof downloadConstants.UserArchitecture)[number];
+