Components
Reading and sharing utilities
Support reading orientation and sharing without competing with the article itself.
On this page
Purpose and placement
Support reading orientation and sharing without competing with the article itself.
Anatomy
| Part | Behavior |
|---|---|
| Progress | Reading position indicator. |
| Share | Native sharing with appropriate fallback behavior. |
| Preview context | A clear banner when content is not the normal public published version. |
Configuration and contract
| Input or decision | Implementation |
|---|---|
| NativeShareButton | Share data must use the canonical article destination. |
| StoryReadingProgress | Derives progress from the actual reading surface. |
| ContentPreviewBanner | contentType and status describe preview state. |
States and feedback
- Normal reading, long article and preview.
- Native share availability varies across devices; no external share is performed in captures.
Usage rules
- Keep sharing optional and separate from saving.
- Never make a draft preview look like a published news story.
Accessibility and verification
Check accessible action names and usable fallbacks. Progress should not become a noisy continuous live announcement.
Source references
| File | Responsibility |
|---|---|
| components/native-share-button.tsx | Audited Townwell implementation; use this file when extending this interface. |
| components/story-reading-progress.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. |
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