Lemoncode TV

06. Listado de cursos (versión básica)

Vamos a mostrar en pantalla el listado de cursos disponibles, para ello usaremos los datos que hemos almacenado en nuestro headless CMS: Content Island.

🧱 Definir el modelo de datos

Primero, vamos a definir el modelo de tipo Training, que refleja que campos expone un curso en Content Island.

Una cosa interesante de Content Island es que nos puede generar automáticamente los tipos TypeScript basados en nuestro modelo de datos, vamos a la pestaña de modelo y pinchando en el icono de TypeScript de la entidad que queremos exportar, en este caso Training, nos genera el tipo que podemos copiar y pegar en nuestro proyecto.

📄 ./src/api/model.ts

import type { Media } from "@content-island/api-client";

export interface Training {
  id: string;
  title: string;
  overview: string;
  slug: string;
  thumbnail: Media;
  lessons: string[];
}

Este modelo se basa en la estructura que definimos previamente en el CMS.

Si te fijas he creado una carpeta api común para todos los modelos así como métodos que llamen a la API, esta aproximación tienen sus pros y cons, otra opción es encapsular cada modelo y sus métodos en su propia carpeta, por ejemplo trainings/trainings.model.ts y trainings/trainings.api.ts.

🔌 Crear la función de consulta a la API

Ahora definimos una función para obtener la lista de cursos desde la API de Content Island.

📄 ./src/api/trainings.api.ts

import client from "@/lib/client";
import type { Training } from "./model";

export async function getTrainings(): Promise<Training[]> {
  return await client.getContentList<Training>({ contentType: "training" });
}

🧭 Exponer el módulo (barrel)

Creamos un archivo index.ts para exponer las funciones y tipos de forma centralizada:

📄 ./src/api/index.ts

export * from "./trainings.api";
export * from "./model";

📄 Mostrar los cursos en la página principal

Editamos la página de inicio (index.astro) para traer los cursos y mostrarlos en pantalla.

📄 ./src/pages/index.astro

---
import Layout from "../layouts/Layout.astro";
+ import { getTrainings } from "@/api";

+ const trainings = await getTrainings();
---

Y en el HTML:

<Layout title="Listado de Cursos">
  <h1 class="text-2xl font-bold mb-4">Cursos Disponibles</h1>
  <ul class="space-y-4">
    {trainings.map((training) => (
      <li class="p-4 border rounded-lg">
        <h2 class="text-xl font-semibold">{training.title}</h2>
        <p>{training.overview}</p>
      </li>
    ))}
  </ul>
</Layout>

✅ Resultado

Con esto ya tenemos un listado funcional de cursos, ¡conectado directamente al CMS!
Eso sí… el diseño aún es bastante básico 😅

¿Lo dejamos bonito? En el siguiente paso aplicaremos estilos para hacer que se vea más profesional.