Editorial article
Task#
Use this pattern for a durable blog post or TIL note: one canonical Markdown article, clear provenance, and quiet routes to the next useful page. It is not a documentation page, a reference index, or a collection listing.
Composition#
The article begins with Page header and its Metadata row. Blog posts and TIL notes receive Copy as Markdown automatically. An article with a real editorial sequence can add Collection navigation; an article with a small set of adjacent pages can declare Related posts. Both continuation mechanisms are optional and answer different questions.
Content and data#
Write the body in Markdown and keep its front matter factual: dates, description, tags, collection membership, and related: paths. Markdown remains the canonical representation exposed by the copy control; rendered HTML is a presentation of that source. Choose a collection only for durable membership and related: only for specific helpful continuations.
Responsive behaviour#
The article stays a single readable column. Header metadata wraps in source order, the copy control stays a compact button, and continuation lists retain their ordinary link rows. No article information is removed on small screens; dense metadata wraps rather than becoming an undiscoverable menu.
Implementation#
Blog and TIL single layouts render the article shell, entry-title-block.html, raw .Content, post-collection.html, and related-posts.html. The entry-title partial enables the copy control for normal blog and TIL pages; layouts/_default/single.markdown.md produces the canonical Markdown output. CSS supplies the type scale and layout, and JavaScript is limited to copying the Markdown when the reader asks.
Pattern manifest
- Kind
- Pattern
- Category
- Content
- Status
- Implemented
- Content and data
- Markdown source as the canonical article bodypage metadata for publication and update dates, tags, and optional collection membershipa short, intentional related-page set when continuation aids the reader
- Accessibility
- one page title and ordered metadata controls in the headersemantic article content in a readable measurenamed continuation landmarks only when related entries exist
- Implementation
- Partial:
layouts/partials/entry-title-block.htmllayouts/partials/page-header.htmllayouts/partials/copy-as-markdown.htmllayouts/partials/post-collection.htmllayouts/partials/related-posts.htmlLayout:layouts/blog/single.htmllayouts/til/single.htmlCSS:assets/css/site.cssJavaScript:assets/js/site.jsConfiguration:config/_default/hugo.yml - Related patterns
- Filterable collection
Accessibility#
- The article owns one
<h1>in its header; metadata links and controls follow a stable reading order. - The reading body retains semantic headings, links, lists, tables, and code rendered from Markdown rather than substituting generic presentation containers.
- Copy as Markdown is a native button with a polite status message. It does not alter the article content or move focus.
- Collection navigation and related posts are separate named asides and render only when they contain destinations. Do not use both to repeat the same links.
- Dates carry machine-readable
<time>values, while tags, collection links, and continuations remain ordinary keyboard-operable links.