Cómo agregar componentes custom a nuestro blog Astro

En este artículo, quiero compartir el proceso para agregar componentes personalizados a nuestro blog creado con Astro. Esta técnica es especialmente útil si deseas extender las capacidades de tu contenido escrito en MDX, permitiéndote reutilizar bloques de código estilizados, mejorar la consistencia visual y mantener un código más limpio. Esta misma solución es la que implementé en mi blog, y ha simplificado muchísimo la personalización de mis publicaciones.

Pasos para agregar componentes custom Astro

1. Crear carpeta para nuestros componentes

El primer paso es organizar nuestro proyecto. Creamos una nueva carpeta src/components/MDX donde almacenaremos todos los componentes personalizados.

2. Crear nuestro primer componente

Dentro de la carpeta components/MDX, vamos a crear un archivo llamado Blockquote.astro con el siguiente contenido:

1
---
2
const props = Astro.props;
3
---
4
<blockquote {...props} class="p-4 rounded mb-4 bg-primary-200 border border-primary-300 dark:bg-neutral-800 dark:border-neutral-700">
5
  <slot />
6
</blockquote>
7
<style>
8
  blockquote {
9
    p:last-child {
10
      @apply mb-0;
11
    }
12
  }
13
</style>

Este componente es un ejemplo básico de un bloque de cita estilizado. Puedes personalizarlo para que se adapte a la estética de tu blog.

3. Crear un archivo index.ts en la raíz de MDX

Ahora, creamos un archivo llamado index.ts dentro de src/components/MDX con la siguiente estructura:

1
import Blockquote from './Blockquote.astro';
2
import Image from './Image.astro';
3
import Video from './Video.astro';
4

5
const mdxComponents = {
6
  blockquote: Blockquote,
7
  Video: Video,
8
  Image: Image
9
};
10

11
export default mdxComponents;

Este archivo sirve como un punto de entrada para todos los componentes personalizados que desees utilizar.

4. Actualizar el archivo que renderiza el contenido del blog

En el archivo que maneja el detalle de tus publicaciones, por ejemplo, [...slug].astro, importa los componentes desde el archivo index.ts que creamos previamente:

1
import mdxComponents from '../components/MDX';

Luego, actualiza la forma en que renderizas el contenido del blog:

1
<Content components={mdxComponents} />

Esto asegura que tus componentes personalizados estén disponibles en cualquier archivo MDX que se procese dentro de tu blog.

Conclusiones

Agregar componentes personalizados a tu blog Astro no solo mejora la estética y funcionalidad de tu contenido, sino que también simplifica el mantenimiento del código. Con esta técnica, puedes reutilizar componentes, manteniendo un diseño consistente a lo largo de tu sitio.