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 ( + <> +