Module Overview

This document provides a comprehensive overview of all available modules (blocks), collections, and globals in the RobinCMS Payload project, including their configurable options.

---

Table of Contents

• Shared Fields
• Blocks
  • Hero
  • Rich Text
  • Image + Text
  • Call to Action (CTA)
  • Accordion / Tabs
  • Card Grid
  • Carousel
  • Quote / Testimonial
  • Photo Gallery
  • Bento Gallery
  • Video
  • Markdown Document
  • Embed
  • Contact Form
  • Separator
  • Spacer
  • Timeline
  • Horizontal Text
  • Vinyl Player
• Collections
  • Pages
  • Media
  • Users
  • Votes
  • Contact Messages
  • Saved Blocks
• Globals
  • Header
  • Footer
  • Site Settings
  • Theme
• Components
  • Vote Popup
• API Routes

---

Shared Fields

These field groups are reused across most blocks:

Block Colors (blockColorFields)

A group with five text fields using the ThemeColorPickerField component:

The background pattern library ships 40 tileable SVG patterns across 8 categories (Abstract, Geometric, Basic, Futuristic, Minimal, Tile, Music, Food), defined in src/lib/patterns.ts.

Applied to all blocks except Spacer and Separator.

Block Typography (blockTypographyFields)

A group that overrides the global theme typography for an individual block. Every option defaults to Inherit (use the global Theme & Styling settings).

Applied to Hero, Bento Gallery, Vinyl Player, and other blocks that opt in.

Button Icon Fields (buttonIconFields)

Reusable icon fields spread into button arrays on Hero, CTA, CardGrid, and ImageText blocks:

Block Spacing (blockSpacingFields)

A group with two collapsible sub-groups — Padding and Margin — each containing:

Applied to all blocks.

Block Width (blockLayoutFields)

Padding Size (paddingSizeField)

Animation (animationField)

---

Blocks

Hero

Block Slug: hero Description: Full-width hero section with multiple layout styles and scroll-driven visual effects.

---

Rich Text

Block Slug: richText Description: A flexible rich text content block using the Lexical rich text editor.

---

Image + Text

Block Slug: imageText Description: Side-by-side image and rich text content.

---

Call to Action (CTA)

Block Slug: cta Description: Prominent call-to-action sections with multiple layout styles.

---

Accordion / Tabs

Block Slug: accordionTabs Description: Collapsible accordion or tabbed content with animated transitions.

---

Card Grid

Block Slug: cardGrid Description: A grid layout displaying multiple cards with four visual variants.

---

Carousel

Block Slug: carousel Description: An image carousel/slider with multiple layout and interaction options.

---

Quote / Testimonial

Block Slug: quote Description: A styled quote or testimonial block.

---

Photo Gallery

Block Slug: gallery Description: Image gallery with multiple layout options and lightbox support.

---

Bento Gallery

Block Slug: bentoGallery Description: A scroll-driven bento-grid gallery with a Ken Burns zoom effect that animates toward a focus image as the visitor scrolls, plus an optional floating title.

---

Video

Block Slug: video Description: YouTube and Vimeo video embed block.

---

Markdown Document

Block Slug: markdownDoc Description: Render GFM Markdown content with syntax highlighting and auto-generated table of contents.

---

Embed

Block Slug: embed Description: Raw HTML embed code for iframes, widgets, maps, etc.

---

Contact Form

Block Slug: contactForm Description: A simple contact form that collects a visitor's name, email, and message, and stores submissions in the Contact Messages collection.

Anti-spam: honeypot website input, 3-second minimum open time, and server-side rate limiting (5 submissions per IP / 10 min). Endpoint: POST /api/contact

---

Separator

Block Slug: separator Description: Decorative section dividers with multiple visual styles.

---

Spacer

Block Slug: spacer Description: A vertical spacing block to add whitespace between sections.

---

Timeline

Block Slug: timeline Description: A timeline of events or milestones in either an immersive horizontal (full-background-image with tabs) or a classic vertical (alternating left/right) layout.

---

Horizontal Text

Block Slug: horizontalText Description: A marquee-style strip of text that scrolls horizontally across the screen, with optional letter fly-in animation as it enters the viewport.

---

Vinyl Player

Block Slug: vinylPlayer Description: An interactive turntable showcase that slides records onto a spinning vinyl. Each record has a cover sleeve, a center label, and optional audio playback.

---

Collections

Pages

Collection Slug: pages Description: Content pages composed from blocks. Supports drafts with autosave and scheduled publishing.

• Versions: Drafts with autosave (375 ms interval), scheduled publish
• Hooks: afterChange / afterDelete revalidate the page path and home (/)
• Live Preview: Enabled

---

Media

Collection Slug: media Description: Uploaded images, videos, and PDFs with automatic image resizing.

• Upload: Static dir media; focal point enabled; mime types: image/*, video/*, application/pdf
• Image sizes: thumbnail (400×300), card (768×512), hero (1920×auto), og (1200×630)
• Hooks: beforeChange — auto-fills alt from filename if not set (strips extension, replaces hyphens/underscores with spaces)
• Access: Read open to all; create/update/delete requires non-viewer

---

Users

Collection Slug: users Description: Admin and editor accounts with Payload built-in auth.

• Access: Read: any authenticated user. Create/update/delete: admin role only.

---

Contact Messages

Collection Slug: contact-messages Description: Stores contact form submissions from the public-facing Contact Form block.

• Admin group: Site Configuration
• Access: Create open to all (public form); read/update/delete requires authenticated non-viewer
• Timestamps: Enabled

---

Votes

Collection Slug: votes Description: Stores star ratings and optional text feedback from the vote popup.

• Admin group: Site Configuration
• Access: Read/create open to all; update/delete requires authentication
• Timestamps: Enabled

---

Saved Blocks

Collection Slug: saved-blocks Description: Reusable block templates that can be imported into any page.

• Admin group: Content
• Access: Read open to all; create/update/delete requires authenticated non-viewer

---

Globals

Header

Global Slug: header Admin Group: Navigation

---

Footer

Global Slug: footer Admin Group: Navigation

Content tab: columns array (max 4) — each column title (text, req) + links array (label, url, newTab); description (textarea, top of footer).

Settings tab: showSocialLinks (checkbox, default true), showNewsletter (checkbox), newsletterHeading / newsletterDescription (text, conditional), bottomBar.copyrightOverride (text), bottomBar.bottomLinks array (label, url).

---

Site Settings

Global Slug: site-settings Admin Group: Site Configuration

General tab: siteTitle (text, req, default "Robin CMS"), siteDescription (textarea), logo, logoDark, favicon, ogImage (all upload → media).

SEO Defaults tab: defaultMeta.title (text), defaultMeta.description (textarea), defaultMeta.keywords (text).

Social Links tab: socialLinks array — platform (twitter/github/linkedin/instagram/youtube/facebook/tiktok/dribbble/behance/discord/mastodon/bluesky), url.

Analytics & Scripts tab: analytics.googleAnalyticsId, analytics.googleTagManagerId; customScripts.headScripts / bodyStartScripts / bodyEndScripts (code HTML injected into <head>, after <body>, before </body>).

Miscellaneous tab: copyrightText (default "© {year} Robin CMS…"), maintenanceMode (checkbox), robotsTxt (textarea).

Vote Popup tab: votePopup.enabled (checkbox), scrollPercentage (number 5–100, default 75), blockId (default site-popup-vote), heading, subheading, replyPrompt, thankYouMessage (text); colors accentColor (default #ff9529), backgroundColor, textColor, textSecondaryColor (ThemeColorPicker); borderRadius (global / 0 / 4 / 8 / 16 / 24 / 9999), shadow (none / small / medium / large, default large).

---

Theme

Global Slug: theme Admin Group: Site Configuration

Colors tab:

• Brand Colors: primary (#4e73ae), secondary (#4c9d8d), accent (#fe7a7a), highlight (#f4c371), dark (#743939)
• Surface Colors: background (#fefefe), surface (#f8f8f8), surfaceVariant (#f0f0f0), surfaceContainer (#eaeaea), surfaceContainerHigh (#e0e0e0)
• Text Colors: primary (#1a1a2e), secondary (#555770)

Typography tab:

• Fonts (FontSelectField): heading (Playfair Display), body (Inter), button (Inter), nav (inherit / body)
• Heading Overrides: h1–h6 per-heading font override (inherit)
• Typography Settings: headingWeight (700), bodyWeight (400), headingLetterSpacing, bodyLetterSpacing, headingTextTransform, headingLineHeight (1.2), bodyLineHeight (1.6), paragraphSpacing
• Font Scale: fontScale — compact / default / large / xl

Layout tab:

• containerMaxWidth (1200px) — 1000 / 1200 / 1400 / 1600
• sectionPadding — small / medium / large
• borderRadius — none / small / medium / large / xl / pill

Buttons tab:

• Button Style: filledBg, filledText, outlinedBorderWidth, fontWeight, textTransform
• Button Padding: paddingPreset, borderRadius (button-specific override)
• Button Hover: hoverEffect (lift / glow / darken / none), hoverScale, hoverShadow, transitionDuration

Animation tab:

• enableAnimations (true) — toggle all entrance animations
• animationIntensity — subtle / standard / expressive
• enableDarkMode (false) — enable dark mode support

---

Components

Vote Popup

File: src/components/VotePopup.tsx

A scroll-triggered feedback widget that collects star ratings and optional text feedback from visitors.

• Scroll trigger — appears once the user scrolls past scrollPercentage (default: 75%).
• Star rating — 5-star system with emoji feedback (😡 😕 😐 😊 🤩) and labels; clicking a star submits via POST /api/vote.
• Optional feedback — a reply form (first name + textarea) slides in; both fields optional. Empty submit shows the thank-you state without an API call; otherwise updates the vote record.
• Skip — bypass feedback straight to the thank-you state.
• localStorage persistence — votes and dismiss/minimize state persist so the popup won't re-appear.
• Average score — after submission, fetches and displays the average from /api/vote-results.
• Delete vote — a "Delete my vote" link removes the rating.

Props: all configured via Site Settings → Vote Popup (see that section for fields and defaults).

---

API Routes

POST /api/contact

Submit a contact form message. Body: { firstname, email, message, website, _t }

• website honeypot and _t timestamp (< 3s) both silently succeed (bot detected).
• Rate-limited to 5 submissions per IP per 10 min (429).
• Validates required fields with length limits; on success creates a contact-messages document.

POST /api/vote

Submit a star rating. Body: { blockId, rating, reply?, firstName?, page? }

• Validates blockId and rating (1–5); builds a fingerprint from IP + User-Agent + blockId to prevent duplicates.
• Existing vote + new reply → updates it; existing vote, no reply → 409 { alreadyVoted: true }; otherwise creates a vote and returns { success, id }.

DELETE /api/vote

Body: { voteId } (single) or { blockId } (all for that block). Returns { success, deleted }.

GET /api/vote-results

Groups all votes by blockId. Returns { totalVotes, blocks: [{ blockId, totalVotes, averageRating, distribution: { 1–5 }, replies: [...] }] }.

Auto-generated Payload APIs

• /api/[...slug] — REST API for all collections and globals
• /api/graphql — GraphQL endpoint
• /api/graphql-playground — GraphQL Playground (dev)

---

Note: This document reflects the current state of all modules. If new blocks are added or existing ones are modified, please update this overview accordingly.