Content Collections

El problema con un blog de 50 posts

Hasta ahora, cuando teníamos contenido (lista de tareas, posts, productos) lo metíamos a mano en un array dentro del frontmatter o lo pedíamos por fetch. Para un blog real, ninguna de las dos opciones es buena:

• En un array dentro del template no escala (mezclas datos y template).
• Una API externa puede ser overkill y no aprovecha el sistema de archivos.

Astro propone una tercera vía: las Content Collections.

La idea

Pones tus posts (Markdown, MDX o JSON) dentro de src/content/<coleccion>/, defines un schema con Zod, y Astro te da una API tipada para consultarlos: getCollection, getEntry, etc.

Beneficios:

• Tus posts viven en archivos, no en una base de datos.
• TypeScript te avisa si un post no tiene title.
• Las consultas son rápidas (todo en build).

src/content/blog/
├── hola-astro.md
├── content-collections.md
└── view-transitions.md

Definir una colección

Crea src/content.config.ts (o src/content/config.ts en versiones antiguas) y define el schema:

Cuando defines la colección, Astro:

• Valida los frontmatters de todos los posts (src/content/blog/*.md) contra el schema.
• Si falta title en algún post, te lo dice.
• Genera tipos TypeScript para que el editor te autocomplete.

Los posts

Un post es un archivo Markdown con frontmatter:

Consultar la colección

Desde una página, importa getCollection o getEntry:

post.data contiene los campos validados por el schema (con tipado completo). post.id es el slug derivado del nombre del archivo.

Renderizar el contenido del post

Cada entrada expone un método render():

<Content /> te pinta el cuerpo Markdown ya renderizado, con sus headings, code blocks, etc.

Schemas avanzados con Zod

Zod te da mucho juego: refinamientos, valores por defecto, transformaciones.

Tu desafío 🚀

Tienes dos archivos:

1. src/content.config.ts
2. src/pages/blog.astro

En el config:

• Importa defineCollection y z de astro:content.
• Define una colección blog con un schema que tenga al menos title: z.string() y pubDate: z.date() (o z.coerce.date()).
• Exporta collections (un objeto con la colección).

En la página:

• Importa getCollection desde astro:content.
• Llama await getCollection("blog") y guarda el resultado.
• Recorre los posts en el <ul> mostrando {post.data.title}.

Aunque el editor no tenga posts reales, el código tiene que compilar y la consulta tiene que estar bien escrita. Cuando lleves esto a un proyecto real con archivos en src/content/blog/*.md, te aparecerán automáticamente.