Page Builder
Der Page Builder ist der zentrale Bereich im Admin zum Bearbeiten von Seiteninhalten. Er zeigt die echte Seite im iframe und ermöglicht Live-Editing — Änderungen werden direkt in der Vorschau sichtbar.
Konzept: Registry + SetzKastenPage
Das Zusammenspiel basiert auf zwei Bausteinen: Die Registry mappt Section-Types auf Komponenten-Pfade, und die SetzKastenPage-Komponente rendert die Sections einer Seite automatisch in der richtigen Reihenfolge.
defineRegistry() definiert, welche Section-Types verfügbar sind. definePage() legt fest, welche Sections auf einer Seite erlaubt sind. Gleiche Types können mehrfach auf einer Seite vorkommen — mit unterschiedlichen Keys (z.B. hero und hero--about).
setzkasten.config.ts
Die zentrale Konfiguration definiert Registry und Pages. Jeder Eintrag in registry mappt einen Section-Type auf den Pfad zur Astro-Komponente. Jede Page hat ein Label und eine Liste erlaubter Section-Types.
import { defineConfig, defineRegistry, definePage } from '@setzkasten-cms/core'
export default defineConfig({
registry: defineRegistry({
hero: './src/components/HeroSection.astro',
features: './src/components/FeaturesSection.astro',
cta: './src/components/CTASection.astro',
}),
pages: {
index: definePage({ label: 'Startseite', allowedSections: ['hero', 'features', 'cta'] }),
about: definePage({ label: 'Über uns', allowedSections: ['hero', 'cta'] }),
},
// ... products, auth, storage
})SetzKastenPage in einer Astro-Seite
In der Astro-Seite wird die SetzKastenPage-Komponente eingebunden. Die componentMap übergibt die tatsächlichen Komponenten-Importe. Der pageKey referenziert die Page-Definition aus der Config.
---
import { SetzKastenPage } from '@setzkasten-cms/astro/SetzKastenPage'
import HeroSection from '../components/HeroSection.astro'
import FeaturesSection from '../components/FeaturesSection.astro'
import CTASection from '../components/CTASection.astro'
const componentMap = { hero: HeroSection, features: FeaturesSection, cta: CTASection }
---
Section-Management im Page Builder
Der Page Builder bietet eine vollständige Verwaltung aller Sections einer Seite. Jede Section wird mit einer Toolbar angezeigt, die folgende Aktionen bereitstellt:
| Aktion | Icon | Beschreibung |
|---|---|---|
| Löschen | Trash | Zwei Klicks zur Bestätigung — erster Klick zeigt Warnung, zweiter löscht |
| Duplizieren | Copy | Erstellt eine Kopie der Section. Key wird automatisch zu hero--copy |
| Hinzufügen | + | Öffnet Picker-Modal mit verfügbaren Types aus der Registry |
| Sortieren | Drag-Handle | Reihenfolge per Drag & Drop ändern |
| Ein-/Ausblenden | Auge | Section bleibt erhalten, wird aber nicht gerendert |
Page-Config JSON
Der Page Builder speichert die Konfiguration jeder Seite als JSON-Datei unter content/pages/. Hier wird festgelegt, welche Sections in welcher Reihenfolge auf der Seite erscheinen. Bei Multi-Instanzen (gleicher Type, verschiedene Keys) wird der type explizit angegeben.
{
"label": "Startseite",
"sections": [
{ "key": "hero", "enabled": true, "order": 0 },
{ "key": "features", "enabled": true, "order": 1 },
{ "key": "hero--about", "type": "hero", "enabled": true, "order": 2 }
]
}