Подключение сайта

Сайт на Astro подключается пакетом @seamlet/astro. Он добавляет предпросмотр для редактора, мост к нему и раздачу фото из CMS. Остальное — описать контент и отметить его в разметке.

1. Установить пакет

npm install @seamlet/astro @astrojs/node

Предпросмотр рисуется по запросу, поэтому сайту нужен адаптер, например @astrojs/node. Сами страницы сайта при этом могут оставаться статикой.

2. Описать контент схемой

src/schema.ts

import {
  collection,
  defineSchema,
  group,
  image,
  number,
  text,
  type ContentOf,
} from "@seamlet/astro/schema";

export const schema = defineSchema({
  hero: group({
    label: "Первый экран",
    fields: {
      title: text({ label: "Заголовок", maxLength: 60 }),
      photo: image({ label: "Фото" }),
    },
  }),
  menu: collection({
    label: "Меню",
    itemTitle: "name",
    item: {
      name: text({ label: "Название" }),
      price: number({ label: "Цена, ₽", min: 0 }),
    },
  }),
});

export type Content = ContentOf<typeof schema>;

Все типы полей и их настройки — в справочнике.

3. Назвать сайт и его страницы

src/seamlet.ts

import { defineSeamletSite } from "@seamlet/astro/site";
import HomePage from "./components/HomePage.astro";
import MenuPage from "./components/MenuPage.astro";
import { schema } from "./schema";

export default defineSeamletSite({
  id: "zerno",
  schema,
  pages: { "/": HomePage, "/menu": MenuPage },
});

• id — адрес сайта в CMS (/sites/zerno).
• pages — страницы сайта по их адресам. Каждая — компонент, который получает контент в свойстве content.

4. Добавить интеграцию

astro.config.mjs

import node from "@astrojs/node";
import seamlet from "@seamlet/astro";
import { defineConfig } from "astro/config";

export default defineConfig({
  adapter: node({ mode: "standalone" }),
  integrations: [
    seamlet({ cms: "https://cms.example.com", site: "./src/seamlet.ts" }),
  ],
});

Страницы сайта берут опубликованный контент через loadPublishedContent():

src/pages/index.astro

---
import site from "../seamlet";
import HomePage from "../components/HomePage.astro";

const content = await site.loadPublishedContent();
---

<HomePage content={content} />

Дальше — отметить в разметке, где какое поле, и указать адрес предпросмотра в настройках сайта в CMS.