i18n(es): Add external-links.mdx

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

@@ -0,0 +1,69 @@
+---
+title: Añadir iconos a enlaces externos
+description: Aprende a instalar un plugin de rehype para añadir iconos a enlaces externos en tus archivos Markdown.
+i18nReady: true
+type: recipe
+---
+import { Steps } from '@astrojs/starlight/components';
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
+
+Usando un plugin de rehype, puedes identificar y modificar enlaces en tus archivos Markdown que apuntan a sitios externos. Este ejemplo añade iconos al final de cada enlace externo para que los visitantes sepan que están saliendo de tu sitio.
+
+## Requisitos previos
+
+- Un proyecto Astro que use Markdown para páginas de contenido.
+
+## Receta
+
+<Steps>
+1. Instala el plugin `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. Importa el plugin en tu archivo `astro.config.mjs`.
+
+	Pasa `rehypeExternalLinks` al array `rehypePlugins`, junto con un objeto de opciones que incluya una propiedad `content`. Establece la propiedad `type` en `text` si quieres añadir texto plano al final del enlace. Para añadir HTML al final del enlace, establece la propiedad `type` en `raw`.
+
+    ```ts
+    // ...
+    import rehypeExternalLinks from 'rehype-external-links';
+
+    export default defineConfig({
+      // ...
+      markdown: {
+        rehypePlugins: [
+          [
+            rehypeExternalLinks,
+            {
+              content: { type: 'text', value: ' 🔗' }
+            }
+          ],
+        ]
+      },
+    });
+    ```
+
+    :::note
+      El valor de la propiedad `content` [no se representa en el árbol de accesibilidad](https://developer.mozilla.org/en-US/docs/Web/CSS/content#accessibility_concerns). Por ello, es mejor dejar claro en el contenido que rodea al enlace que se trata de un enlace externo, en lugar de depender solo del icono.
+    :::
+</Steps>
+
+
+## Recursos
+- [rehype-external-links](https://www.npmjs.com/package/rehype-external-links)