docs: persistent package manager selection (#1257)

Co-authored-by: Michael Obubelebra Amachree <[email protected]>
Co-authored-by: AdrianGonz97 <[email protected]>

Author: 3 people

sites/docs/mdsx.config.js

@@ -169,7 +169,7 @@ export function rehypeComponentExample() {
 
 				try {
 					for (const style of styles) {
-						// @ts-expect-error - this is fine for now.
+						// @ts-expect-error - this is fine
 						const component = Index[style.name][name];
 						const src = component.files[0].replace("/lib/", "/src/lib/");
 						let sourceCode = getComponentSourceFileContent(src);

sites/docs/src/content/cli.md

@@ -3,15 +3,17 @@ title: CLI
 description: Use the CLI to add components to your project.
 ---
 
+<script>
+	import { PMExecute } from '$lib/components/docs'
+</script>
+
 ## init
 
 Use the `init` command to initialize dependencies for a new project.
 
 The `init` command installs dependencies, adds the `cn` util, configures `tailwind.config.cjs`, and creates CSS variables for the project.
 
-```bash
-npx shadcn-svelte@latest init
-```
+<PMExecute command="shadcn-svelte@latest init" />
 
 You will be asked a few questions to configure `components.json`:
 
@@ -47,9 +49,7 @@ Options:
 
 Use the `add` command to add components and dependencies to your project.
 
-```bash
-npx shadcn-svelte@latest add [component]
-```
+<PMExecute command="shadcn-svelte@latest add [component]" />
 
 You will be presented with a list of components to choose from:
 
@@ -93,9 +93,7 @@ Options:
 
 Use the `update` command to update components in your project. This will overwrite any modifications you've made to the components, so be sure to commit your changes before running this command.
 
-```bash
-npx shadcn-svelte@latest update [component]
-```
+<PMExecute command="shadcn-svelte@latest update [component]" />
 
 ### Options
 

sites/docs/src/content/components-json.md

@@ -4,7 +4,7 @@ description: Configuration for your project.
 ---
 
 <script>
-    import { Callout, ComponentPreview } from '$lib/components/docs'
+    import { Callout, ComponentPreview, PMExecute } from '$lib/components/docs'
 </script>
 
 The `components.json` file holds configuration for your project.
@@ -19,9 +19,7 @@ We use it to understand how your project is set up and how to generate component
 
 You can create a `components.json` file in your project by running the following command:
 
-```bash
-npx shadcn-svelte@latest init
-```
+<PMExecute command="shadcn-svelte@latest init" />
 
 See the [CLI section](/docs/cli) for more information.
 

sites/docs/src/content/components/accordion.md

@@ -7,7 +7,7 @@ bits: https://www.bits-ui.com/docs/components/accordion
 ---
 
 <script>
-    import { ComponentPreview, ManualInstall } from '$lib/components/docs';
+    import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs';
 </script>
 
 <ComponentPreview name="accordion-demo" class="[&_[data-melt-accordion]]:sm:max-w-[70%]">
@@ -18,17 +18,13 @@ bits: https://www.bits-ui.com/docs/components/accordion
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add accordion
-```
+<PMAddComp name="accordion" />
 
 <ManualInstall>
 
 1. Install `bits-ui`:
 
-```bash
-npm install bits-ui
-```
+<PMInstall command="bits-ui" />
 
 2. Copy and paste the component source files linked at the top of this page into your project.
 

sites/docs/src/content/components/alert-dialog.md

@@ -8,7 +8,7 @@ bits: https://www.bits-ui.com/docs/components/alert-dialog
 ---
 
 <script>
-  import { ComponentPreview, ManualInstall } from '$lib/components/docs';
+  import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs';
 </script>
 
 <ComponentPreview name="alert-dialog-demo">
@@ -19,17 +19,13 @@ bits: https://www.bits-ui.com/docs/components/alert-dialog
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add alert-dialog
-```
+<PMAddComp name="alert-dialog" />
 
 <ManualInstall>
 
 1. Install `bits-ui`:
 
-```bash
-npm install bits-ui
-```
+<PMInstall command="bits-ui" />
 
 2. Copy and paste the component source files linked at the top of this page into your project.
 

sites/docs/src/content/components/alert.md

@@ -6,7 +6,7 @@ source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/
 ---
 
 <script>
-  import { ComponentPreview, ManualInstall } from '$lib/components/docs';
+  import { ComponentPreview, ManualInstall, PMAddComp } from '$lib/components/docs';
 </script>
 
 <ComponentPreview name="alert-demo">
@@ -17,9 +17,7 @@ source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add alert
-```
+<PMAddComp name="alert" />
 
 <ManualInstall>
 

sites/docs/src/content/components/aspect-ratio.md

@@ -7,7 +7,7 @@ bits: https://www.bits-ui.com/docs/components/aspect-ratio
 ---
 
 <script>
-  import { ComponentPreview, ManualInstall } from '$lib/components/docs';
+  import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs';
 </script>
 
 <ComponentPreview name="aspect-ratio-demo">
@@ -18,17 +18,13 @@ bits: https://www.bits-ui.com/docs/components/aspect-ratio
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add aspect-ratio
-```
+<PMAddComp name="aspect-ratio" />
 
 <ManualInstall>
 
 1. Install `bits-ui`:
 
-```bash
-npm install bits-ui
-```
+<PMInstall command="bits-ui" />
 
 2. Copy and paste the component source files linked at the top of this page into your project.
 

sites/docs/src/content/components/avatar.md

@@ -7,7 +7,7 @@ bits: https://www.bits-ui.com/docs/components/avatar
 ---
 
 <script>
-  import { ComponentPreview, ManualInstall } from '$lib/components/docs';
+  import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs';
 </script>
 
 <ComponentPreview name="avatar-demo">
@@ -18,17 +18,13 @@ bits: https://www.bits-ui.com/docs/components/avatar
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add avatar
-```
+<PMAddComp name="avatar" />
 
 <ManualInstall>
 
 1. Install `bits-ui`:
 
-```bash
-npm install bits-ui
-```
+<PMInstall command="bits-ui" />
 
 2. Copy and paste the component source files linked at the top of this page into your project.
 

sites/docs/src/content/components/badge.md

@@ -6,7 +6,7 @@ source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/
 ---
 
 <script>
-  import { ComponentPreview, ManualInstall } from '$lib/components/docs';
+  import { ComponentPreview, ManualInstall, PMAddComp } from '$lib/components/docs';
   import { BadgeDemo, BadgeDestructive, BadgeOutline, BadgeSecondary } from '$lib/registry/default/example'
 </script>
 
@@ -18,9 +18,7 @@ source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add badge
-```
+<PMAddComp name="badge" />
 
 <ManualInstall>
 

sites/docs/src/content/components/breadcrumb.md

@@ -6,7 +6,7 @@ source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/
 ---
 
 <script>
-  import { ComponentPreview, ManualInstall } from '$lib/components/docs';
+  import { ComponentPreview, ManualInstall, PMAddComp } from '$lib/components/docs';
 </script>
 
 <ComponentPreview name="breadcrumb-demo">
@@ -17,9 +17,7 @@ source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add breadcrumb
-```
+<PMAddComp name="breadcrumb" />
 
 <ManualInstall>
 

sites/docs/src/content/components/button.md

@@ -8,7 +8,7 @@ bits: https://www.bits-ui.com/docs/components/button
 ---
 
 <script>
-  import { ComponentPreview, ManualInstall } from '$lib/components/docs';
+  import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs';
 </script>
 
 <ComponentPreview name="button-demo">
@@ -19,17 +19,13 @@ bits: https://www.bits-ui.com/docs/components/button
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add button
-```
+<PMAddComp name="button" />
 
 <ManualInstall>
 
 1. Install `bits-ui`:
 
-```bash
-npm install bits-ui
-```
+<PMInstall command="bits-ui" />
 
 2. Copy and paste the component source files linked at the top of this page into your project.
 

sites/docs/src/content/components/calendar.md

@@ -7,7 +7,7 @@ bits: https://www.bits-ui.com/docs/components/calendar
 ---
 
 <script>
-    import { ComponentPreview, ManualInstall, Callout } from '$lib/components/docs';
+    import { ComponentPreview, ManualInstall, Callout, PMAddComp, PMInstall } from '$lib/components/docs';
 </script>
 
 <ComponentPreview name="calendar-demo">
@@ -24,17 +24,13 @@ If you're looking for a range calendar, check out the [Range Calendar](/docs/com
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add calendar
-```
+<PMAddComp name="calendar" />
 
 <ManualInstall>
 
 1. Install `bits-ui` and `@internationalized/date`:
 
-```bash
-npm install bits-ui @internationalized/date
-```
+<PMInstall command="bits-ui @internationalized/date" />
 
 2. Copy and paste the component source files linked at the top of this page into your project.
 

sites/docs/src/content/components/card.md

@@ -6,7 +6,7 @@ source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/
 ---
 
 <script>
-  import { ComponentPreview, ManualInstall } from '$lib/components/docs';
+  import { ComponentPreview, ManualInstall, PMAddComp } from '$lib/components/docs';
 </script>
 
 <ComponentPreview name="card-with-form">
@@ -17,9 +17,7 @@ source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add card
-```
+<PMAddComp name="card" />
 
 <ManualInstall>
 

sites/docs/src/content/components/carousel.md

@@ -7,7 +7,7 @@ bits: https://www.embla-carousel.com/get-started/svelte/
 ---
 
 <script>
-  import { ComponentPreview, ManualInstall } from '$lib/components/docs';
+  import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs';
 </script>
 
 <ComponentPreview name="carousel-demo">
@@ -22,17 +22,13 @@ The carousel component is built using the [Embla Carousel](https://www.embla-car
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add carousel
-```
+<PMAddComp name="carousel" />
 
 <ManualInstall>
 
 1. Install `embla-carousel-svelte`:
 
-```bash
-npm install embla-carousel-svelte -D
-```
+<PMInstall command="embla-carousel-svelte -D" />
 
 2. Copy and paste the component source files linked at the top of this page into your project.
 

sites/docs/src/content/components/checkbox.md

@@ -7,7 +7,7 @@ bits: https://www.bits-ui.com/docs/components/checkbox
 ---
 
 <script>
-  import { ComponentPreview, ManualInstall } from '$lib/components/docs';
+  import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs';
 </script>
 
 <ComponentPreview name="checkbox-demo">
@@ -18,17 +18,13 @@ bits: https://www.bits-ui.com/docs/components/checkbox
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add checkbox
-```
+<PMAddComp name="checkbox" />
 
 <ManualInstall>
 
 1. Install `bits-ui`:
 
-```bash
-npm install bits-ui
-```
+<PMInstall command="bits-ui" />
 
 2. Copy and paste the component source files linked at the top of this page into your project.