Trabajar con Markdown/MDX es difícil. Mantener datos consistentes a través de cientos o incluso miles de piezas de contenido local – publicaciones de blog, newsletters, etc. – se vuelve cada vez más difícil a medida que tu sitio crece.
El contenido es una pieza esencial de la web, así que ¿por qué estamos conformes (juego de palabras intencionado) con una experiencia de desarrollador mediocre? La misión de Astro siempre ha sido ayudar a los desarrolladores a crear sitios web rápidos y centrados en contenido… aceptar este desafío fue una decisión obvia.
Astro 2.0 introduce la Content Collections API: una nueva forma de trabajar con Markdown y MDX locales. Las content collections te ayudan a gestionar tu contenido local con seguridad de tipos integrada, lista para usar. Es nuestro lanzamiento más emocionante hasta la fecha, y está disponible para que lo pruebes hoy.
TypeScript para tu Markdown
Las content collections funcionan organizando el contenido local en “colecciones” dentro del directorio src/content del proyecto. Este es un directorio especial donde archivos Markdown y MDX similares pueden agruparse (ej: blog/, docs/, newsletter/, etc).
Las funciones de consulta integradas proporcionan sugerencias y autocompletado mientras escribes. Obten y renderiza tu contenido a HTML dentro de un componente de Astro con solo unas pocas líneas de código:
Todo dentro de una colección es seguro en tipos, incluyendo tu frontmatter. Define tu colección con un esquema opcional, y Astro se asegurará de que cada archivo tenga el frontmatter correcto con tipos TypeScript generados automáticamente para ti.
const blog = defineCollection({ schema: z.object({ // Define your expected frontmatter properties title: z.string(), // Mark certain properties as optional draft: z.boolean().optional(), // Transform datestrings to full Date objects publishDate: z.string().transform((val) => new Date(val)) // Improve SEO with descriptive warnings description: z.string().max(160, 'Short descriptions have better SEO!') // ... }),});Esta magia es gracias a Zod, una potente librería de validación para TypeScript. Usando el constructor de esquemas expresivo de Zod, puedes asegurar que propiedades importantes como title estén siempre presentes y correctamente tipadas. Cuando cometes un error, Zod proporciona mensajes de error útiles sobre todo, desde propiedades faltantes hasta sugerencias importantes de SEO.
Aprende más sobre cómo funcionan las content collections en nuestra guía de documentación.
Mejores errores para todos
Imagina que estás desarrollando tu sitio web hasta que de repente… ¡BOOM! Tu entorno de desarrollo se detiene con este error. ¿Qué pasó?
Si respondiste “un archivo aleatorio faltaba su title esperado en su frontmatter,” ¡felicidades! Eres el primer psíquico de JS del mundo. Pero si eres como el resto de nosotros, cazar este bug probablemente involucrará algunos stack-traces, prueba y error, unos cuantos console.log ruidosos, y un poco de suerte.
Ahora, veamos ese mismo error en Astro 2.0:
Lo primero que notarás es el overlay de errores rediseñado de Astro 2.0. Pero más importante aún, la información se ha vuelto mucho más detallada. El nombre exacto del archivo problemático se muestra inmediatamente. Se incluye un fragmento del archivo para ayudarte a entender el problema, junto con un enlace para abrir ese archivo directamente en tu editor de código. Como bonus, se incluyen sugerencias de documentación para ayudarte a depurar tu problema.
Empezando con Content Collections
Hay mucho más por explorar con las content collections, disponibles hoy en Astro 2.0. Puedes dirigirte a nuestra guía de content collections para empezar, y explorar nuestros starters renovados de blog, docs y portfolio para ver las content collections en acción.
También agradecemos tus comentarios mientras expandimos las características de las content collections. Agradecemos a todos los involucrados en el RFC de content collections, y te invitamos a proponer ideas futuras en nuestro nuevo roadmap público.
Un agradecimiento especial a Contentlayer y Nuxt Content por su exploración e inspiración en el espacio de contenido ♥