CreatorWebsiteAvailable

Editorial publication website

A prerendered magazine site for an original fictional quarterly: front page with real editorial hierarchy, long-read article template with footnotes, figures and persisted reading controls, sections, topics with pagination, authors, search and an honest newsletter boundary.

Get Creator

Creator ($9 a month) includes up to 20 new premium families a billing month (5 in any 24 hours). Already a member? Open your library.

Version: 1.0.0
Platforms: Website
Framework: vite-react
Archive: 4.3 MB 162 files

Screens from the build

Editorial publication website: Article, 1600 px wide — Article, 1600 px wide

Editorial publication website: Author, 1600 px wide — Author, 1600 px wide

Editorial publication website: Home, 1600 px wide — Home, 1600 px wide

Editorial publication website: Search no results, 1600 px wide — Search no results, 1600 px wide

Editorial publication website: Tag archive, 1600 px wide — Tag archive, 1600 px wide

What it does

browse front page hierarchy (lead, secondary, briefs, collection, issue contents)
browse sections and topic archives with URL pagination
read a long-form article with contents rail, figures, pull quotes and footnotes
adjust reading controls (text size, line spacing, theme) persisted locally
follow bylines to author pages and related stories
search the archive
newsletter sign-up with validation and an honest not-connected state

Routes and screens

homeFront page: nameplate, lead story, briefs rail, secondary stories, thematic collection, issue contents band, latest list, newsletter
articleLong-read template: kicker, headline, dek, byline, lead figure, body with figures/pull quotes/footnotes, contents rail, reading progress and settings, correction, author card, related
sectionSection front: lead plus paginated chronological rows
tagTopic archive with URL pagination, out-of-range and empty states
tagsTopic index with counts
authorAuthor profile and their stories
contributorsMasthead of contributors
searchClient-side search with empty-query, too-short and no-results states
newsletterNewsletter page with honest provider boundary
aboutAbout, standards, corrections policy, masthead
not-found404 page served with a real 404 status by the preview server

States covered

Loading
Error
Empty
No results
Validation
Out of range page
Not found
Not connected integration
Night theme
Reduced motion

Stack and versions

vite	`8.3.1`
react	`19.3.0`
react-dom	`19.3.0`
react-router	`8.4.0`
typescript	`7.0.2`
vitest	`5.0.2`
@playwright/test	`1.56.1`
@axe-core/playwright	`4.13.0`
node	`22.22.2 (tested); >=20.19 required`

Commands:

install	`npm ci`
dev	`npm run dev`
build	`npm run build`
preview	`npm run preview`
test	`npm test`
typecheck	`npm run typecheck`
e2e	`npx playwright install chromium && npm run build && npm run e2e`
perf	`npm run build && npm run preview & npm run perf`

Tested

Check	Platform	Tool	Result	Date
unit and component tests (36)	Node	vitest 5.0.2 + Testing Library (jsdom)	Pass	2026-09-26
e2e: every route, keyboard paths, prerender without JS, 404 status, screenshots (67 tests)	Website	Playwright 1.56.1, Chromium 141	Pass	2026-09-26
axe WCAG 2.2 AA: 15 routes at 360 and 1280 px plus night theme with reading panel open, zero violations	Website	@axe-core/playwright 4.13.0	Pass	2026-09-26
lab LCP/CLS, throttled mobile profile, median of 3 (home and article)	Website	Playwright Chromium + CDP throttling (scripts/perf.mjs)	Pass	2026-09-26
fresh-copy reproduction from packaged zip in an empty temp dir (npm ci, npm run build, npm test)	Node	npm 10.9.7 / node 22.22.2	Pass	2026-09-26
Safari/WebKit and Firefox rendering	Website	not run	PendingNot run yet	—

1 check still pending. Pending means it hasn't been run yet, not that it passed.

Not included

No email provider: the newsletter form validates and then states 'Not sent'; implement NewsletterAdapter (src/lib/newsletter.ts) against your provider
No CMS: content is typed TypeScript in src/content; bodies use a small safe markup parsed without innerHTML
No accounts, paywall, comments or analytics; nothing is tracked
Reading preferences live only in this browser's localStorage
Search is client-side over metadata (titles, deks, sections, topics, authors), not full text
Prerendered HTML is generated at build time; hosts must serve dist/<path>/index.html and dist/404.html (rules in docs/INTEGRATION-BOUNDARIES.md)
No RSS/sitemap generation yet (documented how to add)

Each boundary comes with instructions for adding it in docs/INTEGRATION-BOUNDARIES.md.

Known limitations

Sample publication, people, quotations and data are fictional; replace before launch
Paginated URLs beyond page 1 (?page=2) are rendered client-side after the page-1 HTML loads
Tested in Chromium only; WebKit/Firefox not yet verified
Lead photographs from CC0 sources top out at 960–1440 px wide
Canonical/OG origin is https://understory.example until you change SITE.origin

Licence

Use in unlimited end products incl. client/commercial; no resale/redistribution as a template, kit or dataset; no ML training. Survives cancellation for delivered versions.

Full terms: Motif template licence. Open-source parts keep their own licences (licenses.json, id lic-premium-publication-1-0-0).

Ask your agent

Use Motif to activate the premium-publication template and download it. Then adapt it for a neighbourhood bakery: replace the content and imagery, keep the design tokens and every state in docs/STATE-MATRIX.md, and run check_design_contract before you finish.

Motif guides applied

web-archetype-media-and-publication-sites · web-editorial-front-page-for-publications · web-editorial-magazine-visual-direction · web-blog-index-and-article-template · web-long-document-page-layout · web-type-scale-and-measure · web-fluid-type-clamp · web-display-pull-quote-typography · web-newsletter-signup · web-font-loading-without-shift · web-focus-indicators-and-keyboard · web-seo-semantic-structure-and-metadata · web-dark-mode-implementation · web-mobile-navigation · web-footer-oversized-wordmark · web-semantic-color-tokens · web-contrast-wcag-and-apca · web-responsive-images-and-formats · web-core-web-vitals-targets · web-form-labels-and-layout · web-inline-validation-and-error-recovery · web-archive-browsing-modes-and-filters · sys-accessible-chart-text-alternative-and-data-table · motion-reduced-motion-strategy · motion-loading-skeleton-states