All posts

ResearchReviewsNotes4 min read

A post that has everything

A sample page. Text, lists, a quote, a table, code, images, a carousel, video, and footnotes.

Editors

Colored sheets on a warm background. Coral, violet, and a white card with lines.

This page is here so you can see a post in full: the cover, the text column, and everything that can appear in it. It has a link, bold, italic, strikethrough, and inline code.

Astro prepares local images at build time. Video lives separately and is inserted with its own tag.1

Lists

  • A bulleted item.
  • An item with nesting:
    • a nested item;
    • and another one.
  1. The first step.
  2. The second step.
    1. A nested number.
    2. The next number.
  3. The third step.
  • The cover, title, and date are in place.
  • The table and code block are further down the page.
  • A draft with draft: true does not enter the feed.

Subheading

A paragraph after a third-level heading. The outbound link goes to the Astro documentation.

Quote

The text column is narrow on purpose. A long line of code and a wide table scroll inside themselves instead of pushing the page wider.

A nested quote with the same left edge.

A quote can contain a list:

  • an image at the full width of the column;
  • video with the same rounding as the image.

Table

Field Purpose Example Always
title Page and card title A post that has everything yes
description Subtitle and search description One or two sentences yes
pubDate Date in the metadata 2026-10-07 yes
category Section and feed filter research yes
tags Tags from the shared list reviews no
cover Card and page cover ../everything/cover.png no
author Line under the description Editors no
updatedDate “Updated” line at the end 2026-10-07 no

Code

export function readingMinutes(words: number): number {
	return Math.max(1, Math.round(words / 180));
}
npm run dev -- --background

A line longer than the column scrolls inside the block:

const path = '/en-US/posts/everything/'; // this line is deliberately longer than the article column, to check horizontal scrolling inside the dark block

Images

An ordinary Markdown image. The file sits next to the shared media for this post.

Page mockup: a white sheet, a violet block where the image goes, and three colored rectangles below.

An image with a caption:

The same sheets, larger: a coral background, a violet sheet, and a white card with lines.
The caption sits under the image and is set smaller than the body text.

Several photos in one slider. The next frame stays visible at the edge. They move by swipe and arrows, and open large on click.

Video

A silent clip, about five seconds. The captions are in Russian.

A few smaller things

Keys in the text look like this: ⌘ K.

Expandable block

The same set as in the article: a paragraph, emphasis, and a link to the home page.


A horizontal rule separates the tail. The footnote from the top of the page sits below the line.

Notes

  1. An image is a path from the post file. Video goes in public/media/ and is referenced as /media/.... ↩

Updated

Keep reading