diff --git a/.changeset/ripe-papers-occur.md b/.changeset/ripe-papers-occur.md new file mode 100644 index 0000000000000..30e045888fc07 --- /dev/null +++ b/.changeset/ripe-papers-occur.md @@ -0,0 +1,6 @@ +--- +'@node-core/ui-components': minor +'@node-core/website-i18n': patch +--- + +Add the Vite+ installation method icon and description. diff --git a/apps/site/components/Downloads/Release/ReleaseCodeBox.tsx b/apps/site/components/Downloads/Release/ReleaseCodeBox.tsx index 829131d7ceed5..e13bd1aa6fa8c 100644 --- a/apps/site/components/Downloads/Release/ReleaseCodeBox.tsx +++ b/apps/site/components/Downloads/Release/ReleaseCodeBox.tsx @@ -67,19 +67,20 @@ const useSnippetProcessor = ( context.release.major >= 25 && snippets.find(({ name }) => name === 'corepack'); - // Combine and parse snippets - const parsedContent = parseSnippet( - [ - installMethodSnippet, - verifyNodeSnippet, - installCorepackSnippet, - packageManagerSnippet, - ] - .filter(Boolean) - .map(snippet => (snippet as DownloadSnippet).content) - .join('\n'), - context - ); + // Parse snippets individually, skipping those that render empty + const parsedContent = [ + installMethodSnippet, + verifyNodeSnippet, + installCorepackSnippet, + packageManagerSnippet, + ] + .filter(Boolean) + .map(snippet => + parseSnippet((snippet as DownloadSnippet).content, context) + ) + .map(content => content.trim()) + .filter(Boolean) + .join('\n\n'); // Convert to HTML using Shiki's highlighter // This is faster than JSX rendering as it avoids React runtime overhead diff --git a/apps/site/snippets/en/download/corepack.bash b/apps/site/snippets/en/download/corepack.bash index 5dfe35d3cd17a..adb46497cba54 100644 --- a/apps/site/snippets/en/download/corepack.bash +++ b/apps/site/snippets/en/download/corepack.bash @@ -1,2 +1,5 @@ -# Install Corepack: -npm install -g corepack +${props.installMethod === 'VP' ? + '' : + `# Install Corepack: +npm install -g corepack` +} diff --git a/apps/site/snippets/en/download/pnpm.bash b/apps/site/snippets/en/download/pnpm.bash index 1bab2907480ce..515561645967f 100644 --- a/apps/site/snippets/en/download/pnpm.bash +++ b/apps/site/snippets/en/download/pnpm.bash @@ -1,5 +1,8 @@ -# Download and install pnpm: -corepack enable pnpm +${props.installMethod === 'VP' ? + '' : + `# Download and install pnpm: +corepack enable pnpm` +} # Verify pnpm version: pnpm -v diff --git a/apps/site/snippets/en/download/vp.bash b/apps/site/snippets/en/download/vp.bash new file mode 100644 index 0000000000000..4ade86497d992 --- /dev/null +++ b/apps/site/snippets/en/download/vp.bash @@ -0,0 +1,14 @@ +# Download and install Vite+ +${props.os === 'WIN' ? + '$env:VP_NODE_MANAGER = "yes"\nirm https://vite.plus/ps1 | iex' : + 'curl -fsSL https://vite.plus | VP_NODE_MANAGER=yes bash' +} + +# In lieu of restarting the shell +${props.os === 'WIN' + ? '. "$env:APPDATA\\vite-plus\\env.ps1"' + : '. "${XDG_CONFIG_HOME:-$HOME/.config}/vite-plus/env"' +} + +# Download and install Node.js: +vp env default ${props.release.version} diff --git a/apps/site/snippets/en/download/yarn.bash b/apps/site/snippets/en/download/yarn.bash index e9f8ae4d9b791..19e7387025a02 100644 --- a/apps/site/snippets/en/download/yarn.bash +++ b/apps/site/snippets/en/download/yarn.bash @@ -1,5 +1,8 @@ -# Download and install Yarn: -corepack enable yarn +${props.installMethod === 'VP' ? + '' : + `# Download and install Yarn: +corepack enable yarn` +} # Verify Yarn version: yarn -v diff --git a/apps/site/types/release.ts b/apps/site/types/release.ts index cacea05df198e..c3d3e350993ee 100644 --- a/apps/site/types/release.ts +++ b/apps/site/types/release.ts @@ -3,7 +3,7 @@ import type { NodeRelease } from '#site/types/releases'; import type { OperatingSystem, Platform } from '#site/types/userAgent'; export type InstallationMethod = - 'NVM' | 'FNM' | 'BREW' | 'DOCKER' | 'CHOCO' | 'N' | 'ASDF'; + 'NVM' | 'FNM' | 'BREW' | 'DOCKER' | 'CHOCO' | 'N' | 'ASDF' | 'VP'; export type PackageManager = 'NPM' | 'YARN' | 'PNPM'; // Items with a pipe/default value mean that they are auto inferred diff --git a/apps/site/util/download/constants.json b/apps/site/util/download/constants.json index 1a349025d003c..bb6d21570f6e8 100644 --- a/apps/site/util/download/constants.json +++ b/apps/site/util/download/constants.json @@ -196,6 +196,16 @@ }, "url": "https://asdf-vm.com/guide/getting-started.html", "info": "layouts.download.codeBox.platformInfo.asdf" + }, + { + "id": "VP", + "icon": "VitePlus", + "name": "Vite+", + "compatibility": { + "os": ["WIN", "MAC", "LINUX"] + }, + "url": "https://viteplus.dev/", + "info": "layouts.download.codeBox.platformInfo.vp" } ], "packageManagers": [ diff --git a/packages/i18n/src/locales/en.json b/packages/i18n/src/locales/en.json index d839616e7305c..baa59378ee880 100644 --- a/packages/i18n/src/locales/en.json +++ b/packages/i18n/src/locales/en.json @@ -259,7 +259,8 @@ "choco": "Chocolatey is a package manager for Windows.", "docker": "Docker is a containerization platform.", "n": "\"n\" is a cross-platform Node.js version manager.", - "asdf": "\"asdf\" is a cross-platform version manager that supports multiple languages." + "asdf": "\"asdf\" is a cross-platform version manager that supports multiple languages.", + "vp": "\"Vite+\" is a unified toolchain for web development with Node.js version management." } } }, diff --git a/packages/ui-components/__design__/platform-logos.stories.tsx b/packages/ui-components/__design__/platform-logos.stories.tsx index 650a9a9b21b5e..07fb222e5cc63 100644 --- a/packages/ui-components/__design__/platform-logos.stories.tsx +++ b/packages/ui-components/__design__/platform-logos.stories.tsx @@ -4,6 +4,7 @@ import { NVM, Choco, N, + VitePlus, Volta, } from '#ui/Icons/InstallationMethod'; import { Apple, Linux, Microsoft, AIX } from '#ui/Icons/OperatingSystem'; @@ -11,7 +12,7 @@ import { Apple, Linux, Microsoft, AIX } from '#ui/Icons/OperatingSystem'; import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5'; const osIcons = [Apple, Linux, Microsoft, AIX]; -const installMethodIcons = [Docker, Homebrew, NVM, Choco, N, Volta]; +const installMethodIcons = [Docker, Homebrew, NVM, Choco, N, VitePlus, Volta]; export const PlatformLogos: StoryObj = { render: () => ( diff --git a/packages/ui-components/src/Icons/InstallationMethod/VitePlus.tsx b/packages/ui-components/src/Icons/InstallationMethod/VitePlus.tsx new file mode 100644 index 0000000000000..e586a65cc977a --- /dev/null +++ b/packages/ui-components/src/Icons/InstallationMethod/VitePlus.tsx @@ -0,0 +1,434 @@ +import classNames from 'classnames'; + +import type { FC, SVGProps } from 'react'; + +const VitePlus: FC> = props => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); + +export default VitePlus; diff --git a/packages/ui-components/src/Icons/InstallationMethod/index.ts b/packages/ui-components/src/Icons/InstallationMethod/index.ts index 5e8bd693bb9a1..5de06821e9d99 100644 --- a/packages/ui-components/src/Icons/InstallationMethod/index.ts +++ b/packages/ui-components/src/Icons/InstallationMethod/index.ts @@ -4,6 +4,7 @@ import FNM from '#ui/Icons/InstallationMethod/FNM'; import Homebrew from '#ui/Icons/InstallationMethod/Homebrew'; import N from '#ui/Icons/InstallationMethod/N'; import NVM from '#ui/Icons/InstallationMethod/NVM'; +import VitePlus from '#ui/Icons/InstallationMethod/VitePlus'; import Volta from '#ui/Icons/InstallationMethod/Volta'; -export { Choco, Docker, FNM, Homebrew, N, NVM, Volta }; +export { Choco, Docker, FNM, Homebrew, N, NVM, VitePlus, Volta };