chore(wsl): add notice

apps/site/components/Downloads/Release/OperatingSystemDropdown.tsx

@@ -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>
   );
 };
 

apps/site/components/Downloads/WSLMessage.tsx

@@ -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;

apps/site/components/Downloads/WindowsWSLMessage.tsx

@@ -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);
+  // conditions to check if the operating system is selected as Windows or not 
+  if (os !== 'WIN') return null;
+  return <WSLMessage />;
+};
+
+export default WindowsWSLMessage;

apps/site/next.mdx.use.client.mjs

@@ -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 WindowsWSLMessage
+  WindowsWSLMessage: WindowsWSLMessage,
+
   // Renders a Button Component for `button` tags
   Button: Button,
   // Links with External Arrow
@@ -40,6 +45,9 @@ 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: {

apps/site/pages/en/download/index.mdx

@@ -3,6 +3,8 @@ layout: download
 title: Download Node.js®
 ---
 
+<WindowsWSLMessage />
+
 <section>
 
 Get Node.js® <Release.VersionDropdown /> for <Release.OperatingSystemDropdown /> using <Release.InstallationMethodDropdown /> with <Release.PackageManagerDropdown />

packages/i18n/locales/en.json

@@ -316,6 +316,11 @@
           "n": "\"n\" is a cross-platform Node.js version manager.",
           "volta": "\"Volta\" is a cross-platform Node.js version manager."
         }
+      },
+      "wsl": {
+        "title": "Using Windows?  Try WSL 🦖",
+        "description": "Windows Subsystem for Linux (WSL) allows you to run a Linux environment directly on Windows without the need for Virtual Machine. This can provide a better development experience for Node.js applications.",
+        "learnMore": "Learn more about WSL"
       }
     },
     "logo": "Node.js logo"