[i18nIgnore] Add tab component to recipes and deploy.mdx (#5305)

Co-authored-by: Atharva Pise <[email protected]>
Co-authored-by: Sarah Rainsberger <[email protected]>

src/content/docs/de/guides/deploy.mdx

@@ -4,6 +4,7 @@ description: Wie du deine Astro-Website im Internet veröffentlichst.
 i18nReady: true
 ---
 import DeployGuidesNav from '~/components/DeployGuidesNav.astro';
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
 
 **Bist du bereit, deine Astro-Website zu erzeugen und zu veröffentlichen?**
 Folge einer unserer Anleitungen zu den verschiedenen Hosting-Anbietern, oder scrolle weiter nach unten, um allgemeine Informationen zur Veröffentlichung einer Astro-Website zu erhalten.
@@ -41,13 +42,27 @@ Manche Hosting-Anbieter stellen eine eigene Kommandozeilen­schnittstelle (CL
 
 1. Installiere die CLI deines Hosting-Anbieters global, zum Beispiel:
 
-    ```bash
-    npm install --global netlify-cli
-    ```
-
-1. Starte die CLI und folge den Anweisungen zur Authentifizierung, Einrichtung usw.
-
-1. Erzeuge deine Website und veröffentliche sie bei deinem Hosting-Anbieter.
+    <PackageManagerTabs>
+        <Fragment slot="npm">
+        ```shell
+        npm install --global netlify-cli
+        ```
+        </Fragment>
+        <Fragment slot="pnpm">
+        ```shell
+        pnpm add --global netlify-cli
+        ```
+        </Fragment>
+        <Fragment slot="yarn">
+        ```shell
+        yarn global add netlify-cli
+        ```
+        </Fragment>
+    </PackageManagerTabs>
+
+2. Starte die CLI und folge den Anweisungen zur Authentifizierung, Einrichtung usw.
+
+3. Erzeuge deine Website und veröffentliche sie bei deinem Hosting-Anbieter.
 
     Viele gängige Anbieter bauen und veröffentlichen deine Website für dich. Im Normalfall werden sie dein Projekt als Astro-Website erkennen und sollten die folgenden Konfigurationseinstellungen zum Erzeugen und Veröffentlichen festlegen (falls nicht, können diese angepasst werden):
 
@@ -60,15 +75,29 @@ Manche Hosting-Anbieter stellen eine eigene Kommandozeilen&shy;schnittstelle (CL
 
 ## Erzeuge deine Website lokal
 
-Viele Anbieter wie Netlify und Vercel erzeugen deine Website für dich und veröffentlichen das Ergebnis dann im Internet. Manche Anbieter setzen aber voraus, dass du deine Website lokal selbst erzeugst und dann entweder einen Veröffentlichungs-Befehl ausführst oder die Build-Ausgabe hochlädst. 
+Viele Anbieter wie Netlify und Vercel erzeugen deine Website für dich und veröffentlichen das Ergebnis dann im Internet. Manche Anbieter setzen aber voraus, dass du deine Website lokal selbst erzeugst und dann entweder einen Veröffentlichungs-Befehl ausführst oder die Build-Ausgabe hochlädst.
 
 Vielleicht möchtest du deine Website auch lokal erzeugen, um sie dir als Vorschau anzusehen oder mögliche Fehler und Warnungen in deiner eigenen Umgebung zu entdecken.
 
 Nutze den Befehl `npm run build`, um deine Astro-Website zu erzeugen:
 
-```bash
-npm run build
-```
+    <PackageManagerTabs>
+    <Fragment slot="npm">
+    ```shell
+    npm run build
+    ```
+    </Fragment>
+    <Fragment slot="pnpm">
+    ```shell
+    pnpm run build
+    ```
+    </Fragment>
+    <Fragment slot="yarn">
+    ```shell
+    yarn run build
+    ```
+    </Fragment>
+  </PackageManagerTabs>
 
 Die Build-Ausgabe wird standardmäßig ins Verzeichnis `dist/` geschrieben. Dieses Ziel kann über die [`outDir`-Konfigurationsoption](/de/reference/configuration-reference/#outdir) geändert werden.
 

src/content/docs/de/recipes/add-yaml-support.mdx

@@ -5,15 +5,31 @@ i18nReady: false
 type: recipe
 ---
 
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
+
 Astro baut auf Vite auf und unterstützt sowohl Vite- als auch Rollup-Plugins. Dieses Rezept verwendet ein Rollup-Plugin, um eine YAML-Datei (`.yml`) in Astro importieren zu können.
 
 ## Rezept
 
 1. Installiere `@rollup/plugin-yaml`:
 
-    ```bash
+ <PackageManagerTabs>
+    <Fragment slot="npm">
+    ```shell
     npm install @rollup/plugin-yaml --save-dev
     ```
+    </Fragment>
+    <Fragment slot="pnpm">
+    ```shell
+    pnpm add @rollup/plugin-yaml --save-dev
+    ```
+    </Fragment>
+    <Fragment slot="yarn">
+    ```shell
+    yarn add @rollup/plugin-yaml --save-dev
+    ```
+    </Fragment>
+  </PackageManagerTabs>
 
 2. Importiere das Plugin in deine `astro.config.mjs` und füge es dem Vite Plugins-Array hinzu:
 

src/content/docs/en/guides/deploy.mdx

@@ -3,7 +3,9 @@ title: Deploy your Astro Site
 description: How to deploy your Astro site to the web.
 i18nReady: true
 ---
+
 import DeployGuidesNav from '~/components/DeployGuidesNav.astro';
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
 
 **Ready to build and deploy your Astro site?** Follow one of our guides to different deployment services or scroll down for general guidance about deploying an Astro site.
 
@@ -15,7 +17,7 @@ You can build and deploy an Astro site to a number of hosts quickly using either
 
 ### Website UI
 
-A quick way to deploy your website is to connect your Astro project's online Git repository (e.g. GitHub, GitLab, Bitbucket) to a host provider and take advantage of continuous deployment using Git. 
+A quick way to deploy your website is to connect your Astro project's online Git repository (e.g. GitHub, GitLab, Bitbucket) to a host provider and take advantage of continuous deployment using Git.
 
 These host platforms automatically detect pushes to your Astro project’s source repository, build your site and deploy it to the web at a custom URL or your personal domain. Often, setting up a deployment on these platforms will follow steps something like the following:
 
@@ -41,9 +43,23 @@ Some hosts will have their own command line interface (CLI) you can install glob
 
 1. Install your host's CLI globally, for example:
 
-    ```bash
-    npm install --global netlify-cli
-    ```
+    <PackageManagerTabs>
+        <Fragment slot="npm">
+        ```shell
+        npm install --global netlify-cli
+        ```
+        </Fragment>
+        <Fragment slot="pnpm">
+        ```shell
+        pnpm add --global netlify-cli
+        ```
+        </Fragment>
+        <Fragment slot="yarn">
+        ```shell
+        yarn global add netlify-cli
+        ```
+        </Fragment>
+    </PackageManagerTabs>
 
 1. Run the CLI and follow any instructions for authorization, setup etc.
 
@@ -61,17 +77,31 @@ Some hosts will have their own command line interface (CLI) you can install glob
 
 ## Building Your Site Locally
 
-Many hosts like Netlify and Vercel will build your site for you and then publish that build output to the web. But, some sites will require you to build locally and then run a deploy command or upload your build output. 
+Many hosts like Netlify and Vercel will build your site for you and then publish that build output to the web. But, some sites will require you to build locally and then run a deploy command or upload your build output.
 
 You may also wish to build locally to preview your site, or to catch any potential errors and warnings in your own environment.
 
 Run the command `npm run build` to build your Astro site.
 
-```bash
-npm run build
-```
-
-By default, the build output will be placed at `dist/`. This location can be changed using the [`outDir` configuration option](/en/reference/configuration-reference/#outdir). 
+<PackageManagerTabs>
+      <Fragment slot="npm">
+      ```shell
+      npm run build
+      ```
+      </Fragment>
+      <Fragment slot="pnpm">
+      ```shell
+      pnpm run build
+      ```
+      </Fragment>
+      <Fragment slot="yarn">
+      ```shell
+      yarn run build
+      ```
+      </Fragment>
+  </PackageManagerTabs>
+
+By default, the build output will be placed at `dist/`. This location can be changed using the [`outDir` configuration option](/en/reference/configuration-reference/#outdir).
 
 ## Adding an Adapter for SSR
 
@@ -81,4 +111,3 @@ Before deploying your Astro site with [SSR (server-side rendering)](/en/guides/s
 - Installed the [appropriate adapter](/en/guides/server-side-rendering/) to your project dependencies (either manually, or using the adapter's `astro add` command, e.g. `npx astro add netlify`).
 - [Added the adapter](/en/reference/configuration-reference/#integrations) to your `astro.config.mjs` file's import and default export when installing manually. (The `astro add` command will take care of this step for you!)
 :::
-

src/content/docs/en/recipes/add-yaml-support.mdx

@@ -5,15 +5,32 @@ i18nReady: true
 type: recipe
 ---
 
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
+
 Astro builds on top of Vite, and supports both Vite and Rollup plugins. This recipe uses a Rollup plugin to add the ability to import a YAML (`.yml`) file in Astro.
 
 ## Recipe
 
 1. Install `@rollup/plugin-yaml`:
-    ```bash
+
+<PackageManagerTabs>
+    <Fragment slot="npm">
+    ```shell
     npm install @rollup/plugin-yaml --save-dev
     ```
-
+    </Fragment>
+    <Fragment slot="pnpm">
+    ```shell
+    pnpm add @rollup/plugin-yaml --save-dev
+    ```
+    </Fragment>
+    <Fragment slot="yarn">
+    ```shell
+    yarn add @rollup/plugin-yaml --save-dev
+    ```
+    </Fragment>
+  </PackageManagerTabs>
+
 2. Import the plugin in your `astro.config.mjs` and add it to the Vite plugins array:
 
     ```js title="astro.config.mjs" ins={2,5-7}

src/content/docs/en/recipes/external-links.mdx

@@ -5,6 +5,8 @@ i18nReady: true
 type: recipe
 ---
 
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
+
 Using a rehype plugin, you can identify and modify links in your Markdown files that point to external sites. This example adds icons to the end of each external link, so that visitors will know they are leaving your site.
 
 ## Prerequisites
@@ -14,11 +16,25 @@ Using a rehype plugin, you can identify and modify links in your Markdown files
 
 1. Install the `rehype-external-links` plugin.
 
-    ```shell
-    npm install rehype-external-links
-    ```
+    <PackageManagerTabs>
+        <Fragment slot="npm">
+        ```shell
+        npm install rehype-external-links
+        ```
+        </Fragment>
+        <Fragment slot="pnpm">
+        ```shell
+        pnpm add rehype-external-links
+        ```
+        </Fragment>
+        <Fragment slot="yarn">
+        ```shell
+        yarn add rehype-external-links
+        ```
+        </Fragment>
+      </PackageManagerTabs>
 
-2. Import the plugin into your `astro.config.mjs` file. 
+2. Import the plugin into your `astro.config.mjs` file.
 
 	Pass `rehypeExternalLinks` to the `rehypePlugins` array, along with an options object that includes a content property. Set this property's `type` to `text` if you want to add plain text to the end of the link. To add HTML to the end of the link instead, set the property `type` to	`raw`.
 

src/content/docs/es/guides/deploy.mdx

@@ -4,6 +4,7 @@ description: Cómo desplegar tu sitio Astro en la web.
 i18nReady: true
 ---
 import DeployGuidesNav from '~/components/DeployGuidesNav.astro';
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
 
 **¿Listo para construir y desplegar tu proyecto Astro?** Sigue una de nuestras guías para diferentes servicios de despliegue o desplázate hacia abajo para obtener orientación general sobre el despliegue de un proyecto de Astro.
 
@@ -41,13 +42,27 @@ Algunos hosts tendrán su propia interfaz de línea de comandos (CLI) que puedes
 
 1. Instala la CLI del host globalmente, por ejemplo:
 
-    ```bash
-    npm install --global netlify-cli
-    ```
-
-1. Ejecuta la CLI y sigue las instrucciones de autorización, configuración, etc.
-
-1. Crea tu proyecto y despliégalo en el host
+    <PackageManagerTabs>
+        <Fragment slot="npm">
+        ```shell
+        npm install --global netlify-cli
+        ```
+        </Fragment>
+        <Fragment slot="pnpm">
+        ```shell
+        pnpm add --global netlify-cli
+        ```
+        </Fragment>
+        <Fragment slot="yarn">
+        ```shell
+        yarn global add netlify-cli
+        ```
+        </Fragment>
+    </PackageManagerTabs>
+
+2. Ejecuta la CLI y sigue las instrucciones de autorización, configuración, etc.
+
+3. Crea tu proyecto y despliégalo en el host
 
     Muchos proveedores de hosting construirán y desplegarán tu proyecto por ti. Por lo general, reconocerán tu proyecto como un sitio de Astro y elegirán los ajustes de configuración apropiados para construir y desplegar como se muestra a continuación. (De lo contrario, estos ajustes se pueden cambiar).
 
@@ -67,9 +82,23 @@ También es posible que desees compilar tu proyecto localmente para obtener una
 
 Ejecuta el comando `npm run build` para construir tu proyecto Astro.
 
-```bash
-npm run build
-```
+<PackageManagerTabs>
+    <Fragment slot="npm">
+    ```shell
+    npm run build
+    ```
+    </Fragment>
+    <Fragment slot="pnpm">
+    ```shell
+    pnpm run build
+    ```
+    </Fragment>
+    <Fragment slot="yarn">
+    ```shell
+    yarn run build
+    ```
+    </Fragment>
+  </PackageManagerTabs>
 
 De forma predeterminada, el resultado de compilación se colocará en `dist/`. Esta ubicación se puede cambiar usando la [opción de configuración `outDir`](/es/reference/configuration-reference/#outdir).
 

src/content/docs/es/recipes/add-yaml-support.mdx

@@ -5,15 +5,31 @@ i18nReady: true
 type: recipe
 ---
 
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
+
 Astro esta construido sobre Vite, y soporta plugins de Vite y Rollup. Esta receta usa un plugin de Rollup para añadir la habilidad de importar un archivo YAML (`.yml`) en Astro.
 
 ## Receta
 
 1. Instala `@rollup/plugin-yaml`:
 
-    ```bash
+<PackageManagerTabs>
+    <Fragment slot="npm">
+    ```shell
     npm install @rollup/plugin-yaml --save-dev
     ```
+    </Fragment>
+    <Fragment slot="pnpm">
+    ```shell
+    pnpm add @rollup/plugin-yaml --save-dev
+    ```
+    </Fragment>
+    <Fragment slot="yarn">
+    ```shell
+    yarn add @rollup/plugin-yaml --save-dev
+    ```
+    </Fragment>
+  </PackageManagerTabs>
 
 2. Importa el plugin en tu `astro.config.mjs` y añade el arreglo de plugins de Vite: