Guide: every block available for your articles

An article on this blog is a plain Markdown file: src/content/blog/en/my-slug.md for English, src/content/blog/fr/my-slug.md for French — same file name, same article. This reference post shows how every available block renders.

Section headings

A level-2 heading (##) structures the article, exactly like the one right above. It is the only heading level used inside an article body.

Paragraphs

A paragraph is a simple block of text. It can contain bold, italic and inline code to quote a file name or a command.

Lists

Bullet lists get the brand’s “yellow diamond” style:

• First point, short and concrete.
• Second point, with inline code when needed.
• Third point, because two is not enough.

Quotes

A quote is highlighted in a dark block with the big yellow quotation mark:

A good learning tool is the one you forget about — it must never stand between the learner and the knowledge.

Code blocks

A code block sits between triple backticks, with an optional language:

const posts = await getCollection('blog');
const english = posts.filter((p) => p.id.startsWith('en/'));
console.log(`${english.length} articles in English`);

Images

An image lives in src/assets/blog/ (shared between both languages) and is referenced with a relative path. At build time sharp converts it to WebP and bakes several widths (srcset) — the browser downloads the size that fits:

The frontmatter

Every file starts with a YAML header: title, excerpt, date, author, category, tags, readTime, illu, accent, plus the featured flag for the hero. The category and illustration are picked from the studio’s fixed sets — the build fails on an unknown value, so there is no way to get it silently wrong.