TemplateStandards
Curated links pattern
Use CuratedLinksSection to point readers at other people's work — a short, credited list of cards that link straight out to the original, with nothing copied onto the site.
Example
Worth a read
Pieces from other people we follow, linked at the source.
Standard
- For content that is not the site's own: a short, credited index of links to the original, never a copy. The site takes no credit for the writing, and the reader goes to the author.
- Each card is one link (`target="_blank"`, `rel="noopener noreferrer"`) with a visible credit line (`sourceName`), an sr-only "opens in a new tab" note (`labels.opensInNewTab`).
- `summary` is one line written by the site, pointing at the original. Never paste or paraphrase at length from the source; do not quote beyond a short title.
- `href` goes through `safeContentUrl` and must be http(s). Anything else (`javascript:`, `mailto:`, a relative path) is dropped, and a section with no valid items renders nothing.
- Optional `topic` (one plain-text label per link) turns on filter pills above the grid, like the blog's category pills: an "All" pill plus one pill per distinct topic, sorted A to Z, clicking one narrows the cards while keeping the caller's order. The row only appears with two or more distinct topics (or `showFilters={false}` to suppress it); localize the first pill with `labels.allLabel`. The page is fully readable without JS since the unfiltered view is what is prerendered.
- No images and no badges: nothing from the original is hosted or cropped here. The cards use the same 1/2/3-column grid and card styling as the blog list (`columns` defaults to 3). Order is the caller's; the pattern never sorts.
- Keep the data in its own file (e.g. `src/data/curated-links.ts`), not in `blog-posts.ts`, whose slugs generate prerendered routes. Add an inline `// Source:` comment per entry.
- Component: `template/src/components/patterns/CuratedLinksSection.tsx`