Page Meta

Every MDX page can declare YAML frontmatter that drives a compact meta bar: reading time, status, and difficulty level. The bar renders directly under the page title, to the left of the Copy page control. What follows covers the fields, the reading-time estimate behind them, and how to hide the row.

Quick Start

Declare a status and level in frontmatter. The estimator derives reading time from the word count, so the bar at the top of this page appears without any extra field.

---
status: stable
level: beginner
---

The parser matches values case-insensitively and drops anything outside the accepted set, so Status: Stable works and status: shipped renders no badge at all.

Adding Options

The estimator strips fenced code blocks, HTML and JSX tags, Markdown punctuation, and link targets before counting, then divides by 200 words per minute and rounds up, with a one-minute floor. A code-heavy page takes longer to read than that count suggests, so set readingTime to replace the estimate with a hand-picked number.

---
status: beta
level: intermediate
readingTime: 4
---

readingTime has to be a finite number. The parser ignores a string like "4 min", and the page falls back to the estimate.

Each of the three badges carries its own palette and an aria-label, so meaning never rides on color alone:

• draft gray, beta sky, stable teal, deprecated amber, archived red.
• beginner emerald, intermediate blue, advanced purple.
• Reading time renders in the neutral surface color behind a clock icon marked aria-hidden, announced to screen readers as "4 min read".

The status badge announces as "Page status: Beta" and the level badge as "Difficulty: Intermediate". One surprise in the shipped theme: intermediate uses Tailwind's blue-* utilities, and app/globals.css redefines the whole blue scale to green values, so the badge looks green until that palette changes.

Advanced

Set hideMeta: true to drop the bar entirely, even when status and level are declared. Only the bar goes away; the frontmatter still parses, readingTime still resolves, and related still renders its card grid.

---
status: deprecated
level: advanced
readingTime: 12
hideMeta: true
---

The bar also renders nothing on its own when a page declares no status, no level, and has no body text left once the estimator strips code and markup. Each field is independent: a page with only level shows one badge, and a prose page with no frontmatter at all still shows its reading time.

---
level: advanced
---

Options