[Frontend] Puck block editor integration for group profile pages

Integrate @measured/puck (MIT, self-hosted, no licensing cost) as the page composition engine for group profile custom pages.

Install: npm install @measured/puck

Two modes of use:

  1. Editor (admin only, desktop only) — full Puck drag-and-drop UI embedded within /en/business/manage/profile and /en/chapter/manage/profile. Opened via "Edit page" button per custom nav page. Saves JSON to GroupPage.puckPageData[pageKey] via PATCH /api/groups/[id]/page.
  2. 2. Renderer (public, server-side) — @measured/puck/rsc renders stored Puck JSON as static React on the public profile page. No Puck JS shipped to visitors.

Block library — define in src/lib/puck/config.ts, scoped to BikerBase design system (Ruby primary hsl(0 69% 36%), Inter font, Tailwind tokens). Initial blocks:

  • Hero — headline, subheadline, background image, CTA button
  • - Features — icon + title + body, up to 6 items, 2-3 column grid
  • - Two-column — left/right text + image
  • - CTA — headline, body, button
  • - Testimonials — quote, author, star rating, up to 4 items
  • - Gallery — image grid, up to 12 images
  • - Text — rich text block (plate editor embedded)

Tier gating:

  • Basic tier (groupPageBuilder quota = false): template pre-loaded, Puck editor locked — only content-editable text fields shown, no block reordering or adding
  • - Premium tier (groupPageBuilder quota = true): full Puck drag-and-drop unlocked
  • - Gate checked via existing permission quota system, not hardcoded

Please authenticate to join the conversation.

Upvoters
Status

Planned

Board
💡

Feature Request

Date

About 1 month ago

Author

Linear

Subscribe to post

Get notified by email when there are changes.