mirror of
https://github.com/complexcaresolutions/cms.c2sgmbh.git
synced 2026-03-17 22:04:10 +00:00
Martin Porwoll
a88e4f60d0
Tests: - Update frontend.e2e.spec.ts with locale testing - Add search.e2e.spec.ts for search functionality - Add i18n.int.spec.ts for localization tests - Add search.int.spec.ts for search integration - Update playwright.config.ts Documentation: - Add CLAUDE.md with project instructions - Add docs/ directory with detailed documentation - Add scripts/ for utility scripts 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
405 lines
12 KiB
Markdown
405 lines
12 KiB
Markdown
# Universal Features - Dokumentation
|
|
|
|
## Übersicht
|
|
|
|
Die Universal Features erweitern das Payload CMS um wiederverwendbare Collections und Blocks für Blog, News, Testimonials, Newsletter und Prozess-Darstellungen. Alle Features sind Multi-Tenant-fähig.
|
|
|
|
---
|
|
|
|
## Collections
|
|
|
|
### 1. Posts Collection
|
|
|
|
**Pfad:** `src/collections/Posts.ts`
|
|
**Slug:** `posts`
|
|
**Admin-Gruppe:** Content
|
|
|
|
Die Posts Collection dient zur Verwaltung von Blog-Artikeln, News, Pressemitteilungen und Ankündigungen.
|
|
|
|
#### Felder
|
|
|
|
| Feld | Typ | Beschreibung | Pflicht |
|
|
|------|-----|--------------|---------|
|
|
| `title` | Text | Titel des Beitrags | Ja |
|
|
| `slug` | Text | URL-Pfad (unique) | Ja |
|
|
| `type` | Select | Art des Beitrags | Ja |
|
|
| `isFeatured` | Checkbox | Hervorgehobener Beitrag | Nein |
|
|
| `excerpt` | Textarea | Kurzfassung (max. 300 Zeichen) | Nein |
|
|
| `featuredImage` | Upload | Beitragsbild | Nein |
|
|
| `content` | RichText | Hauptinhalt | Ja |
|
|
| `categories` | Relationship | Kategorien (hasMany) | Nein |
|
|
| `author` | Text | Autorname | Nein |
|
|
| `status` | Select | draft/published/archived | Nein |
|
|
| `publishedAt` | Date | Veröffentlichungsdatum | Nein |
|
|
| `seo` | Group | SEO-Einstellungen | Nein |
|
|
|
|
#### Post-Typen
|
|
|
|
- `blog` - Blog-Artikel (Standard)
|
|
- `news` - News/Aktuelles
|
|
- `press` - Pressemitteilung
|
|
- `announcement` - Ankündigung
|
|
|
|
#### Access Control
|
|
|
|
- **Read:** Öffentlich für veröffentlichte Beiträge des eigenen Tenants
|
|
- **Create/Update/Delete:** Nur authentifizierte Benutzer
|
|
|
|
---
|
|
|
|
### 2. Testimonials Collection
|
|
|
|
**Pfad:** `src/collections/Testimonials.ts`
|
|
**Slug:** `testimonials`
|
|
**Admin-Gruppe:** Content
|
|
|
|
Kundenstimmen und Bewertungen für Referenz-Seiten.
|
|
|
|
#### Felder
|
|
|
|
| Feld | Typ | Beschreibung | Pflicht |
|
|
|------|-----|--------------|---------|
|
|
| `quote` | Textarea | Zitat/Bewertungstext | Ja |
|
|
| `author` | Text | Name des Kunden | Ja |
|
|
| `role` | Text | Position/Rolle | Nein |
|
|
| `company` | Text | Unternehmen | Nein |
|
|
| `image` | Upload | Portrait-Foto | Nein |
|
|
| `rating` | Number | Bewertung 1-5 Sterne | Nein |
|
|
| `source` | Text | Quelle (z.B. "Google Reviews") | Nein |
|
|
| `sourceUrl` | Text | Link zur Original-Bewertung | Nein |
|
|
| `date` | Date | Datum der Bewertung | Nein |
|
|
| `isActive` | Checkbox | Sichtbarkeit | Nein |
|
|
| `order` | Number | Sortierung | Nein |
|
|
|
|
#### Access Control
|
|
|
|
- **Read:** Öffentlich für aktive Testimonials des eigenen Tenants
|
|
- **Create/Update/Delete:** Nur authentifizierte Benutzer
|
|
|
|
---
|
|
|
|
### 3. Newsletter Subscribers Collection
|
|
|
|
**Pfad:** `src/collections/NewsletterSubscribers.ts`
|
|
**Slug:** `newsletter-subscribers`
|
|
**Admin-Gruppe:** Marketing
|
|
|
|
DSGVO-konforme Speicherung von Newsletter-Anmeldungen mit Double Opt-In Support.
|
|
|
|
#### Felder
|
|
|
|
| Feld | Typ | Beschreibung | Pflicht |
|
|
|------|-----|--------------|---------|
|
|
| `email` | Email | E-Mail-Adresse | Ja |
|
|
| `firstName` | Text | Vorname | Nein |
|
|
| `lastName` | Text | Nachname | Nein |
|
|
| `status` | Select | Anmeldestatus | Ja |
|
|
| `interests` | Select (hasMany) | Interessengebiete | Nein |
|
|
| `source` | Text | Anmeldequelle | Nein |
|
|
| `subscribedAt` | Date | Anmeldedatum (auto) | Nein |
|
|
| `confirmedAt` | Date | Bestätigungsdatum (auto) | Nein |
|
|
| `unsubscribedAt` | Date | Abmeldedatum (auto) | Nein |
|
|
| `confirmationToken` | Text | Token für Double Opt-In (auto) | Nein |
|
|
| `ipAddress` | Text | IP-Adresse (DSGVO) | Nein |
|
|
| `userAgent` | Text | Browser-Info | Nein |
|
|
|
|
#### Status-Werte
|
|
|
|
- `pending` - Ausstehend (Double Opt-In)
|
|
- `confirmed` - Bestätigt
|
|
- `unsubscribed` - Abgemeldet
|
|
- `bounced` - E-Mail nicht zustellbar
|
|
|
|
#### Interessen-Optionen
|
|
|
|
- `general` - Allgemeine Updates
|
|
- `blog` - Blog-Artikel
|
|
- `products` - Produkt-News
|
|
- `offers` - Angebote & Aktionen
|
|
- `events` - Events
|
|
|
|
#### Access Control
|
|
|
|
- **Read:** Nur authentifizierte Benutzer (Datenschutz!)
|
|
- **Create:** Öffentlich (für Anmeldungen)
|
|
- **Update/Delete:** Nur authentifizierte Benutzer
|
|
|
|
#### Automatische Hooks
|
|
|
|
Bei der Erstellung wird automatisch:
|
|
- `subscribedAt` auf aktuelles Datum gesetzt
|
|
- `confirmationToken` generiert (UUID)
|
|
|
|
Bei Status-Änderungen:
|
|
- `confirmedAt` wird gesetzt bei Wechsel zu "confirmed"
|
|
- `unsubscribedAt` wird gesetzt bei Wechsel zu "unsubscribed"
|
|
|
|
---
|
|
|
|
## Blocks
|
|
|
|
Alle Blocks können in der Pages Collection verwendet werden.
|
|
|
|
### 1. Posts List Block
|
|
|
|
**Slug:** `posts-list-block`
|
|
|
|
Zeigt eine Liste von Blog-Artikeln, News oder anderen Post-Typen an.
|
|
|
|
#### Konfigurationsoptionen
|
|
|
|
| Option | Typ | Standard | Beschreibung |
|
|
|--------|-----|----------|--------------|
|
|
| `title` | Text | - | Überschrift |
|
|
| `subtitle` | Text | - | Untertitel |
|
|
| `postType` | Select | blog | Beitragstyp-Filter |
|
|
| `layout` | Select | grid | Darstellung |
|
|
| `columns` | Select | 3 | Spaltenanzahl (bei Grid) |
|
|
| `limit` | Number | 6 | Anzahl Beiträge |
|
|
| `showFeaturedOnly` | Checkbox | false | Nur hervorgehobene |
|
|
| `filterByCategory` | Relationship | - | Kategorie-Filter |
|
|
| `showExcerpt` | Checkbox | true | Kurzfassung anzeigen |
|
|
| `showDate` | Checkbox | true | Datum anzeigen |
|
|
| `showAuthor` | Checkbox | false | Autor anzeigen |
|
|
| `showCategory` | Checkbox | true | Kategorie anzeigen |
|
|
| `showPagination` | Checkbox | false | Pagination |
|
|
| `showReadMore` | Checkbox | true | "Alle anzeigen" Link |
|
|
| `readMoreLabel` | Text | "Alle Beiträge anzeigen" | Link-Text |
|
|
| `readMoreLink` | Text | /blog | Ziel-URL |
|
|
| `backgroundColor` | Select | white | Hintergrundfarbe |
|
|
|
|
#### Layout-Optionen
|
|
|
|
- `grid` - Karten im Grid
|
|
- `list` - Listenansicht
|
|
- `featured` - Featured + Grid
|
|
- `compact` - Kompakt (für Sidebar)
|
|
- `masonry` - Masonry-Layout
|
|
|
|
---
|
|
|
|
### 2. Testimonials Block
|
|
|
|
**Slug:** `testimonials-block`
|
|
|
|
Zeigt Kundenstimmen aus der Testimonials Collection.
|
|
|
|
#### Konfigurationsoptionen
|
|
|
|
| Option | Typ | Standard | Beschreibung |
|
|
|--------|-----|----------|--------------|
|
|
| `title` | Text | "Das sagen unsere Kunden" | Überschrift |
|
|
| `subtitle` | Text | - | Untertitel |
|
|
| `layout` | Select | slider | Darstellung |
|
|
| `columns` | Select | 3 | Spalten (bei Grid) |
|
|
| `displayMode` | Select | all | Auswahl-Modus |
|
|
| `selectedTestimonials` | Relationship | - | Handverlesene Auswahl |
|
|
| `limit` | Number | 6 | Max. Anzahl |
|
|
| `showRating` | Checkbox | true | Sterne anzeigen |
|
|
| `showImage` | Checkbox | true | Foto anzeigen |
|
|
| `showCompany` | Checkbox | true | Unternehmen anzeigen |
|
|
| `showSource` | Checkbox | false | Quelle anzeigen |
|
|
| `autoplay` | Checkbox | true | Auto-Wechsel (Slider) |
|
|
| `autoplaySpeed` | Number | 5000 | Wechselintervall (ms) |
|
|
| `backgroundColor` | Select | light | Hintergrundfarbe |
|
|
|
|
#### Layout-Optionen
|
|
|
|
- `slider` - Karussell
|
|
- `grid` - Karten im Grid
|
|
- `single` - Einzeln (Featured)
|
|
- `masonry` - Masonry-Layout
|
|
- `list` - Listenansicht
|
|
|
|
---
|
|
|
|
### 3. Newsletter Block
|
|
|
|
**Slug:** `newsletter-block`
|
|
|
|
Anmeldeformular für Newsletter mit DSGVO-Hinweis.
|
|
|
|
#### Konfigurationsoptionen
|
|
|
|
| Option | Typ | Standard | Beschreibung |
|
|
|--------|-----|----------|--------------|
|
|
| `title` | Text | "Newsletter abonnieren" | Überschrift |
|
|
| `subtitle` | Textarea | Standard-Text | Beschreibung |
|
|
| `layout` | Select | inline | Formular-Layout |
|
|
| `image` | Upload | - | Bild (bei with-image) |
|
|
| `imagePosition` | Select | left | Bildposition |
|
|
| `collectName` | Checkbox | false | Name abfragen |
|
|
| `showInterests` | Checkbox | false | Interessen anzeigen |
|
|
| `availableInterests` | Select (hasMany) | - | Verfügbare Interessen |
|
|
| `buttonText` | Text | "Anmelden" | Button-Text |
|
|
| `placeholderEmail` | Text | "Ihre E-Mail-Adresse" | Placeholder |
|
|
| `successMessage` | Textarea | Standard-Text | Erfolgsmeldung |
|
|
| `errorMessage` | Text | Standard-Text | Fehlermeldung |
|
|
| `privacyText` | Textarea | Standard-Text | Datenschutz-Hinweis |
|
|
| `privacyLink` | Text | /datenschutz | Link zur DSE |
|
|
| `source` | Text | website | Tracking-Quelle |
|
|
| `backgroundColor` | Select | accent | Hintergrundfarbe |
|
|
|
|
#### Layout-Optionen
|
|
|
|
- `inline` - Eingabe + Button nebeneinander
|
|
- `stacked` - Untereinander
|
|
- `with-image` - Mit Bild (50/50)
|
|
- `minimal` - Nur Input
|
|
- `card` - Karten-Design
|
|
|
|
---
|
|
|
|
### 4. Process Steps Block
|
|
|
|
**Slug:** `process-steps-block`
|
|
|
|
Zeigt Prozess-Schritte / "So funktioniert es" Darstellungen.
|
|
|
|
#### Konfigurationsoptionen
|
|
|
|
| Option | Typ | Standard | Beschreibung |
|
|
|--------|-----|----------|--------------|
|
|
| `title` | Text | "So funktioniert es" | Überschrift |
|
|
| `subtitle` | Text | - | Untertitel |
|
|
| `layout` | Select | horizontal | Darstellung |
|
|
| `showNumbers` | Checkbox | true | Schritt-Nummern |
|
|
| `showIcons` | Checkbox | true | Icons anzeigen |
|
|
| `steps` | Array | - | Schritte (2-10) |
|
|
| `cta.show` | Checkbox | false | CTA anzeigen |
|
|
| `cta.label` | Text | "Jetzt starten" | Button-Text |
|
|
| `cta.href` | Text | - | Button-Link |
|
|
| `cta.variant` | Select | default | Button-Stil |
|
|
| `backgroundColor` | Select | white | Hintergrundfarbe |
|
|
|
|
#### Schritte-Felder
|
|
|
|
- `title` - Schritt-Titel (Pflicht)
|
|
- `description` - Beschreibung
|
|
- `icon` - Emoji oder Icon-Name
|
|
- `image` - Optionales Bild
|
|
|
|
#### Layout-Optionen
|
|
|
|
- `horizontal` - Nebeneinander
|
|
- `vertical` - Untereinander
|
|
- `alternating` - Zickzack
|
|
- `connected` - Mit Verbindungslinien
|
|
- `timeline` - Timeline-Stil
|
|
|
|
---
|
|
|
|
### 5. Timeline Block
|
|
|
|
**Slug:** `timeline-block`
|
|
|
|
Chronologische Darstellung von Ereignissen (z.B. Firmengeschichte).
|
|
|
|
#### Konfigurationsoptionen
|
|
|
|
| Option | Typ | Standard | Beschreibung |
|
|
|--------|-----|----------|--------------|
|
|
| `title` | Text | - | Überschrift |
|
|
| `subtitle` | Text | - | Untertitel |
|
|
| `layout` | Select | vertical | Darstellung |
|
|
| `showConnector` | Checkbox | true | Verbindungslinie |
|
|
| `markerStyle` | Select | dot | Marker-Stil |
|
|
| `items` | Array | - | Einträge |
|
|
| `backgroundColor` | Select | white | Hintergrundfarbe |
|
|
|
|
#### Einträge-Felder
|
|
|
|
- `year` - Jahr/Datum
|
|
- `title` - Titel (Pflicht)
|
|
- `description` - Beschreibung
|
|
- `icon` - Emoji oder Icon
|
|
- `image` - Optionales Bild
|
|
- `link.label` - Link-Text
|
|
- `link.href` - Link-URL
|
|
|
|
#### Layout-Optionen
|
|
|
|
- `vertical` - Standard vertikal
|
|
- `alternating` - Links/Rechts wechselnd
|
|
- `horizontal` - Horizontale Zeitleiste
|
|
|
|
#### Marker-Stile
|
|
|
|
- `dot` - Punkt
|
|
- `number` - Nummer
|
|
- `icon` - Icon
|
|
- `date` - Jahr/Datum
|
|
|
|
---
|
|
|
|
## Multi-Tenant Konfiguration
|
|
|
|
Alle Collections sind für Multi-Tenant konfiguriert:
|
|
|
|
```typescript
|
|
// payload.config.ts
|
|
multiTenantPlugin({
|
|
tenantsSlug: 'tenants',
|
|
collections: {
|
|
posts: {},
|
|
testimonials: {},
|
|
'newsletter-subscribers': {},
|
|
// ... weitere Collections
|
|
},
|
|
})
|
|
```
|
|
|
|
### Tenant-Zuordnung
|
|
|
|
Jedes Dokument enthält ein `tenant`-Feld, das auf die Tenants-Collection verweist. Die Access-Control-Funktionen in `src/lib/tenantAccess.ts` sorgen für die Isolation:
|
|
|
|
- **Authentifizierte Admins:** Sehen alle Dokumente
|
|
- **Anonyme Requests:** Nur Dokumente des Tenants, der zur Domain passt
|
|
|
|
---
|
|
|
|
## Dateien-Übersicht
|
|
|
|
```
|
|
src/
|
|
├── collections/
|
|
│ ├── Posts.ts # Blog/News Collection
|
|
│ ├── Testimonials.ts # Kundenstimmen
|
|
│ └── NewsletterSubscribers.ts # Newsletter-Anmeldungen
|
|
├── blocks/
|
|
│ ├── PostsListBlock.ts # Blog/News-Liste
|
|
│ ├── TestimonialsBlock.ts # Testimonials-Anzeige
|
|
│ ├── NewsletterBlock.ts # Newsletter-Formular
|
|
│ ├── ProcessStepsBlock.ts # Prozess-Schritte
|
|
│ ├── TimelineBlock.ts # Timeline
|
|
│ └── index.ts # Block-Exports
|
|
├── lib/
|
|
│ └── tenantAccess.ts # Access-Control-Funktionen
|
|
└── payload.config.ts # Haupt-Konfiguration
|
|
```
|
|
|
|
---
|
|
|
|
## Datenbank-Tabellen
|
|
|
|
| Tabelle | Beschreibung |
|
|
|---------|--------------|
|
|
| `posts` | Blog/News-Beiträge |
|
|
| `posts_rels` | Kategorien-Beziehungen |
|
|
| `testimonials` | Kundenstimmen |
|
|
| `newsletter_subscribers` | Newsletter-Anmeldungen |
|
|
| `newsletter_subscribers_interests` | Interessen (hasMany) |
|
|
| `pages_rels` | Block-Relationships |
|
|
|
|
---
|
|
|
|
## Changelog
|
|
|
|
### Version 1.0 (30.11.2025)
|
|
|
|
- Posts Collection um `type`, `isFeatured`, `excerpt` erweitert
|
|
- Testimonials Collection erstellt
|
|
- NewsletterSubscribers Collection erstellt (DSGVO-konform)
|
|
- 5 neue Blocks für Pages implementiert
|
|
- Multi-Tenant Integration für alle Collections
|
|
- Migration `20251130_135459` erstellt und angewendet
|