Components
Story reading surface
Present a complete editorial story with origin, reading hierarchy and accurate supporting media.
On this page
Purpose and placement
Present a complete editorial story with origin, reading hierarchy and accurate supporting media.
Anatomy
| Part | Behavior |
|---|---|
| Header | Story title, topic, author/date and editorial context. |
| Hero | Source image with alt and credit where applicable. |
| Body | Structured HTML paragraphs, headings, links and rich content. |
| Utilities | Sharing and reading progress use separate source components. |
Configuration and contract
| Input or decision | Implementation |
|---|---|
| Route | /stories/[slug] loads a published story by slug. |
| Editorial fields | Disclosure, correction, source and syndication context must remain distinct. |
| Body rendering | HTML from the editorial pipeline requires trusted validation and sanitization at the content boundary. |
States and feedback
- Published story route with synthetic content.
- Draft preview context belongs to ContentPreviewBanner, not a fake public Published badge.
- Article full-page and viewport captures preserve native proportions.
Usage rules
- Do not omit attribution to make a capture cleaner.
- Use subheadings to express article structure rather than manually enlarging paragraphs.
Accessibility and verification
Verify reading order, link purpose, image alternatives and meaningful progress feedback. Screenshots do not establish the security of the HTML content pipeline.
Source references
| File | Responsibility |
|---|---|
| app/(public)/stories/[slug]/page.tsx | Audited Townwell implementation; use this file when extending this interface. |
| components/content-preview-banner.tsx | Audited Townwell implementation; use this file when extending this interface. |
| lib/story-editorial.ts | Audited Townwell implementation; use this file when extending this interface. |
Examples from the app
Actual Boise Today and Townwell UI with synthetic editorial, business, review, media metadata and analytics. Existing Boise imagery; no live data changes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-07 · Revision ce8bc72b96da · Documentation v0.1