Usando MDX
Este blog usa la integración @astrojs/mdx.
¿Por qué MDX?
MDX es una variante especial de Markdown que admite sintaxis JavaScript y JSX embebida. Esto permite mezclar JavaScript y componentes de UI en contenido Markdown para cosas como gráficos interactivos o alertas.
Ejemplo
Así es como se importa y usa un componente de UI dentro de MDX. Como puedes ver, funciona igual que en un archivo .astro. La directiva client es necesaria para que el componente sea interactivo.
import DinoGame from '@components/DinoGame/DinoGame.tsx';
<DinoGame client:idle/>Score: 0
Más enlaces
- Documentación de sintaxis MDX
- Documentación de uso en Astro
- Nota: Las directivas de cliente siguen siendo necesarias para crear componentes interactivos. De lo contrario, todos los componentes en tu MDX se renderizarán como HTML estático (sin JavaScript) por defecto.