Pustekuchen Website

Moderne, schnelle und DSGVO-konforme Website für den Elterninitiativ-Kindergarten Xanten e.V. "Pustekuchen"

Was ist anders als bei Directus?

Die Website lief ursprünglich mit einem externen Directus-Backend. Ab v3 komplettieren wir den Stack mit EmDash CMS – einem Astro-nativen Open-Source-CMS:

• Astro-native: Content-Queries direkt in Astro (loader, live collections) statt REST/GraphQL-Aufrufen über das Netz
• SQLite + lokale Medien: Datenbank und Uploads liegen dateibasiert im Projekt (data/, uploads/) – kein separater CMS-Server, kein externer Service
• Admin-Panel integriert: unter /_emdash/admin/, redaktionell bedienbar wie gewohnt
• Full Server Rendering: output: "server" – CMS-Inhalte immer aktuell geliefert, trotzdem durch Caching und Bildoptimierung blitzschnell
• Open Source, wirklich: EmDash ist Open Source und bindet die Website an keine proprietäre Einzelanbieter-Lösung – Vendor-Lock-in fällt weg
• Seeded Content: Das gesamte Content-Modell (Collections, Blöcke, Menüs) + Startinhalt liegt versioniert unter seed/seed.json – reproducible Builds inklusive

Features

• Astro CMS nativ: EmDash als Backend für einfache Content-Pflege, ohne Headless-Umweg
• Server-rendered: Node.js-Server (output: "server") mit aktuellen Inhalten – keine Build-Re-runs nötig, um neue Beiträge zu zeigen
• Catppuccin Design: Ästhetisches, kinderfreundliches Farbschema
• Responsive: Perfekt auf allen Geräten
• Barrierefrei: WCAG-konform und semantisches HTML
• SEO-optimiert: Meta-Tags, Sitemap, RSS-Feed
• Bildoptimierung: Automatische Bildkonvertierung über das EmDash-Astro-Image-Endpoint
• Open Source: MIT-Lizenz für die Website, EmDash ist komplett Open Source

Tech Stack

• Framework: Astro 7.4 – moderne SSR-Darstellung mit Node.js-Adapter
• CMS: EmDash CMS 1.x – Astro-natives Open-Source-CMS (SQLite + lokale Medien)
• Styling: Tailwind CSS 3.4 – Utility-first CSS
• Icons: Iconify – Umfangreiche Icon-Bibliothek
• Deployment: Coolify (self-hosted Docker) auf Netcup / Proxmox
• CI: Woodpecker, Renovate – siehe [.woodpecker/]

Voraussetzungen

• Node.js 22.22 oder neuer (Astro 7.4 + EmDash Minimum)
• yarn 1.x (yarn.lock ist datendefinitiv)
• Optional: direnv + Nix – dev shell via flake.nix

Installation

# Repository klonen
git clone ssh://git@100.64.0.1:2222/2tap2b/pustekuchen-emdash.git
cd pustekuchen-emdash

# Dev-Shell laden (Nix)
nix develop

# Dependencies installieren
yarn install

# Verschlüsselungs-Key generieren (einmalig, in .env)
npx emdash secrets generate --write .env

# Content-Seed anwenden (Modell + Startinhalt + Medien)
npx emdash seed seed/seed.json --database ./data/data.db --uploads-dir ./uploads

Entwicklung

# Dev-Server: http://localhost:4321  ✚  Admin-Panel: http://localhost:4321/_emdash/admin/
yarn dev

Beim ersten Admin-Zugriff durch den Setup-Wizard: Website-Titel setzen und Admin-Account anlegen (Beispielinhalt ablehnen – der Seed bringt schon echten Inhalt mit).

Build & Deployment

# Production Build (dist/server/entry.mjs + Assets)
yarn build

# Preview des Builds
yarn preview

# Docker Build (deploy-exakt, Coolify)
docker build -t pustekuchen-web .

Deployment-Ziel ist Coolify (self-hosted Docker). Wichtige Punkte:

• HOST=0.0.0.0 und Coolifys PORT respektieren
• Persistente Volumes: /app/data (SQLite) und /app/uploads (Medien) – ohne sie verschwinden redaktionelle Inhalte beim Redeploy
• EMDASH_ENCRYPTION_KEY als Env-Var in Coolify setzen (gleicher Wert wie lokal in .env)
• Healthcheck auf /healthz (Zero-Dependency-Endpoint, eingebaut im Dockerfile)

Content-Verwaltung mit EmDash

Alle Texte und Bilder, die Nicht-Entwickler*innen pflegen können, leben in EmDash; Composition, Styling und Icons bleiben im Code.

Was	Wie
Seiten (/spenden, /abc, /team, /impressionen, Startseite-Abschnitte)	EmDash pages mit layout-Blöcken (Hero, Content-Split, Feature-Grid, QR-Spenden u. v. m.)
Flache Textseiten (/impress, /privacy)	EmDash pages mit Portable-Text-content
Blog	EmDash posts inkl. Kategorien, Tags und Excerpt
Strukturdaten	Eigene Collections: gallery, speiseplan, mitarbeiter, vorstand
Navigation	EmDash Menüs primary + footer

Projektstruktur

├── astro.config.mjs        # Astro-Konfiguration (EmDash-Plugins, Server-Adapter)
├── src/
│   ├── components/         # Astro & UI Komponenten
│   │   └── cms/            # Block-Renderer (Astro) für EmDash-Layouts
│   ├── layouts/            # Seiten-Layouts
│   ├── pages/              # Routen: Home, Blog, Kategorie, [universal resolver]
│   └── utils/              # EmDash-Access-Helpers (Blog-Normalisierung)
├── seed/
│   └── seed.json           # Content-Modell + Startinhalt, versioniert
├── scripts/                # Migration (Directus-Export), Smoke-Test
├── data/                   # SQLite-DB (gitignored)
├── uploads/                # Lokale Medien (gitignored)
└── Dockerfile              # Build + Runtime (dist/server/entry.mjs)

Contribution

Beiträge sind willkommen! Ob Bug-Reports, Feature-Requests oder Pull Requests:

1. Forgejo-Account auf git.steltner.cloud anlegen
2. Fork/Feature-Branch (git checkout -b feature/AmazingFeature)
3. Commit (yarn build muss durchlaufen)
4. Push zum Branch und Pull-Request öffnen – der verify-Pipeline-Status ist der Merge-Gate

Lizenz

Dieses Projekt steht unter der MIT-Lizenz – siehe LICENSE.md für Details.

Danksagungen

• Basierend auf AstroWind
• Catppuccin für das wunderschöne Theme
• EmDash CMS für das open-source-native CMS

---

Made with ❤️ for Pustekuchen e.V.