Astro x Storyblok: загрузчик контента

Мы рады объявить, что Storyblok — партнёр запуска Astro Content Layer API, нашего нового подхода к загрузке удалённых данных и данных из CMS в content collections. Storyblok — пионер headless CMS с встроенным визуальным редактором. Он позволяет маркетологам работать с контентом, не мешая командам разработки использовать современные фронтенд-технологии.

С content layer теперь можно комбинировать контент из CMS вроде Storyblok вместе с локальным Markdown и MDX из git. С загрузчиком Storyblok вы синхронизируете удалённые данные в dev и получаете автоматическое обновление при изменениях.

Using the Storyblok loader

Чтобы использовать новый загрузчик (в alpha), сначала установите пакет @storyblok/astro:

npm install @storyblok/astro@alpha

Затем импортируйте и используйте загрузчик в файле конфигурации 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,
}

И всё — дальше можно запрашивать и использовать коллекции так же, как локальные. Storyblok предоставляет StoryblokComponent, который рендерит блоки за вас. Пример использования в 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>

Подробнее — в документации Astro о content collections. Также посмотрите вчерашний deep dive по Content Layer API — как работают загрузчики и как создать свой, и GitHub-репозиторий загрузчика Storyblok в alpha для сообщений об ошибках и вклада.