Introducción

Este es un párrafo introductorio estándar. El propósito de este artículo es servir como banco de pruebas para el sistema de blog. Aquí verificaremos la legibilidad, el espaciado y la coherencia visual con el resto del sitio.

El diseño debe ser impecable, utilizando las variables de tokens.css y themes.css sin introducir estilos arbitrarios.

Tipografía y Jerarquía

A continuación, probamos los diferentes niveles de encabezados para asegurar una jerarquía visual clara.

Encabezado Nivel 3 (H3)

Este es un sub-apartado. Debería tener un margen superior adecuado para separarlo del contenido anterior.

Encabezado Nivel 4 (H4)

Para detalles más específicos. No debería ser mucho más grande que el texto base, pero sí destacarse por peso (bold).

Listas y Elementos

Una lista desordenada para enumerar características:

• MDX Nativo: Renderizado en el servidor con next-mdx-remote/rsc.
• Sin Runtime JS: El cliente recibe HTML puro (salvo componentes interactivos).
• Diseño Atómico: Uso de clases utilitarias del sistema existente.

Una lista ordenada para pasos secuenciales:

1. Instalar dependencias.
2. Configurar el MDXComponents.tsx.
3. Escribir contenido increíble.
4. Desplegar a producción.

Bloques de Código

El resaltado de sintaxis es crucial para un blog técnico. Usamos rehype-pretty-code para un look profesional.

// src/lib/blog.ts
import fs from 'fs';
import path from 'path';
 
interface BlogPost {
  slug: string;
  title: string;
}
 
export function getPosts(): BlogPost[] {
  // Lógica de lectura de archivos
  return [];
}

Y un poco de CSS para validar colores:

.hero-section {
  background: var(--color-background);
  color: var(--color-foreground);
  display: grid;
  place-items: center;
}

Citas y Énfasis

"El diseño no es solo lo que se ve y se siente. El diseño es cómo funciona."

— Steve Jobs

Este bloque blockquote debe tener un borde lateral (probablemente primary) y un fondo sutil (muted/30).

Elementos Multimedia

Aquí debería ir una imagen optimizada. Como estamos en MDX, usaremos el componente <Image /> de Next.js mapeado automáticamente o explícitamente.

(Espacio reservado para probar la etiqueta img estándar mapeada)

Conclusión

Si este artículo se ve bien, significa que el sistema de diseño se ha integrado exitosamente con el motor de renderizado MDX. El siguiente paso es crear contenido real.