Skip to content

chore(wsl): add notice #7758

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

chore(wsl): add notice #7758

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
20150a0
refactor(download): extract constants to JSON and reorganize download…
Vishal-K-988 May 18, 2025
a314703
feat(download): show WSL info message when Windows(WIN) OS is selected
Vishal-K-988 May 18, 2025
686ee4b
:Merge branch 'WSL-Guidance-on-Download-Page2' of https://github.com/…
Vishal-K-988 May 18, 2025
6123fef
Removed all the changes made to different languages JSON file as Crow…
Vishal-K-988 May 18, 2025
b2cf976
removed all the <WSLMessage/> component from all the supported langua…
Vishal-K-988 May 19, 2025
3ec4be3
Update WindowsWSLMessage.tsx
Vishal-K-988 May 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 12 additions & 10 deletions apps/site/components/Downloads/Release/OperatingSystemDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
};

Expand Down
29 changes: 29 additions & 0 deletions apps/site/components/Downloads/WSLMessage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
16 changes: 16 additions & 0 deletions apps/site/components/Downloads/WindowsWSLMessage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
8 changes: 8 additions & 0 deletions apps/site/next.mdx.use.client.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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
Expand All @@ -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: {
Expand Down
2 changes: 2 additions & 0 deletions apps/site/pages/en/download/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ layout: download
title: Download Node.js®
---

<WindowsWSLMessage />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This can be part of the Layout, right?

And can't AlertBox be used instead of a new component?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. I want <WindowsWSLMessage /> component to appear on certain pages, so I added this to download/index.mdx , not to the layout. Adding it to the layout would make it appear on every page.

  2. At first, I considered using an alert box, but it creates a pop-up animation, which I think can be distracting and might negatively impact the user experience.
    On the other hand, this new component feels like a natural part of the website and looks more integrated.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

AlertBox doesn't make a popup, I think you are thinking of Modal. If you select a community option for Download (rather than a Recommended), you'll see an alert box that says "Installation methods that involve community software are supported by the teams maintaining that software.", we can add one above for WSL.

It can say something like:

"These instructions are meant to be ran in a PowerShell terminal. If you are using [Windows Subsystem for Linux](link to ms docs), please refer to the Linux instructions"

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry but I couldn't find the "Community Installation" method / option at nodejs website!

can you please guide me through url or something so that I can get a rough idea about AlertBox

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Vishal-K-988 If you select 'Windows' and 'Chocolatey' you should see the AlertBox component (it's the blue info box).


<section>

Get Node.js® <Release.VersionDropdown /> for <Release.OperatingSystemDropdown /> using <Release.InstallationMethodDropdown /> with <Release.PackageManagerDropdown />
Expand Down
2 changes: 2 additions & 0 deletions apps/site/pages/es/download/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ layout: download
title: Descarga Node.js®
---

<WindowsWSLMessage />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also these changes can be reverted, only the /en/ directory should be changed

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Crowdin will handle for rest of the supported languages, Right ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done & Committed !


<section>
Obtiene Node.js® <Release.VersionDropdown /> para <Release.OperatingSystemDropdown /> usando <Release.InstallationMethodDropdown /> con <Release.PackageManagerDropdown />

Expand Down
2 changes: 2 additions & 0 deletions apps/site/pages/fr/download/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 />

Expand Down
2 changes: 2 additions & 0 deletions apps/site/pages/id/download/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 />

Expand Down
2 changes: 2 additions & 0 deletions apps/site/pages/ja/download/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ layout: download
title: Node.js®をダウンロードする
---

<WindowsWSLMessage />

<section>
<Release.OperatingSystemDropdown />用のNode.js® <Release.VersionDropdown />と<Release.PackageManagerDropdown />を<Release.InstallationMethodDropdown />を使ってダウンロードする

Expand Down
2 changes: 2 additions & 0 deletions apps/site/pages/ko/download/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ layout: download
title: Node.js® 다운로드
---

<WindowsWSLMessage />

<section>
Node.js® <Release.VersionDropdown />를 <Release.OperatingSystemDropdown /> 환경에서 <Release.InstallationMethodDropdown /> 방식으로 <Release.PackageManagerDropdown />를(을) 사용해 설치하세요.

Expand Down
2 changes: 2 additions & 0 deletions apps/site/pages/pt/download/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 />

Expand Down
2 changes: 2 additions & 0 deletions apps/site/pages/uk/download/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ layout: download
title: Завантажити Node.js®
---

<WindowsWSLMessage />

<section>
Отримати Node.js® <Release.VersionDropdown /> для <Release.OperatingSystemDropdown /> за допомогою <Release.InstallationMethodDropdown /> з <Release.PackageManagerDropdown />

Expand Down
2 changes: 2 additions & 0 deletions apps/site/pages/zh-tw/download/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ layout: download
title: 下載 Node.js®
---

<WindowsWSLMessage />

<section>
取得適用於 <Release.OperatingSystemDropdown /> 的 Node.js® <Release.VersionDropdown /> 透過 <Release.InstallationMethodDropdown /> 包含 <Release.PackageManagerDropdown />

Expand Down
5 changes: 5 additions & 0 deletions packages/i18n/locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down