Docs
News Highlight pattern
Let an editor flag one event or news entry to surface on the homepage.
Standard
- Set `highlightOnHome: true` on a single entry in the site's `EventsNewsEntry[]` data (event or news) to surface it on the homepage.
- Pass the site's full combined `entries` array directly to `NewsHighlightSection` — do not pre-filter at the call site; selection happens inside the component.
- If more than one entry is flagged at once, the component auto-resolves to the most recently dated one (never fails the build).
- If nothing is flagged, the component renders nothing — deliberately no fallback to "most recent entry" and no empty-state placeholder. An editor must explicitly flag an entry.
- Renders `imageSrc`/`imageAlt` only when present; never a broken-image placeholder for entries without one.
- Distinct from `HomeEventBanner` (dismissible, time-bound event announcements) and from a full `EventsNewsSection` listing (shows everything) — this is a single curated highlight.
- No dedicated site-specific wrapper file is required; a site's `Index.tsx` (or equivalent home page) imports `NewsHighlightSection` directly and passes its combined entries straight through.
Reference
- Live example: News Highlight example page
- Component: `template/src/components/patterns/NewsHighlightSection.tsx`
- Shared field: `highlightOnHome?: boolean` on `EventsNewsBaseEntry` in `EventsNewsSection.tsx`
- Governance contract: `internal-tools/4leggedit-websites/docs/governance/module-wiring-contracts.md`