Astro x Storyblok: Content Loader

Nos emociona anunciar que Storyblok es un socio de lanzamiento para la Content Layer API de Astro, nuestro nuevo enfoque para integrar datos remotos y de CMS en las colecciones de contenido. Storyblok es un pionero en CMS headless, con un editor visual integrado. Permite la colaboración con los equipos de marketing sin obstaculizar que los equipos de desarrollo adopten tecnologías front-end emergentes.

Con la capa de contenido ahora puedes combinar contenido de CMS como Storyblok junto con tu Markdown y MDX local respaldado por git. Con el loader de Storyblok, puedes sincronizar tus datos remotos en desarrollo y obtener actualizaciones automáticas a medida que cambian.

Usando el loader de Storyblok

Para usar el nuevo loader (en alpha), primero instala el paquete @storyblok/astro:

npm install @storyblok/astro@alpha

Luego importa y usa el loader dentro de tu archivo de configuración src/content/config.ts:

import { storyblokLoader } from "@storyblok/astro";
import { defineCollection } from "astro:content";

const storyblokCollection = defineCollection({
  loader: storyblokLoader({
    accessToken: import.meta.env.STORYBLOK_TOKEN,
    version: "published",
  }),
})

export const collections = {
  storyblok: storyblokCollection,
}

Y eso es todo, a partir de aquí puedes consultar y usar las colecciones de la misma manera que lo harías con colecciones locales. Storyblok incluye un StoryblokComponent que renderiza los bloques por ti. Aquí tienes un ejemplo de cómo podrías usarlo en una ruta spread.

---
import { getCollection } from "astro:content";
import StoryblokComponent from "@storyblok/astro/StoryblokComponent.astro";
import BaseLayout from "~/layouts/BaseLayout.astro";
import { type ISbStoryData } from "@storyblok/astro";

export async function getStaticPaths() {
  const stories = await getCollection("storyblok");

  return stories.map(({ data }: { data: ISbStoryData }) => {
    return {
      params: { slug: data.full_slug },
      props: { story: data },
    };
  });
}

interface Props {
  story: ISbStoryData;
}

const { story } = Astro.props;
---

<BaseLayout>
  <StoryblokComponent blok={story.content} />
</BaseLayout>

Consulta la documentación de Astro sobre colecciones de contenido para saber más. También revisa el análisis profundo de ayer sobre la Content Layer API para aprender cómo funcionan los loaders y cómo puedes construir el tuyo propio, y el repositorio de GitHub del loader de Storyblok en alpha para reportar problemas y contribuir.