Skip to content

Commit d4ec23a

Browse files
ovflowdovflowd
committed
feat: redesigned home page with esp and updated downloads page
1 parent f137f85 commit d4ec23a

19 files changed

Lines changed: 83 additions & 1509 deletions

File tree

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ const parseSnippet = (s: string, releaseContext: ReleaseContextType) => {
3838

3939
const ReleaseCodeBox: FC = () => {
4040
const { snippets } = useContext(ReleasesContext);
41+
4142
const { installMethod, os, packageManager, release } =
4243
useContext(ReleaseContext);
4344

@@ -126,6 +127,18 @@ const ReleaseCodeBox: FC = () => {
126127
</AlertBox>
127128
)}
128129

130+
{release.status === 'LTS' && (
131+
<AlertBox
132+
title={t('components.common.alertBox.info')}
133+
level="info"
134+
size="small"
135+
>
136+
{t.rich('layouts.download.codeBox.ltsVersionFeaturesNotice', {
137+
link: text => <Link href="/download/current">{text}</Link>,
138+
})}
139+
</AlertBox>
140+
)}
141+
129142
{!currentPlatform || currentPlatform.recommended || (
130143
<AlertBox
131144
title={t('components.common.alertBox.info')}

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

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
'use client';
22

33
import Select from '@node-core/ui-components/Common/Select';
4-
import { useTranslations } from 'next-intl';
4+
import { useLocale, useTranslations } from 'next-intl';
55
import type { FC } from 'react';
66
import { useContext } from 'react';
77

8+
import { redirect, usePathname } from '#site/navigation';
89
import {
910
ReleaseContext,
1011
ReleasesContext,
@@ -26,6 +27,28 @@ const VersionDropdown: FC = () => {
2627
const { releases } = useContext(ReleasesContext);
2728
const { release, setVersion } = useContext(ReleaseContext);
2829
const t = useTranslations();
30+
const locale = useLocale();
31+
const pathname = usePathname();
32+
33+
// Allows us to keep the route semantically correct to what the user should expect
34+
// from the /current and non /current routes.
35+
const setVersionOrNavigate = (version: string) => {
36+
const release = releases.find(
37+
({ versionWithPrefix }) => versionWithPrefix === version
38+
);
39+
40+
if (release?.status === 'LTS' && pathname.includes('current')) {
41+
redirect({ href: '/download', locale });
42+
return;
43+
}
44+
45+
if (release?.status === 'Current' && !pathname.includes('current')) {
46+
redirect({ href: '/download/current', locale });
47+
return;
48+
}
49+
50+
setVersion(version);
51+
};
2952

3053
return (
3154
<Select
@@ -35,7 +58,7 @@ const VersionDropdown: FC = () => {
3558
label: getDropDownStatus(versionWithPrefix, status),
3659
}))}
3760
defaultValue={release.versionWithPrefix}
38-
onChange={setVersion}
61+
onChange={setVersionOrNavigate}
3962
className="min-w-36"
4063
inline={true}
4164
/>

‎apps/site/components/Downloads/ReleaseModal/index.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import type { FC } from 'react';
55

66
import { MinorReleasesTable } from '#site/components/Downloads/MinorReleasesTable';
77
import { ReleaseOverview } from '#site/components/Downloads/ReleaseOverview';
8+
import Link from '#site/components/Link';
89
import LinkWithArrow from '#site/components/LinkWithArrow';
910
import type { NodeRelease } from '#site/types';
1011

@@ -39,6 +40,22 @@ const ReleaseModal: FC<ReleaseModalProps> = ({
3940
size="small"
4041
>
4142
{t('components.releaseModal.unsupportedVersionWarning')}
43+
44+
{t.rich('components.releaseModal.unsupportedVersionWarning', {
45+
link: text => <Link href="/about/previous-releases/">{text}</Link>,
46+
})}
47+
</AlertBox>
48+
)}
49+
50+
{release.status === 'LTS' && (
51+
<AlertBox
52+
title={t('components.common.alertBox.info')}
53+
level="info"
54+
size="small"
55+
>
56+
{t.rich('components.releaseModal.ltsVersionFeaturesNotice', {
57+
link: text => <Link href="/download/current">{text}</Link>,
58+
})}
4259
</AlertBox>
4360
)}
4461

‎apps/site/layouts/GlowingBackdrop.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ const GlowingBackdropLayout: FC<
1616
> = ({ kind = 'home', children }) => (
1717
<>
1818
<WithNavBar />
19+
1920
<div className={styles.centeredLayout}>
2021
<GlowingBackdrop />
2122

‎apps/site/layouts/layouts.module.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
section {
3737
&:nth-of-type(1) {
3838
@apply flex
39-
max-w-[500px]
39+
max-w-[400px]
4040
flex-[1_0]
4141
flex-col
4242
gap-8;
@@ -56,7 +56,7 @@
5656
@apply max-xs:text-xs
5757
text-center
5858
text-sm
59-
text-neutral-800
59+
text-neutral-600
6060
dark:text-neutral-400;
6161

6262
sup {

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

Lines changed: 19 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -14,29 +14,25 @@ layout: home
1414

1515
</div>
1616

17-
<div>
18-
<WithNodeRelease status={['LTS']}>
19-
{({ release }) => (
20-
<>
21-
<DownloadButton release={release}>Download Node.js (LTS)</DownloadButton>
22-
<small>
23-
Downloads Node.js <b>{release.versionWithPrefix}</b>
24-
<sup title="Downloads a Node.js installer for your current platform">1</sup> with long-term support.
25-
Node.js can also be installed via <Link href="/download">version managers</Link>.
26-
</small>
27-
</>
28-
)}
29-
</WithNodeRelease>
30-
31-
<WithNodeRelease status={['Current']}>
32-
{({ release }) => (
33-
<small>
34-
Want new features sooner?
35-
Get <b>Node.js <DownloadLink release={release}>{release.versionWithPrefix}</DownloadLink></b>
36-
<sup title="Downloads a Node.js installer for your current platform">1</sup> instead.
37-
</small>
38-
)}
39-
</WithNodeRelease>
17+
<div className="flex gap-4">
18+
19+
<div className="flex flex-col gap-2">
20+
<Button kind="special" className="!hidden dark:!block w-100" href="/download">Install Node.js</Button>
21+
22+
<Button kind="primary" className="!block dark:!hidden w-100" href="/download">Install Node.js</Button>
23+
24+
<Button kind="secondary" className="!hidden dark:!block w-100" href="https://www.herodevs.com/support/node-nes">
25+
<span>Get security support</span>
26+
<br />
27+
<small>for Node.js 18 and below</small>
28+
</Button>
29+
30+
<Button kind="neutral" className="!block dark:!hidden w-100" href="https://www.herodevs.com/support/node-nes">
31+
<span>Get security support</span>
32+
<br />
33+
<small>for Node.js 18 and below</small>
34+
</Button>
35+
</div>
4036

4137
</div>
4238
</section>

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

Lines changed: 0 additions & 135 deletions
This file was deleted.

0 commit comments

Comments
 (0)