docs(www): add bun support for installation commands (#1445)

* feat(www): add bun support for commands

* chore: remove changeset

---------

Co-authored-by: shadcn <m@shadcn.com>

apps/www/components/copy-button.tsx

@@ -151,7 +151,7 @@ export function CopyNpmCommandButton({
   }, [hasCopied])
 
   const copyCommand = React.useCallback(
-    (value: string, pm: "npm" | "pnpm" | "yarn") => {
+    (value: string, pm: "npm" | "pnpm" | "yarn" | "bun") => {
       copyToClipboardWithMeta(value, {
         name: "copy_npm_command",
         properties: {
@@ -199,6 +199,11 @@ export function CopyNpmCommandButton({
         >
           pnpm
         </DropdownMenuItem>
+        <DropdownMenuItem
+          onClick={() => copyCommand(commands.__bunCommand__, "bun")}
+        >
+          bun
+        </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
   )

apps/www/components/mdx-components.tsx

@@ -170,8 +170,9 @@ const components = {
     className,
     __rawString__,
     __npmCommand__,
-    __pnpmCommand__,
     __yarnCommand__,
+    __pnpmCommand__,
+    __bunCommand__,
     __withMeta__,
     __src__,
     __event__,
@@ -201,16 +202,20 @@ const components = {
             className={cn("absolute right-4 top-4", __withMeta__ && "top-16")}
           />
         )}
-        {__npmCommand__ && __yarnCommand__ && __pnpmCommand__ && (
-          <CopyNpmCommandButton
-            commands={{
-              __npmCommand__,
-              __pnpmCommand__,
-              __yarnCommand__,
-            }}
-            className={cn("absolute right-4 top-4", __withMeta__ && "top-16")}
-          />
-        )}
+        {__npmCommand__ &&
+          __yarnCommand__ &&
+          __pnpmCommand__ &&
+          __bunCommand__ && (
+            <CopyNpmCommandButton
+              commands={{
+                __npmCommand__,
+                __yarnCommand__,
+                __pnpmCommand__,
+                __bunCommand__,
+              }}
+              className={cn("absolute right-4 top-4", __withMeta__ && "top-16")}
+            />
+          )}
       </StyleWrapper>
     )
   },

apps/www/lib/rehype-npm-command.ts

@@ -20,6 +20,10 @@ export function rehypeNpmCommand() {
           "npm install",
           "pnpm add"
         )
+        node.properties["__bunCommand__"] = npmCommand.replace(
+          "npm install",
+          "bun add"
+        )
       }
 
       // npx create.
@@ -34,6 +38,7 @@ export function rehypeNpmCommand() {
           "npx create-",
           "pnpm create "
         )
+        node.properties["__bunCommand__"] = npmCommand.replace("npx", "bunx")
       }
 
       // npx.
@@ -48,6 +53,7 @@ export function rehypeNpmCommand() {
           "npx",
           "pnpm dlx"
         )
+        node.properties["__bunCommand__"] = npmCommand.replace("npx", "bunx")
       }
     })
   }

apps/www/types/unist.ts

@@ -27,4 +27,5 @@ export interface NpmCommands {
   __npmCommand__?: string
   __yarnCommand__?: string
   __pnpmCommand__?: string
+  __bunCommand__?: string
 }