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.

Quick Start

Declare a status and level in frontmatter. Reading time is estimated from the word count, so the bar at the top of this page appears without any extra field.

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

Values are matched case-insensitively and anything outside the accepted set is dropped, 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 your own number.

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

readingTime has to be a finite number. A string like "4 min" is ignored 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 you change that palette.

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 after code and markup are stripped. 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