En mi caso yo decidí aprovechar otra de las caracteristicas de Astro para hacer esto mismo, y es el uso de colecciones. Esto nos permite generar un esquema con todos los atributos necesarios que deben tener los contenidos que entren dentro de la colección. Para crear nuestras colecciones debemos definir un archivo config.ts con las colecciones que usaremos:
Ejemplo
import { z, defineCollection } from 'astro:content';
const postCollection = defineCollection({
schema: z.object({
title: z.string(),
pubDate: z.string().datetime(),
description: z.string(),
image: z.string().optional(),
tags: z.array(z.string()),
}),
});
export const collections = {
'posts': postCollection,
};
Astro viene con zod, una librería que nos permite generar una validación de esquemas con TypeScript, de está forma definimos las propiedades que debe cumplir nuestra colección, que crearemos con la función defineCollection. Por último exportamos un objeto collections con nuestras colecciones. Es importante saber que debe existir una carpeta con el mismo nombre por colección creada, y en dicha carpeta se encontrarán los ficheros pertenecientes a la colección.
Para consumir dicha colección en el index.astro hacemos lo siguiente:
---
import { getCollection } from "astro:content";
import Layout from "../layouts/Layout.astro"
import Card from "../components/Card.astro"
import Header from "../components/Header.astro";
import Hero from "../components/Hero.astro";
const postEntries = await getCollection('posts');
---
<Layout title="Astro Testing">
<main>
<Header title="Astro Testing"/>
<Hero />
<ul role="list" class="link-card-grid">
{postEntries.map(post => (
<Card title={post.data.title} time={post.data.pubDate} tags={post.data.tags}/>
))}
</ul>
</main>
</Layout>
<style>
main {
margin: auto;
padding: 1.5rem;
max-width: 60ch;
}
.link-card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
gap: 1rem;
padding: 0;
}
</style>
En este caso usamos la función getCollections para obtener todos los ficheros, y accedemos a los atributos del mismo a través de la propiedad data.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?