Hello World

This post is intentionally content-heavy. It is used to validate:

Typography and spacing (prose)
Heading hierarchy (H2/H3/H4)
Inline code and fenced code blocks (multiple languages)
Tables and lists
Images and captions
Long lines and horizontal overflow behavior

Overview banner

Why this exists

If a blog template looks good for this post, it will look good for almost anything.

A good test post should be slightly annoying: lots of edges, lots of formats, and enough length to expose layout bugs.

Quick checklist

Does code wrap or scroll correctly?
Do images stay inside the content width?
Are headings readable on mobile?
Are links and lists styled consistently?

Inline formatting

Inline code: formatUtcDate("2026-05-06T13:45:10Z") should render as May 6, 2026 (UTC).

Links:

External: https://observaite.com
Internal: /blog

Code blocks

TypeScript

type Post = {
  title: string;
  created_at: string;
  category?: string;
  author?: string;
};
 
export function metaLine(post: Post) {
  const parts = [
    post.created_at,
    post.category?.trim() || null,
    post.author?.trim() || null
  ].filter((v): v is string => typeof v === "string" && v.length > 0);
 
  return parts.join(" • ");
}

JavaScript

const input = "2026-05-06T13:45:10Z";
const dt = new Date(input);
const formatted = new Intl.DateTimeFormat("en-US", {
  timeZone: "UTC",
  month: "short",
  day: "numeric",
  year: "numeric"
}).format(dt);
formatted;

Bash

node -p 'new Intl.DateTimeFormat("en-US",{timeZone:"UTC",month:"short",day:"numeric",year:"numeric"}).format(new Date("2026-05-06T13:45:10Z"))'

JSON

&#123;
  "title": "Hello World",
  "created_at": "2026-05-06T13:45:10Z",
  "category": "Engineering",
  "author": "Observaite Team",
  "tags": ["sveltekit", "mdsvex", "seo"]
&#125;

YAML

title: Hello World
created_at: 2026-05-06T13:45:10Z
category: Engineering
author: Observaite Team
tags:
  - sveltekit
  - mdsvex
  - seo

Diff

- 2026-05-06 00:00:00
+ May 6, 2026

SQL

select
  slug,
  created_at,
  category,
  author
from blog_posts
order by created_at desc
limit 10;

C++ (operator `<<` stress test)

#include <iostream>
#include <vector>
using namespace std;
 
int main() {
  vector<int> xs = {1, 2, 3};
  cout << "Hello" << " " << "World" << endl;
  for (auto x : xs) cout << x << " ";
  cout << endl;
  return 0;
}

Long line overflow

https://example.com/some/really/really/really/really/really/really/really/really/really/really/long/path?with=query&and=even_more_query_params=so_it_keeps_going

Images and captions

Markdown image (no caption):

Diagram

Captioned figure:

Headings stress test

H3 heading

Some paragraph text to verify spacing.

H4 heading

Bullet A
Bullet B
Bullet C

Table

Element	Purpose	Notes
H1/H2/H3/H4	Hierarchy	Should have consistent spacing
Code blocks	Technical content	Should scroll on small screens
Images	Visual support	Should not overflow the container

Details (HTML)

Click to expand

This block is useful to test HTML passthrough in mdsvex content.

export const hello = 'world';

#include <iostream>
using namespace std;
int main(int argc, char* argv[]){
  cout << "Hello" << endl;
  return 0;
}