Website Musikwerk Stuttgart (Kirby-Prototyp)

Prototyp für die öffentliche Website des Musikwerk Stuttgart e. V. auf Basis von Kirby 5. Nachbau von musikwerk-stuttgart.de mit Startseite, Events, den Seiten unter „Mitmachen“ und „Verein“ sowie einigen Bildergalerien im Rückblick. Die Inhalte sind Beispieldaten aus der bisherigen WordPress-Seite, kein vollständiger Import.

Nicht Teil dieser Website: Webshop, Mitgliederbereich („Interner Bereich“), Ticketverkauf. Dorthin wird nur verlinkt.

Starten

Voraussetzung: PHP ab 8.2 mit gd, intl, curl und dom.

composer install    # legt auch content/ aus seed/content/ an
composer start

Website: http://localhost:8000/, Panel: http://localhost:8000/panel. Beim ersten Aufruf des Panels wird ein Konto angelegt.

Kirby ist im Testbetrieb ohne Lizenz voll nutzbar; für den öffentlichen Betrieb braucht es eine Lizenz.

Deployment (Coolify)

Ressource aus dem Git-Repository, Build Pack „Docker Compose“, Compose-Datei /compose.coolify.yaml. Domain beim Dienst web eintragen. Image: Dockerfile (PHP ≥ 8.5.12, Apache).

• Volumes: content (Inhalte) und accounts (Panel-Konten). Beim ersten Start wird content aus seed/content/ befüllt, danach nie wieder.
• Erstes Panel-Konto: KIRBY_PANEL_INSTALL=true setzen, neu starten, unter /panel das Konto anlegen, Variable wieder entfernen.
• TLS endet am Proxy; Apache wertet X-Forwarded-Proto aus.

Beispielinhalte

seed/content/ ist der Ausgangsstand der Inhalte und liegt in Git. Die Website selbst liest und schreibt content/ (nicht in Git). composer init-content (läuft auch nach composer install) kopiert den Ausgangsstand dorthin, wenn content/ fehlt oder leer ist, und lässt vorhandene Inhalte sonst in Ruhe. Zurücksetzen: content/ leeren, dann composer init-content.

Ausgangsstand neu erzeugen bzw. aktualisieren (schreibt nur in seed/content/):

composer seed                          # Beispielinhalte anlegen/aktualisieren
php scripts/seed.php --refresh         # Texte neu von der alten Seite laden
php scripts/seed.php --alle-bilder     # Galerien vollständig statt 16 Bilder

Das Skript liest die WordPress-REST-API und die Event-Seiten der alten Website, legt einen Cache unter scripts/.cache/ an und ist wiederholbar: Seiten werden aktualisiert, vorhandene Dateien nicht erneut angelegt. Texte werden bei jedem Lauf überschrieben.

Was es in WordPress nicht strukturiert gibt, steht von Hand im Skript und ist dort markiert: Probenzeiten und -orte, Leitung und Farbe der Chorgruppen, Zuordnung von Events zu Chorgruppen, die Einzeltermine des Familiensingens, die Videos im Rückblick, die Kurzbeschreibungen.

Aufbau

Pfad	Inhalt
site/blueprints/	Inhaltsmodell fürs Panel (Seiten, Dateien, gemeinsame Felder)
site/templates/	eine Vorlage je Seitentyp
site/snippets/	Seitengerüst (layout.php), Bild, Galerie, Video, Kacheln
site/plugins/musikwerk/	Seitenmodelle (Events, Galerien), Menü, Hilfsfunktionen
assets/	CSS, JavaScript, Schriften, Logo – alles lokal
scripts/	Import der Beispielinhalte aus WordPress, init-content.php
seed/content/	Ausgangsstand der Inhalte (Textdateien und Bilder)
content/	Inhalte der laufenden Website

Code, installierte Pakete, Inhalte

Was	Wo	Git
Eigener Code	site/ (ohne die Zeilen unten), assets/, scripts/, index.php	ja
Ausgangsstand der Inhalte	seed/content/	ja
Kirby und Abhängigkeiten	kirby/, vendor/ (per Composer, Versionen in composer.lock)	nein
Inhalte	content/	nein, Backup
Panel-Konten	site/accounts/	nein, Backup
Lizenz	site/config/.license	nein
Erzeugt, entbehrlich	media/, site/cache/, site/sessions/	nein

Im Betrieb sind content/ und site/accounts/ dauerhafte Volumes. Ein Deployment ersetzt nur den Code; Änderungen an seed/content/ erreichen eine laufende Website nicht. Umbenannte Vorlagen oder Felder müssen dort von Hand bzw. per Skript nachgezogen werden.

debug ist nur unter localhost an (site/config/config.localhost.php).

Inhaltsmodell

/                                   home         Startseite
├── events/                         events
│   └── <event>/                    event        ein oder mehrere Termine
├── mitmachen/                      abschnitt
│   ├── chorgruppen/                chorgruppen
│   │   └── <chorgruppe>/           chorgruppe   kinderchor, pop-chor, familiensingen, offener-chor
│   └── foerdermoeglichkeiten/      seite
├── rueckblick/                     rueckblick   nach Jahren gruppiert
│   └── <projekt>/                  projekt      Galerie und Videos
├── verein/                         abschnitt
│   ├── kuenstlerische-leitung/     leitung
│   │   └── <person>/               person       keine eigene Seite, leitet weiter
│   ├── dokumente/                  dokumente    PDFs als Struktur
│   └── impressum/                  seite
└── datenschutz/                    seite        (nicht gelistet, im Fußmenü)

Grundsätze:

• Listen erzeugt die Vorlage. Die Übersicht der Chorgruppen, die Termine, der Rückblick nach Jahren und die Leitung entstehen aus den Unterseiten. Niemand pflegt dieselbe Liste zweimal.
• Beziehungen statt Fließtext. Events und Projekte verweisen auf Chorgruppen, Chorgruppen auf ihre Leitung. Daraus entstehen auf der Chorgruppenseite „Nächste Termine“ und „Zuletzt dabei“ und auf der Leitungsseite die Zuordnung der Personen.
• Events haben Termine, nicht ein Datum. Die Struktur termine erlaubt Reihen (Familiensingen) und abgesagte Einzeltermine. Sortiert und angezeigt wird nach dem nächsten Termin, der stattfindet. Vergangene Events verschwinden von selbst aus der Übersicht.
• Galerie = Dateien mit der Vorlage galeriebild. Titelbild und Bilder im Fließtext gehören nicht dazu. Bilder werden beim Hochladen auf höchstens 2000 px verkleinert.
• Fließtext als Blöcke mit bewusst wenigen Typen (Überschrift, Text, Liste, Zitat, Bild, Video, Linie).

Navigation

Das Hauptmenü wird im Panel unter Website → Navigation gepflegt, nicht aus dem Seitenbaum erzeugt. So kann dieselbe Seite unter mehreren Punkten stehen (Fördermöglichkeiten unter Mitmachen und Verein), ein Punkt nach außen zeigen (Videos → YouTube, Shop) und jeder Hauptpunkt seine Farbe aus dem Logo bekommen. Das Fußmenü (Impressum, Datenschutz) liegt daneben.

Frontend

• Keine Ressourcen von fremden Servern: Schriften (Montserrat, AntiqueOlive), Logo und Skripte liegen unter assets/. YouTube-Videos laden erst nach einem Klick über youtube-nocookie.com. Deshalb kein Cookie-Banner.
• Eigenes, schlankes CSS statt Bootstrap. Bis 991 px Breite Burger-Menü.
• Bilder als WebP in mehreren Größen (srcset), Lightbox ohne Bibliothek.