Page Builder
At a glance
A drag-and-drop page builder lets editors compose CmsPages from typed content blocks — text, gallery, calendar, news, contact form, dynamic widgets — with reusable templates, a draft/review/publish workflow, future-date scheduling and SEO-friendly URLs, all rendered server-side by Next.js with ISR for sub-minute publish-to-visible latency. Reusable block components let federations propagate footer or call-to-action edits across dozens of pages with one save.
How it works
Every page in the CMS is a CmsPage document containing an ordered array of typed blocks. Each block has a discriminated type (`hero`, `text`, `image`, `gallery`, `video`, `map`, `embed`, `form`, `columns`, plus the dynamic data blocks from F18.11) and a JSON config that the renderer maps to a React component. The admin page builder presents these as draggable cards in a left-rail palette; editors drop them onto a stacked canvas, reorder by drag, and edit inline.
Page templates jump-start common layouts — homepage, about, contact page, competition landing, news listing — by hydrating a fresh CmsPage with a curated block sequence that the editor can then mutate. URLs are derived from a slug field (validated for SEO friendliness — lowercase, hyphenated, no stop-words enforced) and combined with the page's parent path to form `/<parent>/<slug>`. The publish workflow uses a state machine: draft → review → published, with optional schedule_at timestamps that the publisher job picks up every minute and flips to published when due.
Versioning snapshots the entire block array on every publish, so editors can diff or roll back. Reusable block components — typically headers, footers, sponsor strips and call-to-action banners — are stored as standalone CmsBlock documents and referenced by id from any page; editing the source block updates every page that includes it. The Next.js renderer revalidates each page on a 60-second ISR window, so a publish is visible within a minute without a full rebuild.
Key capabilities
- Drag-and-drop block-based composition
- Static blocks (text, image, gallery, video, map, embed, form, columns) and dynamic data blocks
- Page template library for common archetypes (homepage, about, contact, competition, news)
- SEO-friendly URL slugs with parent-path inheritance
- Draft/review/publish state machine with versioned snapshots
- Future-date scheduling with per-minute publisher job
- Reusable block components shared across pages
In practice
Marc, the federation's communication officer, opens the CMS to publish a tournament recap. He clicks 'New page', picks the news-article template, and the canvas loads with hero, lede paragraph, gallery and related-events blocks pre-arranged. He drags the gallery up under the hero, drops in twelve photos from the media library, and the auto-WebP variants generate in the background.
He picks the reusable 'Federation footer' block — already used on 40 pages — so any future change propagates everywhere. He saves as draft, sends to his colleague for review, then schedules publish for Sunday 18:00 when the awards ceremony ends. Sunday evening the publisher job flips the state, ISR revalidates, and the page goes live exactly on time.
Features in this subsystem
8| ID | Status | Features |
|---|---|---|
| F18.02.01 | Shipped | Drag-and-drop page builder with content blocks ✅ 449770bd.m-2 — block som RESURSER med servergenererat block_id (add/replace/delete/:reorder, If-Match-låsta mot sidans version); drag-and-drop-YTAN i admin är t-2 |
| F18.02.02 | Shipped | Block types: text, image, gallery, video, map, embed, form, columns ✅ 449770bd.m-2 delvis: de TIO redaktionella typerna (text, image, gallery, hero, accordion, contact_info, video, map, embed, columns) + reusable_block_ref, typad validering med fältpekare och allowlist-sanerad embed · ⊘ form är m-9 (formulärmodellen) |
| F18.02.03 | Planned | Dynamic data blocks: ranking table, results, calendar, club directory, venue map ⊘ m-6 — typerna avvisas i m-2 med 422 block_type_not_available och ägarmilstolpen i klartext, aldrig en tyst accept |
| F18.02.04 | Shipped | Page templates library (homepage, about, contact, competition, news) ✅ 449770bd.m-2 — de NIO sidmallarna på sin EGEN väg (GET /v1/cms/page-templates) + :apply-template (replace/merge) med ärligt skipped_blocks för obyggda typer |
| F18.02.05 | Shipped | Custom page creation with SEO-friendly URLs ✅ 449770bd.m-2 — POST /v1/cms/sites/{id}/pages med Slugify (å→a/ö→o) + dedup · ⊘ canonical/meta/no_index är m-11 (SEO) |
| F18.02.06 | Shipped | Page versioning and draft/publish workflow ✅ 449770bd.m-2 — statusmaskinen med kantgatade mandat (cms:approve/cms:publish:immediate), versioner med monotont version_no, tak 50, auto-snapshot vid publicering och före revert (revert ⇒ utkast) |
| F18.02.07 | Shipped | Page scheduling (publish at future date) ✅ 449770bd.m-2 — :schedule/:unschedule + F1-7-jobbet cms_page_schedule_tick (enda vägen scheduled → published; förfallen unpublish_at ⇒ arkiverad) |
| F18.02.08 | Shipped | Reusable block components (header, footer, sidebar) ✅ 449770bd.m-2 — en rad per sajt, refererad via reusable_block_ref och löst vid LÄSNING (aldrig kopierad), MÄTT used_on_pages, mjuk radering som vägrar med 409 reusable_block_in_use |
Stakeholders who need this subsystem
Surfaces in 1 stakeholder analyses