mirror of
https://github.com/complexcaresolutions/payload-contracts.git
synced 2026-03-17 22:13:48 +00:00
Martin Porwoll
774d7bc402
Shared TypeScript types, API client, and block registry for coordinated CMS-to-frontend development across all tenants. - Type extraction script from payload-types.ts (12,782 lines) - 39 frontend collection types, 42 block types - createPayloadClient() with tenant isolation - createBlockRenderer() for type-safe block mapping - Media helpers (getImageUrl, getSrcSet) - Work order system for cross-server coordination - Block catalog documentation Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
131 lines
5.4 KiB
Markdown
131 lines
5.4 KiB
Markdown
# Block Catalog
|
|
|
|
All 43 CMS blocks available for frontend implementation.
|
|
Auto-generated reference — see `src/types/blocks.ts` for exact TypeScript types.
|
|
|
|
## How to Use
|
|
|
|
```typescript
|
|
import type { Block, BlockByType } from '@c2s/payload-contracts/types'
|
|
|
|
// Get a specific block type
|
|
type HeroBlock = BlockByType<'hero-block'>
|
|
|
|
// Switch on block type (discriminated union)
|
|
function renderBlock(block: Block) {
|
|
switch (block.blockType) {
|
|
case 'hero-block': return <Hero {...block} />
|
|
case 'text-block': return <Text {...block} />
|
|
// ...
|
|
}
|
|
}
|
|
```
|
|
|
|
## Core Blocks
|
|
|
|
| # | Slug | Name | Key Fields |
|
|
|---|------|------|------------|
|
|
| 1 | `hero-block` | Hero | title, subtitle, image, ctaButtons, style, overlay |
|
|
| 2 | `hero-slider-block` | Hero Slider | slides[], autoplay, animation, interval |
|
|
| 3 | `image-slider-block` | Image Slider | images[], layout, columns |
|
|
| 4 | `text-block` | Text | content (richText), alignment, maxWidth |
|
|
| 5 | `image-text-block` | Image + Text | image, content, imagePosition, ratio |
|
|
| 6 | `card-grid-block` | Card Grid | cards[], columns, layout |
|
|
| 7 | `quote-block` | Quote | quote, author, role, image, style |
|
|
| 8 | `cta-block` | Call to Action | title, description, buttons[], style |
|
|
| 9 | `contact-form-block` | Contact Form | form (relationship), layout |
|
|
| 10 | `timeline-block` | Timeline | entries (from Timeline collection) |
|
|
| 11 | `divider-block` | Divider | style, spacing, color |
|
|
| 12 | `video-block` | Video | videoUrl, poster, autoplay, aspectRatio |
|
|
|
|
## Content Blocks
|
|
|
|
| # | Slug | Name | Key Fields |
|
|
|---|------|------|------------|
|
|
| 13 | `posts-list-block` | Posts List | postType, layout, limit, showExcerpt, showDate |
|
|
| 14 | `testimonials-block` | Testimonials | displayMode, layout, autoplay |
|
|
| 15 | `newsletter-block` | Newsletter | title, description, buttonText |
|
|
| 16 | `process-steps-block` | Process Steps | steps[], layout, numbering |
|
|
| 17 | `faq-block` | FAQ | displayMode, categories, layout, schema (JSON-LD) |
|
|
| 18 | `team-block` | Team | displayMode, roles, layout, columns |
|
|
| 19 | `services-block` | Services | displayMode, categories, layout |
|
|
|
|
## Blogging Blocks
|
|
|
|
| # | Slug | Name | Key Fields |
|
|
|---|------|------|------------|
|
|
| 20 | `author-bio-block` | Author Bio | author (relationship), showSocial |
|
|
| 21 | `related-posts-block` | Related Posts | limit, layout, strategy |
|
|
| 22 | `share-buttons-block` | Share Buttons | platforms[], layout |
|
|
| 23 | `toc-block` | Table of Contents | style, maxDepth |
|
|
|
|
## Team Blocks
|
|
|
|
| # | Slug | Name | Key Fields |
|
|
|---|------|------|------------|
|
|
| 24 | `team-filter-block` | Team Filter | roles[], layout, filterLayout |
|
|
| 25 | `org-chart-block` | Org Chart | maxDepth, layout, direction, nodeStyle |
|
|
|
|
## Feature Blocks
|
|
|
|
| # | Slug | Name | Key Fields |
|
|
|---|------|------|------------|
|
|
| 26 | `locations-block` | Locations | type, selectedLocations, layout, map |
|
|
| 27 | `logo-grid-block` | Logo Grid | logos[], layout, columns, slider |
|
|
| 28 | `stats-block` | Stats | stats[], layout, columns, animation |
|
|
| 29 | `jobs-block` | Jobs | displayMode, layout, columns, filters |
|
|
| 30 | `downloads-block` | Downloads | displayMode, layout, columns, filters |
|
|
| 31 | `map-block` | Map | center, zoom, markers, mapStyle |
|
|
|
|
## Interactive Blocks
|
|
|
|
| # | Slug | Name | Key Fields |
|
|
|---|------|------|------------|
|
|
| 32 | `events` | Events | displayMode, layout, columns, showImage |
|
|
| 33 | `pricing` | Pricing | plans[], layout, highlightPopular |
|
|
| 34 | `tabs` | Tabs | tabs[], tabStyle, defaultTab |
|
|
| 35 | `accordion` | Accordion | items[], style, iconPosition, layout |
|
|
| 36 | `comparison` | Comparison | items[], features[], layout |
|
|
|
|
## Tenant-Specific Blocks
|
|
|
|
| # | Slug | Name | Tenant | Key Fields |
|
|
|---|------|------|--------|------------|
|
|
| 37 | `before-after` | Before/After | porwoll | pairs[], sliderStyle |
|
|
|
|
## BlogWoman Blocks
|
|
|
|
| # | Slug | Name | Key Fields |
|
|
|---|------|------|------------|
|
|
| 38 | `favorites-block` | Favorites | displayMode, layout, columns, filterCategory |
|
|
| 39 | `series-block` | Series | displayMode, layout, columns |
|
|
| 40 | `series-detail-block` | Series Detail | series (relationship), showHero |
|
|
| 41 | `video-embed-block` | Video Embed | videoUrl, aspectRatio, privacyMode |
|
|
| 42 | `featured-content-block` | Featured Content | items[], layout |
|
|
|
|
## YouTube Script Block (not in page layout)
|
|
|
|
| # | Slug | Name | Used In |
|
|
|---|------|------|---------|
|
|
| 43 | `script-section` | Script Section | yt-script-templates |
|
|
|
|
## Common Patterns
|
|
|
|
All blocks share these optional fields (via block config):
|
|
- `title` — Section heading
|
|
- `subtitle` — Section subheading
|
|
- `description` — Rich text description
|
|
- `backgroundColor` — Background color variant
|
|
- `spacing` — Top/bottom padding control
|
|
- `id` — Unique block ID (auto-generated)
|
|
|
|
## Block Groups by Frontend
|
|
|
|
### blogwoman.de (~17 blocks)
|
|
Core (hero, text, image-text, cta, video, divider) + Content (posts-list, testimonials, newsletter, faq) + BlogWoman-specific (favorites, series, series-detail, video-embed, featured-content) + Blogging (author-bio, related-posts, share-buttons)
|
|
|
|
### porwoll.de (~15 blocks)
|
|
Core (hero, hero-slider, image-slider, text, image-text, card-grid, quote, cta, contact-form, video, divider) + Feature (before-after, testimonials, faq) + Team (team)
|
|
|
|
### complexcaresolutions.de (~20 blocks)
|
|
Core + Content + Team (team, team-filter, services, org-chart) + Feature (locations, logo-grid, stats, jobs, downloads)
|