Skip to content

Commit 103a672

Browse files
vishalkumargeedvishalkumargeed
committed
feat(download): show WSL info message when Windows(WIN) OS is selected
- Add WSLMessage component to display information about Windows Subsystem for Linux (WSL) - Show WSLMessage only once, directly below the `Download Node.js®` title, when Windows(WIN) is selected in any OS dropdown - Refactor context usage to allow independent OS selection in each dropdown - Register WSLMessage and WindowsWSLMessage in MDX components for use in MDX files - Improve user experience by providing relevant WSL info at the right place and time - Enhanced both for Dark and Light Theme with Blue background and border and glowing theme perfectly matching the ui theme of the website ! Issue #7651 Signed-off-by: vishal <[email protected]>
1 parent 68ab76c commit 103a672

24 files changed

Lines changed: 142 additions & 20 deletions

File tree

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

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -53,16 +53,18 @@ const OperatingSystemDropdown: FC<OperatingSystemDropdownProps> = () => {
5353
);
5454

5555
return (
56-
<Select<UserOS>
57-
values={parsedOperatingSystems}
58-
defaultValue={release.os !== 'LOADING' ? release.os : undefined}
59-
loading={release.os === 'LOADING'}
60-
placeholder={t('layouts.download.dropdown.unknown')}
61-
ariaLabel={t('layouts.download.dropdown.os')}
62-
onChange={value => release.setOS(value)}
63-
className="min-w-[8.5rem]"
64-
inline={true}
65-
/>
56+
<div>
57+
<Select<UserOS>
58+
values={parsedOperatingSystems}
59+
defaultValue={release.os !== 'LOADING' ? release.os : undefined}
60+
loading={release.os === 'LOADING'}
61+
placeholder={t('layouts.download.dropdown.unknown')}
62+
ariaLabel={t('layouts.download.dropdown.os')}
63+
onChange={value => release.setOS(value)}
64+
className="min-w-[8.5rem]"
65+
inline={true}
66+
/>
67+
</div>
6668
);
6769
};
6870

‎apps/site/components/Downloads/WSLMessage.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
'use client';
2+
3+
import { useTranslations } from 'next-intl';
4+
import type { FC } from 'react';
5+
6+
const WSLMessage: FC = () => {
7+
const t = useTranslations();
8+
return (
9+
<>
10+
<div className="mt-4 rounded-lg border border-blue-200 bg-blue-50 p-4 dark:border-blue-800 dark:bg-blue-900/20">
11+
<h3 className="mb-2 text-lg font-semibold text-blue-800 dark:text-blue-200">
12+
{t('layouts.download.wsl.title')}
13+
</h3>
14+
<p className="text-blue-700 dark:text-blue-300">
15+
{t('layouts.download.wsl.description')}
16+
</p>
17+
<a
18+
href="https://docs.microsoft.com/en-us/windows/wsl/install"
19+
target="_blank"
20+
rel="noopener noreferrer"
21+
className="mt-2 inline-block text-blue-600 hover:underline dark:text-blue-400"
22+
>
23+
{t('layouts.download.wsl.learnMore')}
24+
</a>
25+
</div>
26+
</>
27+
);
28+
};
29+
export default WSLMessage;

‎apps/site/components/Downloads/WindowsWSLMessage.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
'use client';
2+
3+
import { useContext } from 'react';
4+
5+
import { ReleaseContext } from '#site/providers/releaseProvider';
6+
7+
import WSLMessage from './WSLMessage';
8+
9+
const WindowsWSLMessage = () => {
10+
const { os } = useContext(ReleaseContext);
11+
// consitioms to chekc ifo the operating system is selcted as Linux or not
12+
if (os !== 'WIN') return null;
13+
return <WSLMessage />;
14+
};
15+
16+
export default WindowsWSLMessage;

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ import ReleasePlatformDropdown from './components/Downloads/Release/PlatformDrop
1515
import ReleasePrebuiltDownloadButtons from './components/Downloads/Release/PrebuiltDownloadButtons';
1616
import ReleaseCodeBox from './components/Downloads/Release/ReleaseCodeBox';
1717
import ReleaseVersionDropdown from './components/Downloads/Release/VersionDropdown';
18+
import WindowsWSLMessage from './components/Downloads/WindowsWSLMessage';
19+
import WSLMessage from './components/Downloads/WSLMessage';
1820
import Link from './components/Link';
1921
import LinkWithArrow from './components/LinkWithArrow';
2022
import MDXCodeBox from './components/MDX/CodeBox';
@@ -30,6 +32,9 @@ import { ReleaseProvider } from './providers/releaseProvider';
3032
export const clientMdxComponents = {
3133
// Renders MDX CodeTabs
3234
CodeTabs: MDXCodeTabs,
35+
// Renders LinuxWSLMessage
36+
WindowsWSLMessage: WindowsWSLMessage,
37+
3338
// Renders a Button Component for `button` tags
3439
Button: Button,
3540
// Links with External Arrow
@@ -40,6 +45,8 @@ export const clientMdxComponents = {
4045
DownloadButton: DownloadButton,
4146
// Renders a Download Link
4247
DownloadLink: DownloadLink,
48+
// Renders WSL Message
49+
WSLMessage: WSLMessage,
4350
// Group of components that enable you to select versions for Node.js
4451
// releases and download selected versions. Uses `releaseProvider` as a provider
4552
Release: {

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

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,23 @@ layout: download
33
title: Download Node.js®
44
---
55

6-
<section>
6+
<WindowsWSLMessage />
77

8-
Get Node.js® <Release.VersionDropdown /> for <Release.OperatingSystemDropdown /> using <Release.InstallationMethodDropdown /> with <Release.PackageManagerDropdown />
8+
<section>
9+
Get Node.js® <Release.VersionDropdown /> for <Release.OperatingSystemDropdown /> using <Release.InstallationMethodDropdown /> with <Release.PackageManagerDropdown />
910

1011
<Release.ReleaseCodeBox />
1112

12-
<Release.Provider>
13-
14-
Or get a prebuilt Node.js® for <Release.OperatingSystemDropdown /> running a <Release.PlatformDropdown /> architecture.
13+
<Release.Provider>
14+
Or get a prebuilt Node.js® for <Release.OperatingSystemDropdown /> running a <Release.PlatformDropdown /> architecture.
1515

16-
<Release.PrebuiltDownloadButtons />
17-
18-
</Release.Provider>
16+
<Release.PrebuiltDownloadButtons />
1917

18+
</Release.Provider>
2019
</section>
2120

2221
<section>
23-
24-
Read the <Release.ChangelogLink>changelog</Release.ChangelogLink> or <Release.BlogPostLink>blog post</Release.BlogPostLink> for this version.
22+
Read the <Release.ChangelogLink>changelog</Release.ChangelogLink> or <Release.BlogPostLink>blog post</Release.BlogPostLink> for this version.
2523

2624
Learn more about [Node.js releases](/about/previous-releases), including the release schedule and LTS status.
2725

‎apps/site/pages/es/download/index.mdx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ layout: download
33
title: Descarga Node.js®
44
---
55

6+
<WindowsWSLMessage />
67
<section>
78
Obtiene Node.js® <Release.VersionDropdown /> para <Release.OperatingSystemDropdown /> usando <Release.InstallationMethodDropdown /> con <Release.PackageManagerDropdown />
89

‎apps/site/pages/fr/download/index.mdx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ layout: download
33
title: Télécharger Node.js®
44
---
55

6+
<WindowsWSLMessage />
7+
68
<section>
79
Obtenir Node.js® <Release.VersionDropdown /> pour <Release.OperatingSystemDropdown /> l'utiliser <Release.InstallationMethodDropdown /> avec <Release.PackageManagerDropdown />
810

‎apps/site/pages/id/download/index.mdx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ layout: download
33
title: Unduh Node.js®
44
---
55

6+
<WindowsWSLMessage />
7+
68
<section>
79
Dapatkan Node.js® <Release.VersionDropdown /> untuk <Release.OperatingSystemDropdown /> menggunakan <Release.InstallationMethodDropdown /> dengan <Release.PackageManagerDropdown />
810

‎apps/site/pages/ja/download/index.mdx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ layout: download
33
title: Node.js®をダウンロードする
44
---
55

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

‎apps/site/pages/ko/download/index.mdx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ layout: download
33
title: Node.js® 다운로드
44
---
55

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

0 commit comments

Comments
 (0)