feat: adds asdf installation instructions to downloads page

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

@@ -0,0 +1,11 @@
+# asdf has specific installation instructions for each operating system.
+# Please refer to the official documentation at https://asdf-vm.com/guide/getting-started.html.
+
+# Install the Node.js plugin
+asdf plugin add nodejs https://github.com/asdf-vm/asdf-nodejs.git
+
+# Download and install Node.js ${props.release.version}
+asdf install nodejs ${props.release.version}
+
+# Set global Node.js version to ${props.release.version}
+asdf set -u nodejs ${props.release.version}

apps/site/types/release.ts

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

apps/site/util/download/constants.json

@@ -187,6 +187,15 @@
       },
       "url": "https://github.com/tj/n",
       "info": "layouts.download.codeBox.platformInfo.n"
+    },
+    {
+      "id": "ASDF",
+      "name": "asdf",
+      "compatibility": {
+        "os": ["MAC", "LINUX"]
+      },
+      "url": "https://asdf-vm.com/guide/getting-started.html",
+      "info": "layouts.download.codeBox.platformInfo.asdf"
     }
   ],
   "packageManagers": [

apps/site/util/download/index.tsx

@@ -78,9 +78,15 @@ export const parseCompat = <
  */
 const createIcon = (
   IconModule: Record<string, ElementType>,
-  iconName: string
+  iconName?: string
 ) => {
+  if (!iconName) {
+    return undefined;
+  }
   const IconComponent = IconModule[iconName];
+  if (!IconComponent) {
+    return undefined;
+  }
   return <IconComponent width={16} height={16} />;
 };
 

packages/i18n/src/locales/en.json

@@ -388,7 +388,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.",
-          "volta": "\"Volta\" is a cross-platform Node.js version manager."
+          "volta": "\"Volta\" is a cross-platform Node.js version manager.",
+          "asdf": "\"asdf\" is a cross-platform version manager that supports multiple languages."
         }
       }
     },

packages/ui-components/src/Common/Select/index.module.css

@@ -112,12 +112,12 @@
 }
 
 .dropdown:has(.label) .text > span {
-  &:has(svg) > svg {
+  &:has(svg) {
     @apply ml-3;
   }
 
-  &:not(&:has(svg)) > span {
-    @apply ml-3;
+  &:not(:has(svg)) > span {
+    @apply ml-[2.25rem];
   }
 }