TEST DE SINCRONIZACIÓN: GRÁFICAS INTERACTIVAS EN MDX

Este es un post de ejemplo para verificar que el terminal soporta todo lo que un blog técnico necesita: código con resaltado de sintaxis, componentes interactivos con JavaScript, gráficas en canvas, tablas y más. Bórralo cuando publiques tu primera entrada real.

Código con resaltado de sintaxis

Los bloques de código usan Shiki con el tema Vesper (naranja sobre negro, como debe ser). Soporta cualquier lenguaje:

// El clásico: debounce sin dependencias
export function debounce(fn, delay = 300) {
  let timer = null;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

const onResize = debounce(() => {
  console.log(`viewport: ${window.innerWidth}×${window.innerHeight}`);
}, 150);

window.addEventListener('resize', onResize);

// También Go, claro
func worker(ctx context.Context, jobs <-chan Job, results chan<- Result) {
	for {
		select {
		case <-ctx.Done():
			return
		case job := <-jobs:
			results <- process(job)
		}
	}
}

El código inline también funciona: const nodes = ['alpha', 'beta', 'gamma'].

Gráficas interactivas

Las gráficas son componentes Astro con canvas y JavaScript puro — sin librerías externas. Pasa el mouse por encima para inspeccionar los valores:

VISUAL OUTPUT · HOVER PARA INSPECCIONAR

Se pueden poner varias en un mismo post, cada una con sus propios datos:

VISUAL OUTPUT · HOVER PARA INSPECCIONAR

Componentes interactivos propios

Cualquier demo con JavaScript se empaqueta como un componente .astro (markup + <script> + <style>) y se importa en el post. Este botón es un componente de ejemplo con su propia lógica:

El patrón escala a lo que sea: visualizaciones D3, simulaciones, editores embebidos. El script del componente se incluye una sola vez aunque lo uses varias veces en la página.

Todo lo demás de Markdown

“La simplicidad es un prerrequisito para la fiabilidad.” — Edsger W. Dijkstra

Las tablas funcionan:

Servicio	Runtime	Estado
ingest	Go	active
analytics	Python	active
gateway	Go	standby

Y las listas:

• Escribe los posts en src/content/blog/ como .md o .mdx
• Usa .mdx cuando necesites componentes o JS
• El frontmatter mínimo: title, description, pubDate
• Opcional: tags, episode, updatedDate, draft: true

---

Fin del test. Todos los sistemas nominales.