From a88e4f60d00f33abfe765e7f1b7a43edb5406432 Mon Sep 17 00:00:00 2001 From: Martin Porwoll Date: Mon, 1 Dec 2025 08:19:52 +0000 Subject: [PATCH] test: add E2E and integration tests with documentation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Tests: - Update frontend.e2e.spec.ts with locale testing - Add search.e2e.spec.ts for search functionality - Add i18n.int.spec.ts for localization tests - Add search.int.spec.ts for search integration - Update playwright.config.ts Documentation: - Add CLAUDE.md with project instructions - Add docs/ directory with detailed documentation - Add scripts/ for utility scripts đŸ€– Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- CLAUDE.md | 159 +++ docs/CLAUDE_PAYLOAD_CMS.md | 0 docs/INFRASTRUCTURE.md | 277 ++++ docs/PROJECT_STATUS.md | 173 +++ docs/PROMPT_CONSENT_PAYLOAD.md | 853 ++++++++++++ docs/PROMPT_PAYLOAD_API_CONFIG.md | 383 ++++++ docs/PROMPT_PHASE1_COLLECTIONS.md | 182 +++ docs/PROMPT_PHASE4_CONTENT_MIGRATION.md | 755 +++++++++++ docs/PROMPT_PRIVACY_POLICY_PAYLOAD.md | 457 +++++++ docs/PROMPT_UNIVERSAL_FEATURES_PAYLOAD.md | 1437 +++++++++++++++++++++ docs/Prompt phase2 blocks.md | 323 +++++ docs/SECURITY_FIXES.md | 733 +++++++++++ docs/anleitungen/API_ANLEITUNG.md | 550 ++++++++ docs/anleitungen/BILDOPTIMIERUNG.md | 342 +++++ docs/anleitungen/SEO_ERWEITERUNG.md | 173 +++ docs/anleitungen/TODO.md | 247 ++++ docs/anleitungen/UNIVERSAL_FEATURES.md | 405 ++++++ playwright.config.ts | 17 +- scripts/seed-content.ts | 943 ++++++++++++++ scripts/seed-pages-only.ts | 455 +++++++ tests/e2e/frontend.e2e.spec.ts | 28 +- tests/e2e/search.e2e.spec.ts | 202 +++ tests/int/i18n.int.spec.ts | 141 ++ tests/int/search.int.spec.ts | 338 +++++ 24 files changed, 9564 insertions(+), 9 deletions(-) create mode 100644 CLAUDE.md create mode 100644 docs/CLAUDE_PAYLOAD_CMS.md create mode 100644 docs/INFRASTRUCTURE.md create mode 100644 docs/PROJECT_STATUS.md create mode 100644 docs/PROMPT_CONSENT_PAYLOAD.md create mode 100644 docs/PROMPT_PAYLOAD_API_CONFIG.md create mode 100644 docs/PROMPT_PHASE1_COLLECTIONS.md create mode 100644 docs/PROMPT_PHASE4_CONTENT_MIGRATION.md create mode 100644 docs/PROMPT_PRIVACY_POLICY_PAYLOAD.md create mode 100644 docs/PROMPT_UNIVERSAL_FEATURES_PAYLOAD.md create mode 100644 docs/Prompt phase2 blocks.md create mode 100644 docs/SECURITY_FIXES.md create mode 100644 docs/anleitungen/API_ANLEITUNG.md create mode 100644 docs/anleitungen/BILDOPTIMIERUNG.md create mode 100644 docs/anleitungen/SEO_ERWEITERUNG.md create mode 100644 docs/anleitungen/TODO.md create mode 100644 docs/anleitungen/UNIVERSAL_FEATURES.md create mode 100644 scripts/seed-content.ts create mode 100644 scripts/seed-pages-only.ts create mode 100644 tests/e2e/search.e2e.spec.ts create mode 100644 tests/int/i18n.int.spec.ts create mode 100644 tests/int/search.int.spec.ts diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 0000000..c9255e3 --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,159 @@ +# Payload CMS Multi-Tenant Project + +## ProjektĂŒbersicht + +Multi-Tenant CMS fĂŒr 4 Websites unter einer Payload CMS 3.x Instanz: + +- porwoll.de +- complexcaresolutions.de +- gunshin.de +- zweitmein.ng + +## Tech Stack + +- **CMS:** Payload CMS 3.x +- **Framework:** Next.js 15.4.7 +- **Sprache:** TypeScript +- **Datenbank:** PostgreSQL 17 (separater Server) +- **Reverse Proxy:** Caddy 2.10.2 mit Let's Encrypt +- **Process Manager:** PM2 +- **Package Manager:** pnpm + +## Architektur + +``` +Internet → 37.24.237.181 → Caddy (443) → Payload (3000) + ↓ + PostgreSQL (10.10.181.101:5432) +``` + +| Server | IP | Funktion | +| --------------------- | ------------- | ---------- | +| sv-payload (LXC 700) | 10.10.181.100 | App Server | +| sv-postgres (LXC 701) | 10.10.181.101 | Datenbank | + +## Wichtige Pfade + +``` +/home/payload/payload-cms/ # Projektroot +├── src/ +│ ├── payload.config.ts # Haupt-Konfiguration +│ └── collections/ +│ ├── Users.ts +│ ├── Media.ts +│ └── Tenants.ts +├── .env # Umgebungsvariablen +├── ecosystem.config.cjs # PM2 Config +└── .next/ # Build Output +``` + +## Umgebungsvariablen (.env) + +```env +DATABASE_URI=postgresql://payload:Finden55@10.10.181.101:5432/payload_db +PAYLOAD_SECRET=a53b254070d3fffd2b5cfcc3 +PAYLOAD_PUBLIC_SERVER_URL=https://pl.c2sgmbh.de +NEXT_PUBLIC_SERVER_URL=https://pl.c2sgmbh.de +NODE_ENV=production +PORT=3000 +``` + +## Multi-Tenant Plugin + +Verwendet `@payloadcms/plugin-multi-tenant` fĂŒr MandantenfĂ€higkeit. + +**Aktuelle Tenants:** +| ID | Name | Slug | +|----|------|------| +| 1 | porwoll.de | porwoll | +| 4 | Complex Care Solutions GmbH | c2s | +| 5 | Gunshin | gunshin | + +**User-Tenant-Zuweisung:** Tabelle `users_tenants` + +## Wichtige Befehle + +```bash +# Entwicklung +pnpm dev + +# Production Build +pnpm build + +# Migrationen +pnpm payload migrate:create +pnpm payload migrate + +# ImportMap nach Plugin-Änderungen +pnpm payload generate:importmap + +# PM2 +pm2 status +pm2 logs payload +pm2 restart payload + +# Datenbank prĂŒfen +PGPASSWORD=Finden55 psql -h 10.10.181.101 -U payload -d payload_db +``` + +## Workflow nach Code-Änderungen + +1. Code Ă€ndern +2. `pnpm build` +3. `pm2 restart payload` +4. Testen unter https://pl.c2sgmbh.de/admin + +## Bekannte Besonderheiten + +- **ES Modules:** package.json hat `"type": "module"`, daher PM2 Config als `.cjs` +- **Plugin ImportMap:** Nach Plugin-Änderungen `pnpm payload generate:importmap` ausfĂŒhren +- **User-Tenant-Zuweisung:** Neue User mĂŒssen manuell Tenants zugewiesen bekommen + +## Build-Konfiguration + +Der Build ist fĂŒr speichereffizientes Kompilieren optimiert: + +- `package.json`: `--max-old-space-size=2048` (2GB Heap-Limit) +- `next.config.mjs`: `experimental.cpus: 1`, `workerThreads: false` + +**WICHTIG:** Der Server hat nur 4GB RAM ohne Swap. Bei laufendem VS Code Server muss der Build mit reduziertem Memory ausgefĂŒhrt werden: + +```bash +pm2 stop payload # Speicher freigeben +NODE_OPTIONS="--no-deprecation --max-old-space-size=1024" ./node_modules/.bin/next build +pm2 start payload +``` + +Ohne PM2-Stop und mit VS Code wird der Build vom OOM Killer beendet (Exit code 137). + +## Mehrsprachigkeit (i18n) + +Das System unterstĂŒtzt Deutsch (default) und Englisch: + +- **Admin UI:** `@payloadcms/translations` fĂŒr DE/EN +- **Content:** Localization mit Fallback auf Deutsch +- **Datenbank:** 36 `_locales` Tabellen fĂŒr lokalisierte Felder +- **API:** `?locale=de` oder `?locale=en` Parameter +- **Frontend:** Routing ĂŒber `/[locale]/...` + +```bash +# Locales in der Datenbank prĂŒfen +PGPASSWORD=Finden55 psql -h 10.10.181.101 -U payload -d payload_db -c "\dt *_locales" +``` + +## URLs + +- **Admin Panel:** https://pl.c2sgmbh.de/admin +- **API:** https://pl.c2sgmbh.de/api + +## Datenbank-Direktzugriff + +````bash +PGPASSWORD=Finden55 psql -h 10.10.181.101 -U payload -d payload_db + +# NĂŒtzliche Queries +SELECT * FROM tenants; +SELECT * FROM users_tenants; +\dt -- Alle Tabellen +```All +```` diff --git a/docs/CLAUDE_PAYLOAD_CMS.md b/docs/CLAUDE_PAYLOAD_CMS.md new file mode 100644 index 0000000..e69de29 diff --git a/docs/INFRASTRUCTURE.md b/docs/INFRASTRUCTURE.md new file mode 100644 index 0000000..deb1ef2 --- /dev/null +++ b/docs/INFRASTRUCTURE.md @@ -0,0 +1,277 @@ +# Payload CMS Multi-Tenant Infrastructure + +## Übersicht + +Diese Dokumentation beschreibt die Infrastruktur eines Payload CMS 3.x Multi-Tenant-Systems fĂŒr den Betrieb mehrerer Websites unter einer zentralen CMS-Instanz. + +## Architektur + +``` +┌─────────────────────────────────────────────────────────────────┐ +│ INTERNET │ +│ │ │ +│ 37.24.237.181 (Public IP) │ +│ │ │ +│ NAT (Proxmox) │ +│ Port 80, 443 │ +└────────────────────────────┌────────────────────────────────────┘ + │ +┌────────────────────────────┌────────────────────────────────────┐ +│ VLAN 181 │ +│ 10.10.181.0/24 │ +│ │ │ +│ ┌───────────────────────┮───────────────────────┐ │ +│ │ │ │ +│ â–Œ â–Œ │ +│ ┌─────────────────────┐ ┌─────────────────────┐ │ +│ │ LXC 700 │ │ LXC 701 │ │ +│ │ sv-payload │ │ sv-postgres │ │ +│ │ 10.10.181.100 │────────────────▶│ 10.10.181.101 │ │ +│ │ │ Port 5432 │ │ │ +│ │ - Caddy (80/443) │ │ - PostgreSQL 17 │ │ +│ │ - Node.js 22 │ │ │ │ +│ │ - Payload CMS │ │ │ │ +│ │ - PM2 │ │ │ │ +│ └─────────────────────┘ └─────────────────────┘ │ +└─────────────────────────────────────────────────────────────────┘ +``` + +## Server-Details + +### LXC 700 - sv-payload (Application Server) + +| Eigenschaft | Wert | +|-------------|------| +| IP | 10.10.181.100 | +| Öffentlich | 37.24.237.181 (via NAT) | +| OS | Debian 13 (Trixie) | +| CPU | 4 Cores | +| RAM | 4 GB | +| Disk | 40 GB | +| Domain | pl.c2sgmbh.de | + +**Installierte Software:** +- Node.js 22 LTS (via NodeSource) +- pnpm (Package Manager) +- Caddy 2.10.2 (Reverse Proxy mit automatischem SSL) +- PM2 (Process Manager) +- Payload CMS 3.x mit Next.js 15.4.7 + +**Dienste:** +- Caddy lĂ€uft als systemd service auf Port 80/443 +- Payload lĂ€uft via PM2 auf Port 3000 + +### LXC 701 - sv-postgres (Database Server) + +| Eigenschaft | Wert | +|-------------|------| +| IP | 10.10.181.101 | +| Öffentlich | Nein (nur intern) | +| OS | Debian 13 (Trixie) | +| CPU | 2 Cores | +| RAM | 2 GB | +| Disk | 20 GB | + +**Datenbank:** +- PostgreSQL 17 +- Database: payload_db +- User: payload +- Passwort: Finden55 +- Nur erreichbar von 10.10.181.100 + +## Verzeichnisstruktur auf sv-payload + +``` +/home/payload/ +├── payload-cms/ # Hauptanwendung +│ ├── src/ +│ │ ├── collections/ +│ │ │ ├── Users.ts +│ │ │ ├── Media.ts +│ │ │ └── Tenants.ts +│ │ ├── payload.config.ts +│ │ └── payload-types.ts +│ ├── .env # Umgebungsvariablen +│ ├── ecosystem.config.cjs # PM2 Konfiguration +│ ├── package.json +│ └── .next/ # Next.js Build Output +├── logs/ +│ ├── error-0.log +│ └── out-0.log +└── ecosystem.config.cjs # PM2 Config (Symlink) +``` + +## Konfigurationsdateien + +### .env (/home/payload/payload-cms/.env) + +```env +DATABASE_URI=postgresql://payload:Finden55@10.10.181.101:5432/payload_db +PAYLOAD_SECRET=a53b254070d3fffd2b5cfcc3 +PAYLOAD_PUBLIC_SERVER_URL=https://pl.c2sgmbh.de +NEXT_PUBLIC_SERVER_URL=https://pl.c2sgmbh.de +NODE_ENV=production +PORT=3000 +``` + +### Caddyfile (/etc/caddy/Caddyfile) + +```caddyfile +{ + email deine-email@c2sgmbh.de +} + +pl.c2sgmbh.de { + reverse_proxy localhost:3000 + + request_body { + max_size 100MB + } + + header { + X-Content-Type-Options nosniff + X-Frame-Options SAMEORIGIN + -Server + } + + encode gzip zstd +} +``` + +### PM2 Konfiguration (/home/payload/payload-cms/ecosystem.config.cjs) + +```javascript +module.exports = { + apps: [{ + name: 'payload', + cwd: '/home/payload/payload-cms', + script: 'pnpm', + args: 'start', + env: { + NODE_ENV: 'production', + PORT: 3000 + }, + instances: 1, + autorestart: true, + max_memory_restart: '1G', + error_file: '/home/payload/logs/error.log', + out_file: '/home/payload/logs/out.log' + }] +} +``` + +## Multi-Tenant Konzept + +Das System verwendet `@payloadcms/plugin-multi-tenant` fĂŒr die MandantenfĂ€higkeit. + +### Tenants (Mandanten) + +Jeder Tenant reprĂ€sentiert eine separate Website: + +| Tenant | Slug | Domains | +|--------|------|---------| +| porwoll.de | porwoll | porwoll.de, www.porwoll.de | +| Complex Care Solutions GmbH | c2s | complexcaresolutions.de | +| Gunshin | gunshin | gunshin.de | +| Zweitmeinung | zweitmeinung | zweitmein.ng | + +### Datenisolation + +- Jeder Content (Media, Pages, Posts etc.) gehört zu genau einem Tenant +- User werden Tenants zugewiesen und sehen nur deren Inhalte +- Die Domain-Erkennung erfolgt automatisch durch das Plugin + +### Datenbank-Tabellen + +``` +tenants - Mandanten-Stammdaten +tenants_domains - Domain-Zuordnungen +users_tenants - User-Mandanten-Beziehung (N:M) +``` + +## Netzwerk & Firewall + +### UFW Regeln auf sv-payload + +```bash +22/tcp ALLOW 10.10.181.0/24 # SSH aus VLAN +80/tcp ALLOW Anywhere # HTTP (ACME) +443/tcp ALLOW Anywhere # HTTPS +``` + +### UFW Regeln auf sv-postgres + +```bash +22/tcp ALLOW 10.10.181.0/24 # SSH aus VLAN +5432/tcp ALLOW 10.10.181.100 # PostgreSQL nur von Payload +``` + +## DSGVO-KonformitĂ€t + +Die Architektur wurde bewusst ohne Cloudflare designed: +- Keine US-Dienste im Datenpfad fĂŒr Admin-Zugriffe +- Direkte öffentliche IP statt Proxy +- Keine Auftragsverarbeiter-VertrĂ€ge fĂŒr CDN nötig +- Redakteur-IPs und Sessions bleiben in DE + +## Wichtige Befehle + +### Payload Management + +```bash +# Als payload User +su - payload +cd ~/payload-cms + +# Entwicklung +pnpm dev + +# Build fĂŒr Production +pnpm build + +# Migrationen +pnpm payload migrate:create +pnpm payload migrate + +# ImportMap generieren (nach Plugin-Änderungen) +pnpm payload generate:importmap +``` + +### PM2 Management + +```bash +pm2 status +pm2 logs payload +pm2 restart payload +pm2 stop payload +pm2 start ecosystem.config.cjs +``` + +### Caddy Management + +```bash +sudo systemctl status caddy +sudo systemctl restart caddy +sudo caddy validate --config /etc/caddy/Caddyfile +``` + +### Datenbank + +```bash +# Von sv-payload aus +PGPASSWORD=Finden55 psql -h 10.10.181.101 -U payload -d payload_db + +# Tabellen anzeigen +\dt + +# Tenants abfragen +SELECT * FROM tenants; +SELECT * FROM users_tenants; +``` + +## Zugriff + +- **Admin Panel**: https://pl.c2sgmbh.de/admin +- **API**: https://pl.c2sgmbh.de/api +- **SSH Payload Server**: ssh root@10.10.181.100 (aus VLAN 181) +- **SSH Postgres Server**: ssh root@10.10.181.101 (aus VLAN 181) diff --git a/docs/PROJECT_STATUS.md b/docs/PROJECT_STATUS.md new file mode 100644 index 0000000..ffd63b7 --- /dev/null +++ b/docs/PROJECT_STATUS.md @@ -0,0 +1,173 @@ +# Payload CMS Multi-Tenant - Projektstatus + +**Stand:** 26. November 2025, 21:00 Uhr + +## Zusammenfassung + +Das Payload CMS Multi-Tenant-System ist funktionsfĂ€hig installiert und lĂ€uft. Das Admin-Panel ist erreichbar unter https://pl.c2sgmbh.de/admin + +## ✅ Abgeschlossen + +### Infrastruktur +- [x] LXC Container 700 (sv-payload) erstellt und konfiguriert +- [x] LXC Container 701 (sv-postgres) erstellt und konfiguriert +- [x] Netzwerk VLAN 181 eingerichtet +- [x] NAT-Regel fĂŒr öffentliche IP 37.24.237.181 konfiguriert +- [x] DNS pl.c2sgmbh.de → 37.24.237.181 (ohne Cloudflare) + +### PostgreSQL 17 +- [x] Installation auf sv-postgres +- [x] Datenbank payload_db erstellt +- [x] User payload mit Passwort konfiguriert +- [x] Remote-Zugriff nur von 10.10.181.100 erlaubt +- [x] Firewall konfiguriert + +### Payload CMS +- [x] Node.js 22 LTS installiert +- [x] pnpm installiert +- [x] Payload CMS 3.x mit blank Template erstellt +- [x] PostgreSQL-Adapter konfiguriert +- [x] Umgebungsvariablen gesetzt +- [x] Datenbank-Migrationen ausgefĂŒhrt +- [x] Production Build erstellt + +### Caddy Reverse Proxy +- [x] Caddy 2.10.2 installiert +- [x] Let's Encrypt SSL-Zertifikat automatisch geholt +- [x] Reverse Proxy zu localhost:3000 konfiguriert +- [x] Security Headers gesetzt +- [x] Gzip/Zstd Kompression aktiviert + +### PM2 Process Management +- [x] PM2 installiert +- [x] ecosystem.config.cjs konfiguriert (als CommonJS wegen ES Module) +- [x] Autostart bei Systemboot eingerichtet +- [x] Logging konfiguriert + +### Multi-Tenant Plugin +- [x] @payloadcms/plugin-multi-tenant 3.65.0 installiert +- [x] Plugin in payload.config.ts konfiguriert +- [x] Tenants Collection erstellt +- [x] ImportMap generiert +- [x] Build mit Plugin erfolgreich + +## 📊 Aktuelle Daten + +### Tenants + +| ID | Name | Slug | Status | +|----|------|------|--------| +| 1 | porwoll.de | porwoll | ✅ Angelegt | +| 4 | Complex Care Solutions GmbH | c2s | ✅ Angelegt | +| 5 | Gunshin | gunshin | ✅ Angelegt | +| - | Zweitmeinung | zweitmeinung | ⏳ Noch anzulegen | + +### Users + +| ID | Email | Tenants | +|----|-------|---------| +| 1 | martin.porwoll@complexcaresolutions.de | porwoll, c2s, gunshin | + +### Datenbank-Status + +```sql +-- Tenants +SELECT id, name, slug FROM tenants; +-- Ergebnis: 3 Tenants (IDs 1, 4, 5) + +-- User-Tenant-Zuordnung +SELECT * FROM users_tenants; +-- Ergebnis: User 1 ist Tenants 1, 4, 5 zugeordnet +``` + +## ⚠ Bekannte Probleme + +### 1. Tenant-Anzeige im Admin +**Problem:** In der Tenants-Übersicht wird nur der erste Tenant (porwoll.de) angezeigt, obwohl alle drei in der Datenbank existieren und dem User zugeordnet sind. + +**Mögliche Ursachen:** +- Session/Cache-Problem +- Plugin-Filter-Logik + +**Workaround:** Ausloggen und neu einloggen, Hard-Refresh (Ctrl+Shift+R) + +### 2. Manuelle User-Tenant-Zuweisung +**Problem:** Bei der initialen Installation musste die User-Tenant-Beziehung manuell per SQL erstellt werden. + +**Lösung fĂŒr neue User:** Im Admin unter Users → [User] → Tenants-Feld sollte die Zuweisung möglich sein. + +## 🔜 NĂ€chste Schritte + +### Kurzfristig +1. [ ] Vierten Tenant "Zweitmeinung" anlegen (slug: zweitmeinung) +2. [ ] Tenant-Anzeige-Problem debuggen +3. [ ] Domains zu Tenants hinzufĂŒgen +4. [ ] Claude Code CLI auf sv-payload installieren + +### Mittelfristig +5. [ ] Content Collections erstellen (Pages, Posts, etc.) +6. [ ] Frontend Next.js Apps fĂŒr jede Domain aufsetzen +7. [ ] Media Upload testen +8. [ ] Backup-Strategie implementieren + +### Langfristig +9. [ ] Email-Adapter konfigurieren (aktuell: Console-Output) +10. [ ] Weitere Redakteur-Accounts anlegen +11. [ ] Monitoring einrichten +12. [ ] CI/CD Pipeline aufsetzen + +## 📁 Wichtige Dateien + +``` +/home/payload/payload-cms/ +├── src/payload.config.ts # Haupt-Konfiguration +├── src/collections/ +│ ├── Users.ts +│ ├── Media.ts +│ └── Tenants.ts +├── .env # Umgebungsvariablen +└── ecosystem.config.cjs # PM2 Config + +/etc/caddy/Caddyfile # Reverse Proxy Config +/var/log/caddy/ # Caddy Logs +/home/payload/logs/ # PM2/Payload Logs +``` + +## 🔧 Schnellbefehle + +```bash +# Status prĂŒfen +pm2 status +pm2 logs payload --lines 20 + +# Neustart nach Änderungen +cd /home/payload/payload-cms +pnpm build +pm2 restart payload + +# Datenbank prĂŒfen +PGPASSWORD=Finden55 psql -h 10.10.181.101 -U payload -d payload_db -c "SELECT * FROM tenants;" + +# Caddy neu laden +sudo systemctl reload caddy +``` + +## 📞 Zugangsdaten + +| Service | URL/Host | Credentials | +|---------|----------|-------------| +| Admin Panel | https://pl.c2sgmbh.de/admin | martin.porwoll@complexcaresolutions.de | +| PostgreSQL | 10.10.181.101:5432 | payload / Finden55 | +| SSH sv-payload | 10.10.181.100 | root | +| SSH sv-postgres | 10.10.181.101 | root | + +## 📝 Änderungsprotokoll + +### 26.11.2025 +- Initial Setup komplett +- PostgreSQL 17 auf separatem LXC +- Payload CMS 3.x mit Multi-Tenant Plugin +- Caddy mit Let's Encrypt SSL +- PM2 Process Management +- 3 von 4 Tenants angelegt +- User-Tenant-Zuweisung manuell per SQL diff --git a/docs/PROMPT_CONSENT_PAYLOAD.md b/docs/PROMPT_CONSENT_PAYLOAD.md new file mode 100644 index 0000000..4a6ed78 --- /dev/null +++ b/docs/PROMPT_CONSENT_PAYLOAD.md @@ -0,0 +1,853 @@ +# PROMPT: Consent Management System - Payload Backend + +## Kontext + +Du arbeitest auf dem Server **sv-payload** (10.10.181.100) im Verzeichnis `/home/payload/payload-cms`. + +Dieses Projekt implementiert ein DSGVO-konformes Consent Management System gemĂ€ĂŸ Spezifikation SAS v2.6. Das System ist Multi-Tenant-fĂ€hig und nutzt die bestehende Tenants-Collection. + +## Referenz-Dokument + +Basis: **Systemarchitektur-Spezifikation v2.6 (Implementation Master)** + +## Aufgabe + +Erstelle drei neue Collections und die zugehörigen Hooks fĂŒr das Consent Management: + +1. **CookieConfigurations** - Mandantenspezifische Banner-Konfiguration +2. **CookieInventory** - Cookie-Dokumentation fĂŒr DatenschutzerklĂ€rung +3. **ConsentLogs** - WORM Audit-Trail fĂŒr Einwilligungen + +--- + +## Schritt 1: Collection - CookieConfigurations + +Erstelle `src/collections/CookieConfigurations.ts`: + +```typescript +import type { CollectionConfig } from 'payload' + +export const CookieConfigurations: CollectionConfig = { + slug: 'cookie-configurations', + admin: { + useAsTitle: 'title', + group: 'Consent Management', + description: 'Cookie-Banner Konfiguration pro Tenant', + }, + access: { + // Öffentlich lesbar fĂŒr Frontend-Initialisierung + read: () => true, + // Nur authentifizierte User können bearbeiten + create: ({ req }) => !!req.user, + update: ({ req }) => !!req.user, + delete: ({ req }) => !!req.user, + }, + fields: [ + { + name: 'tenant', + type: 'relationship', + relationTo: 'tenants', + required: true, + unique: true, + admin: { + description: 'Jeder Tenant kann nur eine Konfiguration haben', + }, + }, + { + name: 'title', + type: 'text', + required: true, + defaultValue: 'Cookie-Einstellungen', + admin: { + description: 'Interner Titel zur Identifikation', + }, + }, + { + name: 'revision', + type: 'number', + required: true, + defaultValue: 1, + admin: { + description: 'Bei inhaltlichen Änderungen erhöhen → erzwingt erneuten Consent bei allen Nutzern', + }, + }, + { + name: 'enabledCategories', + type: 'select', + hasMany: true, + required: true, + defaultValue: ['necessary', 'analytics'], + options: [ + { label: 'Notwendig', value: 'necessary' }, + { label: 'Funktional', value: 'functional' }, + { label: 'Statistik', value: 'analytics' }, + { label: 'Marketing', value: 'marketing' }, + ], + admin: { + description: 'Welche Kategorien sollen im Banner angezeigt werden?', + }, + }, + { + name: 'translations', + type: 'group', + fields: [ + { + name: 'de', + type: 'group', + label: 'Deutsch', + fields: [ + { + name: 'bannerTitle', + type: 'text', + defaultValue: 'Wir respektieren Ihre PrivatsphĂ€re', + }, + { + name: 'bannerDescription', + type: 'textarea', + defaultValue: 'Diese Website verwendet Cookies, um Ihnen die bestmögliche Erfahrung zu bieten. Sie können Ihre Einstellungen jederzeit anpassen.', + }, + { + name: 'acceptAllButton', + type: 'text', + defaultValue: 'Alle akzeptieren', + }, + { + name: 'acceptNecessaryButton', + type: 'text', + defaultValue: 'Nur notwendige', + }, + { + name: 'settingsButton', + type: 'text', + defaultValue: 'Einstellungen', + }, + { + name: 'saveButton', + type: 'text', + defaultValue: 'Auswahl speichern', + }, + { + name: 'privacyPolicyUrl', + type: 'text', + defaultValue: '/datenschutz', + admin: { + description: 'Link zur DatenschutzerklĂ€rung', + }, + }, + { + name: 'categoryLabels', + type: 'group', + fields: [ + { + name: 'necessary', + type: 'group', + fields: [ + { name: 'title', type: 'text', defaultValue: 'Notwendig' }, + { name: 'description', type: 'textarea', defaultValue: 'Diese Cookies sind fĂŒr die Grundfunktionen der Website erforderlich.' }, + ], + }, + { + name: 'functional', + type: 'group', + fields: [ + { name: 'title', type: 'text', defaultValue: 'Funktional' }, + { name: 'description', type: 'textarea', defaultValue: 'Diese Cookies ermöglichen erweiterte Funktionen und Personalisierung.' }, + ], + }, + { + name: 'analytics', + type: 'group', + fields: [ + { name: 'title', type: 'text', defaultValue: 'Statistik' }, + { name: 'description', type: 'textarea', defaultValue: 'Diese Cookies helfen uns zu verstehen, wie Besucher mit der Website interagieren.' }, + ], + }, + { + name: 'marketing', + type: 'group', + fields: [ + { name: 'title', type: 'text', defaultValue: 'Marketing' }, + { name: 'description', type: 'textarea', defaultValue: 'Diese Cookies werden verwendet, um Werbung relevanter fĂŒr Sie zu gestalten.' }, + ], + }, + ], + }, + ], + }, + ], + }, + { + name: 'styling', + type: 'group', + admin: { + description: 'Optionale Anpassung des Banner-Designs', + }, + fields: [ + { + name: 'position', + type: 'select', + defaultValue: 'bottom', + options: [ + { label: 'Unten', value: 'bottom' }, + { label: 'Oben', value: 'top' }, + { label: 'Mitte (Modal)', value: 'middle' }, + ], + }, + { + name: 'theme', + type: 'select', + defaultValue: 'dark', + options: [ + { label: 'Dunkel', value: 'dark' }, + { label: 'Hell', value: 'light' }, + { label: 'Auto (System)', value: 'auto' }, + ], + }, + ], + }, + ], +} +``` + +--- + +## Schritt 2: Collection - CookieInventory + +Erstelle `src/collections/CookieInventory.ts`: + +```typescript +import type { CollectionConfig } from 'payload' + +export const CookieInventory: CollectionConfig = { + slug: 'cookie-inventory', + admin: { + useAsTitle: 'name', + group: 'Consent Management', + description: 'Dokumentation aller verwendeten Cookies fĂŒr die DatenschutzerklĂ€rung', + defaultColumns: ['name', 'provider', 'category', 'duration', 'tenant'], + }, + access: { + // Öffentlich lesbar fĂŒr DatenschutzerklĂ€rung + read: () => true, + create: ({ req }) => !!req.user, + update: ({ req }) => !!req.user, + delete: ({ req }) => !!req.user, + }, + fields: [ + { + name: 'tenant', + type: 'relationship', + relationTo: 'tenants', + required: true, + admin: { + description: 'Zuordnung zum Mandanten', + }, + }, + { + name: 'name', + type: 'text', + required: true, + admin: { + description: 'Technischer Name des Cookies (z.B. "_ga", "cc_cookie")', + }, + }, + { + name: 'provider', + type: 'text', + required: true, + admin: { + description: 'Anbieter/Setzer des Cookies (z.B. "Google LLC", "Eigene Website")', + }, + }, + { + name: 'category', + type: 'select', + required: true, + options: [ + { label: 'Notwendig', value: 'necessary' }, + { label: 'Funktional', value: 'functional' }, + { label: 'Statistik', value: 'analytics' }, + { label: 'Marketing', value: 'marketing' }, + ], + }, + { + name: 'duration', + type: 'text', + required: true, + admin: { + description: 'Speicherdauer (z.B. "Session", "1 Jahr", "2 Jahre")', + }, + }, + { + name: 'description', + type: 'textarea', + required: true, + admin: { + description: 'VerstĂ€ndliche ErklĂ€rung des Zwecks fĂŒr Endnutzer', + }, + }, + { + name: 'isActive', + type: 'checkbox', + defaultValue: true, + admin: { + description: 'Wird dieser Cookie aktuell verwendet?', + }, + }, + ], +} +``` + +--- + +## Schritt 3: Collection - ConsentLogs (WORM) + +Erstelle `src/collections/ConsentLogs.ts`: + +```typescript +import type { CollectionConfig } from 'payload' +import crypto from 'crypto' + +// Helper: TĂ€glicher Salt fĂŒr IP-Anonymisierung +const getDailySalt = (tenantId: string): string => { + const date = new Date().toISOString().split('T')[0] // YYYY-MM-DD + const pepper = process.env.IP_ANONYMIZATION_PEPPER || 'default-pepper-change-me' + return crypto.createHash('sha256').update(`${pepper}-${tenantId}-${date}`).digest('hex') +} + +// Helper: IP anonymisieren +const anonymizeIp = (ip: string, tenantId: string): string => { + const salt = getDailySalt(tenantId) + return crypto.createHmac('sha256', salt).update(ip).digest('hex').substring(0, 32) +} + +// Helper: IP aus Request extrahieren +const extractIp = (req: any): string => { + const forwarded = req.headers?.['x-forwarded-for'] + if (typeof forwarded === 'string') { + return forwarded.split(',')[0].trim() + } + if (Array.isArray(forwarded)) { + return forwarded[0] + } + return req.socket?.remoteAddress || req.ip || 'unknown' +} + +export const ConsentLogs: CollectionConfig = { + slug: 'consent-logs', + admin: { + useAsTitle: 'consentId', + group: 'Consent Management', + description: 'WORM Audit-Trail fĂŒr Cookie-Einwilligungen (unverĂ€nderbar)', + defaultColumns: ['consentId', 'tenant', 'categories', 'revision', 'createdAt'], + }, + // Keine Versionierung/Drafts fĂŒr Performance bei hohem Schreibvolumen + versions: false, + access: { + // Erstellen nur mit API-Key (wird in Hook geprĂŒft) + create: ({ req }) => { + const apiKey = req.headers?.['x-api-key'] + const validKey = process.env.CONSENT_LOGGING_API_KEY + return apiKey === validKey + }, + // Lesen nur fĂŒr authentifizierte Admin-User + read: ({ req }) => !!req.user, + // WORM: Keine Updates erlaubt + update: () => false, + // WORM: Keine Deletes ĂŒber API (nur via Retention Job) + delete: () => false, + }, + hooks: { + beforeChange: [ + ({ data, req, operation }) => { + if (operation !== 'create') return data + + // 1. Server-generierte Consent-ID (Trust Boundary) + data.consentId = crypto.randomUUID() + + // 2. IP anonymisieren + const rawIp = data.ip || extractIp(req) + const tenantId = typeof data.tenant === 'object' ? data.tenant.id : data.tenant + data.anonymizedIp = anonymizeIp(rawIp, String(tenantId)) + + // Rohe IP entfernen (nie speichern!) + delete data.ip + + // 3. Ablaufdatum setzen (3 Jahre Retention) + const threeYearsFromNow = new Date() + threeYearsFromNow.setFullYear(threeYearsFromNow.getFullYear() + 3) + data.expiresAt = threeYearsFromNow.toISOString() + + // 4. User Agent kĂŒrzen (Datensparsamkeit) + if (data.userAgent && data.userAgent.length > 500) { + data.userAgent = data.userAgent.substring(0, 500) + } + + return data + }, + ], + }, + fields: [ + { + name: 'consentId', + type: 'text', + required: true, + unique: true, + admin: { + readOnly: true, + description: 'Server-generierte eindeutige ID', + }, + }, + { + name: 'clientRef', + type: 'text', + admin: { + readOnly: true, + description: 'Client-seitige Referenz (Cookie-UUID) fĂŒr Traceability', + }, + }, + { + name: 'tenant', + type: 'relationship', + relationTo: 'tenants', + required: true, + admin: { + readOnly: true, + }, + }, + { + name: 'categories', + type: 'json', + required: true, + admin: { + readOnly: true, + description: 'Akzeptierte Kategorien zum Zeitpunkt der Einwilligung', + }, + }, + { + name: 'revision', + type: 'number', + required: true, + admin: { + readOnly: true, + description: 'Version der Konfiguration zum Zeitpunkt der Zustimmung', + }, + }, + { + name: 'userAgent', + type: 'text', + admin: { + readOnly: true, + description: 'Browser/Device (fĂŒr Forensik und Bot-Erkennung)', + }, + }, + { + name: 'anonymizedIp', + type: 'text', + admin: { + readOnly: true, + description: 'HMAC-Hash der IP (tĂ€glich rotierender, tenant-spezifischer Salt)', + }, + }, + { + name: 'expiresAt', + type: 'date', + required: true, + admin: { + readOnly: true, + description: 'Automatische Löschung nach 3 Jahren', + date: { + pickerAppearance: 'dayOnly', + }, + }, + }, + ], +} +``` + +--- + +## Schritt 4: Retention Job (Automatische Löschung) + +Erstelle `src/jobs/consentRetentionJob.ts`: + +```typescript +import type { Payload } from 'payload' + +/** + * Consent Retention Job + * + * Löscht abgelaufene ConsentLogs gemĂ€ĂŸ DSGVO Art. 5 Abs. 1e (Speicherbegrenzung). + * Sollte tĂ€glich via Cron ausgefĂŒhrt werden. + */ +export const runConsentRetentionJob = async (payload: Payload): Promise => { + const now = new Date().toISOString() + + try { + // Finde abgelaufene EintrĂ€ge + const expired = await payload.find({ + collection: 'consent-logs', + where: { + expiresAt: { + less_than: now, + }, + }, + limit: 1000, // Batch-GrĂ¶ĂŸe + }) + + if (expired.docs.length === 0) { + console.log('[ConsentRetention] Keine abgelaufenen EintrĂ€ge gefunden.') + return + } + + console.log(`[ConsentRetention] ${expired.docs.length} abgelaufene EintrĂ€ge gefunden. Lösche...`) + + // Lösche jeden Eintrag einzeln (WORM-Bypass via direktem DB-Zugriff) + // Da delete: () => false gesetzt ist, mĂŒssen wir den DB-Adapter direkt nutzen + for (const doc of expired.docs) { + await payload.db.deleteOne({ + collection: 'consent-logs', + where: { id: { equals: doc.id } }, + }) + } + + console.log(`[ConsentRetention] ${expired.docs.length} EintrĂ€ge gelöscht.`) + + // Falls mehr als 1000 EintrĂ€ge: Rekursiv weitermachen + if (expired.docs.length === 1000) { + console.log('[ConsentRetention] Weitere EintrĂ€ge vorhanden, fĂŒhre nĂ€chsten Batch aus...') + await runConsentRetentionJob(payload) + } + } catch (error) { + console.error('[ConsentRetention] Fehler:', error) + throw error + } +} +``` + +--- + +## Schritt 5: Job-Scheduler einrichten + +Erstelle `src/jobs/scheduler.ts`: + +```typescript +import cron from 'node-cron' +import type { Payload } from 'payload' +import { runConsentRetentionJob } from './consentRetentionJob' + +/** + * Initialisiert alle Scheduled Jobs + */ +export const initScheduledJobs = (payload: Payload): void => { + // Consent Retention: TĂ€glich um 03:00 Uhr + cron.schedule('0 3 * * *', async () => { + console.log('[Scheduler] Starte Consent Retention Job...') + try { + await runConsentRetentionJob(payload) + } catch (error) { + console.error('[Scheduler] Consent Retention Job fehlgeschlagen:', error) + } + }, { + timezone: 'Europe/Berlin' + }) + + console.log('[Scheduler] Scheduled Jobs initialisiert.') +} +``` + +--- + +## Schritt 6: Collections registrieren + +Aktualisiere `src/payload.config.ts`: + +```typescript +import { buildConfig } from 'payload' +import { postgresAdapter } from '@payloadcms/db-postgres' +import { lexicalEditor } from '@payloadcms/richtext-lexical' +import { multiTenantPlugin } from '@payloadcms/plugin-multi-tenant' +import path from 'path' +import { fileURLToPath } from 'url' + +// Existing Collections +import { Users } from './collections/Users' +import { Media } from './collections/Media' +import { Tenants } from './collections/Tenants' +import { Pages } from './collections/Pages' +import { Posts } from './collections/Posts' +import { Categories } from './collections/Categories' +import { SocialLinks } from './collections/SocialLinks' + +// NEW: Consent Management Collections +import { CookieConfigurations } from './collections/CookieConfigurations' +import { CookieInventory } from './collections/CookieInventory' +import { ConsentLogs } from './collections/ConsentLogs' + +// Existing Globals +import { SiteSettings } from './globals/SiteSettings' +import { Navigation } from './globals/Navigation' + +const filename = fileURLToPath(import.meta.url) +const dirname = path.dirname(filename) + +export default buildConfig({ + admin: { + user: Users.slug, + }, + + serverURL: process.env.PAYLOAD_PUBLIC_SERVER_URL || 'https://pl.c2sgmbh.de', + + cors: [ + 'http://localhost:3000', + 'http://localhost:3001', + 'http://10.10.181.102:3000', + 'http://10.10.181.102:3001', + 'https://dev.zh3.de', + 'https://porwoll.de', + 'https://www.porwoll.de', + 'https://complexcaresolutions.de', + 'https://www.complexcaresolutions.de', + 'https://gunshin.de', + 'https://www.gunshin.de', + ], + + csrf: [ + 'http://localhost:3000', + 'http://localhost:3001', + 'http://10.10.181.102:3000', + 'http://10.10.181.102:3001', + 'https://dev.zh3.de', + 'https://porwoll.de', + 'https://www.porwoll.de', + 'https://complexcaresolutions.de', + 'https://www.complexcaresolutions.de', + 'https://gunshin.de', + 'https://www.gunshin.de', + ], + + collections: [ + Users, + Media, + Tenants, + Pages, + Posts, + Categories, + SocialLinks, + // NEW: Consent Management + CookieConfigurations, + CookieInventory, + ConsentLogs, + ], + + globals: [SiteSettings, Navigation], + + editor: lexicalEditor(), + + secret: process.env.PAYLOAD_SECRET || '', + + typescript: { + outputFile: path.resolve(dirname, 'payload-types.ts'), + }, + + db: postgresAdapter({ + pool: { + connectionString: process.env.DATABASE_URI || '', + }, + }), + + plugins: [ + multiTenantPlugin({ + tenantsSlug: 'tenants', + collections: { + media: {}, + pages: {}, + posts: {}, + categories: {}, + 'social-links': {}, + // NEW: Consent Collections mit Tenant-Scoping + 'cookie-configurations': {}, + 'cookie-inventory': {}, + 'consent-logs': {}, + }, + }), + ], +}) +``` + +--- + +## Schritt 7: Scheduler in Server einbinden + +Aktualisiere `src/server.ts` (oder erstelle, falls nicht vorhanden): + +```typescript +import express from 'express' +import payload from 'payload' +import { initScheduledJobs } from './jobs/scheduler' + +const app = express() + +const start = async () => { + await payload.init({ + secret: process.env.PAYLOAD_SECRET || '', + express: app, + onInit: async () => { + payload.logger.info(`Payload Admin URL: ${payload.getAdminURL()}`) + + // Scheduled Jobs starten + initScheduledJobs(payload) + }, + }) + + app.listen(3000) +} + +start() +``` + +--- + +## Schritt 8: Dependencies installieren + +```bash +cd /home/payload/payload-cms +pnpm add node-cron +pnpm add -D @types/node-cron +``` + +--- + +## Schritt 9: Environment Variables + +FĂŒge zu `.env` hinzu: + +```env +# Consent Management +CONSENT_LOGGING_API_KEY=GENERIERE_EINEN_SICHEREN_KEY_HIER +IP_ANONYMIZATION_PEPPER=GENERIERE_EINEN_ANDEREN_SICHEREN_KEY_HIER +``` + +Generiere sichere Keys: + +```bash +# Auf sv-payload +openssl rand -hex 32 # FĂŒr CONSENT_LOGGING_API_KEY +openssl rand -hex 32 # FĂŒr IP_ANONYMIZATION_PEPPER +``` + +--- + +## Schritt 10: Migrationen und Build + +```bash +cd /home/payload/payload-cms + +# TypeScript Types generieren +pnpm payload generate:types + +# Migrationen erstellen und ausfĂŒhren +pnpm payload migrate:create +pnpm payload migrate + +# Build +pnpm build + +# PM2 neustarten +pm2 restart payload +``` + +--- + +## Schritt 11: Verifizierung + +### API-Endpoints testen + +```bash +# CookieConfigurations (öffentlich) +curl -s http://localhost:3000/api/cookie-configurations | jq + +# CookieInventory (öffentlich) +curl -s http://localhost:3000/api/cookie-inventory | jq + +# ConsentLogs erstellen (mit API-Key) +curl -X POST http://localhost:3000/api/consent-logs \ + -H "Content-Type: application/json" \ + -H "x-api-key: DEIN_CONSENT_LOGGING_API_KEY" \ + -d '{ + "clientRef": "test-client-123", + "tenant": 1, + "categories": ["necessary", "analytics"], + "revision": 1, + "userAgent": "Mozilla/5.0 Test", + "ip": "192.168.1.100" + }' | jq + +# ConsentLogs lesen (nur mit Admin-Auth) +# → Über Admin Panel: https://pl.c2sgmbh.de/admin/collections/consent-logs +``` + +### PrĂŒfpunkte + +- [ ] CookieConfigurations Collection erscheint im Admin unter "Consent Management" +- [ ] CookieInventory Collection erscheint im Admin +- [ ] ConsentLogs Collection erscheint im Admin (nur lesbar) +- [ ] ConsentLogs: Update-Button ist deaktiviert +- [ ] ConsentLogs: Delete-Button ist deaktiviert +- [ ] API-Erstellung von ConsentLogs funktioniert nur mit korrektem API-Key +- [ ] `consentId` wird serverseitig generiert (nicht vom Client ĂŒberschreibbar) +- [ ] `anonymizedIp` ist ein Hash, keine echte IP +- [ ] `expiresAt` wird automatisch auf +3 Jahre gesetzt + +--- + +## Schritt 12: Initiale Daten anlegen (Optional) + +### Cookie-Konfiguration fĂŒr porwoll.de + +Im Admin Panel unter **Consent Management → Cookie Configurations → Create**: + +| Feld | Wert | +|------|------| +| Tenant | porwoll.de | +| Title | Cookie-Einstellungen porwoll.de | +| Revision | 1 | +| Enabled Categories | Notwendig, Statistik | + +### Cookie-Inventory fĂŒr porwoll.de + +Im Admin Panel unter **Consent Management → Cookie Inventory → Create**: + +| Name | Provider | Category | Duration | Description | +|------|----------|----------|----------|-------------| +| cc_cookie | Eigene Website | Notwendig | 1 Jahr | Speichert Ihre Cookie-Einstellungen | +| _ga | Google LLC | Statistik | 2 Jahre | Google Analytics - Unterscheidung von Nutzern | +| _ga_* | Google LLC | Statistik | 2 Jahre | Google Analytics - Session-Daten | + +--- + +## Zusammenfassung der erstellten Dateien + +| Datei | Beschreibung | +|-------|--------------| +| `src/collections/CookieConfigurations.ts` | Banner-Konfiguration pro Tenant | +| `src/collections/CookieInventory.ts` | Cookie-Dokumentation | +| `src/collections/ConsentLogs.ts` | WORM Audit-Trail mit Hooks | +| `src/jobs/consentRetentionJob.ts` | Automatische Löschung nach 3 Jahren | +| `src/jobs/scheduler.ts` | Cron-Scheduler fĂŒr Jobs | + +## Neue Environment Variables + +| Variable | Beschreibung | +|----------|--------------| +| `CONSENT_LOGGING_API_KEY` | API-Key fĂŒr Frontend-zu-Backend Logging | +| `IP_ANONYMIZATION_PEPPER` | Geheimer Pepper fĂŒr IP-Hashing | + +## API-Endpoints + +| Endpoint | Method | Auth | Beschreibung | +|----------|--------|------|--------------| +| `/api/cookie-configurations` | GET | Public | Banner-Config abrufen | +| `/api/cookie-inventory` | GET | Public | Cookie-Liste fĂŒr Datenschutz | +| `/api/consent-logs` | POST | x-api-key | Consent loggen | +| `/api/consent-logs` | GET | Admin | Logs einsehen (nur Admin) | \ No newline at end of file diff --git a/docs/PROMPT_PAYLOAD_API_CONFIG.md b/docs/PROMPT_PAYLOAD_API_CONFIG.md new file mode 100644 index 0000000..9efae3e --- /dev/null +++ b/docs/PROMPT_PAYLOAD_API_CONFIG.md @@ -0,0 +1,383 @@ +# Payload API Konfiguration fĂŒr externe Frontend-Zugriffe + +## Kontext + +Du arbeitest im Verzeichnis `/home/payload/payload-cms` auf dem Server sv-payload (10.10.181.100). + +Das Frontend wird auf einem separaten Development-Server entwickelt: +- IP: 10.10.180.153 +- Domain: dev.zh3.de +- Projekt: frontend-porwoll + +Payload CMS muss so konfiguriert werden, dass externe Frontends auf die API zugreifen können. + +## Aufgabe + +1. CORS konfigurieren fĂŒr Frontend-Zugriff +2. API-Zugriff ohne Authentifizierung fĂŒr öffentliche Inhalte ermöglichen +3. Optional: GraphQL aktivieren +4. API Key fĂŒr geschĂŒtzte Operationen erstellen + +## Schritt 1: CORS Konfiguration + +Aktualisiere `src/payload.config.ts`: + +```typescript +import { buildConfig } from 'payload' +import { postgresAdapter } from '@payloadcms/db-postgres' +import { lexicalEditor } from '@payloadcms/richtext-lexical' +import { multiTenantPlugin } from '@payloadcms/plugin-multi-tenant' +import path from 'path' +import { fileURLToPath } from 'url' + +// Collections +import { Users } from './collections/Users' +import { Media } from './collections/Media' +import { Tenants } from './collections/Tenants' +import { Pages } from './collections/Pages' +import { Posts } from './collections/Posts' +import { Categories } from './collections/Categories' +import { SocialLinks } from './collections/SocialLinks' + +// Globals +import { SiteSettings } from './globals/SiteSettings' +import { Navigation } from './globals/Navigation' + +const filename = fileURLToPath(import.meta.url) +const dirname = path.dirname(filename) + +export default buildConfig({ + admin: { + user: Users.slug, + }, + + // CORS Konfiguration fĂŒr externe Frontends + cors: [ + 'http://localhost:3000', + 'http://localhost:3001', + 'http://10.10.180.153:3000', + 'http://10.10.180.153:3001', + 'https://dev.zh3.de', + 'https://porwoll.de', + 'https://www.porwoll.de', + ], + + // CSRF Protection - gleiche Origins + csrf: [ + 'http://localhost:3000', + 'http://localhost:3001', + 'http://10.10.180.153:3000', + 'http://10.10.180.153:3001', + 'https://dev.zh3.de', + 'https://porwoll.de', + 'https://www.porwoll.de', + ], + + collections: [Users, Media, Tenants, Pages, Posts, Categories, SocialLinks], + + globals: [SiteSettings, Navigation], + + editor: lexicalEditor(), + + secret: process.env.PAYLOAD_SECRET || '', + + typescript: { + outputFile: path.resolve(dirname, 'payload-types.ts'), + }, + + db: postgresAdapter({ + pool: { + connectionString: process.env.DATABASE_URI || '', + }, + }), + + plugins: [ + multiTenantPlugin({ + tenantsSlug: 'tenants', + collections: { + media: {}, + pages: {}, + posts: {}, + categories: {}, + 'social-links': {}, + }, + debug: true, + }), + ], +}) +``` + +## Schritt 2: Öffentlichen API-Zugriff konfigurieren + +FĂŒr öffentliche Inhalte (Pages, Posts) muss der `read`-Zugriff ohne Auth erlaubt werden. + +### Pages Collection aktualisieren (`src/collections/Pages.ts`) + +FĂŒge Access Control hinzu: + +```typescript +import type { CollectionConfig } from 'payload' + +export const Pages: CollectionConfig = { + slug: 'pages', + admin: { + useAsTitle: 'title', + defaultColumns: ['title', 'slug', 'status', 'updatedAt'], + }, + // Öffentlicher Lesezugriff fĂŒr veröffentlichte Seiten + access: { + read: ({ req }) => { + // Eingeloggte User sehen alles + if (req.user) return true + // Öffentlich: nur veröffentlichte Seiten + return { + status: { + equals: 'published', + }, + } + }, + create: ({ req }) => !!req.user, + update: ({ req }) => !!req.user, + delete: ({ req }) => !!req.user, + }, + fields: [ + // ... bestehende Felder + ], +} +``` + +### Posts Collection aktualisieren (`src/collections/Posts.ts`) + +```typescript +import type { CollectionConfig } from 'payload' + +export const Posts: CollectionConfig = { + slug: 'posts', + admin: { + useAsTitle: 'title', + defaultColumns: ['title', 'category', 'status', 'publishedAt'], + }, + access: { + read: ({ req }) => { + if (req.user) return true + return { + status: { + equals: 'published', + }, + } + }, + create: ({ req }) => !!req.user, + update: ({ req }) => !!req.user, + delete: ({ req }) => !!req.user, + }, + fields: [ + // ... bestehende Felder + ], +} +``` + +### Media Collection aktualisieren (`src/collections/Media.ts`) + +```typescript +import type { CollectionConfig } from 'payload' + +export const Media: CollectionConfig = { + slug: 'media', + admin: { + useAsTitle: 'alt', + }, + access: { + // Medien sind öffentlich lesbar + read: () => true, + create: ({ req }) => !!req.user, + update: ({ req }) => !!req.user, + delete: ({ req }) => !!req.user, + }, + upload: { + staticDir: 'media', + mimeTypes: ['image/*', 'application/pdf'], + }, + fields: [ + { + name: 'alt', + type: 'text', + required: true, + }, + ], +} +``` + +### Categories Collection (`src/collections/Categories.ts`) + +```typescript +access: { + read: () => true, // Kategorien sind öffentlich + create: ({ req }) => !!req.user, + update: ({ req }) => !!req.user, + delete: ({ req }) => !!req.user, +}, +``` + +### SocialLinks Collection (`src/collections/SocialLinks.ts`) + +```typescript +access: { + read: () => true, // Social Links sind öffentlich + create: ({ req }) => !!req.user, + update: ({ req }) => !!req.user, + delete: ({ req }) => !!req.user, +}, +``` + +### Globals öffentlich machen + +#### SiteSettings (`src/globals/SiteSettings.ts`) + +```typescript +import type { GlobalConfig } from 'payload' + +export const SiteSettings: GlobalConfig = { + slug: 'site-settings', + access: { + read: () => true, // Öffentlich lesbar + update: ({ req }) => !!req.user, + }, + fields: [ + // ... bestehende Felder + ], +} +``` + +#### Navigation (`src/globals/Navigation.ts`) + +```typescript +import type { GlobalConfig } from 'payload' + +export const Navigation: GlobalConfig = { + slug: 'navigation', + access: { + read: () => true, // Öffentlich lesbar + update: ({ req }) => !!req.user, + }, + fields: [ + // ... bestehende Felder + ], +} +``` + +## Schritt 3: GraphQL aktivieren (Optional) + +Falls GraphQL gewĂŒnscht ist, installiere das Plugin: + +```bash +pnpm add @payloadcms/graphql +``` + +Dann in `payload.config.ts`: + +```typescript +import { buildConfig } from 'payload' +import { graphqlPlugin } from '@payloadcms/graphql' + +export default buildConfig({ + // ... andere Config + + plugins: [ + graphqlPlugin({}), + multiTenantPlugin({ + // ... + }), + ], +}) +``` + +GraphQL Endpoint: `https://pl.c2sgmbh.de/api/graphql` + +## Schritt 4: API Key fĂŒr geschĂŒtzte Operationen (Optional) + +FĂŒr Operationen wie Kontaktformular-Submissions kann ein API Key erstellt werden. + +### Umgebungsvariable hinzufĂŒgen + +```bash +# In .env hinzufĂŒgen +PAYLOAD_API_KEY=dein-sicherer-api-key-hier-generieren +``` + +Generiere einen sicheren Key: + +```bash +openssl rand -hex 32 +``` + +### API Key Middleware (falls benötigt) + +FĂŒr spezielle Endpoints kann der API Key geprĂŒft werden. FĂŒr die meisten FĂ€lle reicht jedoch die Access Control. + +## Schritt 5: Media URL Konfiguration + +Stelle sicher, dass Media-URLs korrekt sind: + +```typescript +// In payload.config.ts +export default buildConfig({ + serverURL: process.env.PAYLOAD_PUBLIC_SERVER_URL || 'https://pl.c2sgmbh.de', + + // ... rest +}) +``` + +Die `.env` sollte enthalten: + +```env +PAYLOAD_PUBLIC_SERVER_URL=https://pl.c2sgmbh.de +``` + +## Schritt 6: Build und Neustart + +```bash +cd /home/payload/payload-cms +pnpm build +pm2 restart payload +``` + +## API Endpoints nach Konfiguration + +| Endpoint | Methode | Beschreibung | +|----------|---------|--------------| +| `/api/pages` | GET | Alle veröffentlichten Seiten | +| `/api/pages?where[slug][equals]=home` | GET | Seite nach Slug | +| `/api/posts` | GET | Alle veröffentlichten Posts | +| `/api/posts?limit=10&page=1` | GET | Posts paginiert | +| `/api/categories` | GET | Alle Kategorien | +| `/api/media` | GET | Alle Medien | +| `/api/globals/site-settings` | GET | Site Settings | +| `/api/globals/navigation` | GET | Navigation | + +## Test der API + +Nach dem Neustart testen: + +```bash +# Von sv-dev aus +curl https://pl.c2sgmbh.de/api/pages +curl https://pl.c2sgmbh.de/api/globals/site-settings +curl https://pl.c2sgmbh.de/api/globals/navigation + +# Oder lokal auf sv-payload +curl http://localhost:3000/api/pages +``` + +## Erfolgskriterien + +1. ✅ API antwortet auf Anfragen von dev.zh3.de ohne CORS-Fehler +2. ✅ Öffentliche Endpoints liefern Daten ohne Auth +3. ✅ Admin-Panel funktioniert weiterhin unter /admin +4. ✅ Media-URLs sind vollstĂ€ndig (mit Domain) + +## Sicherheitshinweise + +- Nur `read`-Zugriff ist öffentlich +- `create`, `update`, `delete` erfordern Authentifizierung +- Unveröffentlichte Inhalte sind nicht öffentlich sichtbar +- Admin-Panel bleibt geschĂŒtzt diff --git a/docs/PROMPT_PHASE1_COLLECTIONS.md b/docs/PROMPT_PHASE1_COLLECTIONS.md new file mode 100644 index 0000000..633732e --- /dev/null +++ b/docs/PROMPT_PHASE1_COLLECTIONS.md @@ -0,0 +1,182 @@ +# Phase 1: Payload CMS Collections fĂŒr porwoll.de + +## Kontext + +Du arbeitest im Verzeichnis `/home/payload/payload-cms`. Dies ist ein Payload CMS 3.x Projekt mit Multi-Tenant-Support. Der Tenant "porwoll" (ID: 1) existiert bereits. + +Lies zuerst die CLAUDE.md fĂŒr Projektkontext. + +## Aufgabe + +Erstelle die Collections und Globals fĂŒr die Website porwoll.de. Die Website ist eine persönliche/berufliche PrĂ€senz mit Blog. + +## Zu erstellende Dateien + +### 1. Collection: Pages (`src/collections/Pages.ts`) + +FĂŒr statische Seiten wie Startseite, Mensch, Leben, etc. + +```typescript +Felder: +- title: text, required +- slug: text, required, unique +- hero: group + - image: upload (Media) + - headline: text + - subline: textarea +- content: richText (Lexical) +- seo: group + - metaTitle: text + - metaDescription: textarea + - ogImage: upload (Media) +- status: select (draft, published), default: draft +- publishedAt: date + +Admin: +- useAsTitle: 'title' +- defaultColumns: ['title', 'slug', 'status', 'updatedAt'] +``` + +### 2. Collection: Posts (`src/collections/Posts.ts`) + +FĂŒr Blog-Artikel. + +```typescript +Felder: +- title: text, required +- slug: text, required, unique +- excerpt: textarea, maxLength 300 +- content: richText (Lexical) +- featuredImage: upload (Media) +- category: relationship → Categories +- author: relationship → Users +- publishedAt: date +- status: select (draft, published), default: draft + +Admin: +- useAsTitle: 'title' +- defaultColumns: ['title', 'category', 'status', 'publishedAt'] +``` + +### 3. Collection: Categories (`src/collections/Categories.ts`) + +Blog-Kategorien. + +```typescript +Felder: +- name: text, required +- slug: text, required, unique +- description: textarea + +Admin: +- useAsTitle: 'name' +``` + +### 4. Collection: SocialLinks (`src/collections/SocialLinks.ts`) + +Social Media Verlinkungen. + +```typescript +Felder: +- platform: select (facebook, x, instagram, youtube, linkedin, xing), required +- url: text, required +- isActive: checkbox, default: true + +Admin: +- useAsTitle: 'platform' +``` + +### 5. Global: SiteSettings (`src/globals/SiteSettings.ts`) + +Globale Website-Einstellungen. + +```typescript +Felder: +- siteName: text, default: 'porwoll.de' +- siteTagline: text +- logo: upload (Media) +- favicon: upload (Media) +- contact: group + - email: email + - phone: text + - address: textarea +- footer: group + - copyrightText: text + - showSocialLinks: checkbox, default: true +- seo: group + - defaultMetaTitle: text + - defaultMetaDescription: textarea + - defaultOgImage: upload (Media) +``` + +### 6. Global: Navigation (`src/globals/Navigation.ts`) + +Hauptnavigation der Website. + +```typescript +Felder: +- mainMenu: array + - label: text, required + - type: select (page, custom, submenu) + - page: relationship → Pages (wenn type = page) + - url: text (wenn type = custom) + - openInNewTab: checkbox + - submenu: array (wenn type = submenu) + - label: text + - page: relationship → Pages + - url: text +- footerMenu: array + - label: text + - page: relationship → Pages + - url: text +``` + +## Umsetzungsschritte + +1. Erstelle den Ordner `src/globals/` falls nicht vorhanden +2. Erstelle alle Collection-Dateien in `src/collections/` +3. Erstelle alle Global-Dateien in `src/globals/` +4. Aktualisiere `src/payload.config.ts`: + - Importiere alle neuen Collections + - FĂŒge sie zum `collections` Array hinzu + - Importiere alle Globals + - FĂŒge `globals: [SiteSettings, Navigation]` hinzu +5. FĂŒhre aus: `pnpm payload generate:types` +6. FĂŒhre aus: `pnpm payload migrate:create` +7. FĂŒhre aus: `pnpm payload migrate` +8. FĂŒhre aus: `pnpm build` +9. Starte neu: `pm2 restart payload` + +## Wichtige Hinweise + +- Alle Collections mĂŒssen Multi-Tenant-fĂ€hig sein (werden automatisch durch das Plugin gefiltert) +- Verwende den Lexical Editor fĂŒr Rich Text: `import { lexicalEditor } from '@payloadcms/richtext-lexical'` +- PrĂŒfe nach jedem Schritt auf TypeScript-Fehler +- Die Media Collection existiert bereits - nutze sie fĂŒr alle Uploads +- Halte dich an Payload 3.x Syntax (nicht 2.x) + +## Erfolgskriterien + +Nach Abschluss sollten im Admin Panel unter https://pl.c2sgmbh.de/admin folgende EintrĂ€ge sichtbar sein: + +Collections: + +- Users (existiert) +- Media (existiert) +- Tenants (existiert) +- Pages (neu) +- Posts (neu) +- Categories (neu) +- SocialLinks (neu) + +Globals: + +- Site Settings (neu) +- Navigation (neu) + +## Bei Fehlern + +- Lies die Fehlermeldung genau +- PrĂŒfe die Payload 3.x Dokumentation +- Stelle sicher, dass alle Imports korrekt sind +- PrĂŒfe TypeScript-KompatibilitĂ€t mit `pnpm tsc --noEmit` diff --git a/docs/PROMPT_PHASE4_CONTENT_MIGRATION.md b/docs/PROMPT_PHASE4_CONTENT_MIGRATION.md new file mode 100644 index 0000000..2b20659 --- /dev/null +++ b/docs/PROMPT_PHASE4_CONTENT_MIGRATION.md @@ -0,0 +1,755 @@ +# Phase 4: Content-Migration fĂŒr porwoll.de + +## Kontext + +Das Payload CMS lĂ€uft unter https://pl.c2sgmbh.de/admin und das Frontend unter http://dev.zh3.de:3001. + +Diese Phase befĂŒllt Payload mit allen Inhalten der aktuellen porwoll.de WordPress-Seite. + +## Übersicht der zu migrierenden Inhalte + +| Bereich | Anzahl | Status | +|---------|--------|--------| +| Site Settings | 1 Global | ⏳ | +| Navigation | 1 Global | ⏳ | +| Social Links | 4 EintrĂ€ge | ⏳ | +| Categories | 2 Kategorien | ⏳ | +| Pages | 10 Seiten | ⏳ | +| Media | ~10 Bilder | ⏳ | + +--- + +## Teil 1: Site Settings konfigurieren + +**URL:** https://pl.c2sgmbh.de/admin/globals/site-settings + +### Einzutragende Werte + +```yaml +Site Name: porwoll.de +Site Tagline: Die Webseite von Martin Porwoll + +Contact: + Email: info@porwoll.de + Phone: 0800 80 44 100 + Address: | + Hans-Böckler-Str. 19 + 46236 Bottrop + +Footer: + Copyright Text: Martin Porwoll + Show Social Links: ✓ (aktiviert) + +SEO: + Default Meta Title: porwoll.de | Die Webseite von Martin Porwoll + Default Meta Description: Martin Porwoll - Whistleblower, Unternehmer, Mensch. Engagiert fĂŒr Patientenwohl und Transparenz im Gesundheitswesen. +``` + +### Logo & Favicon + +1. Gehe zu **Media** → **Create New** +2. Lade hoch: + - Logo (falls vorhanden, sonst ĂŒberspringen) + - Favicon: https://porwoll.de/wp-content/uploads/2024/05/cropped-Favicon-270x270.jpg +3. Gehe zurĂŒck zu **Site Settings** +4. WĂ€hle die hochgeladenen Medien aus + +--- + +## Teil 2: Social Links anlegen + +**URL:** https://pl.c2sgmbh.de/admin/collections/social-links + +### EintrĂ€ge erstellen + +| Platform | URL | Active | +|----------|-----|--------| +| facebook | https://www.facebook.com/martinporwoll | ✓ | +| x | https://x.com/martinporwoll | ✓ | +| instagram | https://www.instagram.com/martinporwoll | ✓ | +| youtube | https://www.youtube.com/@martinporwoll | ✓ | +| linkedin | https://www.linkedin.com/in/martinporwoll | ✓ | + +**Hinweis:** Die exakten URLs mĂŒssen ggf. angepasst werden. PrĂŒfe die aktuellen Social-Media-Profile. + +--- + +## Teil 3: Categories anlegen + +**URL:** https://pl.c2sgmbh.de/admin/collections/categories + +### EintrĂ€ge erstellen + +| Name | Slug | Description | +|------|------|-------------| +| Whistleblowing | whistleblowing | Artikel zum Thema Whistleblowing und Zytoskandal | +| Unternehmer | unternehmer | Artikel ĂŒber unternehmerische AktivitĂ€ten | + +--- + +## Teil 4: Media hochladen + +**URL:** https://pl.c2sgmbh.de/admin/collections/media + +### Bilder von WordPress herunterladen + +Die folgenden Bilder mĂŒssen von der aktuellen WordPress-Seite heruntergeladen und in Payload hochgeladen werden: + +| Dateiname | Quelle | Verwendung | +|-----------|--------|------------| +| martin-porwoll-frontal.webp | https://porwoll.de/wp-content/uploads/2024/05/martin-porwoll-frontal-1-1168x768-1.webp | Hero, Mensch-Seite | +| martin-porwoll-portrait.jpeg | https://porwoll.de/wp-content/uploads/2024/05/martin-porwoll-frontal-1-1168x768-1.jpeg | Mensch-Seite | +| gunshin-logo.webp | https://porwoll.de/wp-content/uploads/2024/05/gunshin-logo-1168x487-1.webp | Gunshin-Seite | +| adobestock-vision.webp | https://porwoll.de/wp-content/uploads/2024/05/adobestock-432768272kopie-2576x2050-1-scaled.webp | Gunshin-Seite | +| adobestock-erfolge.webp | https://porwoll.de/wp-content/uploads/2024/05/adobestock-585344607-kopie-2576x1717-1-scaled.webp | Gunshin-Seite | +| favicon.jpg | https://porwoll.de/wp-content/uploads/2024/05/cropped-Favicon-270x270.jpg | Site Settings | + +### Upload-Prozess + +1. Bilder lokal herunterladen (oder Originale verwenden falls verfĂŒgbar) +2. In Payload unter **Media** → **Create New** hochladen +3. **Alt-Text** fĂŒr jedes Bild eintragen (wichtig fĂŒr SEO/Accessibility) + +### Alt-Texte + +| Bild | Alt-Text | +|------|----------| +| martin-porwoll-frontal | Martin Porwoll - Portrait | +| gunshin-logo | gunshin Holding UG Logo | +| adobestock-vision | Abstrakte Darstellung von Vision und Innovation | +| adobestock-erfolge | Team-Erfolg und Zusammenarbeit | + +--- + +## Teil 5: Navigation anlegen + +**URL:** https://pl.c2sgmbh.de/admin/globals/navigation + +### Main Menu Struktur + +```yaml +Main Menu: + - Label: Whistleblowing + Type: submenu + Submenu: + - Label: Zytoskandal + Type: page + Page: zytoskandal + - Label: Whistleblowing + Type: page + Page: whistleblowing + + - Label: Unternehmer + Type: submenu + Submenu: + - Label: gunshin Holding UG + Type: page + Page: gunshin-holding + - Label: complex care solutions GmbH + Type: page + Page: complex-care-solutions + + - Label: Mensch + Type: page + Page: mensch + + - Label: Kontakt + Type: page + Page: kontakt +``` + +### Footer Menu + +```yaml +Footer Menu: + - Label: Impressum + Type: page + Page: impressum + + - Label: DatenschutzerklĂ€rung + Type: page + Page: datenschutz +``` + +**Hinweis:** Die Pages mĂŒssen zuerst erstellt werden (Teil 6), bevor sie in der Navigation verlinkt werden können. Erstelle die Navigation daher erst nach den Pages, oder nutze zunĂ€chst "custom" Links. + +--- + +## Teil 6: Pages erstellen + +**URL:** https://pl.c2sgmbh.de/admin/collections/pages + +### Seiten-Übersicht + +| Seite | Slug | PrioritĂ€t | Blöcke | +|-------|------|-----------|--------| +| Startseite | home | 🔮 Hoch | Hero, Text, CardGrid, Quote, CTA | +| Mensch | mensch | 🔮 Hoch | Hero, Text, ImageText, Timeline | +| Kontakt | kontakt | 🔮 Hoch | Text, ContactForm | +| Whistleblowing | whistleblowing | 🟡 Mittel | Hero, Text | +| Zytoskandal | zytoskandal | 🟡 Mittel | Hero, Text, Timeline | +| gunshin Holding | gunshin-holding | 🟡 Mittel | Hero, Text, CardGrid, ImageText | +| complex care solutions | complex-care-solutions | 🟡 Mittel | Hero, Text, ImageText | +| Leben | leben | 🟡 Mittel | Hero, Text | +| Impressum | impressum | 🟱 Niedrig | Text | +| Datenschutz | datenschutz | 🟱 Niedrig | Text | + +--- + +### Seite 1: Startseite (home) + +```yaml +Title: Startseite +Slug: home +Status: Published + +Hero: + Image: (leer lassen, wird durch HeroBlock im Layout definiert) + Headline: (leer) + Subline: (leer) + +Layout: + - Block: HeroBlock + Background Image: martin-porwoll-frontal + Headline: „Angst ist eine Reaktion, Mut eine Entscheidung" + Subline: Whistleblower | Unternehmer | Mensch + Alignment: center + Overlay: ✓ + CTA: + Text: Mehr erfahren + Link: /mensch + Style: primary + + - Block: TextBlock + Width: medium + Content: | + ## Lebensaufgabe und Vision + + Das Patientenwohl wieder in den Mittelpunkt aller BemĂŒhungen im Gesundheitswesen zu rĂŒcken, ist die zentrale Lebensaufgabe von Martin Porwoll. + + Er kĂ€mpft leidenschaftlich gegen Übertherapie und Fehlversorgung sowie Missbrauch im Gesundheitswesen und setzt sich fĂŒr Transparenz, Gerechtigkeit und IntegritĂ€t ein. + + - Block: CardGridBlock + Headline: Unternehmer + Columns: 2 + Cards: + - Title: gunshin Holding UG + Description: Lernen Sie die Gunshin Holding kennen, die Start-ups im Gesundheitssektor unterstĂŒtzt und dazu beitrĂ€gt, innovative Unternehmen auf das Wohl der Patienten auszurichten. + Link: /gunshin-holding + Link Text: mehr + Image: gunshin-logo + + - Title: complex care solutions GmbH + Description: Entdecken Sie das Unternehmen, das Martin Porwoll gegrĂŒndet hat, um das Wohl der Patienten in den Mittelpunkt zu stellen und Übertherapie und Fehlversorgung zu bekĂ€mpfen. + Link: /complex-care-solutions + Link Text: mehr + + - Block: QuoteBlock + Quote: Sein Motto „Angst ist eine Reaktion, Mut eine Entscheidung" spiegelt seine Entschlossenheit wider, mutig fĂŒr das Wohl der Patienten einzutreten. + Style: highlighted + + - Block: CTABlock + Headline: Kontakt aufnehmen + Description: Haben Sie Fragen oder möchten Sie mehr erfahren? + Background Color: dark + Buttons: + - Text: Kontakt + Link: /kontakt + Style: primary + +SEO: + Meta Title: porwoll.de | Die Webseite von Martin Porwoll + Meta Description: Martin Porwoll - Whistleblower im Zytoskandal Bottrop, Unternehmer und KĂ€mpfer fĂŒr Patientenwohl. Transparenz, Gerechtigkeit und IntegritĂ€t im Gesundheitswesen. +``` + +--- + +### Seite 2: Mensch + +```yaml +Title: Mensch +Slug: mensch +Status: Published + +Layout: + - Block: HeroBlock + Background Image: martin-porwoll-portrait + Headline: Martin Porwoll + Subline: Mensch + Alignment: center + Overlay: ✓ + + - Block: TextBlock + Width: medium + Content: | + Martin Porwoll ist ein engagierter Unternehmer im Gesundheitswesen und der entscheidende Whistleblower im Zytoskandal Bottrop. Seine Erfahrungen und sein unermĂŒdlicher Einsatz fĂŒr das Patientenwohl haben ihn zu einem inspirierenden Vorbild und einem wichtigen Akteur in der Branche gemacht. + + - Block: ImageTextBlock + Image: martin-porwoll-portrait + Image Position: left + Headline: Persönlicher Hintergrund + Content: | + Martin Porwoll wurde in Bottrop, Deutschland, geboren und wuchs in einer Familie auf, die Wert auf soziale Verantwortung und IntegritĂ€t legte. Diese Werte prĂ€gten seine Entscheidung, im Gesundheitswesen tĂ€tig zu werden und sich dafĂŒr einzusetzen, dass das Wohl der Patienten im Mittelpunkt steht. + CTA: + Text: Mehr zum Leben + Link: /leben + + - Block: ImageTextBlock + Image Position: right + Headline: Whistleblower im Zytoskandal Bottrop + Content: | + Im Jahr 2016 machte Martin Porwoll als Whistleblower im Zytoskandal Bottrop Schlagzeilen. Er war maßgeblich daran beteiligt, einen groß angelegten Betrug in der Krebsmedikamentenversorgung aufzudecken, bei dem tausende Patienten betroffen waren. Martin Porwolls Mut und seine Entschlossenheit, das Richtige zu tun, fĂŒhrten zur AufklĂ€rung des Skandals und zu weitreichenden VerĂ€nderungen im deutschen Gesundheitswesen. + CTA: + Text: Zum Zytoskandal + Link: /zytoskandal + + - Block: CardGridBlock + Headline: Unternehmerische TĂ€tigkeiten + Columns: 2 + Cards: + - Title: complex care solutions GmbH + Description: Nach dem Zytoskandal grĂŒndete Martin Porwoll die complex care solutions GmbH, ein Unternehmen, das sich darauf konzentriert, Patientenwohl in den Vordergrund zu stellen. + Link: /complex-care-solutions + + - Title: gunshin Holding UG + Description: ZusĂ€tzlich grĂŒndete Martin Porwoll die gunshin Holding, die Start-ups im Gesundheitswesen unterstĂŒtzt. + Link: /gunshin-holding + +SEO: + Meta Title: Martin Porwoll - Mensch | porwoll.de + Meta Description: Erfahren Sie mehr ĂŒber Martin Porwoll - seinen persönlichen Hintergrund, seine Rolle als Whistleblower und seine unternehmerischen AktivitĂ€ten im Gesundheitswesen. +``` + +--- + +### Seite 3: Kontakt + +```yaml +Title: Kontakt +Slug: kontakt +Status: Published + +Layout: + - Block: TextBlock + Width: medium + Content: | + ## Lassen Sie uns reden! + + Haben Sie Fragen, Anregungen oder möchten Sie mehr ĂŒber die Arbeit von Martin Porwoll, den Zytoskandal Bottrop oder die complex care solutions GmbH erfahren? + + Wir freuen uns von Ihnen zu hören! Zögern Sie nicht, uns zu kontaktieren – unser Team steht Ihnen gerne zur VerfĂŒgung und beantwortet Ihre Fragen. + + - Block: ContactFormBlock + Headline: Kontakt + Description: Schreiben Sie uns eine Nachricht + Recipient Email: info@porwoll.de + Show Phone: ✓ + Show Address: ✓ + Show Socials: ✓ + +SEO: + Meta Title: Kontakt | porwoll.de + Meta Description: Kontaktieren Sie Martin Porwoll - Telefon, E-Mail oder Kontaktformular. Wir freuen uns auf Ihre Nachricht. +``` + +--- + +### Seite 4: Whistleblowing + +```yaml +Title: Whistleblowing +Slug: whistleblowing +Status: Published + +Layout: + - Block: HeroBlock + Headline: Whistleblowing + Subline: Mut zur Wahrheit + Alignment: center + Overlay: ✓ + + - Block: TextBlock + Width: medium + Content: | + ## Was ist Whistleblowing? + + Whistleblowing bezeichnet das Aufdecken von MissstĂ€nden, illegalen Praktiken oder Gefahren fĂŒr die Öffentlichkeit durch Insider. Whistleblower setzen sich oft großen persönlichen Risiken aus, um die Wahrheit ans Licht zu bringen. + + Martin Porwoll wurde 2016 zum Whistleblower, als er den grĂ¶ĂŸten Pharma-Skandal der deutschen Nachkriegsgeschichte aufdeckte. + + - Block: CTABlock + Headline: Der Zytoskandal Bottrop + Description: Erfahren Sie mehr ĂŒber den Fall, der das deutsche Gesundheitswesen erschĂŒtterte. + Buttons: + - Text: Zum Zytoskandal + Link: /zytoskandal + Style: primary + +SEO: + Meta Title: Whistleblowing | porwoll.de + Meta Description: Whistleblowing - Mut zur Wahrheit. Erfahren Sie mehr ĂŒber Martin Porwolls Rolle als Whistleblower im Zytoskandal Bottrop. +``` + +--- + +### Seite 5: Zytoskandal + +```yaml +Title: Zytoskandal Bottrop +Slug: zytoskandal +Status: Published + +Layout: + - Block: HeroBlock + Headline: Der Zytoskandal Bottrop + Subline: Der grĂ¶ĂŸte Pharma-Skandal der deutschen Nachkriegsgeschichte + Alignment: center + + - Block: TextBlock + Width: medium + Content: | + ## Was geschah? + + Im Jahr 2016 wurde aufgedeckt, dass ein Apotheker in Bottrop ĂŒber Jahre hinweg Krebsmedikamente gestreckt oder durch Kochsalzlösung ersetzt hatte. Tausende Krebspatienten erhielten unwirksame Behandlungen. + + Martin Porwoll, damals kaufmĂ€nnischer Leiter der Apotheke, war maßgeblich an der Aufdeckung dieses Skandals beteiligt. + + - Block: TimelineBlock + Headline: Chronologie der Ereignisse + Events: + - Year: "2016" + Title: Aufdeckung + Description: Martin Porwoll bemerkt UnregelmĂ€ĂŸigkeiten und beginnt zu recherchieren + + - Year: "2016" + Title: Anzeige + Description: Der Fall wird den Behörden gemeldet + + - Year: "2017" + Title: Verhaftung + Description: Der verantwortliche Apotheker wird verhaftet + + - Year: "2018" + Title: Verurteilung + Description: Verurteilung zu 12 Jahren Haft + + - Block: TextBlock + Width: medium + Content: | + ## Die Folgen + + Der Zytoskandal fĂŒhrte zu weitreichenden Änderungen im deutschen Gesundheitswesen: + + - VerschĂ€rfte Kontrollen bei der Herstellung von Krebsmedikamenten + - Neue gesetzliche Regelungen zum Schutz von Whistleblowern + - Erhöhtes Bewusstsein fĂŒr Patientensicherheit + +SEO: + Meta Title: Zytoskandal Bottrop | porwoll.de + Meta Description: Der Zytoskandal Bottrop - wie Martin Porwoll den grĂ¶ĂŸten Pharma-Skandal der deutschen Nachkriegsgeschichte aufdeckte. +``` + +--- + +### Seite 6: gunshin Holding + +```yaml +Title: gunshin Holding UG +Slug: gunshin-holding +Status: Published + +Layout: + - Block: HeroBlock + Background Image: gunshin-logo + Headline: gunshin Holding UG + Alignment: center + Overlay: ✓ + + - Block: TextBlock + Width: medium + Content: | + Die gunshin Holding UG, gegrĂŒndet von Martin Porwoll, ist eine Beteiligungsgesellschaft, die sich auf die UnterstĂŒtzung und Förderung von Start-ups und jungen Unternehmen im Gesundheitswesen konzentriert. + + Die Holding hat es sich zur Aufgabe gemacht, innovative Ideen und Lösungen zu fördern, die das Wohl des Patienten in den Mittelpunkt stellen und einen positiven Einfluss auf die Branche haben. + + - Block: ImageTextBlock + Image: adobestock-vision + Image Position: right + Headline: Vision und Mission + Content: | + Die Vision der gunshin Holding UG ist es, durch die Förderung von Start-ups und innovativen Lösungen den Gesundheitssektor nachhaltig zu verĂ€ndern und damit das Patientenwohl zu stĂ€rken. + + Die Werte des Unternehmens basieren auf Transparenz, IntegritĂ€t und Kooperation, um gemeinsam mit den geförderten Start-ups erfolgreich zu wachsen. + + - Block: CardGridBlock + Headline: Unsere Leistungen + Columns: 3 + Cards: + - Title: Strategische Beratung + Description: Die gunshin Holding UG bietet den Start-Ups wertvolle strategische Beratung und unterstĂŒtzt sie bei der Entwicklung von GeschĂ€ftsmodellen, Markteintrittsstrategien und WachstumsplĂ€nen. + + - Title: Netzwerk und Partnerschaften + Description: Die Holding ermöglicht den Start-Ups den Zugang zu einem breiten Netzwerk von Experten, Partnern und potenziellen Kunden, um die Erfolgschancen zu erhöhen. + + - Title: Ressourcen und Infrastruktur + Description: Die gunshin Holding UG stellt den Start-Ups Ressourcen wie BĂŒrorĂ€ume, technische Infrastruktur und administrative UnterstĂŒtzung zur VerfĂŒgung. + + - Block: ImageTextBlock + Image: adobestock-erfolge + Image Position: left + Headline: Erfolge und Referenzen + Content: | + Die gunshin Holding UG hat bereits mehrere Start-ups erfolgreich unterstĂŒtzt und kann auf eine Reihe von Erfolgsgeschichten im Gesundheitswesen verweisen. + + Diese Erfolge zeigen, dass die Vision von Martin Porwoll, durch die Förderung innovativer Start-Ups das Wohl der Patienten in den Mittelpunkt zu stellen, FrĂŒchte trĂ€gt. + CTA: + Text: Zur gunshin.de + Link: https://gunshin.de + +SEO: + Meta Title: gunshin Holding UG | porwoll.de + Meta Description: Die gunshin Holding UG unterstĂŒtzt innovative Start-ups im Gesundheitswesen. Strategische Beratung, Netzwerk und Ressourcen fĂŒr Unternehmen mit Fokus auf Patientenwohl. +``` + +--- + +### Seite 7: complex care solutions + +```yaml +Title: complex care solutions GmbH +Slug: complex-care-solutions +Status: Published + +Layout: + - Block: HeroBlock + Headline: complex care solutions GmbH + Subline: Patientenwohl im Mittelpunkt + Alignment: center + + - Block: TextBlock + Width: medium + Content: | + Die complex care solutions GmbH wurde von Martin Porwoll gegrĂŒndet, um das Wohl der Patienten in den Mittelpunkt zu stellen und Übertherapie sowie Fehlversorgung aktiv zu bekĂ€mpfen. + + Das Unternehmen arbeitet eng mit medizinischen Einrichtungen, Krankenkassen und anderen Akteuren im Gesundheitswesen zusammen, um bessere und sicherere Versorgungslösungen fĂŒr Patienten zu entwickeln. + + - Block: CTABlock + Headline: Mehr erfahren + Description: Besuchen Sie die Webseite der complex care solutions GmbH + Buttons: + - Text: Zur complexcaresolutions.de + Link: https://complexcaresolutions.de + Style: primary + +SEO: + Meta Title: complex care solutions GmbH | porwoll.de + Meta Description: Die complex care solutions GmbH - gegrĂŒndet von Martin Porwoll fĂŒr Patientenwohl und gegen Übertherapie im Gesundheitswesen. +``` + +--- + +### Seite 8: Leben + +```yaml +Title: Leben +Slug: leben +Status: Published + +Layout: + - Block: HeroBlock + Headline: Leben + Subline: „Angst ist eine Reaktion, Mut eine Entscheidung" + Alignment: center + + - Block: TextBlock + Width: medium + Content: | + Diese Seite wird noch mit Inhalten gefĂŒllt. + + Hier wird Martin Porwolls persönlicher Werdegang und seine Lebensgeschichte prĂ€sentiert. + +SEO: + Meta Title: Leben | porwoll.de + Meta Description: Das Leben von Martin Porwoll - persönlicher Werdegang und Geschichte. +``` + +--- + +### Seite 9: Impressum + +```yaml +Title: Impressum +Slug: impressum +Status: Published + +Layout: + - Block: TextBlock + Width: narrow + Content: | + ## Impressum + + **Angaben gemĂ€ĂŸ § 5 TMG** + + Martin Porwoll + Hans-Böckler-Str. 19 + 46236 Bottrop + + **Kontakt** + + Telefon: 0800 80 44 100 + E-Mail: info@porwoll.de + + **Verantwortlich fĂŒr den Inhalt nach § 55 Abs. 2 RStV** + + Martin Porwoll + Hans-Böckler-Str. 19 + 46236 Bottrop + + **Haftung fĂŒr Inhalte** + + Als Diensteanbieter sind wir gemĂ€ĂŸ § 7 Abs.1 TMG fĂŒr eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht unter Verpflichtung, ĂŒbermittelte oder gespeicherte fremde Informationen zu ĂŒberwachen oder nach UmstĂ€nden zu forschen, die auf eine rechtswidrige TĂ€tigkeit hinweisen. + + Verpflichtungen zur Entfernung oder Sperrung der Nutzung von Informationen nach den allgemeinen Gesetzen bleiben hiervon unberĂŒhrt. Eine diesbezĂŒgliche Haftung ist jedoch erst ab dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung möglich. Bei Bekanntwerden von entsprechenden Rechtsverletzungen werden wir diese Inhalte umgehend entfernen. + +SEO: + Meta Title: Impressum | porwoll.de + Meta Description: Impressum der Webseite porwoll.de +``` + +--- + +### Seite 10: Datenschutz + +```yaml +Title: DatenschutzerklĂ€rung +Slug: datenschutz +Status: Published + +Layout: + - Block: TextBlock + Width: narrow + Content: | + ## DatenschutzerklĂ€rung + + **1. Datenschutz auf einen Blick** + + **Allgemeine Hinweise** + + Die folgenden Hinweise geben einen einfachen Überblick darĂŒber, was mit Ihren personenbezogenen Daten passiert, wenn Sie diese Website besuchen. Personenbezogene Daten sind alle Daten, mit denen Sie persönlich identifiziert werden können. + + **Datenerfassung auf dieser Website** + + *Wer ist verantwortlich fĂŒr die Datenerfassung auf dieser Website?* + + Die Datenverarbeitung auf dieser Website erfolgt durch den Websitebetreiber. Dessen Kontaktdaten können Sie dem Impressum dieser Website entnehmen. + + *Wie erfassen wir Ihre Daten?* + + Ihre Daten werden zum einen dadurch erhoben, dass Sie uns diese mitteilen. Hierbei kann es sich z.B. um Daten handeln, die Sie in ein Kontaktformular eingeben. + + Andere Daten werden automatisch beim Besuch der Website durch unsere IT-Systeme erfasst. Das sind vor allem technische Daten (z.B. Internetbrowser, Betriebssystem oder Uhrzeit des Seitenaufrufs). + + **2. Hosting** + + Diese Website wird auf eigenen Servern in Deutschland gehostet. + + **3. Kontaktformular** + + Wenn Sie uns per Kontaktformular Anfragen zukommen lassen, werden Ihre Angaben aus dem Anfrageformular inklusive der von Ihnen dort angegebenen Kontaktdaten zwecks Bearbeitung der Anfrage und fĂŒr den Fall von Anschlussfragen bei uns gespeichert. Diese Daten geben wir nicht ohne Ihre Einwilligung weiter. + + (Diese DatenschutzerklĂ€rung ist ein Platzhalter und muss durch eine vollstĂ€ndige, rechtskonforme Version ersetzt werden.) + +SEO: + Meta Title: DatenschutzerklĂ€rung | porwoll.de + Meta Description: DatenschutzerklĂ€rung der Webseite porwoll.de +``` + +--- + +## Teil 7: Navigation verknĂŒpfen + +Nachdem alle Pages erstellt sind: + +1. Gehe zu **https://pl.c2sgmbh.de/admin/globals/navigation** +2. Bearbeite **Main Menu** und **Footer Menu** +3. Ändere die Links von "custom" auf "page" und wĂ€hle die entsprechenden Seiten aus + +--- + +## Teil 8: Verifizierung + +### Checkliste + +- [ ] Site Settings vollstĂ€ndig ausgefĂŒllt +- [ ] Alle Social Links angelegt +- [ ] Beide Categories angelegt +- [ ] Alle Medien hochgeladen mit Alt-Texten +- [ ] Alle 10 Pages erstellt und auf "Published" gesetzt +- [ ] Navigation Main Menu konfiguriert +- [ ] Navigation Footer Menu konfiguriert + +### Frontend testen + +```bash +# Auf sv-dev +cd /home/developer/workspace/frontend-porwoll +npm run dev +``` + +Dann im Browser http://dev.zh3.de:3001 öffnen und prĂŒfen: + +- [ ] Startseite lĂ€dt mit Hero und Content +- [ ] Navigation funktioniert +- [ ] Unterseiten sind erreichbar +- [ ] Bilder werden geladen +- [ ] Footer zeigt Kontaktdaten +- [ ] Mobile Ansicht funktioniert + +### API-Endpoints prĂŒfen + +```bash +curl https://pl.c2sgmbh.de/api/pages | jq '.docs | length' +# Sollte 10 zurĂŒckgeben + +curl https://pl.c2sgmbh.de/api/globals/navigation | jq '.mainMenu | length' +# Sollte 4 zurĂŒckgeben (HauptmenĂŒ-EintrĂ€ge) +``` + +--- + +## Hinweise + +### Rich Text Editor (Lexical) + +Beim Eingeben von Content in TextBlocks nutzt Payload den Lexical Editor. Formatierungen: + +- **Fett:** Text markieren → Bold klicken +- **Überschriften:** Text markieren → Heading-Dropdown +- **Links:** Text markieren → Link-Icon +- **Listen:** Bullet-Icon oder Nummerierung + +### Bilder in Blöcken + +Bei Blöcken mit Bild-Feldern: +1. Klicke auf "Select Media" oder "Upload" +2. WĂ€hle ein bereits hochgeladenes Bild oder lade ein neues hoch +3. Bild wird automatisch verknĂŒpft + +### Reihenfolge der Blöcke + +Blöcke können per Drag & Drop umsortiert werden. Die Reihenfolge im Admin entspricht der Reihenfolge auf der Website. + +--- + +## GeschĂ€tzte Zeit + +| Aufgabe | Dauer | +|---------|-------| +| Site Settings | 5 Min | +| Social Links | 5 Min | +| Categories | 2 Min | +| Media Upload | 10 Min | +| Pages erstellen | 45-60 Min | +| Navigation | 10 Min | +| Verifizierung | 10 Min | +| **Gesamt** | **~90 Min** | diff --git a/docs/PROMPT_PRIVACY_POLICY_PAYLOAD.md b/docs/PROMPT_PRIVACY_POLICY_PAYLOAD.md new file mode 100644 index 0000000..9a1c6fb --- /dev/null +++ b/docs/PROMPT_PRIVACY_POLICY_PAYLOAD.md @@ -0,0 +1,457 @@ +# PROMPT: DatenschutzerklĂ€rung Integration - Payload Backend + +## Kontext + +Du arbeitest auf dem Server **sv-payload** (10.10.181.100) im Verzeichnis `/home/payload/payload-cms`. + +Die DatenschutzerklĂ€rungen werden extern vom Datenschutzbeauftragten ĂŒber **Alfright** gepflegt und sollen per iframe eingebunden werden. Die Konfiguration (Tenant-Key, Styling) wird pro Mandant in Payload CMS verwaltet. + +## Aufgabe + +Erweitere das System um eine **PrivacyPolicySettings Collection** fĂŒr die Verwaltung der externen DatenschutzerklĂ€rung pro Tenant. + +--- + +## Schritt 1: Collection erstellen + +Erstelle `src/collections/PrivacyPolicySettings.ts`: + +```typescript +// src/collections/PrivacyPolicySettings.ts + +import type { CollectionConfig } from 'payload' +import { tenantScopedPublicRead, authenticatedOnly } from '../lib/tenantAccess' + +/** + * PrivacyPolicySettings Collection + * + * Konfiguration fĂŒr externe DatenschutzerklĂ€rung (Alfright) pro Tenant. + * Öffentlich lesbar (fĂŒr Frontend), aber tenant-isoliert. + */ +export const PrivacyPolicySettings: CollectionConfig = { + slug: 'privacy-policy-settings', + admin: { + useAsTitle: 'title', + group: 'Consent Management', + description: 'Externe DatenschutzerklĂ€rung Konfiguration (Alfright)', + }, + access: { + read: tenantScopedPublicRead, + create: authenticatedOnly, + update: authenticatedOnly, + delete: authenticatedOnly, + }, + fields: [ + { + name: 'tenant', + type: 'relationship', + relationTo: 'tenants', + required: true, + unique: true, + admin: { + description: 'Jeder Tenant kann nur eine Konfiguration haben', + }, + }, + { + name: 'title', + type: 'text', + required: true, + defaultValue: 'DatenschutzerklĂ€rung', + admin: { + description: 'Interner Titel zur Identifikation', + }, + }, + { + name: 'provider', + type: 'select', + required: true, + defaultValue: 'alfright', + options: [ + { label: 'Alfright (extern via iframe)', value: 'alfright' }, + { label: 'Eigener Text (nicht implementiert)', value: 'internal' }, + ], + admin: { + description: 'Quelle der DatenschutzerklĂ€rung', + }, + }, + + // Alfright Konfiguration + { + name: 'alfright', + type: 'group', + label: 'Alfright Konfiguration', + admin: { + condition: (data) => data?.provider === 'alfright', + description: 'Einstellungen fĂŒr die Alfright Integration', + }, + fields: [ + { + name: 'tenantId', + type: 'text', + required: true, + defaultValue: 'alfright_schutzteam', + admin: { + description: 'Alfright Tenant-ID (aus dem iframe-Code)', + }, + }, + { + name: 'apiKey', + type: 'text', + required: true, + admin: { + description: 'Alfright API-Key / Dokument-ID (aus dem iframe-Code, z.B. "9f315103c43245bcb0806dd56c2be757")', + }, + }, + { + name: 'language', + type: 'select', + required: true, + defaultValue: 'de-de', + options: [ + { label: 'Deutsch (Deutschland)', value: 'de-de' }, + { label: 'Deutsch (Österreich)', value: 'de-at' }, + { label: 'Deutsch (Schweiz)', value: 'de-ch' }, + { label: 'Englisch (UK)', value: 'en-gb' }, + { label: 'Englisch (US)', value: 'en-us' }, + ], + admin: { + description: 'Sprache der DatenschutzerklĂ€rung', + }, + }, + { + name: 'iframeHeight', + type: 'number', + required: true, + defaultValue: 4000, + min: 500, + max: 10000, + admin: { + description: 'Höhe des iframes in Pixeln (empfohlen: 3000-5000)', + }, + }, + ], + }, + + // Styling (passend zum Website-Theme) + { + name: 'styling', + type: 'group', + label: 'Styling', + admin: { + condition: (data) => data?.provider === 'alfright', + description: 'Farben und Schriften an das Website-Design anpassen', + }, + fields: [ + { + name: 'headerColor', + type: 'text', + required: true, + defaultValue: '#ca8a04', + admin: { + description: 'Farbe der Überschriften (Hex-Code, z.B. #ca8a04 fĂŒr Gold)', + }, + }, + { + name: 'headerFont', + type: 'text', + required: true, + defaultValue: 'Inter, sans-serif', + admin: { + description: 'Schriftart der Überschriften', + }, + }, + { + name: 'headerSize', + type: 'text', + required: true, + defaultValue: '24px', + admin: { + description: 'SchriftgrĂ¶ĂŸe der HauptĂŒberschriften', + }, + }, + { + name: 'subheaderSize', + type: 'text', + required: true, + defaultValue: '18px', + admin: { + description: 'SchriftgrĂ¶ĂŸe der UnterĂŒberschriften', + }, + }, + { + name: 'fontColor', + type: 'text', + required: true, + defaultValue: '#f3f4f6', + admin: { + description: 'Textfarbe (Hex-Code, z.B. #f3f4f6 fĂŒr hellen Text)', + }, + }, + { + name: 'textFont', + type: 'text', + required: true, + defaultValue: 'Inter, sans-serif', + admin: { + description: 'Schriftart fĂŒr Fließtext', + }, + }, + { + name: 'textSize', + type: 'text', + required: true, + defaultValue: '16px', + admin: { + description: 'SchriftgrĂ¶ĂŸe fĂŒr Fließtext', + }, + }, + { + name: 'linkColor', + type: 'text', + required: true, + defaultValue: '#ca8a04', + admin: { + description: 'Linkfarbe (Hex-Code)', + }, + }, + { + name: 'backgroundColor', + type: 'text', + required: true, + defaultValue: '#111827', + admin: { + description: 'Hintergrundfarbe (Hex-Code, z.B. #111827 fĂŒr Dark Theme)', + }, + }, + ], + }, + + // Cookie-Tabelle Option + { + name: 'showCookieTable', + type: 'checkbox', + defaultValue: true, + admin: { + description: 'Cookie-Tabelle aus CookieInventory unterhalb der DatenschutzerklĂ€rung anzeigen', + }, + }, + { + name: 'cookieTableTitle', + type: 'text', + defaultValue: 'Übersicht der verwendeten Cookies', + admin: { + condition: (data) => data?.showCookieTable, + description: 'Überschrift fĂŒr die Cookie-Tabelle', + }, + }, + { + name: 'cookieTableDescription', + type: 'textarea', + defaultValue: 'ErgĂ€nzend zur DatenschutzerklĂ€rung finden Sie hier eine detaillierte Übersicht aller auf dieser Website eingesetzten Cookies. Sie können Ihre Cookie-Einstellungen jederzeit ĂŒber den Link "Cookie-Einstellungen" im Footer anpassen.', + admin: { + condition: (data) => data?.showCookieTable, + description: 'Einleitungstext fĂŒr die Cookie-Tabelle', + }, + }, + + // SEO + { + name: 'seo', + type: 'group', + label: 'SEO', + fields: [ + { + name: 'metaTitle', + type: 'text', + defaultValue: 'DatenschutzerklĂ€rung', + admin: { + description: 'Meta-Titel fĂŒr die Seite', + }, + }, + { + name: 'metaDescription', + type: 'textarea', + defaultValue: 'Informationen zum Datenschutz und zur Verarbeitung Ihrer personenbezogenen Daten.', + admin: { + description: 'Meta-Beschreibung fĂŒr Suchmaschinen', + }, + }, + ], + }, + ], +} +``` + +--- + +## Schritt 2: Collection in Payload Config registrieren + +Aktualisiere `src/payload.config.ts`: + +```typescript +// Import hinzufĂŒgen (bei den anderen Collection-Imports) +import { PrivacyPolicySettings } from './collections/PrivacyPolicySettings' + +// In collections Array hinzufĂŒgen +collections: [ + Users, + Media, + Tenants, + Pages, + Posts, + Categories, + SocialLinks, + CookieConfigurations, + CookieInventory, + ConsentLogs, + PrivacyPolicySettings, // NEU +], + +// In multiTenantPlugin collections hinzufĂŒgen +plugins: [ + multiTenantPlugin({ + tenantsSlug: 'tenants', + collections: { + // ... bestehende Collections ... + 'privacy-policy-settings': {}, // NEU + }, + }), +], +``` + +--- + +## Schritt 3: Build und Migration + +```bash +cd /home/payload/payload-cms + +# TypeScript Types generieren +pnpm payload generate:types + +# Migration erstellen +pnpm payload migrate:create + +# Migration ausfĂŒhren +pnpm payload migrate + +# Build +pnpm build + +# PM2 neu starten +pm2 restart payload +``` + +--- + +## Schritt 4: Initiale Daten anlegen + +Im Admin Panel unter **Consent Management → Privacy Policy Settings → Create**: + +### FĂŒr porwoll.de (Tenant 1): + +| Feld | Wert | +|------|------| +| Tenant | porwoll.de | +| Title | DatenschutzerklĂ€rung porwoll.de | +| Provider | Alfright (extern via iframe) | + +**Alfright Konfiguration:** + +| Feld | Wert | +|------|------| +| Tenant ID | `alfright_schutzteam` | +| API Key | `9f315103c43245bcb0806dd56c2be757` | +| Language | Deutsch (Deutschland) | +| iframe Height | 4000 | + +**Styling (Dark Theme):** + +| Feld | Wert | +|------|------| +| Header Color | `#ca8a04` | +| Header Font | `Inter, sans-serif` | +| Header Size | `24px` | +| Subheader Size | `18px` | +| Font Color | `#f3f4f6` | +| Text Font | `Inter, sans-serif` | +| Text Size | `16px` | +| Link Color | `#ca8a04` | +| Background Color | `#111827` | + +**Cookie-Tabelle:** + +| Feld | Wert | +|------|------| +| Show Cookie Table | ✅ Aktiviert | +| Cookie Table Title | Übersicht der verwendeten Cookies | + +**SEO:** + +| Feld | Wert | +|------|------| +| Meta Title | DatenschutzerklĂ€rung \| porwoll.de | +| Meta Description | Informationen zum Datenschutz und zur Verarbeitung Ihrer personenbezogenen Daten auf porwoll.de | + +--- + +## Schritt 5: API-Test + +```bash +# Privacy Policy Settings abrufen (mit Host-Header) +curl -s -H "Host: porwoll.de" "http://localhost:3000/api/privacy-policy-settings" | jq + +# Ohne Host-Header (sollte verweigert werden) +curl -s "http://localhost:3000/api/privacy-policy-settings" | jq +``` + +--- + +## Zusammenfassung + +| Datei | Aktion | +|-------|--------| +| `src/collections/PrivacyPolicySettings.ts` | NEU erstellt | +| `src/payload.config.ts` | Collection registriert | +| `src/payload-types.ts` | Automatisch generiert | + +## API-Endpoint + +| Endpoint | Methode | Auth | Beschreibung | +|----------|---------|------|--------------| +| `/api/privacy-policy-settings` | GET | Public (tenant-scoped) | Datenschutz-Konfiguration | + +## Datenmodell + +```typescript +interface PrivacyPolicySettings { + id: number + tenant: Tenant + title: string + provider: 'alfright' | 'internal' + alfright: { + tenantId: string + apiKey: string + language: string + iframeHeight: number + } + styling: { + headerColor: string + headerFont: string + headerSize: string + subheaderSize: string + fontColor: string + textFont: string + textSize: string + linkColor: string + backgroundColor: string + } + showCookieTable: boolean + cookieTableTitle: string + cookieTableDescription: string + seo: { + metaTitle: string + metaDescription: string + } +} +``` diff --git a/docs/PROMPT_UNIVERSAL_FEATURES_PAYLOAD.md b/docs/PROMPT_UNIVERSAL_FEATURES_PAYLOAD.md new file mode 100644 index 0000000..4f07d29 --- /dev/null +++ b/docs/PROMPT_UNIVERSAL_FEATURES_PAYLOAD.md @@ -0,0 +1,1437 @@ +# PROMPT: Universelle Features - Payload CMS + +## Kontext + +Du arbeitest auf dem Server **sv-payload** (10.10.181.100) im Verzeichnis `/home/payload/payload-cms`. + +Diese Erweiterungen sind fĂŒr **alle Tenants** nutzbar und bilden die Grundlage fĂŒr Blog, News, Testimonials, Newsletter und Prozess-Darstellungen. + +## Übersicht + +``` +COLLECTIONS (3) +━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +✏ posts → ERWEITERN (type, isFeatured, excerpt) +🆕 testimonials → NEU +🆕 newsletter-subscribers → NEU + +BLOCKS (5) +━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +🆕 posts-list-block +🆕 testimonials-block +🆕 newsletter-block +🆕 process-steps-block +✏ timeline-block → ERWEITERN +``` + +--- + +## TEIL 1: Collections + +### 1.1 Posts Collection erweitern + +Bearbeite `src/collections/Posts.ts` und fĂŒge folgende Felder hinzu: + +```typescript +// src/collections/Posts.ts + +import type { CollectionConfig } from 'payload' +import { authenticatedOnly, tenantScopedPublicRead } from '../lib/tenantAccess' + +export const Posts: CollectionConfig = { + slug: 'posts', + admin: { + useAsTitle: 'title', + group: 'Content', + defaultColumns: ['title', 'type', 'isFeatured', 'status', 'publishedAt', 'tenant'], + }, + access: { + read: tenantScopedPublicRead, + create: authenticatedOnly, + update: authenticatedOnly, + delete: authenticatedOnly, + }, + fields: [ + { + name: 'tenant', + type: 'relationship', + relationTo: 'tenants', + required: true, + admin: { + position: 'sidebar', + }, + }, + { + name: 'title', + type: 'text', + required: true, + }, + { + name: 'slug', + type: 'text', + required: true, + unique: true, + admin: { + description: 'URL-Pfad (z.B. "mein-erster-beitrag")', + }, + }, + // === NEUE FELDER === + { + name: 'type', + type: 'select', + required: true, + defaultValue: 'blog', + options: [ + { label: 'Blog-Artikel', value: 'blog' }, + { label: 'News/Aktuelles', value: 'news' }, + { label: 'Pressemitteilung', value: 'press' }, + { label: 'AnkĂŒndigung', value: 'announcement' }, + ], + admin: { + position: 'sidebar', + description: 'Art des Beitrags', + }, + }, + { + name: 'isFeatured', + type: 'checkbox', + defaultValue: false, + label: 'Hervorgehoben', + admin: { + position: 'sidebar', + description: 'Auf Startseite/oben anzeigen', + }, + }, + { + name: 'excerpt', + type: 'textarea', + label: 'Kurzfassung', + maxLength: 300, + admin: { + description: 'FĂŒr Übersichten und SEO (max. 300 Zeichen). Wird automatisch aus Content generiert, falls leer.', + }, + }, + // === ENDE NEUE FELDER === + { + name: 'featuredImage', + type: 'upload', + relationTo: 'media', + label: 'Beitragsbild', + }, + { + name: 'content', + type: 'richText', + required: true, + }, + { + name: 'categories', + type: 'relationship', + relationTo: 'categories', + hasMany: true, + }, + { + name: 'author', + type: 'text', + label: 'Autor', + }, + { + name: 'status', + type: 'select', + defaultValue: 'draft', + options: [ + { label: 'Entwurf', value: 'draft' }, + { label: 'Veröffentlicht', value: 'published' }, + { label: 'Archiviert', value: 'archived' }, + ], + admin: { + position: 'sidebar', + }, + }, + { + name: 'publishedAt', + type: 'date', + label: 'Veröffentlichungsdatum', + admin: { + position: 'sidebar', + date: { + pickerAppearance: 'dayAndTime', + }, + }, + }, + { + name: 'seo', + type: 'group', + label: 'SEO', + fields: [ + { + name: 'metaTitle', + type: 'text', + label: 'Meta-Titel', + }, + { + name: 'metaDescription', + type: 'textarea', + label: 'Meta-Beschreibung', + maxLength: 160, + }, + { + name: 'ogImage', + type: 'upload', + relationTo: 'media', + label: 'Social Media Bild', + }, + ], + }, + ], +} +``` + +--- + +### 1.2 Testimonials Collection erstellen + +Erstelle `src/collections/Testimonials.ts`: + +```typescript +// src/collections/Testimonials.ts + +import type { CollectionConfig } from 'payload' +import { authenticatedOnly, tenantScopedPublicRead } from '../lib/tenantAccess' + +/** + * Testimonials Collection + * + * Kundenbewertungen und Referenzen, wiederverwendbar auf allen Seiten. + * Tenant-scoped fĂŒr Multi-Tenant-Betrieb. + */ +export const Testimonials: CollectionConfig = { + slug: 'testimonials', + admin: { + useAsTitle: 'author', + group: 'Content', + defaultColumns: ['author', 'company', 'rating', 'isActive', 'tenant'], + description: 'Kundenstimmen und Bewertungen', + }, + access: { + read: tenantScopedPublicRead, + create: authenticatedOnly, + update: authenticatedOnly, + delete: authenticatedOnly, + }, + fields: [ + { + name: 'tenant', + type: 'relationship', + relationTo: 'tenants', + required: true, + admin: { + position: 'sidebar', + }, + }, + { + name: 'quote', + type: 'textarea', + required: true, + label: 'Zitat/Bewertung', + admin: { + description: 'Die Aussage des Kunden', + }, + }, + { + name: 'author', + type: 'text', + required: true, + label: 'Name', + }, + { + name: 'role', + type: 'text', + label: 'Position/Rolle', + admin: { + description: 'z.B. "Patient", "GeschĂ€ftsfĂŒhrer", "Marketing Manager"', + }, + }, + { + name: 'company', + type: 'text', + label: 'Unternehmen/Organisation', + }, + { + name: 'image', + type: 'upload', + relationTo: 'media', + label: 'Foto', + admin: { + description: 'Portrait-Foto (empfohlen: quadratisch, min. 200x200px)', + }, + }, + { + name: 'rating', + type: 'number', + min: 1, + max: 5, + label: 'Bewertung (1-5 Sterne)', + admin: { + description: 'Optional: Sterne-Bewertung', + }, + }, + { + name: 'source', + type: 'text', + label: 'Quelle', + admin: { + description: 'z.B. "Google Reviews", "Trustpilot", "Persönlich"', + }, + }, + { + name: 'sourceUrl', + type: 'text', + label: 'Link zur Quelle', + admin: { + description: 'URL zur Original-Bewertung (falls öffentlich)', + }, + }, + { + name: 'date', + type: 'date', + label: 'Datum der Bewertung', + admin: { + position: 'sidebar', + }, + }, + { + name: 'isActive', + type: 'checkbox', + defaultValue: true, + label: 'Aktiv/Sichtbar', + admin: { + position: 'sidebar', + description: 'Inaktive Testimonials werden nicht angezeigt', + }, + }, + { + name: 'order', + type: 'number', + defaultValue: 0, + label: 'Sortierung', + admin: { + position: 'sidebar', + description: 'Niedrigere Zahlen werden zuerst angezeigt', + }, + }, + ], +} +``` + +--- + +### 1.3 Newsletter Subscribers Collection erstellen + +Erstelle `src/collections/NewsletterSubscribers.ts`: + +```typescript +// src/collections/NewsletterSubscribers.ts + +import type { CollectionConfig } from 'payload' +import { authenticatedOnly } from '../lib/tenantAccess' + +/** + * Newsletter Subscribers Collection + * + * DSGVO-konforme Speicherung von Newsletter-Anmeldungen. + * Öffentlich schreibbar (Anmeldung), nur fĂŒr Admins lesbar. + */ +export const NewsletterSubscribers: CollectionConfig = { + slug: 'newsletter-subscribers', + admin: { + useAsTitle: 'email', + group: 'Marketing', + defaultColumns: ['email', 'status', 'source', 'subscribedAt', 'tenant'], + description: 'Newsletter-Abonnenten (DSGVO-konform)', + }, + access: { + // Nur Admins können Subscribers lesen (Datenschutz) + read: authenticatedOnly, + // Öffentlich subscriben möglich + create: () => true, + update: authenticatedOnly, + delete: authenticatedOnly, + }, + fields: [ + { + name: 'tenant', + type: 'relationship', + relationTo: 'tenants', + required: true, + admin: { + position: 'sidebar', + }, + }, + { + name: 'email', + type: 'email', + required: true, + label: 'E-Mail-Adresse', + }, + { + name: 'firstName', + type: 'text', + label: 'Vorname', + }, + { + name: 'lastName', + type: 'text', + label: 'Nachname', + }, + { + name: 'status', + type: 'select', + required: true, + defaultValue: 'pending', + options: [ + { label: 'Ausstehend (Double Opt-In)', value: 'pending' }, + { label: 'BestĂ€tigt', value: 'confirmed' }, + { label: 'Abgemeldet', value: 'unsubscribed' }, + { label: 'Bounced', value: 'bounced' }, + ], + admin: { + position: 'sidebar', + }, + }, + { + name: 'interests', + type: 'select', + hasMany: true, + label: 'Interessen', + options: [ + { label: 'Allgemeine Updates', value: 'general' }, + { label: 'Blog-Artikel', value: 'blog' }, + { label: 'Produkt-News', value: 'products' }, + { label: 'Angebote & Aktionen', value: 'offers' }, + { label: 'Events', value: 'events' }, + ], + }, + { + name: 'source', + type: 'text', + label: 'Anmeldequelle', + admin: { + description: 'z.B. "Footer", "Popup", "Blog-Artikel", "Kontakt-Seite"', + }, + }, + { + name: 'subscribedAt', + type: 'date', + label: 'Anmeldedatum', + admin: { + readOnly: true, + date: { pickerAppearance: 'dayAndTime' }, + }, + }, + { + name: 'confirmedAt', + type: 'date', + label: 'BestĂ€tigungsdatum', + admin: { + readOnly: true, + date: { pickerAppearance: 'dayAndTime' }, + }, + }, + { + name: 'unsubscribedAt', + type: 'date', + label: 'Abmeldedatum', + admin: { + readOnly: true, + date: { pickerAppearance: 'dayAndTime' }, + }, + }, + { + name: 'confirmationToken', + type: 'text', + label: 'BestĂ€tigungs-Token', + admin: { + readOnly: true, + hidden: true, + }, + }, + { + name: 'ipAddress', + type: 'text', + label: 'IP-Adresse', + admin: { + readOnly: true, + description: 'DSGVO-Nachweis der Anmeldung', + }, + }, + { + name: 'userAgent', + type: 'text', + label: 'User Agent', + admin: { + readOnly: true, + hidden: true, + }, + }, + ], + hooks: { + beforeChange: [ + ({ data, operation }) => { + // Automatisch Timestamps setzen + if (operation === 'create') { + data.subscribedAt = new Date().toISOString() + // ZufĂ€lliges Token fĂŒr Double Opt-In + data.confirmationToken = crypto.randomUUID() + } + + // Status-Änderungen tracken + if (data.status === 'confirmed' && !data.confirmedAt) { + data.confirmedAt = new Date().toISOString() + } + if (data.status === 'unsubscribed' && !data.unsubscribedAt) { + data.unsubscribedAt = new Date().toISOString() + } + + return data + }, + ], + }, + // Index fĂŒr schnelle Suche + indexes: [ + { + fields: { email: 1, tenant: 1 }, + unique: true, + }, + ], +} +``` + +--- + +## TEIL 2: Blocks definieren + +### 2.1 Block-Definitionen fĂŒr Pages Collection + +Erstelle `src/blocks/index.ts` (oder erweitere bestehende Datei): + +```typescript +// src/blocks/index.ts + +import type { Block } from 'payload' + +/** + * Posts List Block + * Zeigt Blog-Artikel, News oder andere Post-Typen an + */ +export const PostsListBlock: Block = { + slug: 'posts-list-block', + labels: { + singular: 'Blog/News Liste', + plural: 'Blog/News Listen', + }, + imageURL: '/assets/blocks/posts-list.png', + fields: [ + { + name: 'title', + type: 'text', + label: 'Überschrift', + }, + { + name: 'subtitle', + type: 'text', + label: 'Untertitel', + }, + { + name: 'postType', + type: 'select', + required: true, + defaultValue: 'blog', + label: 'Beitragstyp', + options: [ + { label: 'Blog-Artikel', value: 'blog' }, + { label: 'News/Aktuelles', value: 'news' }, + { label: 'Pressemitteilungen', value: 'press' }, + { label: 'AnkĂŒndigungen', value: 'announcement' }, + { label: 'Alle BeitrĂ€ge', value: 'all' }, + ], + }, + { + name: 'layout', + type: 'select', + defaultValue: 'grid', + label: 'Layout', + options: [ + { label: 'Grid (Karten)', value: 'grid' }, + { label: 'Liste', value: 'list' }, + { label: 'Featured + Grid', value: 'featured' }, + { label: 'Kompakt (Sidebar)', value: 'compact' }, + { label: 'Masonry', value: 'masonry' }, + ], + }, + { + name: 'columns', + type: 'select', + defaultValue: '3', + label: 'Spalten', + options: [ + { label: '2 Spalten', value: '2' }, + { label: '3 Spalten', value: '3' }, + { label: '4 Spalten', value: '4' }, + ], + admin: { + condition: (data, siblingData) => + siblingData?.layout === 'grid' || + siblingData?.layout === 'featured' || + siblingData?.layout === 'masonry', + }, + }, + { + name: 'limit', + type: 'number', + defaultValue: 6, + min: 1, + max: 24, + label: 'Anzahl BeitrĂ€ge', + }, + { + name: 'showFeaturedOnly', + type: 'checkbox', + defaultValue: false, + label: 'Nur hervorgehobene anzeigen', + }, + { + name: 'filterByCategory', + type: 'relationship', + relationTo: 'categories', + hasMany: true, + label: 'Nach Kategorien filtern', + admin: { + description: 'Leer = alle Kategorien', + }, + }, + { + name: 'showExcerpt', + type: 'checkbox', + defaultValue: true, + label: 'Kurzfassung anzeigen', + }, + { + name: 'showDate', + type: 'checkbox', + defaultValue: true, + label: 'Datum anzeigen', + }, + { + name: 'showAuthor', + type: 'checkbox', + defaultValue: false, + label: 'Autor anzeigen', + }, + { + name: 'showCategory', + type: 'checkbox', + defaultValue: true, + label: 'Kategorie anzeigen', + }, + { + name: 'showPagination', + type: 'checkbox', + defaultValue: false, + label: 'Pagination anzeigen', + }, + { + name: 'showReadMore', + type: 'checkbox', + defaultValue: true, + label: '"Alle anzeigen" Link', + }, + { + name: 'readMoreLabel', + type: 'text', + defaultValue: 'Alle BeitrĂ€ge anzeigen', + admin: { + condition: (data, siblingData) => siblingData?.showReadMore, + }, + }, + { + name: 'readMoreLink', + type: 'text', + defaultValue: '/blog', + admin: { + condition: (data, siblingData) => siblingData?.showReadMore, + }, + }, + { + name: 'backgroundColor', + type: 'select', + defaultValue: 'white', + label: 'Hintergrund', + options: [ + { label: 'Weiß', value: 'white' }, + { label: 'Hell (Grau)', value: 'light' }, + { label: 'Dunkel', value: 'dark' }, + ], + }, + ], +} + +/** + * Testimonials Block + * Zeigt Kundenstimmen aus der Testimonials Collection + */ +export const TestimonialsBlock: Block = { + slug: 'testimonials-block', + labels: { + singular: 'Testimonials', + plural: 'Testimonials', + }, + imageURL: '/assets/blocks/testimonials.png', + fields: [ + { + name: 'title', + type: 'text', + defaultValue: 'Das sagen unsere Kunden', + label: 'Überschrift', + }, + { + name: 'subtitle', + type: 'text', + label: 'Untertitel', + }, + { + name: 'layout', + type: 'select', + defaultValue: 'slider', + label: 'Layout', + options: [ + { label: 'Slider/Karussell', value: 'slider' }, + { label: 'Grid (Karten)', value: 'grid' }, + { label: 'Einzeln (Featured)', value: 'single' }, + { label: 'Masonry', value: 'masonry' }, + { label: 'Liste', value: 'list' }, + ], + }, + { + name: 'columns', + type: 'select', + defaultValue: '3', + label: 'Spalten', + options: [ + { label: '2 Spalten', value: '2' }, + { label: '3 Spalten', value: '3' }, + { label: '4 Spalten', value: '4' }, + ], + admin: { + condition: (data, siblingData) => + siblingData?.layout === 'grid' || + siblingData?.layout === 'masonry', + }, + }, + { + name: 'displayMode', + type: 'select', + defaultValue: 'all', + label: 'Auswahl', + options: [ + { label: 'Alle aktiven Testimonials', value: 'all' }, + { label: 'Handverlesene Auswahl', value: 'selected' }, + ], + }, + { + name: 'selectedTestimonials', + type: 'relationship', + relationTo: 'testimonials', + hasMany: true, + label: 'Testimonials auswĂ€hlen', + admin: { + condition: (data, siblingData) => siblingData?.displayMode === 'selected', + }, + }, + { + name: 'limit', + type: 'number', + defaultValue: 6, + min: 1, + max: 20, + label: 'Maximale Anzahl', + admin: { + condition: (data, siblingData) => siblingData?.displayMode === 'all', + }, + }, + { + name: 'showRating', + type: 'checkbox', + defaultValue: true, + label: 'Sterne-Bewertung anzeigen', + }, + { + name: 'showImage', + type: 'checkbox', + defaultValue: true, + label: 'Foto anzeigen', + }, + { + name: 'showCompany', + type: 'checkbox', + defaultValue: true, + label: 'Unternehmen anzeigen', + }, + { + name: 'showSource', + type: 'checkbox', + defaultValue: false, + label: 'Quelle anzeigen', + }, + { + name: 'autoplay', + type: 'checkbox', + defaultValue: true, + label: 'Automatisch wechseln', + admin: { + condition: (data, siblingData) => siblingData?.layout === 'slider', + }, + }, + { + name: 'autoplaySpeed', + type: 'number', + defaultValue: 5000, + min: 2000, + max: 15000, + label: 'Wechselintervall (ms)', + admin: { + condition: (data, siblingData) => + siblingData?.layout === 'slider' && siblingData?.autoplay, + }, + }, + { + name: 'backgroundColor', + type: 'select', + defaultValue: 'light', + label: 'Hintergrund', + options: [ + { label: 'Weiß', value: 'white' }, + { label: 'Hell (Grau)', value: 'light' }, + { label: 'Dunkel', value: 'dark' }, + { label: 'Akzentfarbe', value: 'accent' }, + ], + }, + ], +} + +/** + * Newsletter Block + * Anmeldeformular fĂŒr Newsletter + */ +export const NewsletterBlock: Block = { + slug: 'newsletter-block', + labels: { + singular: 'Newsletter Anmeldung', + plural: 'Newsletter Anmeldungen', + }, + imageURL: '/assets/blocks/newsletter.png', + fields: [ + { + name: 'title', + type: 'text', + defaultValue: 'Newsletter abonnieren', + label: 'Überschrift', + }, + { + name: 'subtitle', + type: 'textarea', + defaultValue: 'Erhalten Sie regelmĂ€ĂŸig Updates und Neuigkeiten direkt in Ihr Postfach.', + label: 'Beschreibung', + }, + { + name: 'layout', + type: 'select', + defaultValue: 'inline', + label: 'Layout', + options: [ + { label: 'Inline (Eingabe + Button nebeneinander)', value: 'inline' }, + { label: 'Gestapelt (untereinander)', value: 'stacked' }, + { label: 'Mit Bild (50/50)', value: 'with-image' }, + { label: 'Minimal (nur Input)', value: 'minimal' }, + { label: 'Card (Karte)', value: 'card' }, + ], + }, + { + name: 'image', + type: 'upload', + relationTo: 'media', + label: 'Bild', + admin: { + condition: (data, siblingData) => siblingData?.layout === 'with-image', + }, + }, + { + name: 'imagePosition', + type: 'select', + defaultValue: 'left', + label: 'Bildposition', + options: [ + { label: 'Links', value: 'left' }, + { label: 'Rechts', value: 'right' }, + ], + admin: { + condition: (data, siblingData) => siblingData?.layout === 'with-image', + }, + }, + { + name: 'collectName', + type: 'checkbox', + defaultValue: false, + label: 'Name abfragen', + }, + { + name: 'showInterests', + type: 'checkbox', + defaultValue: false, + label: 'Interessen zur Auswahl anbieten', + }, + { + name: 'availableInterests', + type: 'select', + hasMany: true, + label: 'VerfĂŒgbare Interessen', + options: [ + { label: 'Allgemeine Updates', value: 'general' }, + { label: 'Blog-Artikel', value: 'blog' }, + { label: 'Produkt-News', value: 'products' }, + { label: 'Angebote & Aktionen', value: 'offers' }, + { label: 'Events', value: 'events' }, + ], + admin: { + condition: (data, siblingData) => siblingData?.showInterests, + }, + }, + { + name: 'buttonText', + type: 'text', + defaultValue: 'Anmelden', + label: 'Button-Text', + }, + { + name: 'placeholderEmail', + type: 'text', + defaultValue: 'Ihre E-Mail-Adresse', + label: 'Placeholder E-Mail', + }, + { + name: 'successMessage', + type: 'textarea', + defaultValue: 'Vielen Dank! Bitte bestĂ€tigen Sie Ihre E-Mail-Adresse ĂŒber den Link in der BestĂ€tigungsmail.', + label: 'Erfolgsmeldung', + }, + { + name: 'errorMessage', + type: 'text', + defaultValue: 'Es ist ein Fehler aufgetreten. Bitte versuchen Sie es spĂ€ter erneut.', + label: 'Fehlermeldung', + }, + { + name: 'privacyText', + type: 'textarea', + defaultValue: 'Mit der Anmeldung akzeptieren Sie unsere DatenschutzerklĂ€rung. Sie können sich jederzeit abmelden.', + label: 'Datenschutz-Hinweis', + }, + { + name: 'privacyLink', + type: 'text', + defaultValue: '/datenschutz', + label: 'Link zur DatenschutzerklĂ€rung', + }, + { + name: 'source', + type: 'text', + defaultValue: 'website', + label: 'Tracking-Quelle', + admin: { + description: 'Wird gespeichert um zu tracken, wo die Anmeldung erfolgte', + }, + }, + { + name: 'backgroundColor', + type: 'select', + defaultValue: 'accent', + label: 'Hintergrund', + options: [ + { label: 'Weiß', value: 'white' }, + { label: 'Hell (Grau)', value: 'light' }, + { label: 'Dunkel', value: 'dark' }, + { label: 'Akzentfarbe', value: 'accent' }, + ], + }, + ], +} + +/** + * Process Steps Block + * Zeigt Prozess-Schritte / "So funktioniert es" + */ +export const ProcessStepsBlock: Block = { + slug: 'process-steps-block', + labels: { + singular: 'Prozess/Schritte', + plural: 'Prozess/Schritte', + }, + imageURL: '/assets/blocks/process-steps.png', + fields: [ + { + name: 'title', + type: 'text', + defaultValue: 'So funktioniert es', + label: 'Überschrift', + }, + { + name: 'subtitle', + type: 'text', + label: 'Untertitel', + }, + { + name: 'layout', + type: 'select', + defaultValue: 'horizontal', + label: 'Layout', + options: [ + { label: 'Horizontal (nebeneinander)', value: 'horizontal' }, + { label: 'Vertikal (untereinander)', value: 'vertical' }, + { label: 'Alternierend (Zickzack)', value: 'alternating' }, + { label: 'Mit Verbindungslinien', value: 'connected' }, + { label: 'Timeline-Stil', value: 'timeline' }, + ], + }, + { + name: 'showNumbers', + type: 'checkbox', + defaultValue: true, + label: 'Schritt-Nummern anzeigen', + }, + { + name: 'showIcons', + type: 'checkbox', + defaultValue: true, + label: 'Icons anzeigen', + }, + { + name: 'steps', + type: 'array', + label: 'Schritte', + minRows: 2, + maxRows: 10, + fields: [ + { + name: 'title', + type: 'text', + required: true, + label: 'Schritt-Titel', + }, + { + name: 'description', + type: 'textarea', + label: 'Beschreibung', + }, + { + name: 'icon', + type: 'text', + label: 'Icon', + admin: { + description: 'Emoji oder Icon-Name (z.B. "📞", "✓", "1")', + }, + }, + { + name: 'image', + type: 'upload', + relationTo: 'media', + label: 'Bild (optional)', + }, + ], + }, + { + name: 'cta', + type: 'group', + label: 'Call-to-Action', + fields: [ + { + name: 'show', + type: 'checkbox', + defaultValue: false, + label: 'CTA anzeigen', + }, + { + name: 'label', + type: 'text', + defaultValue: 'Jetzt starten', + label: 'Button-Text', + admin: { + condition: (data, siblingData) => siblingData?.show, + }, + }, + { + name: 'href', + type: 'text', + label: 'Link', + admin: { + condition: (data, siblingData) => siblingData?.show, + }, + }, + { + name: 'variant', + type: 'select', + defaultValue: 'default', + label: 'Button-Stil', + options: [ + { label: 'Standard', value: 'default' }, + { label: 'Ghost', value: 'ghost' }, + { label: 'Light', value: 'light' }, + ], + admin: { + condition: (data, siblingData) => siblingData?.show, + }, + }, + ], + }, + { + name: 'backgroundColor', + type: 'select', + defaultValue: 'white', + label: 'Hintergrund', + options: [ + { label: 'Weiß', value: 'white' }, + { label: 'Hell (Grau)', value: 'light' }, + { label: 'Dunkel', value: 'dark' }, + ], + }, + ], +} + +/** + * Timeline Block (erweitert) + * Chronologische Darstellung von Ereignissen + */ +export const TimelineBlock: Block = { + slug: 'timeline-block', + labels: { + singular: 'Timeline', + plural: 'Timelines', + }, + imageURL: '/assets/blocks/timeline.png', + fields: [ + { + name: 'title', + type: 'text', + label: 'Überschrift', + }, + { + name: 'subtitle', + type: 'text', + label: 'Untertitel', + }, + { + name: 'layout', + type: 'select', + defaultValue: 'vertical', + label: 'Layout', + options: [ + { label: 'Vertikal (Standard)', value: 'vertical' }, + { label: 'Alternierend (links/rechts)', value: 'alternating' }, + { label: 'Horizontal (Zeitleiste)', value: 'horizontal' }, + ], + }, + { + name: 'showConnector', + type: 'checkbox', + defaultValue: true, + label: 'Verbindungslinie anzeigen', + }, + { + name: 'markerStyle', + type: 'select', + defaultValue: 'dot', + label: 'Marker-Stil', + options: [ + { label: 'Punkt', value: 'dot' }, + { label: 'Nummer', value: 'number' }, + { label: 'Icon', value: 'icon' }, + { label: 'Jahr/Datum', value: 'date' }, + ], + }, + { + name: 'items', + type: 'array', + label: 'EintrĂ€ge', + minRows: 1, + fields: [ + { + name: 'year', + type: 'text', + label: 'Jahr/Datum', + admin: { + description: 'z.B. "2024", "Januar 2024", "15.03.2024"', + }, + }, + { + name: 'title', + type: 'text', + required: true, + label: 'Titel', + }, + { + name: 'description', + type: 'textarea', + label: 'Beschreibung', + }, + { + name: 'icon', + type: 'text', + label: 'Icon', + admin: { + description: 'Emoji oder Icon-Name', + }, + }, + { + name: 'image', + type: 'upload', + relationTo: 'media', + label: 'Bild (optional)', + }, + { + name: 'link', + type: 'group', + label: 'Link (optional)', + fields: [ + { + name: 'label', + type: 'text', + label: 'Link-Text', + }, + { + name: 'href', + type: 'text', + label: 'URL', + }, + ], + }, + ], + }, + { + name: 'backgroundColor', + type: 'select', + defaultValue: 'white', + label: 'Hintergrund', + options: [ + { label: 'Weiß', value: 'white' }, + { label: 'Hell (Grau)', value: 'light' }, + { label: 'Dunkel', value: 'dark' }, + ], + }, + ], +} + +// Export alle Blocks +export const universalBlocks = [ + PostsListBlock, + TestimonialsBlock, + NewsletterBlock, + ProcessStepsBlock, + TimelineBlock, +] +``` + +--- + +## TEIL 3: Integration in Payload Config + +### 3.1 payload.config.ts aktualisieren + +```typescript +// src/payload.config.ts + +// === IMPORTS HINZUFÜGEN === +import { Posts } from './collections/Posts' +import { Testimonials } from './collections/Testimonials' +import { NewsletterSubscribers } from './collections/NewsletterSubscribers' +import { + PostsListBlock, + TestimonialsBlock, + NewsletterBlock, + ProcessStepsBlock, + TimelineBlock, +} from './blocks' + +// === COLLECTIONS ARRAY === +collections: [ + Users, + Media, + Tenants, + Pages, + Posts, // Erweitert + Categories, + Testimonials, // NEU + NewsletterSubscribers, // NEU + SocialLinks, + CookieConfigurations, + CookieInventory, + ConsentLogs, + PrivacyPolicySettings, +], + +// === MULTI-TENANT PLUGIN === +plugins: [ + multiTenantPlugin({ + tenantsSlug: 'tenants', + collections: { + 'pages': {}, + 'posts': {}, + 'media': {}, + 'categories': {}, + 'testimonials': {}, // NEU + 'newsletter-subscribers': {}, // NEU + 'social-links': {}, + 'cookie-configurations': {}, + 'cookie-inventory': {}, + 'privacy-policy-settings': {}, + }, + }), +], +``` + +### 3.2 Pages Collection: Blocks registrieren + +In der Pages Collection (`src/collections/Pages.ts`) die neuen Blocks zum `layout` Feld hinzufĂŒgen: + +```typescript +// src/collections/Pages.ts + +import { + PostsListBlock, + TestimonialsBlock, + NewsletterBlock, + ProcessStepsBlock, + TimelineBlock, +} from '../blocks' + +// Im fields Array: +{ + name: 'layout', + type: 'blocks', + label: 'Seiteninhalt', + blocks: [ + // Bestehende Blocks... + HeroBlock, + TextBlock, + ImageTextBlock, + CardGridBlock, + QuoteBlock, + CTABlock, + ContactFormBlock, + DividerBlock, + VideoBlock, + + // Neue Blocks + PostsListBlock, + TestimonialsBlock, + NewsletterBlock, + ProcessStepsBlock, + TimelineBlock, + ], +} +``` + +--- + +## TEIL 4: Build und Migration + +```bash +cd /home/payload/payload-cms + +# TypeScript Types generieren +pnpm payload generate:types + +# Migration erstellen (fĂŒr neue Collections) +pnpm payload migrate:create + +# Migration ausfĂŒhren +pnpm payload migrate + +# Build +pnpm build + +# PM2 neu starten +pm2 restart payload + +# Logs prĂŒfen +pm2 logs payload --lines 50 +``` + +--- + +## TEIL 5: Verifizierung + +### API-Tests + +```bash +# Posts mit neuem Type-Feld +curl -s "http://localhost:3000/api/posts?where[type][equals]=blog" | jq '.docs | length' + +# Testimonials Collection +curl -s "http://localhost:3000/api/testimonials" | jq + +# Newsletter Subscribers (sollte 403 ohne Auth) +curl -s "http://localhost:3000/api/newsletter-subscribers" | jq + +# Newsletter Subscribe (POST - öffentlich) +curl -X POST "http://localhost:3000/api/newsletter-subscribers" \ + -H "Content-Type: application/json" \ + -d '{"email":"test@example.com","tenant":1}' | jq +``` + +### Admin Panel prĂŒfen + +1. **Posts:** Neues "Type" Dropdown in Sidebar +2. **Testimonials:** Neue Collection unter "Content" +3. **Newsletter Subscribers:** Neue Collection unter "Marketing" +4. **Pages Editor:** Neue Blocks verfĂŒgbar + +--- + +## Zusammenfassung + +### Neue/GeĂ€nderte Dateien + +| Datei | Aktion | Beschreibung | +|-------|--------|--------------| +| `src/collections/Posts.ts` | GEÄNDERT | +type, +isFeatured, +excerpt | +| `src/collections/Testimonials.ts` | NEU | Kundenstimmen Collection | +| `src/collections/NewsletterSubscribers.ts` | NEU | Newsletter-Anmeldungen | +| `src/blocks/index.ts` | NEU/ERWEITERT | 5 Block-Definitionen | +| `src/collections/Pages.ts` | GEÄNDERT | Neue Blocks registriert | +| `src/payload.config.ts` | GEÄNDERT | Collections + Multi-Tenant | + +### Collections + +| Collection | Zweck | Multi-Tenant | +|------------|-------|--------------| +| `posts` | Blog, News, Presse | ✅ | +| `testimonials` | Kundenstimmen | ✅ | +| `newsletter-subscribers` | Anmeldungen | ✅ | + +### Blocks + +| Block | Layouts | Verwendung | +|-------|---------|------------| +| `posts-list-block` | grid, list, featured, compact, masonry | Blog/News-Seiten | +| `testimonials-block` | slider, grid, single, masonry, list | Referenzen | +| `newsletter-block` | inline, stacked, with-image, minimal, card | Überall | +| `process-steps-block` | horizontal, vertical, alternating, connected, timeline | Service-Seiten | +| `timeline-block` | vertical, alternating, horizontal | Geschichte/Über uns | + +### API Endpoints + +| Endpoint | Methode | Auth | Beschreibung | +|----------|---------|------|--------------| +| `/api/posts` | GET | Public | Blog/News abrufen | +| `/api/posts?where[type][equals]=blog` | GET | Public | Nur Blog-Artikel | +| `/api/testimonials` | GET | Public | Testimonials abrufen | +| `/api/newsletter-subscribers` | GET | Admin | Subscribers lesen | +| `/api/newsletter-subscribers` | POST | Public | Newsletter anmelden | diff --git a/docs/Prompt phase2 blocks.md b/docs/Prompt phase2 blocks.md new file mode 100644 index 0000000..fcaa31c --- /dev/null +++ b/docs/Prompt phase2 blocks.md @@ -0,0 +1,323 @@ +# Phase 2: Block-System fĂŒr flexible Seiteninhalte + +## Kontext + +Du arbeitest im Verzeichnis `/home/payload/payload-cms`. Phase 1 ist abgeschlossen - die Collections Pages, Posts, Categories, SocialLinks sowie die Globals SiteSettings und Navigation existieren. + +## Aufgabe + +Erstelle ein Block-System, das flexible Seitengestaltung im Pages-Editor ermöglicht. Die Blöcke werden als `blocks` Field in der Pages Collection integriert. + +## Design-Kontext + +Die Website porwoll.de ist eine seriöse, professionelle PrĂ€senz mit: +- Dunklem Theme +- Ernsthafter, vertrauenswĂŒrdiger Ausstrahlung +- Klarer Typografie +- Hochwertigen Bildern + +## Zu erstellende Dateien + +### 1. Block-Definitionen (`src/blocks/`) + +Erstelle den Ordner `src/blocks/` und folgende Dateien: + +#### `src/blocks/HeroBlock.ts` + +Große Hero-Sektion mit Bild und Text. + +```typescript +Felder: +- backgroundImage: upload (Media) +- headline: text, required +- subline: textarea +- alignment: select (left, center, right), default: center +- overlay: checkbox, default: true (dunkles Overlay ĂŒber Bild) +- cta: group + - text: text + - link: text + - style: select (primary, secondary, outline) +``` + +#### `src/blocks/TextBlock.ts` + +Einfacher Textblock mit Rich-Text. + +```typescript +Felder: +- content: richText (Lexical), required +- width: select (narrow, medium, full), default: medium +``` + +#### `src/blocks/ImageTextBlock.ts` + +Bild und Text nebeneinander. + +```typescript +Felder: +- image: upload (Media), required +- imagePosition: select (left, right), default: left +- headline: text +- content: richText (Lexical) +- cta: group + - text: text + - link: text +``` + +#### `src/blocks/CardGridBlock.ts` + +Raster aus Karten (fĂŒr Unternehmen, Projekte, etc.). + +```typescript +Felder: +- headline: text +- cards: array, minRows: 1, maxRows: 6 + - image: upload (Media) + - title: text, required + - description: textarea + - link: text + - linkText: text, default: 'mehr' +- columns: select (2, 3, 4), default: 3 +``` + +#### `src/blocks/QuoteBlock.ts` + +Hervorgehobenes Zitat. + +```typescript +Felder: +- quote: textarea, required +- author: text +- role: text +- image: upload (Media) (optional, fĂŒr Autorenbild) +- style: select (simple, highlighted, with-image), default: simple +``` + +#### `src/blocks/CTABlock.ts` + +Call-to-Action Sektion. + +```typescript +Felder: +- headline: text, required +- description: textarea +- buttons: array, maxRows: 2 + - text: text, required + - link: text, required + - style: select (primary, secondary, outline), default: primary +- backgroundColor: select (dark, light, accent), default: dark +``` + +#### `src/blocks/ContactFormBlock.ts` + +Kontaktformular-Einbettung. + +```typescript +Felder: +- headline: text, default: 'Kontakt' +- description: textarea +- recipientEmail: email, default: 'info@porwoll.de' +- showPhone: checkbox, default: true +- showAddress: checkbox, default: true +- showSocials: checkbox, default: true +``` + +#### `src/blocks/TimelineBlock.ts` + +Zeitstrahl fĂŒr Lebenslauf/Geschichte. + +```typescript +Felder: +- headline: text +- events: array, minRows: 1 + - year: text, required + - title: text, required + - description: textarea + - image: upload (Media) +``` + +#### `src/blocks/DividerBlock.ts` + +Einfacher Trenner zwischen Sektionen. + +```typescript +Felder: +- style: select (line, space, dots), default: space +- spacing: select (small, medium, large), default: medium +``` + +#### `src/blocks/VideoBlock.ts` + +Video-Einbettung (YouTube/Vimeo). + +```typescript +Felder: +- videoUrl: text, required (YouTube oder Vimeo URL) +- caption: text +- aspectRatio: select (16:9, 4:3, 1:1), default: 16:9 +``` + +### 2. Block-Index (`src/blocks/index.ts`) + +Exportiere alle Blöcke zentral: + +```typescript +export { HeroBlock } from './HeroBlock' +export { TextBlock } from './TextBlock' +export { ImageTextBlock } from './ImageTextBlock' +export { CardGridBlock } from './CardGridBlock' +export { QuoteBlock } from './QuoteBlock' +export { CTABlock } from './CTABlock' +export { ContactFormBlock } from './ContactFormBlock' +export { TimelineBlock } from './TimelineBlock' +export { DividerBlock } from './DividerBlock' +export { VideoBlock } from './VideoBlock' +``` + +### 3. Pages Collection aktualisieren (`src/collections/Pages.ts`) + +Ersetze das `content` Feld durch ein `layout` Blocks-Feld: + +```typescript +{ + name: 'layout', + type: 'blocks', + blocks: [ + HeroBlock, + TextBlock, + ImageTextBlock, + CardGridBlock, + QuoteBlock, + CTABlock, + ContactFormBlock, + TimelineBlock, + DividerBlock, + VideoBlock, + ], +} +``` + +Behalte das bestehende `hero` Feld fĂŒr die Standard-Hero-Sektion, aber das `layout` Feld ermöglicht flexible Inhalte darunter. + +### 4. Posts Collection aktualisieren (`src/collections/Posts.ts`) + +FĂŒge optional auch Blocks zum Posts-Content hinzu, oder behalte Rich-Text fĂŒr einfachere Blog-Posts. Empfehlung: Behalte Rich-Text fĂŒr Posts, da Blog-Artikel primĂ€r Text sind. + +## Block-Struktur Template + +Jeder Block sollte dieser Struktur folgen: + +```typescript +import type { Block } from 'payload' + +export const BlockName: Block = { + slug: 'block-name', + labels: { + singular: 'Block Name', + plural: 'Block Names', + }, + fields: [ + // Felder hier + ], +} +``` + +## Umsetzungsschritte + +1. Erstelle `src/blocks/` Verzeichnis +2. Erstelle alle Block-Dateien +3. Erstelle `src/blocks/index.ts` +4. Aktualisiere `src/collections/Pages.ts` mit dem Blocks-Feld +5. Generiere TypeScript-Types (siehe Prettier-Workaround unten) +6. FĂŒhre aus: `pnpm payload migrate:create` +7. FĂŒhre aus: `pnpm payload migrate` +8. FĂŒhre aus: `pnpm build` +9. Starte neu: `pm2 restart payload` + +## Prettier-Workaround fĂŒr generate:types + +Es gibt ein bekanntes Problem: `pnpm payload generate:types` ignoriert die Projekt-Prettier-Konfiguration und kann zu Konflikten fĂŒhren (GitHub PR #11124, Stand: offen). + +### Lösung: Prettier-Konfiguration anlegen + +**Schritt 1:** Erstelle eine kompatible `.prettierrc` im Projektroot: + +```bash +cat > /home/payload/payload-cms/.prettierrc << 'EOF' +{ + "singleQuote": true, + "trailingComma": "es5", + "tabWidth": 2, + "semi": false, + "printWidth": 100 +} +EOF +``` + +**Schritt 2:** Installiere Prettier falls nicht vorhanden: + +```bash +pnpm add -D prettier +``` + +**Schritt 3:** Generiere Types und formatiere: + +```bash +pnpm payload generate:types +pnpm prettier --write src/payload-types.ts +``` + +### Alternative bei Fehlern + +Falls `generate:types` weiterhin fehlschlĂ€gt, Types manuell in `src/payload-types.ts` ergĂ€nzen: + +1. Öffne die bestehende `src/payload-types.ts` +2. FĂŒge die neuen Block-Interfaces hinzu (HeroBlock, TextBlock, etc.) +3. Aktualisiere das `Page` Interface mit dem `layout` Feld + +Beispiel fĂŒr manuelle Block-Types: + +```typescript +export interface HeroBlock { + blockType: 'hero-block' + backgroundImage?: string | Media | null + headline: string + subline?: string | null + alignment?: 'left' | 'center' | 'right' | null + overlay?: boolean | null + cta?: { + text?: string | null + link?: string | null + style?: 'primary' | 'secondary' | 'outline' | null + } + id?: string | null +} + +// ... weitere Block-Interfaces +``` + +## Wichtige Hinweise + +- Nutze `type: 'blocks'` fĂŒr das Layout-Feld +- Alle Blöcke mĂŒssen als `Block` Type aus 'payload' importiert werden +- Labels auf Deutsch setzen fĂŒr bessere Admin-UX +- Bei Fehlern mit Prettier: Types manuell anpassen wie in Phase 1 + +## Erfolgskriterien + +Nach Abschluss: + +1. Im Admin unter Pages → [Seite bearbeiten] erscheint ein "Layout" Feld +2. Das Layout-Feld zeigt alle 10 Block-Typen zur Auswahl +3. Blöcke können hinzugefĂŒgt, sortiert und bearbeitet werden +4. Server lĂ€uft ohne Fehler + +## Test + +1. Gehe zu https://pl.c2sgmbh.de/admin +2. Erstelle eine neue Page +3. Scrolle zum "Layout" Bereich +4. Klicke "Add Block" +5. Alle 10 Block-Typen sollten verfĂŒgbar sein +6. FĂŒge einen HeroBlock hinzu und speichere +7. PrĂŒfe in der Datenbank: `SELECT * FROM pages;` diff --git a/docs/SECURITY_FIXES.md b/docs/SECURITY_FIXES.md new file mode 100644 index 0000000..5aa6328 --- /dev/null +++ b/docs/SECURITY_FIXES.md @@ -0,0 +1,733 @@ +Kontext +Du arbeitest auf dem Server sv-payload im Verzeichnis /home/payload/payload-cms. +Ein Sicherheits-Audit hat kritische Schwachstellen identifiziert, die sofort behoben werden mĂŒssen. +Audit-Findings (KRITISCH) +#SchwachstelleDateiRisiko1PAYLOAD_SECRET Fallback auf leeren Stringpayload.config.tsToken-FĂ€lschung2CONSENT_LOGGING_API_KEY undefined = BypassConsentLogs.tsUnautorisierter Schreibzugriff3IP_ANONYMIZATION_PEPPER hardcoded FallbackConsentLogs.tsRainbow-Table Angriff4GraphQL Playground in Productiongraphql-playground/route.tsSchema-Leak5Multi-Tenant Read Access ohne Domain-CheckCookieConfigurations.ts, CookieInventory.tsTenant-Daten-Leak + +Aufgabe 1: Zentrale Environment-Validierung erstellen +Erstelle src/lib/envValidation.ts: +typescript// src/lib/envValidation.ts + +/** + * Zentrale Validierung aller erforderlichen Environment-Variablen. + * Wird beim Server-Start aufgerufen und beendet den Prozess bei fehlenden Werten. + */ + +interface RequiredEnvVars { + PAYLOAD_SECRET: string + DATABASE_URI: string + CONSENT_LOGGING_API_KEY: string + IP_ANONYMIZATION_PEPPER: string +} + +const FORBIDDEN_VALUES = [ + '', + 'default-pepper-change-me', + 'change-me', + 'your-secret-here', + 'xxx', +] + +function validateEnvVar(name: string, value: string | undefined): string { + if (!value || value.trim() === '') { + throw new Error( + `FATAL: Environment variable ${name} is required but not set. ` + + `Server cannot start without this value.` + ) + } + + if (FORBIDDEN_VALUES.includes(value.trim().toLowerCase())) { + throw new Error( + `FATAL: Environment variable ${name} has an insecure default value. ` + + `Please set a secure random value.` + ) + } + + return value.trim() +} + +/** + * Validiert alle erforderlichen Environment-Variablen. + * Wirft einen Fehler und beendet den Server-Start, wenn Variablen fehlen. + */ +export function validateRequiredEnvVars(): RequiredEnvVars { + return { + PAYLOAD_SECRET: validateEnvVar('PAYLOAD_SECRET', process.env.PAYLOAD_SECRET), + DATABASE_URI: validateEnvVar('DATABASE_URI', process.env.DATABASE_URI), + CONSENT_LOGGING_API_KEY: validateEnvVar('CONSENT_LOGGING_API_KEY', process.env.CONSENT_LOGGING_API_KEY), + IP_ANONYMIZATION_PEPPER: validateEnvVar('IP_ANONYMIZATION_PEPPER', process.env.IP_ANONYMIZATION_PEPPER), + } +} + +/** + * Bereits validierte Environment-Variablen. + * Wird beim Import ausgefĂŒhrt (Fail-Fast Prinzip). + */ +export const env = validateRequiredEnvVars() + +Aufgabe 2: Tenant-Access Utility erstellen +Erstelle src/lib/tenantAccess.ts: +typescript// src/lib/tenantAccess.ts + +import type { Access, PayloadRequest } from 'payload' + +/** + * Ermittelt die Tenant-ID aus dem Request-Host. + * Gleicht die Domain mit der tenants-Collection ab. + */ +export async function getTenantIdFromHost(req: PayloadRequest): Promise { + try { + // Host-Header extrahieren (unterstĂŒtzt verschiedene Formate) + const host = + req.headers?.host || + (req.headers?.get && req.headers.get('host')) || + null + + if (!host || typeof host !== 'string') { + return null + } + + // Domain normalisieren: Port und www entfernen + const domain = host + .split(':')[0] + .replace(/^www\./, '') + .toLowerCase() + .trim() + + if (!domain) { + return null + } + + // Tenant aus Datenbank suchen + const result = await req.payload.find({ + collection: 'tenants', + where: { + domain: { equals: domain } + }, + limit: 1, + depth: 0, + }) + + if (result.docs.length > 0 && result.docs[0]?.id) { + return Number(result.docs[0].id) + } + + return null + } catch (error) { + console.error('[TenantAccess] Error resolving tenant from host:', error) + return null + } +} + +/** + * Access-Control fĂŒr öffentlich lesbare, aber tenant-isolierte Collections. + * + * - Authentifizierte Admin-User: Voller Lesezugriff + * - Anonyme Requests: Nur Daten des eigenen Tenants (basierend auf Domain) + */ +export const tenantScopedPublicRead: Access = async ({ req }) => { + // Authentifizierte Admins dĂŒrfen alles lesen + if (req.user) { + return true + } + + // Anonyme Requests: Tenant aus Domain ermitteln + const tenantId = await getTenantIdFromHost(req) + + if (!tenantId) { + // Keine gĂŒltige Domain → kein Zugriff + return false + } + + // Nur Dokumente des eigenen Tenants zurĂŒckgeben + return { + tenant: { + equals: tenantId + } + } +} + +/** + * Access-Control: Nur authentifizierte User + */ +export const authenticatedOnly: Access = ({ req }) => { + return !!req.user +} + +Aufgabe 3: payload.config.ts aktualisieren +Aktualisiere src/payload.config.ts: +Am Anfang der Datei (nach den Imports) hinzufĂŒgen: +typescript// Security: Validate required environment variables at startup +import { env } from './lib/envValidation' +Dann in buildConfig Ă€ndern: +typescript// VORHER: +secret: process.env.PAYLOAD_SECRET || '', + +// NACHHER: +secret: env.PAYLOAD_SECRET, +Und: +typescript// VORHER: +db: postgresAdapter({ + pool: { + connectionString: process.env.DATABASE_URI || '', + }, +}), + +// NACHHER: +db: postgresAdapter({ + pool: { + connectionString: env.DATABASE_URI, + }, +}), + +Aufgabe 4: ConsentLogs.ts komplett ersetzen +Ersetze src/collections/ConsentLogs.ts mit dieser sicheren Version: +typescript// src/collections/ConsentLogs.ts + +import type { CollectionConfig } from 'payload' +import crypto from 'crypto' +import { env } from '../lib/envValidation' +import { authenticatedOnly } from '../lib/tenantAccess' + +/** + * Generiert einen tĂ€glichen, tenant-spezifischen Salt fĂŒr IP-Anonymisierung. + * Verwendet den sicher validierten Pepper aus der Umgebung. + */ +function getDailySalt(tenantId: string): string { + const date = new Date().toISOString().split('T')[0] // YYYY-MM-DD + return crypto + .createHash('sha256') + .update(`${env.IP_ANONYMIZATION_PEPPER}-${tenantId}-${date}`) + .digest('hex') +} + +/** + * Anonymisiert eine IP-Adresse mit HMAC-SHA256. + * Der Salt rotiert tĂ€glich und ist tenant-spezifisch. + */ +function anonymizeIp(ip: string, tenantId: string): string { + const salt = getDailySalt(tenantId) + return crypto + .createHmac('sha256', salt) + .update(ip) + .digest('hex') + .substring(0, 32) // GekĂŒrzt fĂŒr Lesbarkeit +} + +/** + * Extrahiert die Client-IP aus dem Request. + * BerĂŒcksichtigt Reverse-Proxy-Header. + */ +function extractClientIp(req: any): string { + // X-Forwarded-For kann mehrere IPs enthalten (Client, Proxies) + const forwarded = req.headers?.['x-forwarded-for'] + if (typeof forwarded === 'string') { + return forwarded.split(',')[0].trim() + } + if (Array.isArray(forwarded) && forwarded.length > 0) { + return String(forwarded[0]).trim() + } + + // X-Real-IP (einzelne IP) + const realIp = req.headers?.['x-real-ip'] + if (typeof realIp === 'string') { + return realIp.trim() + } + + // Fallback: Socket Remote Address + return req.socket?.remoteAddress || req.ip || 'unknown' +} + +/** + * ConsentLogs Collection - WORM Audit Trail + * + * Implementiert das Write-Once-Read-Many Prinzip fĂŒr DSGVO-Nachweispflicht. + * Updates und Deletes sind auf API-Ebene deaktiviert. + */ +export const ConsentLogs: CollectionConfig = { + slug: 'consent-logs', + admin: { + useAsTitle: 'consentId', + group: 'Consent Management', + description: 'WORM Audit-Trail fĂŒr Cookie-Einwilligungen (unverĂ€nderbar)', + defaultColumns: ['consentId', 'tenant', 'categories', 'revision', 'createdAt'], + }, + + // Performance: Keine Versionierung fĂŒr Audit-Logs + versions: false, + + access: { + /** + * CREATE: Nur mit gĂŒltigem API-Key. + * Beide Seiten (Header UND Env-Variable) mĂŒssen existieren und ĂŒbereinstimmen. + */ + create: ({ req }) => { + const apiKey = req.headers?.['x-api-key'] + + // Strikte Validierung: Header muss existieren und non-empty sein + if (!apiKey || typeof apiKey !== 'string') { + return false + } + + const trimmedKey = apiKey.trim() + if (trimmedKey === '') { + return false + } + + // Vergleich mit validiertem Environment-Wert + // (env.CONSENT_LOGGING_API_KEY ist garantiert non-empty durch envValidation) + return trimmedKey === env.CONSENT_LOGGING_API_KEY + }, + + /** + * READ: Nur authentifizierte Admin-User + */ + read: authenticatedOnly, + + /** + * UPDATE: WORM - Niemals erlaubt + */ + update: () => false, + + /** + * DELETE: WORM - Niemals ĂŒber API erlaubt + * (Nur via Retention-Job mit direktem DB-Zugriff) + */ + delete: () => false, + }, + + hooks: { + beforeChange: [ + ({ data, req, operation }) => { + // Nur bei Neuanlage + if (operation !== 'create') { + return data + } + + // 1. Server-generierte Consent-ID (Trust Boundary) + data.consentId = crypto.randomUUID() + + // 2. IP anonymisieren + const rawIp = data.ip || extractClientIp(req) + const tenantId = typeof data.tenant === 'object' + ? String(data.tenant.id) + : String(data.tenant) + + data.anonymizedIp = anonymizeIp(rawIp, tenantId) + + // Rohe IP NIEMALS speichern + delete data.ip + + // 3. Ablaufdatum setzen (3 Jahre Retention gemĂ€ĂŸ DSGVO) + const expiresAt = new Date() + expiresAt.setFullYear(expiresAt.getFullYear() + 3) + data.expiresAt = expiresAt.toISOString() + + // 4. User Agent kĂŒrzen (Datensparsamkeit) + if (data.userAgent && typeof data.userAgent === 'string') { + data.userAgent = data.userAgent.substring(0, 500) + } + + return data + }, + ], + }, + + fields: [ + { + name: 'consentId', + type: 'text', + required: true, + unique: true, + admin: { + readOnly: true, + description: 'Server-generierte eindeutige ID', + }, + }, + { + name: 'clientRef', + type: 'text', + admin: { + readOnly: true, + description: 'Client-seitige Referenz (Cookie-UUID) fĂŒr Traceability', + }, + }, + { + name: 'tenant', + type: 'relationship', + relationTo: 'tenants', + required: true, + admin: { + readOnly: true, + }, + }, + { + name: 'categories', + type: 'json', + required: true, + admin: { + readOnly: true, + description: 'Akzeptierte Kategorien zum Zeitpunkt der Einwilligung', + }, + }, + { + name: 'revision', + type: 'number', + required: true, + admin: { + readOnly: true, + description: 'Version der Konfiguration zum Zeitpunkt der Zustimmung', + }, + }, + { + name: 'userAgent', + type: 'text', + admin: { + readOnly: true, + description: 'Browser/Device (fĂŒr Forensik und Bot-Erkennung)', + }, + }, + { + name: 'anonymizedIp', + type: 'text', + admin: { + readOnly: true, + description: 'HMAC-Hash der IP (tĂ€glich rotierender, tenant-spezifischer Salt)', + }, + }, + { + name: 'expiresAt', + type: 'date', + required: true, + admin: { + readOnly: true, + description: 'Automatische Löschung nach 3 Jahren', + date: { + pickerAppearance: 'dayOnly', + }, + }, + }, + ], +} + +Aufgabe 5: CookieConfigurations.ts aktualisieren +Ersetze src/collections/CookieConfigurations.ts: +typescript// src/collections/CookieConfigurations.ts + +import type { CollectionConfig } from 'payload' +import { tenantScopedPublicRead, authenticatedOnly } from '../lib/tenantAccess' + +/** + * CookieConfigurations Collection + * + * Mandantenspezifische Cookie-Banner-Konfiguration. + * Öffentlich lesbar, aber nur fĂŒr den eigenen Tenant (Domain-basiert). + */ +export const CookieConfigurations: CollectionConfig = { + slug: 'cookie-configurations', + admin: { + useAsTitle: 'title', + group: 'Consent Management', + description: 'Cookie-Banner Konfiguration pro Tenant', + }, + access: { + // Öffentlich, aber tenant-isoliert (Domain-Check) + read: tenantScopedPublicRead, + create: authenticatedOnly, + update: authenticatedOnly, + delete: authenticatedOnly, + }, + fields: [ + { + name: 'tenant', + type: 'relationship', + relationTo: 'tenants', + required: true, + unique: true, + admin: { + description: 'Jeder Tenant kann nur eine Konfiguration haben', + }, + }, + { + name: 'title', + type: 'text', + required: true, + defaultValue: 'Cookie-Einstellungen', + admin: { + description: 'Interner Titel zur Identifikation', + }, + }, + { + name: 'revision', + type: 'number', + required: true, + defaultValue: 1, + admin: { + description: 'Bei inhaltlichen Änderungen erhöhen → erzwingt erneuten Consent bei allen Nutzern', + }, + }, + { + name: 'enabledCategories', + type: 'select', + hasMany: true, + required: true, + defaultValue: ['necessary', 'analytics'], + options: [ + { label: 'Notwendig', value: 'necessary' }, + { label: 'Funktional', value: 'functional' }, + { label: 'Statistik', value: 'analytics' }, + { label: 'Marketing', value: 'marketing' }, + ], + admin: { + description: 'Welche Kategorien sollen im Banner angezeigt werden?', + }, + }, + { + name: 'translations', + type: 'group', + fields: [ + { + name: 'de', + type: 'group', + label: 'Deutsch', + fields: [ + { + name: 'bannerTitle', + type: 'text', + defaultValue: 'Wir respektieren Ihre PrivatsphĂ€re', + }, + { + name: 'bannerDescription', + type: 'textarea', + defaultValue: 'Diese Website verwendet Cookies, um Ihnen die bestmögliche Erfahrung zu bieten.', + }, + { + name: 'acceptAllButton', + type: 'text', + defaultValue: 'Alle akzeptieren', + }, + { + name: 'acceptNecessaryButton', + type: 'text', + defaultValue: 'Nur notwendige', + }, + { + name: 'settingsButton', + type: 'text', + defaultValue: 'Einstellungen', + }, + { + name: 'saveButton', + type: 'text', + defaultValue: 'Auswahl speichern', + }, + { + name: 'privacyPolicyUrl', + type: 'text', + defaultValue: '/datenschutz', + }, + { + name: 'categoryLabels', + type: 'group', + fields: [ + { + name: 'necessary', + type: 'group', + fields: [ + { name: 'title', type: 'text', defaultValue: 'Notwendig' }, + { name: 'description', type: 'textarea', defaultValue: 'Diese Cookies sind fĂŒr die Grundfunktionen der Website erforderlich.' }, + ], + }, + { + name: 'functional', + type: 'group', + fields: [ + { name: 'title', type: 'text', defaultValue: 'Funktional' }, + { name: 'description', type: 'textarea', defaultValue: 'Diese Cookies ermöglichen erweiterte Funktionen.' }, + ], + }, + { + name: 'analytics', + type: 'group', + fields: [ + { name: 'title', type: 'text', defaultValue: 'Statistik' }, + { name: 'description', type: 'textarea', defaultValue: 'Diese Cookies helfen uns zu verstehen, wie Besucher die Website nutzen.' }, + ], + }, + { + name: 'marketing', + type: 'group', + fields: [ + { name: 'title', type: 'text', defaultValue: 'Marketing' }, + { name: 'description', type: 'textarea', defaultValue: 'Diese Cookies werden fĂŒr Werbezwecke verwendet.' }, + ], + }, + ], + }, + ], + }, + ], + }, + { + name: 'styling', + type: 'group', + fields: [ + { + name: 'position', + type: 'select', + defaultValue: 'bottom', + options: [ + { label: 'Unten', value: 'bottom' }, + { label: 'Oben', value: 'top' }, + { label: 'Mitte (Modal)', value: 'middle' }, + ], + }, + { + name: 'theme', + type: 'select', + defaultValue: 'dark', + options: [ + { label: 'Dunkel', value: 'dark' }, + { label: 'Hell', value: 'light' }, + { label: 'Auto (System)', value: 'auto' }, + ], + }, + ], + }, + ], +} + +Aufgabe 6: CookieInventory.ts aktualisieren +Ersetze src/collections/CookieInventory.ts: +typescript// src/collections/CookieInventory.ts + +import type { CollectionConfig } from 'payload' +import { tenantScopedPublicRead, authenticatedOnly } from '../lib/tenantAccess' + +/** + * CookieInventory Collection + * + * Dokumentation aller verwendeten Cookies fĂŒr die DatenschutzerklĂ€rung. + * Öffentlich lesbar, aber nur fĂŒr den eigenen Tenant (Domain-basiert). + */ +export const CookieInventory: CollectionConfig = { + slug: 'cookie-inventory', + admin: { + useAsTitle: 'name', + group: 'Consent Management', + description: 'Cookie-Dokumentation fĂŒr die DatenschutzerklĂ€rung', + defaultColumns: ['name', 'provider', 'category', 'duration', 'tenant'], + }, + access: { + // Öffentlich, aber tenant-isoliert (Domain-Check) + read: tenantScopedPublicRead, + create: authenticatedOnly, + update: authenticatedOnly, + delete: authenticatedOnly, + }, + fields: [ + { + name: 'tenant', + type: 'relationship', + relationTo: 'tenants', + required: true, + }, + { + name: 'name', + type: 'text', + required: true, + admin: { + description: 'Technischer Name des Cookies (z.B. "_ga")', + }, + }, + { + name: 'provider', + type: 'text', + required: true, + admin: { + description: 'Anbieter (z.B. "Google LLC")', + }, + }, + { + name: 'category', + type: 'select', + required: true, + options: [ + { label: 'Notwendig', value: 'necessary' }, + { label: 'Funktional', value: 'functional' }, + { label: 'Statistik', value: 'analytics' }, + { label: 'Marketing', value: 'marketing' }, + ], + }, + { + name: 'duration', + type: 'text', + required: true, + admin: { + description: 'Speicherdauer (z.B. "2 Jahre")', + }, + }, + { + name: 'description', + type: 'textarea', + required: true, + admin: { + description: 'VerstĂ€ndliche ErklĂ€rung fĂŒr Endnutzer', + }, + }, + { + name: 'isActive', + type: 'checkbox', + defaultValue: true, + }, + ], +} + +Aufgabe 7: GraphQL Playground entfernen +Lösche die Datei: +bashrm -f src/app/\(payload\)/api/graphql-playground/route.ts +Falls das Verzeichnis danach leer ist: +bashrmdir src/app/\(payload\)/api/graphql-playground/ 2>/dev/null || true + +Aufgabe 8: Build und Test +Nach allen Änderungen: +bash# TypeScript kompilieren und prĂŒfen +pnpm build + +# Bei Erfolg: PM2 neu starten +pm2 restart payload + +# Logs prĂŒfen (sollte ohne Fehler starten) +pm2 logs payload --lines 20 --nostream + +Aufgabe 9: Sicherheitstest +Teste die Fixes: +bash# 1. Tenant-Isolation testen (sollte 403 oder leeres Array zurĂŒckgeben) +curl -s "http://localhost:3000/api/cookie-configurations" | head -c 200 + +# 2. Mit korrektem Host-Header (sollte Daten fĂŒr porwoll.de zeigen) +curl -s -H "Host: porwoll.de" "http://localhost:3000/api/cookie-configurations" | head -c 200 + +# 3. Consent-Log ohne API-Key (sollte 403 zurĂŒckgeben) +curl -X POST "http://localhost:3000/api/consent-logs" \ + -H "Content-Type: application/json" \ + -d '{"tenant":1,"categories":["necessary"],"revision":1}' + +# 4. Consent-Log mit korrektem API-Key (sollte 201 zurĂŒckgeben) +curl -X POST "http://localhost:3000/api/consent-logs" \ + -H "Content-Type: application/json" \ + -H "x-api-key: $(grep CONSENT_LOGGING_API_KEY .env | cut -d= -f2)" \ + -d '{"tenant":1,"categories":["necessary"],"revision":1,"clientRef":"test-123"}' + +# 5. GraphQL Playground (sollte 404 zurĂŒckgeben) +curl -s "http://localhost:3000/api/graphql-playground" + +Zusammenfassung der Änderungen +DateiAktionZwecksrc/lib/envValidation.tsNEUFail-Fast fĂŒr fehlende Env-Varssrc/lib/tenantAccess.tsNEUDomain-basierte Tenant-Isolationsrc/payload.config.tsÄNDERNImport envValidation, sichere Secret-Verwendungsrc/collections/ConsentLogs.tsERSETZENStrikte API-Key-PrĂŒfung, kein Pepper-Fallbacksrc/collections/CookieConfigurations.tsERSETZENTenant-scoped Read Accesssrc/collections/CookieInventory.tsERSETZENTenant-scoped Read Accesssrc/app/(payload)/api/graphql-playground/route.tsLÖSCHENKein Schema-Leak in Production +Erwartetes Ergebnis + +Server startet NUR wenn alle Env-Vars gesetzt sind +Anonyme API-Requests sehen nur Daten ihres Tenants +ConsentLogs nur mit validem API-Key beschreibbar +GraphQL Playground nicht mehr erreichbar +IP-Anonymisierung ohne unsichere Fallbacks \ No newline at end of file diff --git a/docs/anleitungen/API_ANLEITUNG.md b/docs/anleitungen/API_ANLEITUNG.md new file mode 100644 index 0000000..aadfe3a --- /dev/null +++ b/docs/anleitungen/API_ANLEITUNG.md @@ -0,0 +1,550 @@ +# API-Anleitung - Payload CMS + +## Übersicht + +Das Payload CMS stellt eine REST-API und eine GraphQL-API bereit. Diese Anleitung beschreibt die Nutzung der REST-API fĂŒr die Universal Features. + +**Base URL:** `https://pl.c2sgmbh.de/api` + +--- + +## Authentifizierung + +### Login + +```bash +curl -X POST "https://pl.c2sgmbh.de/api/users/login" \ + -H "Content-Type: application/json" \ + -d '{ + "email": "admin@example.com", + "password": "your-password" + }' +``` + +**Response:** +```json +{ + "message": "Auth Passed", + "user": { ... }, + "token": "eyJhbGciOiJIUzI1NiIs..." +} +``` + +### Token verwenden + +```bash +curl "https://pl.c2sgmbh.de/api/posts" \ + -H "Authorization: JWT eyJhbGciOiJIUzI1NiIs..." +``` + +--- + +## Posts API + +### Alle Posts abrufen + +```bash +# Alle Posts +curl "https://pl.c2sgmbh.de/api/posts" + +# Nur Blog-Artikel +curl "https://pl.c2sgmbh.de/api/posts?where[type][equals]=blog" + +# Nur News +curl "https://pl.c2sgmbh.de/api/posts?where[type][equals]=news" + +# Nur veröffentlichte Posts +curl "https://pl.c2sgmbh.de/api/posts?where[status][equals]=published" + +# Nur hervorgehobene Posts +curl "https://pl.c2sgmbh.de/api/posts?where[isFeatured][equals]=true" + +# Mit Sortierung (neueste zuerst) +curl "https://pl.c2sgmbh.de/api/posts?sort=-publishedAt" + +# Limitiert auf 10 EintrĂ€ge +curl "https://pl.c2sgmbh.de/api/posts?limit=10" + +# Pagination (Seite 2) +curl "https://pl.c2sgmbh.de/api/posts?limit=10&page=2" +``` + +### Einzelnen Post abrufen + +```bash +# Nach ID +curl "https://pl.c2sgmbh.de/api/posts/1" + +# Nach Slug (ĂŒber Query) +curl "https://pl.c2sgmbh.de/api/posts?where[slug][equals]=mein-erster-artikel" +``` + +### Post erstellen (Auth erforderlich) + +```bash +curl -X POST "https://pl.c2sgmbh.de/api/posts" \ + -H "Authorization: JWT your-token" \ + -H "Content-Type: application/json" \ + -d '{ + "tenant": 1, + "title": "Mein neuer Artikel", + "slug": "mein-neuer-artikel", + "type": "blog", + "isFeatured": false, + "excerpt": "Eine kurze Zusammenfassung des Artikels...", + "content": { + "root": { + "type": "root", + "children": [ + { + "type": "paragraph", + "children": [{ "text": "Der Artikelinhalt..." }] + } + ] + } + }, + "status": "draft" + }' +``` + +### Post aktualisieren (Auth erforderlich) + +```bash +curl -X PATCH "https://pl.c2sgmbh.de/api/posts/1" \ + -H "Authorization: JWT your-token" \ + -H "Content-Type: application/json" \ + -d '{ + "status": "published", + "publishedAt": "2025-11-30T12:00:00.000Z" + }' +``` + +### Post löschen (Auth erforderlich) + +```bash +curl -X DELETE "https://pl.c2sgmbh.de/api/posts/1" \ + -H "Authorization: JWT your-token" +``` + +--- + +## Testimonials API + +### Alle Testimonials abrufen + +```bash +# Alle Testimonials +curl "https://pl.c2sgmbh.de/api/testimonials" + +# Nur aktive Testimonials +curl "https://pl.c2sgmbh.de/api/testimonials?where[isActive][equals]=true" + +# Sortiert nach Bewertung (beste zuerst) +curl "https://pl.c2sgmbh.de/api/testimonials?sort=-rating" + +# Sortiert nach eigener Reihenfolge +curl "https://pl.c2sgmbh.de/api/testimonials?sort=order" +``` + +### Testimonial erstellen (Auth erforderlich) + +```bash +curl -X POST "https://pl.c2sgmbh.de/api/testimonials" \ + -H "Authorization: JWT your-token" \ + -H "Content-Type: application/json" \ + -d '{ + "tenant": 1, + "quote": "Hervorragender Service! Ich bin sehr zufrieden.", + "author": "Max Mustermann", + "role": "GeschĂ€ftsfĂŒhrer", + "company": "Musterfirma GmbH", + "rating": 5, + "source": "Google Reviews", + "isActive": true, + "order": 1 + }' +``` + +--- + +## Newsletter Subscribers API + +### Newsletter-Anmeldung (Öffentlich) + +```bash +# Einfache Anmeldung +curl -X POST "https://pl.c2sgmbh.de/api/newsletter-subscribers" \ + -H "Content-Type: application/json" \ + -d '{ + "tenant": 1, + "email": "kunde@example.com", + "source": "website-footer" + }' + +# Mit Namen und Interessen +curl -X POST "https://pl.c2sgmbh.de/api/newsletter-subscribers" \ + -H "Content-Type: application/json" \ + -d '{ + "tenant": 1, + "email": "kunde@example.com", + "firstName": "Max", + "lastName": "Mustermann", + "interests": ["blog", "products"], + "source": "blog-sidebar" + }' +``` + +**Response (Erfolg):** +```json +{ + "doc": { + "id": 1, + "tenant": 1, + "email": "kunde@example.com", + "status": "pending", + "confirmationToken": "uuid-token-here", + "subscribedAt": "2025-11-30T14:23:41.012Z" + }, + "message": "Newsletter Subscriber successfully created." +} +``` + +### Subscribers abrufen (Auth erforderlich) + +```bash +# Alle Subscribers +curl "https://pl.c2sgmbh.de/api/newsletter-subscribers" \ + -H "Authorization: JWT your-token" + +# Nur bestĂ€tigte Subscribers +curl "https://pl.c2sgmbh.de/api/newsletter-subscribers?where[status][equals]=confirmed" \ + -H "Authorization: JWT your-token" + +# Nach E-Mail suchen +curl "https://pl.c2sgmbh.de/api/newsletter-subscribers?where[email][equals]=kunde@example.com" \ + -H "Authorization: JWT your-token" +``` + +### Subscriber bestĂ€tigen (Double Opt-In) + +```bash +# Über Token bestĂ€tigen +curl -X PATCH "https://pl.c2sgmbh.de/api/newsletter-subscribers/1" \ + -H "Authorization: JWT your-token" \ + -H "Content-Type: application/json" \ + -d '{ + "status": "confirmed" + }' +``` + +### Subscriber abmelden + +```bash +curl -X PATCH "https://pl.c2sgmbh.de/api/newsletter-subscribers/1" \ + -H "Authorization: JWT your-token" \ + -H "Content-Type: application/json" \ + -d '{ + "status": "unsubscribed" + }' +``` + +--- + +## Pages API + +### Seiten abrufen + +```bash +# Alle Seiten +curl "https://pl.c2sgmbh.de/api/pages" + +# Seite nach Slug +curl "https://pl.c2sgmbh.de/api/pages?where[slug][equals]=startseite" + +# Nur veröffentlichte Seiten +curl "https://pl.c2sgmbh.de/api/pages?where[status][equals]=published" +``` + +### Seite mit Blocks + +Die Blocks werden im `layout`-Array zurĂŒckgegeben: + +```json +{ + "docs": [{ + "id": 1, + "title": "Startseite", + "slug": "startseite", + "layout": [ + { + "blockType": "hero-block", + "title": "Willkommen", + "subtitle": "..." + }, + { + "blockType": "posts-list-block", + "title": "Aktuelle News", + "postType": "news", + "limit": 3 + }, + { + "blockType": "testimonials-block", + "title": "Das sagen unsere Kunden", + "layout": "slider" + } + ] + }] +} +``` + +--- + +## Query-Parameter + +### Filterung (where) + +```bash +# Equals +?where[field][equals]=value + +# Not equals +?where[field][not_equals]=value + +# Greater than +?where[field][greater_than]=10 + +# Less than +?where[field][less_than]=100 + +# Contains (Text) +?where[field][contains]=suchtext + +# In (Array) +?where[field][in]=value1,value2 + +# AND-VerknĂŒpfung +?where[and][0][field1][equals]=value1&where[and][1][field2][equals]=value2 + +# OR-VerknĂŒpfung +?where[or][0][field1][equals]=value1&where[or][1][field2][equals]=value2 +``` + +### Sortierung (sort) + +```bash +# Aufsteigend +?sort=fieldName + +# Absteigend +?sort=-fieldName + +# Mehrere Felder +?sort=-publishedAt,title +``` + +### Pagination + +```bash +# Limit +?limit=10 + +# Seite +?page=2 + +# Beide kombiniert +?limit=10&page=2 +``` + +### Depth (Relations laden) + +```bash +# Keine Relations laden +?depth=0 + +# Eine Ebene +?depth=1 + +# Zwei Ebenen +?depth=2 +``` + +--- + +## Fehlerbehandlung + +### HĂ€ufige Fehlercodes + +| Code | Bedeutung | +|------|-----------| +| 200 | Erfolg | +| 201 | Erstellt | +| 400 | UngĂŒltige Anfrage | +| 401 | Nicht authentifiziert | +| 403 | Nicht autorisiert | +| 404 | Nicht gefunden | +| 500 | Server-Fehler | + +### Fehler-Response + +```json +{ + "errors": [ + { + "message": "You are not allowed to perform this action." + } + ] +} +``` + +### Validierungsfehler + +```json +{ + "errors": [ + { + "message": "The following field is invalid: email", + "field": "email" + } + ] +} +``` + +--- + +## Multi-Tenant Hinweise + +### Tenant-ID ermitteln + +1. **Admin Panel:** Unter "Settings → Tenants" die ID ablesen +2. **API:** +```bash +curl "https://pl.c2sgmbh.de/api/tenants" \ + -H "Authorization: JWT your-token" +``` + +### Domain-basierter Zugriff + +Wenn ein Frontend ĂŒber eine Tenant-Domain (z.B. `porwoll.de`) zugreift, wird der Tenant automatisch erkannt und nur dessen Daten zurĂŒckgegeben. + +### Manueller Tenant-Filter + +FĂŒr direkte API-Zugriffe: +```bash +curl "https://pl.c2sgmbh.de/api/posts?where[tenant][equals]=1" +``` + +--- + +## Beispiel: Frontend-Integration + +### Next.js Beispiel + +```typescript +// lib/api.ts +const API_BASE = 'https://pl.c2sgmbh.de/api' +const TENANT_ID = 1 + +export async function getPosts(type?: string, limit = 10) { + const params = new URLSearchParams({ + 'where[tenant][equals]': String(TENANT_ID), + 'where[status][equals]': 'published', + limit: String(limit), + sort: '-publishedAt', + depth: '1', + }) + + if (type && type !== 'all') { + params.append('where[type][equals]', type) + } + + const res = await fetch(`${API_BASE}/posts?${params}`) + return res.json() +} + +export async function getTestimonials(limit = 6) { + const params = new URLSearchParams({ + 'where[tenant][equals]': String(TENANT_ID), + 'where[isActive][equals]': 'true', + limit: String(limit), + sort: 'order', + depth: '1', + }) + + const res = await fetch(`${API_BASE}/testimonials?${params}`) + return res.json() +} + +export async function subscribeNewsletter(email: string, source: string) { + const res = await fetch(`${API_BASE}/newsletter-subscribers`, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + tenant: TENANT_ID, + email, + source, + }), + }) + return res.json() +} +``` + +### React Component + +```tsx +// components/NewsletterForm.tsx +import { useState } from 'react' +import { subscribeNewsletter } from '@/lib/api' + +export function NewsletterForm() { + const [email, setEmail] = useState('') + const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle') + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault() + setStatus('loading') + + try { + const result = await subscribeNewsletter(email, 'website-footer') + if (result.doc) { + setStatus('success') + setEmail('') + } else { + setStatus('error') + } + } catch { + setStatus('error') + } + } + + return ( +
+ setEmail(e.target.value)} + placeholder="Ihre E-Mail-Adresse" + required + /> + + {status === 'success' &&

Vielen Dank! Bitte bestÀtigen Sie Ihre E-Mail.

} + {status === 'error' &&

Es ist ein Fehler aufgetreten.

} +
+ ) +} +``` + +--- + +## Rate Limiting + +Aktuell gibt es kein Rate Limiting. FĂŒr Production-Umgebungen sollte ein Reverse Proxy (z.B. Caddy, nginx) mit Rate Limiting konfiguriert werden. + +--- + +## Weitere Ressourcen + +- **Admin Panel:** https://pl.c2sgmbh.de/admin +- **Payload CMS Docs:** https://payloadcms.com/docs +- **GraphQL Playground:** https://pl.c2sgmbh.de/api/graphql (wenn aktiviert) diff --git a/docs/anleitungen/BILDOPTIMIERUNG.md b/docs/anleitungen/BILDOPTIMIERUNG.md new file mode 100644 index 0000000..9513fad --- /dev/null +++ b/docs/anleitungen/BILDOPTIMIERUNG.md @@ -0,0 +1,342 @@ +# Bildoptimierung - Dokumentation + +## Übersicht + +Die Media Collection nutzt Sharp fĂŒr automatische Bildoptimierung. Beim Upload werden automatisch optimierte Versionen in verschiedenen GrĂ¶ĂŸen und Formaten erstellt. + +--- + +## Konfiguration + +### Sharp Integration + +Sharp ist in der `payload.config.ts` eingebunden: + +```typescript +import sharp from 'sharp' + +export default buildConfig({ + // ... + sharp, + // ... +}) +``` + +### Media Collection + +Die Bildoptimierung ist in `src/collections/Media.ts` konfiguriert. + +--- + +## Image Sizes + +### WebP-Varianten + +| Name | Breite | Höhe | Verwendung | +|------|--------|------|------------| +| `thumbnail` | 150px | 150px | Admin-Übersichten, kleine Vorschauen | +| `small` | 400px | auto | Cards, Avatare, Icons | +| `medium` | 800px | auto | Blog-Vorschauen, Testimonials | +| `large` | 1200px | auto | Hero-Sections, Vollbild | +| `xlarge` | 1920px | auto | Full-HD Displays | +| `2k` | 2560px | auto | Retina/HiDPI Displays | +| `og` | 1200x630px | fix | Social Media / Open Graph | + +### AVIF-Varianten (beste Kompression) + +| Name | Breite | Verwendung | +|------|--------|------------| +| `medium_avif` | 800px | Blog-Vorschauen (moderne Browser) | +| `large_avif` | 1200px | Hero-Sections (moderne Browser) | +| `xlarge_avif` | 1920px | Full-HD (moderne Browser) | + +--- + +## QualitĂ€tseinstellungen + +| Format | Size | QualitĂ€t | +|--------|------|----------| +| WebP | thumbnail | 80% | +| WebP | small | 80% | +| WebP | medium | 82% | +| WebP | large, xlarge, 2k, og | 85% | +| AVIF | alle | 70% | + +Die niedrigere AVIF-QualitĂ€t (70%) liefert bei gleicher visueller QualitĂ€t kleinere Dateien als WebP bei 85%. + +--- + +## Fit-Modi + +| Modus | Beschreibung | Verwendung | +|-------|--------------|------------| +| `cover` | FĂŒllt die GrĂ¶ĂŸe, schneidet ĂŒberstehende Bereiche ab | thumbnail, og | +| `inside` | Passt das Bild ein, behĂ€lt SeitenverhĂ€ltnis | alle anderen | + +### withoutEnlargement + +Alle Sizes außer `thumbnail` und `og` haben `withoutEnlargement: true`. Das verhindert, dass kleine Bilder kĂŒnstlich vergrĂ¶ĂŸert werden. + +--- + +## Fokuspunkt + +Die Media Collection unterstĂŒtzt Fokuspunkte (`focalPoint: true`). Damit können Redakteure den wichtigsten Bereich eines Bildes markieren, der beim Cropping erhalten bleibt. + +Im Admin-Panel: +1. Bild hochladen +2. Auf das Bild klicken +3. Fokuspunkt setzen + +Die Fokuspunkt-Koordinaten werden in `focal_x` und `focal_y` gespeichert. + +--- + +## ZusĂ€tzliche Felder + +| Feld | Typ | Beschreibung | +|------|-----|--------------| +| `alt` | Text | Alt-Text (Pflichtfeld) | +| `caption` | Text | Bildunterschrift | +| `credit` | Text | Fotograf/Copyright | +| `tags` | Text[] | Schlagwörter fĂŒr Suche | + +--- + +## API-Response + +Beim Abruf eines Media-Dokuments werden alle Sizes zurĂŒckgegeben: + +```json +{ + "id": 1, + "alt": "Beispielbild", + "caption": "Eine Bildunterschrift", + "credit": "Fotograf Name", + "url": "/media/original.jpg", + "width": 4000, + "height": 3000, + "mimeType": "image/jpeg", + "filesize": 2500000, + "focalX": 50, + "focalY": 50, + "sizes": { + "thumbnail": { + "url": "/media/original-150x150.webp", + "width": 150, + "height": 150, + "mimeType": "image/webp", + "filesize": 8500 + }, + "small": { + "url": "/media/original-400x300.webp", + "width": 400, + "height": 300, + "mimeType": "image/webp", + "filesize": 25000 + }, + "medium": { + "url": "/media/original-800x600.webp", + "width": 800, + "height": 600, + "mimeType": "image/webp", + "filesize": 65000 + }, + "large": { + "url": "/media/original-1200x900.webp", + "width": 1200, + "height": 900, + "mimeType": "image/webp", + "filesize": 120000 + }, + "medium_avif": { + "url": "/media/original-800x600.avif", + "width": 800, + "height": 600, + "mimeType": "image/avif", + "filesize": 35000 + } + // ... weitere Sizes + } +} +``` + +--- + +## Frontend-Integration + +### Responsive Images mit srcset + +```tsx +function ResponsiveImage({ media }) { + const { url, alt, sizes } = media + + return ( + + {/* AVIF fĂŒr moderne Browser */} + + {/* WebP Fallback */} + + {/* Original als Fallback */} + {alt} + + ) +} +``` + +### Next.js Image Component + +```tsx +import Image from 'next/image' + +function OptimizedImage({ media }) { + return ( + {media.alt} + ) +} +``` + +### Thumbnail fĂŒr Listen + +```tsx +function MediaThumbnail({ media }) { + return ( + {media.alt} + ) +} +``` + +--- + +## Social Media / Open Graph + +Die `og`-Size (1200x630px) ist optimiert fĂŒr Social Media Sharing: + +```tsx +// In Next.js Metadata +export async function generateMetadata({ params }) { + const page = await getPage(params.slug) + + return { + openGraph: { + images: [ + { + url: page.featuredImage?.sizes?.og?.url, + width: 1200, + height: 630, + }, + ], + }, + } +} +``` + +--- + +## Dateispeicherung + +Alle Bildvarianten werden im `/media`-Verzeichnis gespeichert: + +``` +/media/ +├── original.jpg # Original +├── original-150x150.webp # thumbnail +├── original-400x300.webp # small +├── original-800x600.webp # medium +├── original-800x600.avif # medium_avif +├── original-1200x900.webp # large +├── original-1200x900.avif # large_avif +├── original-1920x1440.webp # xlarge +├── original-1920x1440.avif # xlarge_avif +├── original-2560x1920.webp # 2k +└── original-1200x630.webp # og +``` + +--- + +## Kompressionsvergleich + +Typische DateigrĂ¶ĂŸen fĂŒr ein 4000x3000px Foto: + +| Format/Size | DateigrĂ¶ĂŸe | Ersparnis | +|-------------|------------|-----------| +| Original JPEG | 2.5 MB | - | +| large (WebP) | ~120 KB | 95% | +| large (AVIF) | ~70 KB | 97% | +| medium (WebP) | ~65 KB | 97% | +| medium (AVIF) | ~35 KB | 99% | +| thumbnail (WebP) | ~8 KB | 99.7% | + +--- + +## Browser-KompatibilitĂ€t + +### WebP +- Chrome 17+ +- Firefox 65+ +- Safari 14+ +- Edge 18+ + +### AVIF +- Chrome 85+ +- Firefox 93+ +- Safari 16.4+ +- Edge 121+ + +FĂŒr Ă€ltere Browser wird das Original-Format (JPEG/PNG) als Fallback verwendet. + +--- + +## Datenbank-Tabellen + +Die Migration `20251130_143000_media_optimization` erstellt: + +- Spalten fĂŒr alle Size-Varianten in `media` +- Tabelle `media_tags` fĂŒr Schlagwörter + +--- + +## Changelog + +### Version 1.0 (30.11.2025) + +- Sharp-Integration in payload.config.ts +- 11 Image Sizes definiert (7 WebP + 3 AVIF + OG) +- Fokuspunkt-Support aktiviert +- ZusĂ€tzliche Felder: caption, credit, tags +- Migration fĂŒr Datenbank-Schema diff --git a/docs/anleitungen/SEO_ERWEITERUNG.md b/docs/anleitungen/SEO_ERWEITERUNG.md new file mode 100644 index 0000000..595a391 --- /dev/null +++ b/docs/anleitungen/SEO_ERWEITERUNG.md @@ -0,0 +1,173 @@ +# SEO-Erweiterung + +## Übersicht + +Diese Dokumentation beschreibt die implementierten SEO-Features fĂŒr das Payload CMS Multi-Tenant System. + +## Implementierte Features + +### 1. Dynamische Sitemap (`/sitemap.xml`) + +**Datei:** `/src/app/sitemap.ts` + +Die Sitemap wird dynamisch aus der Datenbank generiert und enthĂ€lt: +- Startseite (PrioritĂ€t: 1.0, ÄnderungshĂ€ufigkeit: tĂ€glich) +- Alle veröffentlichten Seiten (PrioritĂ€t: 0.8, ÄnderungshĂ€ufigkeit: wöchentlich) +- Alle veröffentlichten Posts mit typ-basierter URL (PrioritĂ€t: 0.6, ÄnderungshĂ€ufigkeit: monatlich) + +**URL-Schema fĂŒr Posts:** +| Post-Typ | URL-Prefix | +|----------|------------| +| blog | `/blog/{slug}` | +| news | `/news/{slug}` | +| press | `/presse/{slug}` | +| announcement | `/aktuelles/{slug}` | + +### 2. Robots.txt (`/robots.txt`) + +**Datei:** `/src/app/robots.ts` + +Konfiguriert Crawler-Zugriff: +``` +User-Agent: * +Allow: / +Disallow: /admin +Disallow: /admin/* +Disallow: /api/* +Disallow: /_next/* +Disallow: /media/* + +User-Agent: Googlebot +Allow: / +Disallow: /admin +Disallow: /api + +Host: https://pl.c2sgmbh.de +Sitemap: https://pl.c2sgmbh.de/sitemap.xml +``` + +### 3. Structured Data (JSON-LD) + +**Datei:** `/src/lib/structuredData.ts` + +Bietet Helper-Funktionen fĂŒr Schema.org-konforme JSON-LD Daten: + +#### VerfĂŒgbare Funktionen + +| Funktion | Beschreibung | +|----------|--------------| +| `generateOrganizationSchema()` | Organization Schema | +| `generateArticleSchema()` | Article Schema fĂŒr Blog-Posts | +| `generateNewsArticleSchema()` | NewsArticle Schema | +| `generateWebPageSchema()` | WebPage Schema | +| `generateBreadcrumbSchema()` | BreadcrumbList Schema | +| `generateFAQSchema()` | FAQPage Schema | +| `generateReviewSchema()` | Review/Testimonial Schema | +| `generateAggregateRatingSchema()` | AggregateRating Schema | +| `generateLocalBusinessSchema()` | LocalBusiness Schema | +| `generateWebSiteSchema()` | WebSite Schema mit SearchAction | +| `combineSchemas()` | Kombiniert mehrere Schemas | +| `renderJsonLd()` | Sicheres Rendering von JSON-LD | + +#### Verwendungsbeispiel + +```tsx +import { generateArticleSchema, renderJsonLd } from '@/lib/structuredData' + +export default function BlogPost({ post }) { + const schema = generateArticleSchema({ + title: post.title, + description: post.excerpt, + slug: post.slug, + publishedAt: post.publishedAt, + updatedAt: post.updatedAt, + author: post.author, + featuredImage: post.featuredImage, + categories: post.categories, + }, 'https://example.com') + + return ( + <> +