2.5 KiB
MODIFIED Requirements
Requirement: Standard card information architecture
All content cards rendered by the site MUST use a standardized layout so cards across different surfaces look consistent.
The standard card layout MUST be:
- featured image displayed prominently at the top (when available)
- title
- summary/excerpt text, trimmed to a fixed maximum length
- footer row showing:
- publish date on the left
- views when available (if omitted, the footer MUST still render cleanly)
- the content source label (e.g.,
youtube,podcast,blog)
If a field is not available (for example, views for some sources), the card MUST still render cleanly with that field omitted.
For content cards with source youtube or podcast, the card MUST render as a clickable element that opens a media modal dialog instead of navigating to an external URL. The card MUST NOT render as an outbound <a> link for these sources.
For content cards with other sources (e.g., blog, instagram), the card MUST continue to render as a navigational link (the existing behavior).
The card element for modal-trigger cards MUST carry the content item's data (id, source, url, title, summary, publishedAt, thumbnailUrl, views) as data-* attributes so the modal script can access them.
Scenario: Card renders with all fields
- WHEN a content item has an image, title, summary, publish date, views, and source
- THEN the card renders those fields in the standard card layout order
Scenario: Card renders without views
- WHEN a content item has no views data
- THEN the card renders the footer bar with date + source and omits views without breaking the layout
Scenario: Card renders without featured image
- WHEN a content item has no featured image
- THEN the card renders a placeholder media area and still renders the remaining fields
Scenario: YouTube video card opens modal
- WHEN a user clicks a content card with source
youtube - THEN a media modal dialog opens with the video's embedded player and metadata instead of navigating to YouTube
Scenario: Podcast card opens modal
- WHEN a user clicks a content card with source
podcast - THEN a media modal dialog opens with the episode's embedded player (or metadata link) instead of navigating to the podcast platform
Scenario: Blog card still navigates
- WHEN a user clicks a content card with source
blog - THEN the card navigates to the blog post as an internal link (existing behavior, unaffected)