From 7b51f928ddecc99f75451a80a1646920efe7f559 Mon Sep 17 00:00:00 2001 From: Martin Porwoll Date: Thu, 18 Dec 2025 15:49:38 +0000 Subject: [PATCH] docs(frontend): update to use production API, DB, SEO and consent MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Change all API URLs from pl.c2sgmbh.de (dev) to cms.c2sgmbh.de (prod) - Add environment configuration section with production endpoints - Add explanation why production data is used for development - Add SEO integration section with production data examples - Update Cookie-Consent section for production API - Add Videos, Timelines, Workflows to API endpoints - Add CORS configuration note - Update tenant-specific features for current state 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- docs/anleitungen/FRONTEND.md | 205 +++++++++++++++++++++++++++++------ 1 file changed, 171 insertions(+), 34 deletions(-) diff --git a/docs/anleitungen/FRONTEND.md b/docs/anleitungen/FRONTEND.md index 45657aa..367b3ea 100644 --- a/docs/anleitungen/FRONTEND.md +++ b/docs/anleitungen/FRONTEND.md @@ -1,21 +1,53 @@ # Frontend-Entwicklung - Payload CMS Multi-Tenant > **Server:** sv-frontend (LXC 704) - 10.10.181.104 -> **Backend API:** https://pl.c2sgmbh.de/api +> **Backend API:** https://cms.c2sgmbh.de/api (Production) ## Übersicht Das Frontend wird als separates Next.js-Projekt entwickelt und nutzt Payload CMS als Headless CMS über die REST-API. +**Wichtig:** Die Frontend-Entwicklung verwendet die **Produktions-API und -Datenbank**, um mit echten Inhalten zu arbeiten. SEO-Einstellungen und Cookie-Consent-Konfigurationen werden ebenfalls aus der Produktionsumgebung geladen. + +--- + +## Umgebungskonfiguration + +### Environment Variables (.env.local) + +```env +# API-Endpunkte (PRODUKTION) +NEXT_PUBLIC_PAYLOAD_URL=https://cms.c2sgmbh.de +NEXT_PUBLIC_API_URL=https://cms.c2sgmbh.de/api + +# Analytics (optional) +NEXT_PUBLIC_UMAMI_HOST=https://analytics.c2sgmbh.de +NEXT_PUBLIC_UMAMI_WEBSITE_ID= + +# Tenant-Konfiguration (je nach Projekt) +NEXT_PUBLIC_TENANT_ID=4 +NEXT_PUBLIC_TENANT_SLUG=c2s +``` + +### Warum Production-Daten? + +| Aspekt | Grund | +|--------|-------| +| **Content** | Echte Inhalte für realistische Entwicklung | +| **SEO** | Produktions-Meta-Tags und Structured Data | +| **Cookie-Consent** | Live Cookie-Konfigurationen (DSGVO-relevant) | +| **Media** | Produktions-Bilder mit allen Größen | +| **Consistency** | Keine Sync-Probleme zwischen Dev/Prod | + --- ## API-Dokumentation | Ressource | URL | |-----------|-----| -| **Swagger UI** | https://pl.c2sgmbh.de/api/docs | -| **OpenAPI JSON** | https://pl.c2sgmbh.de/api/openapi.json | -| **REST API Base** | https://pl.c2sgmbh.de/api | +| **Swagger UI** | https://cms.c2sgmbh.de/api/docs | +| **OpenAPI JSON** | https://cms.c2sgmbh.de/api/openapi.json | +| **REST API Base** | https://cms.c2sgmbh.de/api | --- @@ -25,6 +57,7 @@ Das Frontend wird als separates Next.js-Projekt entwickelt und nutzt Payload CMS - [ ] **Block-Komponenten entwickeln** - [ ] Hero Block + - [ ] Hero Slider Block - [ ] Text Block - [ ] Image Text Block - [ ] Card Grid Block @@ -38,6 +71,9 @@ Das Frontend wird als separates Next.js-Projekt entwickelt und nutzt Payload CMS - [ ] Testimonials Block - [ ] Newsletter Block - [ ] Process Steps Block + - [ ] FAQ Block + - [ ] Team Block + - [ ] Services Block - [ ] **Newsletter-Anmelde-Formular** - API: `POST /api/newsletter/subscribe` @@ -45,7 +81,7 @@ Das Frontend wird als separates Next.js-Projekt entwickelt und nutzt Payload CMS - Felder: email, firstName (optional), tenantId, source - [ ] **Cookie-Banner implementieren** - - Cookie Configurations aus API laden + - Cookie Configurations aus Production-API laden - Consent-Logs an Backend senden - DSGVO-konform mit Opt-In @@ -57,9 +93,9 @@ Das Frontend wird als separates Next.js-Projekt entwickelt und nutzt Payload CMS - Unterstützte Locales: `de` (default), `en` - [ ] **SEO-Integration** - - Meta-Tags aus Pages/Posts + - Meta-Tags aus Pages/Posts (Production) - Structured Data (JSON-LD) - - Sitemap: https://pl.c2sgmbh.de/sitemap.xml + - Sitemap: https://cms.c2sgmbh.de/sitemap.xml - [ ] **Suche implementieren** - API: `GET /api/search?q=...&locale=de` @@ -69,26 +105,26 @@ Das Frontend wird als separates Next.js-Projekt entwickelt und nutzt Payload CMS ### Tenant-spezifische Features #### porwoll.de -- [ ] Immobilien-Listing -- [ ] Objektsuche mit Filtern -- [ ] Kontaktformular mit Objekt-Referenz +- [ ] Portfolio-Galerie (Fotografie) +- [ ] Buchungsformular +- [ ] Before/After Bildvergleich #### complexcaresolutions.de (C2S) - [ ] Team-Übersicht - [ ] Leistungs-Seiten +- [ ] Zertifizierungen - [ ] Karriere-Seite mit Stellenangeboten -#### gunshin.de (Fotografin-Portfolio) -- [ ] Portfolio-Galerie - - API: `GET /api/portfolios?where[tenant][equals]=5` - - Kategorien: `GET /api/portfolio-categories` -- [ ] Projekt-Detailseiten mit Lightbox +#### gunshin.de (Game Development) +- [ ] Projekt-Galerie + - API: `GET /api/projects?where[tenant][equals]=5` +- [ ] Portfolio-Seiten - [ ] Referenzen-Slider #### zweitmein.ng -- [ ] Produkt-Übersicht (falls E-Commerce) - [ ] FAQ-Sektion - [ ] Preistabellen +- [ ] Kontaktformular --- @@ -107,14 +143,18 @@ Das Frontend wird als separates Next.js-Projekt entwickelt und nutzt Payload CMS | FAQs | `GET /api/faqs` | FAQ-Einträge | | Portfolios | `GET /api/portfolios` | Portfolio-Projekte | | Media | `GET /api/media` | Medien/Bilder | +| Videos | `GET /api/videos` | Video-Bibliothek | +| Timelines | `GET /api/timelines` | Chronologische Events | +| Workflows | `GET /api/workflows` | Prozess-Darstellungen | -### Globals +### Globals (SEO & Settings aus Production) | Global | Endpoint | Beschreibung | |--------|----------|--------------| -| Site Settings | `GET /api/globals/site-settings` | Logo, Name, SEO | +| Site Settings | `GET /api/globals/site-settings` | Logo, Name, Kontakt | | Navigation | `GET /api/globals/navigation` | Menü-Struktur | -| SEO Settings | `GET /api/globals/seo-settings` | Default SEO | +| SEO Settings | `GET /api/globals/seo-settings` | Default SEO (Production) | +| Privacy Policy | `GET /api/globals/privacy-policy-settings` | Datenschutz | ### Spezielle Endpoints @@ -123,6 +163,8 @@ Das Frontend wird als separates Next.js-Projekt entwickelt und nutzt Payload CMS | `/api/search` | GET | Volltextsuche | | `/api/search/suggestions` | GET | Auto-Complete | | `/api/newsletter/subscribe` | POST | Newsletter-Anmeldung | +| `/api/timelines` | GET | Timeline-Daten | +| `/api/workflows` | GET | Workflow-Daten | --- @@ -132,10 +174,13 @@ Alle Collection-Anfragen sollten nach Tenant gefiltert werden: ```typescript // Beispiel: Posts für Tenant "c2s" (ID: 4) -fetch('https://pl.c2sgmbh.de/api/posts?where[tenant][equals]=4&locale=de') +fetch('https://cms.c2sgmbh.de/api/posts?where[tenant][equals]=4&locale=de') // Beispiel: Pages für Tenant "gunshin" (ID: 5) -fetch('https://pl.c2sgmbh.de/api/pages?where[tenant][equals]=5&locale=de') +fetch('https://cms.c2sgmbh.de/api/pages?where[tenant][equals]=5&locale=de') + +// Beispiel: SEO-Settings (Global, kein Tenant-Filter) +fetch('https://cms.c2sgmbh.de/api/globals/seo-settings') ``` ### Tenant-IDs @@ -181,10 +226,10 @@ Unterstützte Locales: `de` (default), `en` ```typescript // Deutsch (default) -fetch('https://pl.c2sgmbh.de/api/posts?locale=de') +fetch('https://cms.c2sgmbh.de/api/posts?locale=de') // Englisch -fetch('https://pl.c2sgmbh.de/api/posts?locale=en') +fetch('https://cms.c2sgmbh.de/api/posts?locale=en') // Fallback: Wenn EN nicht vorhanden, wird DE zurückgegeben ``` @@ -196,7 +241,7 @@ fetch('https://pl.c2sgmbh.de/api/posts?locale=en') ### Anmeldung ```typescript -const response = await fetch('https://pl.c2sgmbh.de/api/newsletter/subscribe', { +const response = await fetch('https://cms.c2sgmbh.de/api/newsletter/subscribe', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ @@ -219,18 +264,25 @@ const response = await fetch('https://pl.c2sgmbh.de/api/newsletter/subscribe', { --- -## Cookie-Consent +## Cookie-Consent (Production-Daten) ### Konfiguration laden ```typescript -const config = await fetch('https://pl.c2sgmbh.de/api/cookie-configurations?where[tenant][equals]=4') +// Cookie-Konfiguration aus Production laden +const config = await fetch('https://cms.c2sgmbh.de/api/cookie-configurations?where[tenant][equals]=4') + .then(r => r.json()) + +// config.docs enthält: +// - Kategorien (necessary, analytics, marketing, etc.) +// - Cookie-Details pro Kategorie +// - Texte für Banner (lokalisiert) ``` ### Consent loggen ```typescript -await fetch('https://pl.c2sgmbh.de/api/consent-logs', { +await fetch('https://cms.c2sgmbh.de/api/consent-logs', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ @@ -245,12 +297,49 @@ await fetch('https://pl.c2sgmbh.de/api/consent-logs', { --- +## SEO-Integration (Production-Daten) + +### Global SEO-Settings + +```typescript +// SEO-Defaults aus Production laden +const seoSettings = await fetch('https://cms.c2sgmbh.de/api/globals/seo-settings') + .then(r => r.json()) + +// Enthält: +// - defaultTitle, titleTemplate +// - defaultDescription +// - defaultImage (OG-Image) +// - robotsDefault +``` + +### Page-spezifische SEO + +```typescript +// SEO-Daten aus Page laden +const page = await fetch('https://cms.c2sgmbh.de/api/pages?where[slug][equals]=about&where[tenant][equals]=4') + .then(r => r.json()) + +// page.docs[0].meta enthält: +// - title, description +// - image (OG-Image Override) +// - noIndex, noFollow +``` + +### Sitemap + +Die Sitemap wird automatisch von Payload generiert: +- **URL:** https://cms.c2sgmbh.de/sitemap.xml +- Enthält alle publizierten Pages und Posts + +--- + ## Kontaktformular Formular-Submissions werden über die Forms-Collection verarbeitet: ```typescript -await fetch('https://pl.c2sgmbh.de/api/form-submissions', { +await fetch('https://cms.c2sgmbh.de/api/form-submissions', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ @@ -272,14 +361,14 @@ Falls User-Authentifizierung benötigt wird: ```typescript // Login -const { token, user } = await fetch('https://pl.c2sgmbh.de/api/users/login', { +const { token, user } = await fetch('https://cms.c2sgmbh.de/api/users/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email, password }) }).then(r => r.json()) // Authentifizierte Requests -fetch('https://pl.c2sgmbh.de/api/...', { +fetch('https://cms.c2sgmbh.de/api/...', { headers: { 'Authorization': `JWT ${token}` } }) ``` @@ -293,7 +382,9 @@ fetch('https://pl.c2sgmbh.de/api/...', { Die Payload-Typen können aus dem Backend exportiert werden: ```bash -# Auf dem Payload-Server +# Auf dem Payload-Server (Production) +ssh payload@162.55.85.18 +cd ~/payload-cms pnpm payload generate:types # Datei: src/payload-types.ts @@ -316,14 +407,60 @@ Diese Datei kann ins Frontend-Projekt kopiert werden für typsichere API-Calls. - TTL: 60 Sekunden für Suche - Cache wird bei Content-Änderungen invalidiert +### CORS + +Die Production-API erlaubt Requests von: +- `*.porwoll.tech` (Development) +- `porwoll.de`, `complexcaresolutions.de`, `gunshin.de` (Production) + +--- + +## Development Server (sv-frontend) + +### SSH-Zugang + +```bash +ssh frontend@10.10.181.104 +``` + +### Projekt starten + +```bash +cd ~/frontend.porwoll.de +pnpm dev +# Läuft auf Port 3000 → https://porwoll-dev.porwoll.tech +``` + +### AI-Tools + +```bash +claude # Claude Code CLI +codex # Codex CLI +gemini # Gemini CLI +``` + +### Service-Management + +```bash +# Systemd Service starten +systemctl start frontend-porwoll + +# Service stoppen +systemctl stop frontend-porwoll + +# Logs anzeigen +journalctl -u frontend-porwoll -f +``` + --- ## Ressourcen - **Payload CMS Docs:** https://payloadcms.com/docs -- **API-Dokumentation:** https://pl.c2sgmbh.de/api/docs -- **Backend-Repository:** https://github.com/c2s-admin/cms.c2sgmbh.git +- **API-Dokumentation:** https://cms.c2sgmbh.de/api/docs +- **Backend-Repository:** https://github.com/complexcaresolutions/cms.c2sgmbh.git +- **Analytics:** https://analytics.c2sgmbh.de --- -*Erstellt: 11.12.2025* +*Letzte Aktualisierung: 18.12.2025*