nodejs · riosje · Mar 21, 2024
@@ -5,10 +5,12 @@ import { useContext, useEffect, useMemo } from 'react';
 import type { FC } from 'react';
 
 import Select from '@/components/Common/Select';
+import Apt from '@/components/Icons/Platform/Apt';
 import Choco from '@/components/Icons/Platform/Choco';
 import Docker from '@/components/Icons/Platform/Docker';
 import Homebrew from '@/components/Icons/Platform/Homebrew';
 import NVM from '@/components/Icons/Platform/NVM';
+import Yum from '@/components/Icons/Platform/Yum';
 import { ReleaseContext } from '@/providers/releaseProvider';
 import type { PackageManager } from '@/types/release';
 import { formatDropdownItems, platformItems } from '@/util/downloadUtils';
@@ -27,15 +29,15 @@ const PlatformDropdown: FC = () => {
     const disabledItems = [];
 
     if (os === 'WIN') {
-      disabledItems.push('BREW', 'NVM');
+      disabledItems.push('BREW', 'NVM', 'APT', 'YUM');
     }
 
     if (os === 'LINUX') {
       disabledItems.push('DOCKER', 'CHOCO');
     }
 
     if (os === 'MAC') {
-      disabledItems.push('CHOCO');
+      disabledItems.push('CHOCO', 'APT', 'YUM');
     }
 
     const releaseSupportsHomebrew = supportedHomebrewVersions.includes(
@@ -77,6 +79,8 @@ const PlatformDropdown: FC = () => {
           BREW: <Homebrew width={16} height={16} />,
           DOCKER: <Docker width={16} height={16} />,
           CHOCO: <Choco width={16} height={16} />,
+          APT: <Apt width={16} height={16} />,
+          YUM: <Yum width={16} height={16} />,
         },
         disabledItems,
       })}

@@ -0,0 +1,101 @@
+import type { FC, SVGProps } from 'react';
+
+const Apt: FC<SVGProps<SVGSVGElement>> = props => (
+  <svg
+    width="87.041"
+    height="108.445"
+    viewBox="0 0 87.041 108.445"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g>
+      <path
+        fill="#A80030"
+        d="M51.986,57.297c-1.797,0.025,0.34,0.926,2.686,1.287
+				c0.648-0.506,1.236-1.018,1.76-1.516C54.971,57.426,53.484,57.434,51.986,57.297"
+      />
+      <path
+        fill="#A80030"
+        d="M61.631,54.893c1.07-1.477,1.85-3.094,2.125-4.766c-0.24,1.192-0.887,2.221-1.496,3.307
+				c-3.359,2.115-0.316-1.256-0.002-2.537C58.646,55.443,61.762,53.623,61.631,54.893"
+      />
+      <path
+        fill="#A80030"
+        d="M65.191,45.629c0.217-3.236-0.637-2.213-0.924-0.978
+				C64.602,44.825,64.867,46.932,65.191,45.629"
+      />
+      <path
+        fill="#A80030"
+        d="M45.172,1.399c0.959,0.172,2.072,0.304,1.916,0.533
+				C48.137,1.702,48.375,1.49,45.172,1.399"
+      />
+      <path
+        fill="#A80030"
+        d="M47.088,1.932l-0.678,0.14l0.631-0.056L47.088,1.932"
+      />
+      <path
+        fill="#A80030"
+        d="M76.992,46.856c0.107,2.906-0.85,4.316-1.713,6.812l-1.553,0.776
+				c-1.271,2.468,0.123,1.567-0.787,3.53c-1.984,1.764-6.021,5.52-7.313,5.863c-0.943-0.021,0.639-1.113,0.846-1.541
+				c-2.656,1.824-2.131,2.738-6.193,3.846l-0.119-0.264c-10.018,4.713-23.934-4.627-23.751-17.371
+				c-0.107,0.809-0.304,0.607-0.526,0.934c-0.517-6.557,3.028-13.143,9.007-15.832c5.848-2.895,12.704-1.707,16.893,2.197
+				c-2.301-3.014-6.881-6.209-12.309-5.91c-5.317,0.084-10.291,3.463-11.951,7.131c-2.724,1.715-3.04,6.611-4.227,7.507
+				C31.699,56.271,36.3,61.342,44.083,67.307c1.225,0.826,0.345,0.951,0.511,1.58c-2.586-1.211-4.954-3.039-6.901-5.277
+				c1.033,1.512,2.148,2.982,3.589,4.137c-2.438-0.826-5.695-5.908-6.646-6.115c4.203,7.525,17.052,13.197,23.78,10.383
+				c-3.113,0.115-7.068,0.064-10.566-1.229c-1.469-0.756-3.467-2.322-3.11-2.615c9.182,3.43,18.667,2.598,26.612-3.771
+				c2.021-1.574,4.229-4.252,4.867-4.289c-0.961,1.445,0.164,0.695-0.574,1.971c2.014-3.248-0.875-1.322,2.082-5.609l1.092,1.504
+				c-0.406-2.696,3.348-5.97,2.967-10.234c0.861-1.304,0.961,1.403,0.047,4.403c1.268-3.328,0.334-3.863,0.66-6.609
+				c0.352,0.923,0.814,1.904,1.051,2.878c-0.826-3.216,0.848-5.416,1.262-7.285c-0.408-0.181-1.275,1.422-1.473-2.377
+				c0.029-1.65,0.459-0.865,0.625-1.271c-0.324-0.186-1.174-1.451-1.691-3.877c0.375-0.57,1.002,1.478,1.512,1.562
+				c-0.328-1.929-0.893-3.4-0.916-4.88c-1.49-3.114-0.527,0.415-1.736-1.337c-1.586-4.947,1.316-1.148,1.512-3.396
+				c2.404,3.483,3.775,8.881,4.404,11.117c-0.48-2.726-1.256-5.367-2.203-7.922c0.73,0.307-1.176-5.609,0.949-1.691
+				c-2.27-8.352-9.715-16.156-16.564-19.818c0.838,0.767,1.896,1.73,1.516,1.881c-3.406-2.028-2.807-2.186-3.295-3.043
+				c-2.775-1.129-2.957,0.091-4.795,0.002c-5.23-2.774-6.238-2.479-11.051-4.217l0.219,1.023c-3.465-1.154-4.037,0.438-7.782,0.004
+				c-0.228-0.178,1.2-0.644,2.375-0.815c-3.35,0.442-3.193-0.66-6.471,0.122c0.808-0.567,1.662-0.942,2.524-1.424
+				c-2.732,0.166-6.522,1.59-5.352,0.295c-4.456,1.988-12.37,4.779-16.811,8.943l-0.14-0.933c-2.035,2.443-8.874,7.296-9.419,10.46
+				l-0.544,0.127c-1.059,1.793-1.744,3.825-2.584,5.67c-1.385,2.36-2.03,0.908-1.833,1.278c-2.724,5.523-4.077,10.164-5.246,13.97
+				c0.833,1.245,0.02,7.495,0.335,12.497c-1.368,24.704,17.338,48.69,37.785,54.228c2.997,1.072,7.454,1.031,11.245,1.141
+				c-4.473-1.279-5.051-0.678-9.408-2.197c-3.143-1.48-3.832-3.17-6.058-5.102l0.881,1.557c-4.366-1.545-2.539-1.912-6.091-3.037
+				l0.941-1.229c-1.415-0.107-3.748-2.385-4.386-3.646l-1.548,0.061c-1.86-2.295-2.851-3.949-2.779-5.23l-0.5,0.891
+				c-0.567-0.973-6.843-8.607-3.587-6.83c-0.605-0.553-1.409-0.9-2.281-2.484l0.663-0.758c-1.567-2.016-2.884-4.6-2.784-5.461
+				c0.836,1.129,1.416,1.34,1.99,1.533c-3.957-9.818-4.179-0.541-7.176-9.994l0.634-0.051c-0.486-0.732-0.781-1.527-1.172-2.307
+				l0.276-2.75C4.667,58.121,6.719,47.409,7.13,41.534c0.285-2.389,2.378-4.932,3.97-8.92l-0.97-0.167
+				c1.854-3.234,10.586-12.988,14.63-12.486c1.959-2.461-0.389-0.009-0.772-0.629c4.303-4.453,5.656-3.146,8.56-3.947
+				c3.132-1.859-2.688,0.725-1.203-0.709c5.414-1.383,3.837-3.144,10.9-3.846c0.745,0.424-1.729,0.655-2.35,1.205
+				c4.511-2.207,14.275-1.705,20.617,1.225c7.359,3.439,15.627,13.605,15.953,23.17l0.371,0.1
+				c-0.188,3.802,0.582,8.199-0.752,12.238L76.992,46.856"
+      />
+      <path
+        fill="#A80030"
+        d="M32.372,59.764l-0.252,1.26c1.181,1.604,2.118,3.342,3.626,4.596
+				C34.661,63.502,33.855,62.627,32.372,59.764"
+      />
+      <path
+        fill="#A80030"
+        d="M35.164,59.654c-0.625-0.691-0.995-1.523-1.409-2.352
+				c0.396,1.457,1.207,2.709,1.962,3.982L35.164,59.654"
+      />
+      <path
+        fill="#A80030"
+        d="M84.568,48.916l-0.264,0.662c-0.484,3.438-1.529,6.84-3.131,9.994
+				C82.943,56.244,84.088,52.604,84.568,48.916"
+      />
+      <path
+        fill="#A80030"
+        d="M45.527,0.537C46.742,0.092,48.514,0.293,49.803,0c-1.68,0.141-3.352,0.225-5.003,0.438
+				L45.527,0.537"
+      />
+      <path
+        fill="#A80030"
+        d="M2.872,23.219c0.28,2.592-1.95,3.598,0.494,1.889
+				C4.676,22.157,2.854,24.293,2.872,23.219"
+      />
+      <path
+        fill="#A80030"
+        d="M0,35.215c0.563-1.728,0.665-2.766,0.88-3.766C-0.676,33.438,0.164,33.862,0,35.215"
+      />
+    </g>
+  </svg>
+);
+
+export default Apt;
@@ -0,0 +1,24 @@
+import type { FC, SVGProps } from 'react';
+
+const Yum: FC<SVGProps<SVGSVGElement>> = props => (
+  <svg
+    width="2500"
+    height="2500"
+    viewBox="0 0 256 256"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path d="M235.463 197.578c-4.935-1.135-10.169-1.842-15.465-1.842-9.051 0-17.286 1.566-23.366 4.092a2.061 2.061 0 0 0-1.146 1.829c0 .287.074.586.186.829.717 2.085-.465 4.345-6.343 5.639-8.718 1.913-14.222 10.907-17.375 13.898-3.698 3.51-14.14 5.669-12.57 3.577 1.229-1.637 5.931-6.744 8.791-12.264 2.557-4.932 4.834-6.333 7.97-11.039.923-1.381 4.49-6.228 5.527-10.065 1.166-3.745.772-8.441 1.22-10.374.64-2.789 3.274-8.846 3.473-12.261.114-1.937-8.071 2.755-11.955 2.755-3.884 0-7.67-2.321-11.139-2.493-4.295-.202-7.054 3.312-10.941 2.698-2.22-.35-4.086-2.304-7.966-2.452-5.521-.202-12.268 3.066-24.937 2.661-12.466-.404-23.979-15.75-25.553-18.189-1.839-2.867-4.089-2.867-6.541-.62s-5.474.485-6.336-1.021c-1.634-2.863-6.006-11.227-12.776-12.978-9.361-2.425-14.104 5.184-13.488 11.24.624 6.148 4.598 7.869 6.441 11.136 1.836 3.271 2.779 5.383 6.238 6.831 2.456 1.018 3.369 2.534 2.638 4.548-.64 1.755-3.194 2.156-4.871 2.236-3.567.169-6.067-.798-7.892-1.963-2.119-1.348-3.844-3.227-5.696-6.417-2.143-3.517-5.514-5.049-9.445-5.049-1.873 0-3.625.495-5.181 1.296-6.157 3.2-13.49 5.1-21.383 5.1l-8.899.004C2.348 156.072 0 142.312 0 128.003 0 57.307 57.31 0 128.003 0 198.696 0 256 57.307 256 128.003c0 25.651-7.545 49.543-20.537 69.575" />
+    <path
+      d="M235.463 197.575c-4.935-1.135-10.169-1.85-15.465-1.85-9.051 0-17.286 1.57-23.366 4.1a2.057 2.057 0 0 0-1.146 1.829c0 .29.074.586.186.832.717 2.082-.465 4.338-6.343 5.632-8.718 1.917-14.222 10.91-17.375 13.895-3.698 3.516-14.14 5.675-12.57 3.58 1.229-1.633 5.931-6.74 8.791-12.257 2.557-4.932 4.834-6.34 7.97-11.042.923-1.378 4.49-6.228 5.527-10.065 1.166-3.742.772-8.441 1.22-10.375.64-2.792 3.274-8.845 3.473-12.267.114-1.931-8.071 2.762-11.955 2.762-3.884 0-7.67-2.325-11.139-2.493-4.295-.202-7.054 3.311-10.941 2.701-2.22-.357-4.086-2.314-7.966-2.458-5.521-.199-12.268 3.068-24.937 2.661-12.466-.405-23.979-15.751-25.553-18.193-1.839-2.86-4.089-2.86-6.541-.613-2.452 2.246-5.474.481-6.336-1.028-1.634-2.856-6.006-11.22-12.776-12.975-9.361-2.425-14.104 5.187-13.488 11.244.624 6.147 4.598 7.869 6.441 11.136 1.836 3.271 2.779 5.379 6.238 6.824 2.456 1.024 3.369 2.537 2.638 4.555-.64 1.751-3.194 2.152-4.871 2.233-3.567.172-6.067-.799-7.892-1.957-2.119-1.358-3.844-3.231-5.696-6.424-2.143-3.517-5.514-5.056-9.445-5.056-1.873 0-3.625.502-5.181 1.3-6.157 3.21-13.49 5.107-21.383 5.107l-8.899.003C23.747 219.544 71.619 256 128.003 256c45.039 0 84.645-23.259 107.46-58.425"
+      fill="#FFF"
+    />
+    <path d="M156.194 185.839c.656.643 1.792 2.803.404 5.545-.778 1.451-1.614 2.475-3.112 3.671-1.799 1.442-5.319 3.109-10.146.047-2.597-1.647-2.752-2.199-6.336-1.734-2.56.333-3.578-2.251-2.658-4.4.92-2.142 4.702-3.877 9.405-1.121 2.112 1.243 5.413 3.863 8.3 1.542 1.195-.96 1.913-1.6 3.573-3.52a.42.42 0 0 1 .57-.03" />
+    <path
+      d="M200.232 93.945c-1.263 4.251-3.061 9.691-11.065 13.801-1.165.593-1.61-.384-1.071-1.304 3.021-5.144 3.56-6.43 4.44-8.461 1.229-2.965 1.872-7.185-.573-15.99-4.813-17.324-14.858-40.479-22.154-47.99-7.047-7.249-19.81-9.29-31.347-6.329-4.247 1.091-12.561 5.413-27.978 1.94-26.678-6.01-30.632 7.35-32.161 13.17-1.533 5.821-5.208 22.363-5.208 22.363-1.226 6.734-2.83 18.449 38.595 26.338 19.298 3.678 20.282 8.663 21.134 12.254 1.532 6.431 3.981 10.109 6.737 11.945 2.758 1.839 0 3.361-3.059 3.675-8.219.852-38.595-7.859-56.566-18.069-14.703-8.987-14.952-17.078-11.587-23.942-22.208-2.402-38.875 2.085-41.897 12.598-5.187 18.044 39.674 48.865 90.752 64.33 53.605 16.232 108.736 4.901 114.864-28.79 2.785-15.31-10.109-26.634-31.856-31.539m-82.189-32.993c-14.787 1.071-16.323 2.667-19.092 5.615-3.904 4.16-9.048-5.396-9.048-5.396-3.089-.651-6.831-5.626-4.81-10.274 1.987-4.598 5.662-3.217 6.814-1.785 1.402 1.741 4.389 4.591 8.27 4.49 3.88-.105 8.357-.92 14.602-.92 6.326 0 10.58 2.361 10.819 4.392.206 1.732-.512 3.369-7.555 3.878m15.532-24.432a.424.424 0 0 1-.068.007c-.229 0-.414-.178-.414-.391 0-.154.094-.289.233-.35 2.866-1.516 7.144-2.718 12.038-3.217a46.24 46.24 0 0 1 4.285-.242c.242 0 .485.003.731.006 8.205.186 14.774 3.446 14.676 7.283-.098 3.837-6.824 6.797-15.03 6.612-2.658-.06-5.15-.444-7.296-1.064a.566.566 0 0 1-.438-.539.56.56 0 0 1 .445-.536c5.12-1.185 8.572-3.122 8.33-4.951-.323-2.422-7.02-3.743-14.956-2.944-.869.087-1.718.198-2.536.326"
+      fill="#C00"
+    />
+  </svg>
+);
+
+export default Yum;
@@ -3,7 +3,13 @@ import type { ReactNode } from 'react';
 import type { NodeRelease } from '@/types/releases';
 import type { UserOS } from '@/types/userOS';
 
-export type PackageManager = 'NVM' | 'BREW' | 'DOCKER' | 'CHOCO';
+export type PackageManager =
+  | 'NVM'
+  | 'BREW'
+  | 'DOCKER'
+  | 'CHOCO'
+  | 'APT'
+  | 'YUM';
 
 export interface ReleaseState {
   os: UserOS;

@@ -41,6 +41,14 @@ export const platformItems = [
     label: 'Docker',
     value: 'DOCKER' as PackageManager,
   },
+  {
+    label: 'apt',
+    value: 'APT' as PackageManager,
+  },
+  {
+    label: 'yum',
+    value: 'YUM' as PackageManager,
+  },
 ];
 
 export const bitnessItems = {

@@ -10,6 +10,8 @@ export const getNodeDownloadSnippet = (release: NodeRelease, os: UserOS) => {
     BREW: '',
     DOCKER: '',
     CHOCO: '',
+    APT: '',
+    YUM: '',
   };
 
   if (os === 'LINUX' || os === 'MAC') {
@@ -36,6 +38,32 @@ export const getNodeDownloadSnippet = (release: NodeRelease, os: UserOS) => {
       # verifies the right Node.js version is in the environment
       node -v # should print \`${release.versionWithPrefix}\`
 
+      # verifies the right NPM version is in the environment
+      npm -v # should print \`${release.npm}\``;
+
+    snippets.APT = dedent`
+      # configure Node.js repository from NodeSource
+      curl -fsSL https://deb.nodesource.com/setup_${release.major}.x | bash -
+
+      # Install Node.js, replace yum with dnf if needed
+      apt-get install nodejs -y
+
+      # verifies the right Node.js version is in the environment
+      node -v # should print \`${release.versionWithPrefix}\`
+
+      # verifies the right NPM version is in the environment
+      npm -v # should print \`${release.npm}\``;
+
+    snippets.YUM = dedent`
+      # configure Node.js repository from NodeSource
+      curl -fsSL https://rpm.nodesource.com/setup_${release.major}.x | bash -
+
+      # Install Node.js, replace yum with dnf if needed
+      yum install nodejs -y
+
+      # verifies the right Node.js version is in the environment
+      node -v # should print \`${release.versionWithPrefix}\`
+
       # verifies the right NPM version is in the environment
       npm -v # should print \`${release.npm}\``;
   }