EN

Section Component

Related Posts

A section that renders a curated list of items from any collection. It has two presentation modes: a compact text list (default) or a grid of cards (hasCard: true). Designed to sit at the end of a blog post, reference page, or any content item and point readers at a hand-picked set of further reading.

How It Works

The author lists the slugs of items to include in the selections array. The component iterates every registered collection (blog, sections, partials, etc.) and resolves each slug to the first matching item. Order is preserved as written — this is a curation component, not an automated "similar content" feed.

If a slug does not match any item, it is silently skipped. If none of the selections resolve, the component renders nothing at all.

Text List (Default)

The default presentation — a dense, minimal <ul> with title, description, and link. Best for end-of-article "further reading" lists where density matters more than visual weight.

Card Grid

Set hasCard: true to render the same selections as a grid of cards. Each card pulls its thumbnail, title, description, author, and date from the target item's card object. Best when the section stands on its own and benefits from visual anchoring — for example, a "You might also like" block on an index or landing page.

- sectionType: related-posts
  hasCard: true
  selections:
    - building-pages-with-components
    - section-anatomy
    - how-component-bundling-works

Mixed Collections

The component is not tied to any single collection. It resolves each slug against every registered collection, so an author can mix a blog post, a section reference, and a partial reference in one block without specifying which collection each slug belongs to. The first collection containing a match wins, so a slug is never rendered twice.

Below is a single related-posts section pulling two blog slugs and one section-reference slug.

Configuration

PropertyTypeRequiredDescription
sectionTypestringYesMust be related-posts
selectionsarrayYesSlugs (last permalink segment) of items to list, in display order
hasCardbooleanNoRender as cards instead of a text list. Defaults to false
textobjectNoOptional heading block — standard text partial props
isDisabledbooleanNoHide the section entirely
containerFieldsobjectNoStandard container configuration

Notes

  • Each entry in selections is the last segment of the target item's permalink. For a blog post at src/blog/section-anatomy.md, the slug is section-anatomy.
  • Items render in the order listed in selections, not in any collection's natural sort order.
  • Unmatched slugs are silently skipped; if none resolve, the section renders nothing.
  • In card mode, the thumbnail falls back from card.thumbnail (blog convention) to card.image (reference-page convention), so cards work uniformly across collections.
  • Text-list entries read post.card.title / post.card.description when present, falling back to top-level blogTitle (or title) and excerpt. The text list works on projects that don't use the card convention.
  • If hasCard: true is set but any resolved post is missing its card object, the section falls back to the text list rather than rendering partial cards.