docs(website): fix dlx command (#511)

biomejs · Oct 11, 2023 · 1f66cbb · 1f66cbb
1 parent d891e9a
commit 1f66cbb
Showing 1 changed file with 33 additions and 4 deletions.
diff --git a/website/src/components/PackageManagerBiomeCommand.astro b/website/src/components/PackageManagerBiomeCommand.astro
@@ -1,7 +1,36 @@
 ---
-import PackageManagerCommand from "@src/components/PackageManagerCommand.astro"
-let {command} = Astro.props;
-command = `@biomejs/biome ${command}`;
+import InlineSVG from "@src/components/InlineSVG.astro";
+interface Props {
+	command: string,
+}
+
+const { command } = Astro.props;
+const biome = "@biomejs/biome"
 ---
+<script>
+	import "@src/frontend-scripts/package-manager-commands"
+</script>
+
+<ul class="package-manager-selector">
+	<li data-name="npm" class="active">
+		<InlineSVG src="npm" />
+		<span>npm</span>
+	</li>
+	<li data-name="yarn">
+		<InlineSVG src="yarn" />
+		<span>yarn</span>
+	</li>
+	<li data-name="pnpm">
+		<InlineSVG src="pnpm" />
+		<span>pnpm</span>
+	</li>
+	<li data-name="bun">
+		<InlineSVG src="bun" />
+		<span>bun</span>
+	</li>
+</ul>
 
-<PackageManagerCommand yarn={command} pnpm={command} npx={command} bunx={command} />
+<pre data-name="npm" class="package-manager-command language-shellsession active"><code>npx {biome} {command}</code></pre>
+<pre data-name="yarn" class="package-manager-command language-shellsession"><code>yarn dlx {biome} {command}</code></pre>
+<pre data-name="pnpm" class="package-manager-command language-shellsession"><code>pnpm dlx {biome} {command}</code></pre>
+<pre data-name="bun" class="package-manager-command language-shellsession"><code>bunx {biome} {command}</code></pre>