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 3 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
5 changes: 5 additions & 0 deletions packages/i18n/locales/es.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -321,6 +321,11 @@
"chocolateyIsNotNodejsPackageManager": "Chocolatey no es un administrador de paquetes de Node.js.",
"chocolateyInstructions": "Siga las instrucciones oficiales en https://chocolatey.org/",
"chocolateyNotMaintanedByNodejs": "Chocolatey no es mantenido oficialmente por el proyecto Node.js y puede que no sea compatible con la versión {version} de Node.js"
},
"wsl": {
"title": "¿Usas Windows? ¡Prueba WSL 🦖",
"description": "El Subsistema de Windows para Linux (WSL) te permite ejecutar un entorno Linux directamente en Windows sin necesidad de una máquina virtual. Esto puede ofrecer una mejor experiencia de desarrollo para aplicaciones Node.js.",
"learnMore": "Aprende más sobre WSL"
}
}
}
Expand Down
5 changes: 5 additions & 0 deletions packages/i18n/locales/fr.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -316,6 +316,11 @@
"n": "\"n\" est un gestionnaire de versions Node.js multiplateforme.",
"volta": "\"Volta\" est un gestionnaire de versions Node.js multiplateforme."
}
},
"wsl": {
"title": "Vous utilisez Windows ? Essayez WSL 🦖",
"description": "Le Sous-système Windows pour Linux (WSL) vous permet d’exécuter un environnement Linux directement sur Windows sans avoir besoin d’une machine virtuelle. Cela peut améliorer l’expérience de développement pour les applications Node.js.",
"learnMore": "En savoir plus sur WSL"
}
},
"logo": "Logo Node.js"
Expand Down
5 changes: 5 additions & 0 deletions packages/i18n/locales/id.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -282,6 +282,11 @@
"devbox": "Devbox menciptakan lingkungan pengembangan yang terisolasi dan dapat direproduksi.",
"docker": "Docker adalah platform kontainerisasi."
}
},
"wsl": {
"title": "Menggunakan Windows? Coba WSL 🦖",
"description": "Windows Subsystem for Linux (WSL) memungkinkan Anda menjalankan lingkungan Linux langsung di Windows tanpa perlu Mesin Virtual. Ini dapat memberikan pengalaman pengembangan yang lebih baik untuk aplikasi Node.js.",
"learnMore": "Pelajari lebih lanjut tentang WSL"
}
}
}
Expand Down
5 changes: 5 additions & 0 deletions packages/i18n/locales/ja.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -316,6 +316,11 @@
"n": "\"n\"はクロスプラットフォームに対応したNode.jsのバージョンマネージャーです。",
"volta": "\"Volta\"はクロスプラットフォームに対応したNode.jsのバージョンマネージャーです。"
}
},
"wsl": {
"title": "Windows を使用中ですか？WSL を試しましょう 🦖",
"description": "Windows Subsystem for Linux (WSL) を使用すると、仮想マシンを使用せずに Windows 上で直接 Linux 環境を実行できます。これは Node.js アプリケーションの開発体験を向上させることができます。",
"learnMore": "WSL の詳細はこちら"
}
},
"logo": "Node.jsロゴ"
Expand Down
5 changes: 5 additions & 0 deletions packages/i18n/locales/ko.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -282,6 +282,11 @@
"devbox": "Devbox는 격리되고 재현 가능한 개발 환경을 제공합니다.",
"docker": "Docker는 컨테이너화 플랫폼입니다. "
}
},
"wsl": {
"title": "Windows를 사용 중이신가요? WSL을 사용해 보세요 🦖",
"description": "Windows Subsystem for Linux (WSL)을 사용하면 가상 머신 없이 Windows에서 직접 Linux 환경을 실행할 수 있습니다. 이는 Node.js 애플리케이션 개발 경험을 향상시킬 수 있습니다.",
"learnMore": "WSL에 대해 자세히 알아보기"
}
Copy link
Member

Choose a reason for hiding this comment

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

Can you only change the English files? Crowdin will update the other languages eventually

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Removing all the changes made to all the other languages!

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I recently saw the vercel deployment and when changed the language to Japanese, still shows the message in english
(not in translated to japanese )
url : https://nodejs-gdlsqs291-openjs.vercel.app/ja/download
image

Copy link
Member

Choose a reason for hiding this comment

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

That's okay. Crowdin handles translations

}
}
Expand Down
5 changes: 5 additions & 0 deletions packages/i18n/locales/pt.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -289,6 +289,11 @@
"docker": "Docker é uma plataforma de contentorização.",
"volta": "\"Volta\" é um gestor de versão de Node.js multiplataforma."
}
},
"wsl": {
"title": "Usa Windows? Experimente o WSL 🦖",
"description": "O Subsistema do Windows para Linux (WSL) permite que você execute um ambiente Linux diretamente no Windows sem a necessidade de uma máquina virtual. Isso pode oferecer uma melhor experiência de desenvolvimento para aplicações Node.js.",
"learnMore": "Saiba mais sobre o WSL"
}
},
"logo": "Logótipo da Node.js"
Expand Down
5 changes: 5 additions & 0 deletions packages/i18n/locales/tr.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -322,6 +322,11 @@
"chocolateyIsNotNodejsPackageManager": "Chocolatey, Node.js paket yöneticisi değildir.",
"chocolateyInstructions": "Resmi talimatlar için https://chocolatey.org/ adresini takip edin.",
"chocolateyNotMaintanedByNodejs": "Chocolatey, Node.js projesi tarafından resmi olarak sürdürülmüyor ve Node.js'nin {version} sürümünü desteklemiyor olabilir"
},
"wsl": {
"title": "Windows mu kullanıyorsunuz? WSL’yi deneyin 🦖",
"description": "Windows için Linux Alt Sistemi (WSL), sanal makineye ihtiyaç duymadan doğrudan Windows üzerinde bir Linux ortamı çalıştırmanızı sağlar. Bu, Node.js uygulamaları için daha iyi bir geliştirme deneyimi sunabilir.",
"learnMore": "WSL hakkında daha fazla bilgi edinin"
}
}
}
Expand Down
5 changes: 5 additions & 0 deletions packages/i18n/locales/uk.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -291,6 +291,11 @@
"n": "«n» — це кросплатформний менеджер версій Node.js.",
"volta": "«Volta» — це кросплатформний менеджер версій Node.js."
}
},
"wsl": {
"title": "Використовуєте Windows? Спробуйте WSL 🦖",
"description": "Підсистема Windows для Linux (WSL) дозволяє запускати середовище Linux безпосередньо в Windows без необхідності у віртуальній машині. Це може покращити досвід розробки додатків Node.js.",
"learnMore": "Дізнатися більше про WSL"
}
},
"logo": "Логотип Node.js"
Expand Down
5 changes: 5 additions & 0 deletions packages/i18n/locales/zh-cn.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -291,6 +291,11 @@
"n": "\"n\" 是一个跨平台的 Node.js 版本管理器。",
"volta": "\"Volta\" 是一个跨平台的 Node.js 版本管理器。"
}
},
"wsl": {
"title": "使用 Windows？试试 WSL 🦖",
"description": "Windows 子系统 Linux（WSL）允许您在无需虚拟机的情况下，直接在 Windows 上运行 Linux 环境。这可以为 Node.js 应用程序提供更好的开发体验。",
"learnMore": "了解更多关于 WSL 的信息"
}
},
"logo": "Node.js 徽标"
Expand Down
5 changes: 5 additions & 0 deletions packages/i18n/locales/zh-tw.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -291,6 +291,11 @@
"n": "「n」是跨平台的 Node.js 版本管理程式。",
"volta": "「Volta」是跨平台的 Node.js 版本管理程式。"
}
},
"wsl": {
"title": "使用 Windows？試試 WSL 🦖",
"description": "Windows 子系統 Linux（WSL）允許您在不需要虛擬機的情況下，直接在 Windows 上運行 Linux 環境。這可以為 Node.js 應用程式提供更好的開發體驗。",
"learnMore": "了解更多有關 WSL 的資訊"
}
},
"logo": "Node.js 標誌"
Expand Down