diff --git a/apps/site/components/Downloads/Release/OperatingSystemDropdown.tsx b/apps/site/components/Downloads/Release/OperatingSystemDropdown.tsx index e5ba1e404d141..098103d98e4e6 100644 --- a/apps/site/components/Downloads/Release/OperatingSystemDropdown.tsx +++ b/apps/site/components/Downloads/Release/OperatingSystemDropdown.tsx @@ -53,16 +53,18 @@ const OperatingSystemDropdown: FC = () => { ); return ( - - 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} - /> +
+ + 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} + /> +
); }; diff --git a/apps/site/components/Downloads/WSLMessage.tsx b/apps/site/components/Downloads/WSLMessage.tsx new file mode 100644 index 0000000000000..3930fc34d1619 --- /dev/null +++ b/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 ( + <> +
+

+ {t('layouts.download.wsl.title')} +

+

+ {t('layouts.download.wsl.description')} +

+ + {t('layouts.download.wsl.learnMore')} + +
+ + ); +}; +export default WSLMessage; diff --git a/apps/site/components/Downloads/WindowsWSLMessage.tsx b/apps/site/components/Downloads/WindowsWSLMessage.tsx new file mode 100644 index 0000000000000..347332b30fbb3 --- /dev/null +++ b/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 ; +}; + +export default WindowsWSLMessage; diff --git a/apps/site/next.mdx.use.client.mjs b/apps/site/next.mdx.use.client.mjs index ca3f20882f805..cfdd001f18f35 100644 --- a/apps/site/next.mdx.use.client.mjs +++ b/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: { diff --git a/apps/site/pages/en/download/index.mdx b/apps/site/pages/en/download/index.mdx index 16e78d6a8e1d7..811026ad53ea6 100644 --- a/apps/site/pages/en/download/index.mdx +++ b/apps/site/pages/en/download/index.mdx @@ -3,6 +3,8 @@ layout: download title: Download Node.js® --- + +
Get Node.js® for using with diff --git a/packages/i18n/locales/en.json b/packages/i18n/locales/en.json index 156804a86cf2e..d060f2ac3574e 100644 --- a/packages/i18n/locales/en.json +++ b/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"