Añadir iconos a enlaces externos

Usando un plugin de hast (EN), puedes identificar y modificar enlaces en tus archivos Markdown que apuntan a sitios externos. Este ejemplo añade un icono 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

Sätteri

1. Instala tanto @astrojs/markdown-satteri como satteri:

   npm

   npm install @astrojs/markdown-satteri satteri

   pnpm

   pnpm add @astrojs/markdown-satteri satteri

   Yarn

   yarn add @astrojs/markdown-satteri satteri

2. Crea un plugin de hast de Sätteri que añada un icono si el enlace empieza con http:

   src/hast/hast-external-links.ts

   import { defineHastPlugin } from 'satteri';
   
   export const hastExternalLinks = defineHastPlugin({
     name: "hast-external-links",
     element: {
       filter: ["a"],
       visit(node, context) {
         if (node.properties.href?.startsWith("http")) {
           context.appendChild(node, {
             type: "element",
             tagName: "span",
             properties: { ariaHidden: "true" },
             children: [
               {
                 type: "text",
                 value: "🔗",
               },
             ],
           });
         }
       },
     },
   });

3. Configura el plugin en tu archivo astro.config.mjs.

   Importa satteri() y defínelo como el procesador de Markdown (EN) para añadir plugins personalizados de Sätteri. Luego, pasa a hastPlugins un array que contenga tu plugin hastExternalLinks importado.

   astro.config.mjs

   import { satteri } from '@astrojs/markdown-satteri';
   import { defineConfig } from 'astro/config';
   import { hastExternalLinks } from './src/hast/hast-external-links';
   
   export default defineConfig({
     markdown: {
       processor: satteri({
         hastPlugins: [hastExternalLinks],
       }),
     },
   });

Unified

1. Instala tanto el plugin rehype-external-links como @astrojs/markdown-remark.

   npm

   npm install rehype-external-links @astrojs/markdown-remark

   pnpm

   pnpm add rehype-external-links @astrojs/markdown-remark

   Yarn

   yarn add rehype-external-links @astrojs/markdown-remark

2. Configura el plugin en tu archivo astro.config.mjs.

   Importa unified() y defínelo como el procesador de Markdown (EN) para dar soporte a plugins de remark. Luego, pasa a rehypePlugins un array que contenga tu plugin rehypeExternalLinks importado y un objeto de opciones con una propiedad content. Establece el type de esta propiedad en text si quieres añadir texto plano al final del enlace. Para añadir HTML al final del enlace en su lugar, establece la propiedad type en raw.

   astro.config.mjs

   import { unified } from '@astrojs/markdown-remark';
   import { defineConfig } from 'astro/config';
   import rehypeExternalLinks from 'rehype-external-links';
   
   export default defineConfig({
     markdown: {
       processor: unified({
         rehypePlugins: [
           [
             rehypeExternalLinks,
             {
               content: { type: 'text', value: ' 🔗' }
             }
           ],
         ]
       }),
     },
   });