MDX extiende Markdown permitiendo importar componentes .astro, .jsx o .tsx. Así puedes incrustar fechas formateadas, botones o bloques personalizados dentro del artículo.
Esta guía repasa lo esencial con ejemplos que funcionan en Diego Blog.
Ejemplo 1: componente global
Importa un componente desde @components y pásale props en el cuerpo del MDX.
import FormattedDate from "../../../components/FormattedDate.astro";
<FormattedDate date={new Date()} />Ejemplo 2: componente local
Puedes colocar componentes junto al archivo MDX e importarlos con ruta relativa.
import RelativeComponent from "./component.astro";
<RelativeComponent />Frameworks en MDX
Diego Blog es muy ligero y no trae React ni Vue por defecto. Si integras un framework con Astro, también podrás usarlo en MDX. Recuerda la directiva client para interactividad:
<ReactComponent client:load />Sin client:*, el componente se renderiza como HTML estático.