Related posts

Related posts are an end-of-page list of closely related pages, driven by the related: front matter key. The list appears at the end of a blog post, a TIL note, or a documentation page when the reader may reasonably continue after finishing the current one.

This page declares related: in its own front matter, so the component renders live at the bottom of this page, under the “Related components” heading the docs layout passes in.

When to use#

• Several pages form a cluster, sequence, or supporting set, and the reader may reasonably continue after finishing the current page
• The relationship does not need an explanatory sentence in the introduction. The list stands on its own at the end.
• Keep the list short and intentional: a related page should add context, continue a series, or cover an adjacent decision
• Not a generic tag cloud, an archive list, or a substitute for inline links
• If there is one page the reader should know about before reading the current page, use the companion link component instead

Implementation#

related:
  - /docs/site-implementation/components/companion-link/
  - /docs/site-governance/content/cross-references/

{{ partial "related-posts.html" . }}

{{/* Heading override: the docs layout uses this form */}}
{{ partial "related-posts.html" (dict "Page" . "heading" "Related components") }}

<aside class="flow-section not-prose border-t border-line pt-[var(--space-s-m)]" aria-labelledby="related-posts-heading">
  <h2 id="related-posts-heading" class="meta m-0">Related components</h2>
  <div class="mt-[var(--space-xs)] grid gap-0 border-t border-line">
    <a class="index-row sm:grid-cols-[minmax(0,1fr)_7rem]" href="/en/docs/site-implementation/components/companion-link/">
      <span class="collection-row-title min-w-0">Companion link</span>
      <time class="meta sm:text-right" datetime="2026-08-11">2026.08.11</time>
    </a>
  </div>
</aside>

The rendering partial is layouts/partials/related-posts.html. Blog and TIL single-page layouts call it with the page and get the localized “Related posts” heading; the docs layout calls it with the dict form to show “Related components” on component pages and “Related pages” elsewhere. Paths are language-agnostic: each language site resolves them against its own pages, so the same list can be copied into the .en.md and .fr.md front matter. A path that matches no page logs a build warning and is dropped from the list instead of shipping a dead link.

Options#

Accessibility#

• The list renders as an <aside> with aria-labelledby="related-posts-heading" pointing at its own <h2>, so the landmark is announced under whichever heading the caller passed in
• Each entry is a plain link.
  • Tab moves through the entries and Enter follows one.
  • There is no JavaScript.
• Dates render as <time> elements with a machine-readable ISO datetime attribute (YYYY-MM-DD) beside the displayed YYYY.MM.DD form
• A path that resolves to no page is dropped with a build warning, as described under Implementation, so the rendered list never carries a dead entry
• Avoid rendering the partial twice on one page: the heading id related-posts-heading is fixed, and a duplicate id breaks the aria-labelledby association