Docs: add n as community download option (#7498)

* Docs: add n as community download option

* Chore: add new download methods to stories

* Chore: remove inline comments per feedback

Author: shadowspawn

apps/site/snippets/en/download/n.bash

@@ -0,0 +1,8 @@
+# Download and install n and Node.js:
+curl -fsSL https://raw.githubusercontent.com/mklement0/n-install/stable/bin/n-install | bash -s ${props.release.major}
+
+# Node.js already installs during n-install, but you can also install it manually:
+#   n install ${props.release.major}
+
+# Verify the Node.js version:
+node -v # Should print "${props.release.versionWithPrefix}".

apps/site/types/release.ts

@@ -9,7 +9,8 @@ export type InstallationMethod =
   | 'BREW'
   | 'DEVBOX'
   | 'DOCKER'
-  | 'CHOCO';
+  | 'CHOCO'
+  | 'N';
 export type PackageManager = 'NPM' | 'YARN' | 'PNPM';
 
 // Items with a pipe/default value mean that they are auto inferred

apps/site/util/downloadUtils.tsx

@@ -34,6 +34,7 @@ export enum InstallationMethodLabel {
   CHOCO = 'Chocolatey',
   DEVBOX = 'Devbox',
   DOCKER = 'Docker',
+  N = 'n',
   VOLTA = 'Volta',
 }
 
@@ -210,6 +211,14 @@ export const INSTALL_METHODS: Array<
     url: 'https://docs.docker.com/get-started/get-docker/',
     info: 'layouts.download.codeBox.platformInfo.docker',
   },
+  {
+    label: InstallationMethodLabel.N,
+    value: 'N',
+    compatibility: { os: ['MAC', 'LINUX'] },
+    iconImage: <InstallMethodIcons.N width={16} height={16} />,
+    url: 'https://github.com/tj/n',
+    info: 'layouts.download.codeBox.platformInfo.n',
+  },
   {
     label: InstallationMethodLabel.VOLTA,
     value: 'VOLTA',

packages/i18n/locales/en.json

@@ -288,6 +288,7 @@
           "choco": "Chocolatey is a package manager for Windows.",
           "devbox": "Devbox creates isolated, reproducible development environments.",
           "docker": "Docker is a containerization platform.",
+          "n": "\"n\" is a cross-platform Node.js version manager.",
           "volta": "\"Volta\" is a cross-platform Node.js version manager."
         }
       }

packages/ui-components/Icons/InstallationMethod/N.tsx

@@ -0,0 +1,32 @@
+import type { FC, SVGProps } from 'react';
+
+const N: FC<SVGProps<SVGSVGElement>> = props => (
+  <svg
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <rect
+      x="0"
+      y="0"
+      width="32"
+      height="32"
+      fill="#1e1e1e"
+      stroke="#ffffff"
+      strokeWidth="2"
+      rx="5"
+    />
+    <circle cx="5" cy="5" r="2" fill="#ff5f56" />
+    <circle cx="10" cy="5" r="2" fill="#ffbd2e" />
+    <circle cx="15" cy="5" r="2" fill="#27c93f" />
+    // text with outline
+    <text x="6" y="24" fontFamily="monospace" fontSize="14" fill="#00ff00">
+      $n
+    </text>
+  </svg>
+);
+
+export default N;

packages/ui-components/Icons/InstallationMethod/index.ts

@@ -3,7 +3,8 @@ import Devbox from '@node-core/ui-components/Icons/InstallationMethod/Devbox';
 import Docker from '@node-core/ui-components/Icons/InstallationMethod/Docker';
 import FNM from '@node-core/ui-components/Icons/InstallationMethod/FNM';
 import Homebrew from '@node-core/ui-components/Icons/InstallationMethod/Homebrew';
+import N from '@node-core/ui-components/Icons/InstallationMethod/N';
 import NVM from '@node-core/ui-components/Icons/InstallationMethod/NVM';
 import Volta from '@node-core/ui-components/Icons/InstallationMethod/Volta';
 
-export { Choco, Devbox, Docker, FNM, Homebrew, NVM, Volta };
+export { Choco, Devbox, Docker, FNM, Homebrew, N, NVM, Volta };

packages/ui-components/__design__/platform-logos.stories.tsx

@@ -6,6 +6,8 @@ import {
   NVM,
   Devbox,
   Choco,
+  N,
+  Volta,
 } from '@node-core/ui-components/Icons/InstallationMethod';
 import {
   Apple,
@@ -15,7 +17,7 @@ import {
 } from '@node-core/ui-components/Icons/OperatingSystem';
 
 const osIcons = [Apple, Linux, Microsoft, AIX];
-const installMethodIcons = [Docker, Homebrew, NVM, Devbox, Choco];
+const installMethodIcons = [Docker, Homebrew, NVM, Devbox, Choco, N, Volta];
 
 export const PlatformLogos: StoryObj = {
   render: () => (