diff --git a/components/Downloads/Release/BitnessDropdown.tsx b/components/Downloads/Release/BitnessDropdown.tsx index 4c0c458115db0..97862450ce40e 100644 --- a/components/Downloads/Release/BitnessDropdown.tsx +++ b/components/Downloads/Release/BitnessDropdown.tsx @@ -50,15 +50,15 @@ const BitnessDropdown: FC = () => { return ( = ({ })} defaultValue={os} onChange={value => setOS(value as UserOS)} + className="w-[8.5rem]" inline={true} - className="min-w-28" - label={t('layouts.download.dropdown.os')} /> ); }; diff --git a/components/Downloads/Release/PlatformDropdown.tsx b/components/Downloads/Release/PlatformDropdown.tsx index d3fbf9b243f09..58585f807c2df 100644 --- a/components/Downloads/Release/PlatformDropdown.tsx +++ b/components/Downloads/Release/PlatformDropdown.tsx @@ -6,7 +6,6 @@ import type { FC } from 'react'; import Select from '@/components/Common/Select'; import Docker from '@/components/Icons/Platform/Docker'; -import Generic from '@/components/Icons/Platform/Generic'; import Homebrew from '@/components/Icons/Platform/Homebrew'; import NVM from '@/components/Icons/Platform/NVM'; import { ReleaseContext } from '@/providers/releaseProvider'; @@ -65,6 +64,7 @@ const PlatformDropdown: FC = () => { return ( ({ value: versionWithPrefix, label: getDropDownStatus(versionWithPrefix, status), }))} defaultValue={release.versionWithPrefix} onChange={setVersion} - className="min-w-28" - inline - label={t('layouts.download.dropdown.version')} + className="w-40" + inline={true} /> ); }; diff --git a/components/withDownloadCategories.tsx b/components/withDownloadCategories.tsx index cc21042397684..331a508649f16 100644 --- a/components/withDownloadCategories.tsx +++ b/components/withDownloadCategories.tsx @@ -4,9 +4,11 @@ import type { FC, PropsWithChildren } from 'react'; import { useClientContext } from '@/hooks/react-server'; import getReleaseData from '@/next-data/releaseData'; import { ReleaseProvider } from '@/providers/releaseProvider'; +import type { NodeReleaseStatus } from '@/types'; import { getDownloadCategory, mapCategoriesToTabs } from '@/util/downloadUtils'; import LinkTabs from './Common/LinkTabs'; +import WithNodeRelease from './withNodeRelease'; const WithDownloadCategories: FC = async ({ children }) => { const t = await getTranslations(); @@ -15,6 +17,10 @@ const WithDownloadCategories: FC = async ({ children }) => { const { pathname } = useClientContext(); const { page, category, subCategory } = getDownloadCategory(pathname); + const initialRelease: Array = pathname.includes('current') + ? ['Current'] + : ['Active LTS', 'Maintenance LTS']; + return ( = async ({ children }) => { subCategory: subCategory, })} > - {children} + + {({ release }) => ( + + {children} + + )} + ); }; diff --git a/i18n/locales/en.json b/i18n/locales/en.json index 8f80d930ba999..be9f6826e906e 100644 --- a/i18n/locales/en.json +++ b/i18n/locales/en.json @@ -276,8 +276,8 @@ "source-code": "Source Code" }, "buttons": { - "prebuilt": "Download {version} Node.js for {os}", - "source": "Download {version} source code" + "prebuilt": "Download Node.js {version}", + "source": "Download Node.js {version} source" }, "dropdown": { "bitness": "Bitness", diff --git a/pages/en/new-design/download/current.mdx b/pages/en/new-design/download/current.mdx index 7416654292b92..4daf425991bb5 100644 --- a/pages/en/new-design/download/current.mdx +++ b/pages/en/new-design/download/current.mdx @@ -5,13 +5,13 @@ subtitle: Download Node.js the way you want. ---
- I want the {({ release }) => } version of Node for running + I want the version of Node.js for running
- Version: (includes npm and corepack). +Node.js includes npm () and corepack. Read the blog post for this version diff --git a/pages/en/new-design/download/index.mdx b/pages/en/new-design/download/index.mdx index e845f47fc6c36..4daf425991bb5 100644 --- a/pages/en/new-design/download/index.mdx +++ b/pages/en/new-design/download/index.mdx @@ -5,13 +5,13 @@ subtitle: Download Node.js the way you want. ---
- I want the {({ release }) => } version of Node for running + I want the version of Node.js for running
- Version: (includes npm ). +Node.js includes npm () and corepack. Read the blog post for this version diff --git a/pages/en/new-design/download/package-manager/current.mdx b/pages/en/new-design/download/package-manager/current.mdx index 9e31c0d6a4881..132e012a9e4a8 100644 --- a/pages/en/new-design/download/package-manager/current.mdx +++ b/pages/en/new-design/download/package-manager/current.mdx @@ -5,12 +5,14 @@ subtitle: Download Node.js the way you want. ---
- Install Node version {({ release }) => } on using + Install Node.js on using
+Node.js includes npm () and corepack. + Read the blog post for this version Learn how to verify signed SHASUMS diff --git a/pages/en/new-design/download/package-manager/index.mdx b/pages/en/new-design/download/package-manager/index.mdx index 8b4f70dbeef57..3989c120f46c8 100644 --- a/pages/en/new-design/download/package-manager/index.mdx +++ b/pages/en/new-design/download/package-manager/index.mdx @@ -5,12 +5,14 @@ subtitle: Download Node.js the way you want. ---
- Install Node version {({ release }) => } on using + Install Node.js on using
+Node.js includes npm () and corepack. + Read the blog post for this version Learn how to verify signed SHASUMS diff --git a/pages/en/new-design/download/prebuilt-binaries/current.mdx b/pages/en/new-design/download/prebuilt-binaries/current.mdx index ed3a734c4ae28..bbf1af24c0c55 100644 --- a/pages/en/new-design/download/prebuilt-binaries/current.mdx +++ b/pages/en/new-design/download/prebuilt-binaries/current.mdx @@ -5,13 +5,13 @@ subtitle: Download Node.js the way you want. ---
- I want the {({ release }) => } version of Node for running + I want the version of Node.js for running
- Version: (includes npm and corepack). +Node.js includes npm () and corepack. Read the blog post for this version diff --git a/pages/en/new-design/download/prebuilt-binaries/index.mdx b/pages/en/new-design/download/prebuilt-binaries/index.mdx index d46389fbb3aef..bbf1af24c0c55 100644 --- a/pages/en/new-design/download/prebuilt-binaries/index.mdx +++ b/pages/en/new-design/download/prebuilt-binaries/index.mdx @@ -5,13 +5,13 @@ subtitle: Download Node.js the way you want. ---
- I want the {({ release }) => } version of Node for running + I want the version of Node.js for running
- Version: (includes npm ). +Node.js includes npm () and corepack. Read the blog post for this version diff --git a/pages/en/new-design/download/source-code/current.mdx b/pages/en/new-design/download/source-code/current.mdx index 10033d1b386e3..ed9c5934b0e1b 100644 --- a/pages/en/new-design/download/source-code/current.mdx +++ b/pages/en/new-design/download/source-code/current.mdx @@ -5,13 +5,13 @@ subtitle: Download Node.js the way you want. ---
- I want the {({ release }) => } version of the Node.js source code. + I want the version of the Node.js source code.
- Version: (includes npm ). +Node.js includes npm () and corepack. Read the blog post for this version diff --git a/pages/en/new-design/download/source-code/index.mdx b/pages/en/new-design/download/source-code/index.mdx index 844568b5c3b39..ed9c5934b0e1b 100644 --- a/pages/en/new-design/download/source-code/index.mdx +++ b/pages/en/new-design/download/source-code/index.mdx @@ -5,13 +5,13 @@ subtitle: Download Node.js the way you want. ---
- I want the {({ release }) => } version of the Node.js source code. + I want the version of the Node.js source code.
- Version: (includes npm ). +Node.js includes npm () and corepack. Read the blog post for this version diff --git a/providers/releaseProvider.tsx b/providers/releaseProvider.tsx index 97e30408e3a88..c17e8748af4cd 100644 --- a/providers/releaseProvider.tsx +++ b/providers/releaseProvider.tsx @@ -37,6 +37,7 @@ export const ReleaseContext = createContext({ export const ReleaseProvider: FC> = ({ children, releases, + initialRelease, }) => { const getReleaseFromVersion = (version: string) => releases.find(({ versionWithPrefix }) => versionWithPrefix === version) ?? @@ -60,6 +61,7 @@ export const ReleaseProvider: FC> = ({ const [state, dispatch] = useReducer(releaseReducer, { ...initialState, releases: releases, + release: initialRelease, }); const actions = useMemo(() => createDispatchActions(dispatch), [dispatch]); diff --git a/types/release.ts b/types/release.ts index 981f7f2ad7d04..2a0ca606e0242 100644 --- a/types/release.ts +++ b/types/release.ts @@ -33,4 +33,5 @@ export interface ReleaseContextType export interface ReleaseProviderProps { children: ReactNode; releases: Array; + initialRelease: NodeRelease; } diff --git a/util/getNodeDownloadSnippet.ts b/util/getNodeDownloadSnippet.ts index 3aa5a02566ee7..4ca8152f53263 100644 --- a/util/getNodeDownloadSnippet.ts +++ b/util/getNodeDownloadSnippet.ts @@ -1,20 +1,11 @@ import dedent from 'dedent'; import type { UserOS } from '@/types/userOS'; -import { getShiki, highlightToHtml } from '@/util/getHighlighter'; -// We cannot do top-level awaits on utilities or code that is imported by client-only components -// hence we only declare a Promise and let it be fulfilled by the first call to the function -const memoizedShiki = getShiki(); - -const highlightToBash = async (code: string) => - memoizedShiki.then(shiki => highlightToHtml(shiki)(code, 'bash')); - -export const getNodeDownloadSnippet = async (major: number, os: UserOS) => { +export const getNodeDownloadSnippet = (major: number, os: UserOS) => { if (os === 'LINUX' || os === 'MAC') { const platformSnippets = { - NVM: await highlightToBash( - dedent` + NVM: dedent` # Installs NVM (Node Version Manager) curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash @@ -25,10 +16,8 @@ export const getNodeDownloadSnippet = async (major: number, os: UserOS) => { node -v # Checks your NPM version - npm -v` - ), - BREW: await highlightToBash( - dedent` + npm -v`, + BREW: dedent` # Installs Brew (macOS/Linux Package Manager) curl -o- https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh | bash @@ -39,13 +28,12 @@ export const getNodeDownloadSnippet = async (major: number, os: UserOS) => { node -v # Checks your NPM version - npm -v` - ), + npm -v`, DOCKER: '', }; if (os === 'MAC') { - platformSnippets.DOCKER = await highlightToBash(dedent` + platformSnippets.DOCKER = dedent` # Installs Brew (macOS Package Manager) curl -o- https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh | bash @@ -54,7 +42,7 @@ export const getNodeDownloadSnippet = async (major: number, os: UserOS) => { # Pull Node.js Docker Image docker pull node:${major}-${major >= 4 ? 'alpine' : 'slim'} - `); + `; } return platformSnippets; @@ -62,7 +50,7 @@ export const getNodeDownloadSnippet = async (major: number, os: UserOS) => { if (os === 'WIN') { return { - NVM: await highlightToBash(dedent` + NVM: dedent` # Installs Chocolatey (Windows Package Manager) Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; @@ -78,8 +66,8 @@ export const getNodeDownloadSnippet = async (major: number, os: UserOS) => { node -v # Checks your NPM version - npm -v`), - DOCKER: await highlightToBash(dedent` + npm -v`, + DOCKER: dedent` # Installs Chocolatey (Windows Package Manager) Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; @@ -90,7 +78,7 @@ export const getNodeDownloadSnippet = async (major: number, os: UserOS) => { # Pull Node.js Docker Image docker pull node:${major}-${major >= 4 ? 'alpine' : 'slim'} - `), + `, BREW: '', }; }