Hello World

This is the blog’s visual test page. It uses the same layout, typography, and components as every other article, so design changes are visible here too.

Try both languages, light and dark themes, a narrow window, and Print / Save as PDF. Use a slow connection to inspect image placeholders and lazy loading. The language links above, code-copy buttons, gallery, and subscription form below are real controls. The subscription form sends a real request; do not submit it just to test its appearance.

For colors, spacing tokens, and isolated UI states, see the design playground.

Heading hierarchy

The page title above is H1. Article content uses H2–H4; deeper headings are not part of the blog’s supported hierarchy.

H3: A subsection with enough words to test wrapping on a small screen

A paragraph after H3 checks the distance between a heading and its content.

H4: A smaller heading

This paragraph should still look like body text, not a caption.

Consecutive headings

No paragraph between these two headings

Check that neighboring headings stay grouped without a large empty gap.

Text

A normal paragraph can include bold text, italic text, inline code, and a regular link. It can also include removed text when the Markdown parser enables GitHub-flavored strikethrough. Text should wrap cleanly, keep a readable line length, and not depend on Tailwind prose defaults.

A blockquote should feel quieter than the main text, but still belong to the same typography system.

Here is a footnote reference.¹

Inline typography and punctuation

Strong, emphasis, strong emphasis, deleted text, and an emphasized link should retain distinct appearances.

Highlighted text and small print expose native inline styles. An API abbreviation has an expansion. Water is H ₂O; an exponent is x². Press ⌘ + C; terminal output looks like Build complete.

“Curly quotes”, ‘single quotes’, apostrophes in don’t, an en dash 2015–2026, an em dash — and an ellipsis… Numbers: 0123456789, 1,234.56, 50%, €99, $42.

English: The quick brown fox jumps over the lazy dog.
Русский: Съешь ещё этих мягких французских булок, да выпей чаю.
Mixed: API-запрос, macOS, PostgreSQL, Сергей / Sergei, café, naïve, →, ±, ×, ✓.

A hard line break ends this line.
This line belongs to the same paragraph.

This is a new paragraph. Compare its spacing with the hard break above.

Long inline content

A long identifier should wrap without widening the page: distributed_systems_configuration_with_a_deliberately_long_identifier_for_mobile_layout_checks.

A long visible URL should also wrap: https://example.com/documentation/distributed-systems/configuration/networking-and-service-discovery?language=en&mode=reference

A second note checks multiple references.² The first note can be referenced again.¹

---

The paragraph after this divider checks section spacing.

GitHub Markdown

GitHub-flavored Markdown adds a few everyday conveniences. Bare links should become anchors without extra syntax:

https://grishy.dev

hello@example.com

Task lists should keep checkbox alignment stable:

• Published fixture lives in posts
• Old draft fixture pages are gone
• Future components can be added here

Expandable note

This checks the common GitHub pattern for hiding extra details without introducing a custom component.

Lists

• Unordered item
• Another unordered item with code
• Nested content:
  • Child item
  • Another child item

1. Ordered item
2. Another ordered item
3. Final ordered item

Table

Surface	What it checks	Status
Text	Paragraph rhythm	Stable
Code	Highlighting and copy UI	Stable
Images	Asset pipeline and captions	Stable

Alignment	Inline content	Long content
Left	code and bold	A longer sentence that should wrap inside a cell.
Center	link	The table should stay readable on narrow screens.
Right	old text and current text	This row checks GFM table parsing.

Expanded by default

A paragraph followed by a short list should retain its normal spacing:

• First item with emphasis.
• Second item with a link.

Nested Stress Test

A quote can contain a list:

• Item inside a quote
• Item with inline code

code inside a quote

1. A list item with multiple paragraphs.

   This is the second paragraph in the same item. It should align with the text, not with the list marker.

   1. A nested ordered item.
   2. Another nested item with code.
      • A mixed third-level bullet.

2. The next top-level item.

A paragraph in an outer quote.

A nested quote with strong text and a link.

Back to the outer quote.

Code

type Locale = "en" | "ru";

function postPath(locale: Locale, slug: string) {
  return `/${locale}/posts/${slug}/`;
}

console.log(postPath("en", "hello-world"));

- duplicate draft fixtures
+ one published fixture

Plain text and horizontal overflow

Plain text without a language label.
English and Русский in the same code block.

curl --request GET 'https://example.com/api/projects?include=owner,contributors,deployments,configuration,observability&sort=updated_at&direction=descending'

The long command should scroll inside its code block, not widen the page. Copy it to check that the complete line is preserved.

Math

Inline math should render like this: $E = mc^2$.

Display math should keep its own rhythm:

$$\int_0^1 x^2 dx = \frac{1}{3}$$

Callouts

Markdown image

This image uses regular Markdown syntax, without a figure caption.

Figure

The next figure has no caption and a different aspect ratio.

Gallery

A single-image gallery exercises the lightbox without previous/next navigation.

Video

Video embed fixture

Footnotes

1. This checks footnote rendering and spacing. ↩ ↩²

2. A longer footnote with emphasis, code, and a link. ↩