Integración de MDX en Proyectos Astro: Variables en JSX

¿Cómo integrar MDX en tu proyecto Astro?

Agregar superpoderes a tus archivos Markdown es posible gracias a MDX, una tecnología que combina Markdown con JavaScript y JSX, permitiendo el uso de variables y elementos dinámicos. En este curso, aprenderás a integrar esta herramienta poderosa en tu proyecto Astro.

¿Cómo realizar la instalación de MDX con npm?

Para comenzar, es esencial instalar la integración MDX. Sigue estos pasos:

1. Detener el entorno local: Antes de realizar la instalación, mata cualquier proceso que esté ejecutando tu entorno de desarrollo local.
2. Instalación con npm: Ejecuta el siguiente comando en la terminal para instalar MDX en la versión 0.16.0:

   npm install @astrojs/mdx@0.16.0
   

3. Configurar astro.config: Abre tu editor de código y busca el archivo astro.config en tus archivos del proyecto. Agrega el soporte MDX con el siguiente código:

   import mdx from '@astrojs/mdx';
   
   export default {
     integrations: [mdx()],
   };
   

   Guarda los cambios para habilitar el soporte de archivos .mdx en tu proyecto.

¿Cómo crear y estructurar un archivo .mdx?

Con la configuración lista, es hora de crear un archivo .mdx y explorar sus posibilidades. Aquí te mostramos un ejemplo práctico:

• Navega hasta la carpeta pages de tu proyecto y crea un archivo llamado contact.mdx.

• Puedes comenzar añadiendo una lista de elementos que deseas utilizar en esta estructura. En este ejemplo, establecemos un título:

  ---
  title: "Contact"
  ---
  
  # Hello World
  

• Incluir JavaScript: Aprovecha MDX para añadir bloque de JavaScript. Por ejemplo, crea una constante date para mostrar una fecha:

  export const date = new Date('2024-05-07');
  

  Luego, muestra esa variable en tu documento:

  ### Fecha de publicación
  {date.toString()}
  

• Bloques de Código y HTML: Añade bloques de código y HTML dentro de tu archivo .mdx para enriquecer el contenido:

  ```javascript
  const date = new Date();
  

  Y también puedes añadir HTML directamente:

  <h1>Hello World</h1>
  

Estos pasos te permiten emplear tanto JavaScript como estructuras HTML dentro de tus archivos .mdx, ofreciendo una forma más dinámica y flexible de construir contenido.

¿Cómo verificar la correcta implementación?

El siguiente paso es probar que la integración de MDX ha sido exitosa:

1. Accede a tu navegador: Una vez guardado el archivo .mdx, abre tu navegador y ve al recurso recién creado. En este caso, accede a /contact en la barra de direcciones.
2. Verifica el contenido: Asegúrate de comprobar que se muestra tu título, la fecha de publicación, y las secciones de código correctamente renderizadas. Esto confirma que MDX funciona como se esperaba.

Utilizar MDX en Astro no solo enriquece el contenido que puedes crear, sino que también ofrece una interfaz elegante y adecuada para mostrar código y HTML, similar a lo que podrías encontrar en un editor de código.

Ahora, ¿por qué no capturas una pantalla de tu resultado final para compartir tus avances? Tu página de recomendaciones y tips en Astro está tomando forma y está más cerca de ser una realidad enriquecida con contenido interactivo. Sigue aprendiendo y explorando las múltiples capacidades que esta herramienta tiene para ofrecerte. ¡Nos vemos en la siguiente clase para continuar con las rutas dinámicas!