Peacock

Theme

Astro ​

Das @peacock/sdk-astro-Paket ist Teil des Repositories und wird mit dem Public-Launch auf npm ausgerollt. Bis dahin: CLI nutzen (npx @peacock/cli init astro) oder den manuellen REST-API-Aufruf als Fallback.

Installation ​

bash
pnpm add @peacock/sdk-astro
bash
npm install @peacock/sdk-astro
bash
yarn add @peacock/sdk-astro
bash
bun add @peacock/sdk-astro

Oder über die CLI:

bash
npx @peacock/cli init astro

Konfiguration ​

astro.config.mjs:

js
import { defineConfig } from 'astro/config';
import peacock from '@peacock/sdk-astro';

export default defineConfig({
  integrations: [
    peacock({
      api: process.env.PEACOCK_API ?? 'https://peacock-cms.webhoch.com',
      space: process.env.PEACOCK_SPACE,
      token: process.env.PEACOCK_TOKEN,
      preview: process.env.PEACOCK_PREVIEW === 'true',
    }),
  ],
});

.env:

ini
PEACOCK_API=https://peacock-cms.webhoch.com
PEACOCK_SPACE=mein-shop
PEACOCK_TOKEN=pck_read_…
PEACOCK_PREVIEW=false

Erste Seite ​

src/pages/[...slug].astro:

astro
---
import { getStory } from '@peacock/sdk-astro';
import BlockRenderer from '../components/BlockRenderer.astro';

const { slug } = Astro.params;
const story = await getStory(slug ?? 'home', {
  lang: Astro.preferredLocale ?? 'de',
});

if (!story) return Astro.redirect('/404');
---

<html lang={story.lang}>
  <head>
    <title>{story.content.seo?.title ?? story.name}</title>
    <meta name="description" content={story.content.seo?.description} />
  </head>
  <body>
    <BlockRenderer blocks={story.content.body} />
  </body>
</html>

Block-Renderer ​

src/components/BlockRenderer.astro:

astro
---
import Hero from './blocks/Hero.astro';
import TextImage from './blocks/TextImage.astro';
import FAQ from './blocks/FAQ.astro';
// …

const componentMap: Record<string, any> = {
  hero: Hero,
  textImage: TextImage,
  faq: FAQ,
};

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

{blocks.map((block: any) => {
  const Component = componentMap[block.type];
  if (!Component) return null;
  return <Component {...block} />;
})}

Live-Preview ​

Wenn ?_peacock=preview in der URL ist, lädt Peacock automatisch das Bridge-Script, das den iframe mit dem Admin synchronisiert:

astro
---
const isPreview = Astro.url.searchParams.has('_peacock');
---

{isPreview && <script src="https://unpkg.com/@peacock/sdk-astro/preview-bridge.js" />}

Manuell (via REST, ohne SDK) ​

Falls du das SDK (noch) nicht nutzen möchtest:

astro
---
const res = await fetch(
  `${import.meta.env.PEACOCK_API}/v1/cdn/stories/${Astro.params.slug}` +
    `?space=${import.meta.env.PEACOCK_SPACE}`,
  {
    headers: { Authorization: `Bearer ${import.meta.env.PEACOCK_TOKEN}` },
  },
);
const story = await res.json();
---

<!-- direkt rendern -->

Häufige Fragen ​

Wie cache ich den Content? Die CDN-API liefert ETag + Cache-Control: max-age=300. Astro respektiert das automatisch in SSR-Mode. Für statische Builds (output: 'static') hol den Content beim Build mit getStaticPaths() ab.

Wie deploye ich? Cloudflare Pages, Netlify, Vercel — alles funktioniert. Stell sicher, dass PEACOCK_API, PEACOCK_SPACE, PEACOCK_TOKEN in der Deploy-Umgebung gesetzt sind.

TypeScript-Typen? Das SDK generiert Typen aus den ComponentBlueprints deines Spaces:

bash
npx @peacock/sdk-astro generate-types

Output: src/types/peacock.d.ts.