Timeline

Render time-ordered events as a vertical timeline — event cards alternating left and right of a central axis. Use for project history, personal milestones, product roadmaps, historical recaps, resume work sections.

When to use

✅ Project / product history — key milestones from kickoff to today
✅ Roadmap — finished + planned version nodes
✅ Personal milestones — resume, autobiography, learning journey in some domain
✅ Historical event recap — a chain of events under one theme
✅ Meeting / event agenda — time blocks from 9am to 6pm
❌ Live data / continuous streams — use a chart, not a timeline
❌ Peer items without time order — use Layout or Stepper

Basic syntax

```timeline
:::event date=2026-01-01 title="Project kickoff"
v0.0 spec drafted; plain-text fallback principle established.
:::

:::event date=2026-03-15 title="v0.6 released"
Added SVG scenes — declarative animation.
:::

:::event date=2026-05-14 title="Brand locked"
Brand name set: **Rho**. Domain rho.md acquired.
:::
```

Renders: a central vertical axis; event cards alternate left/right along the axis; each event header has date + title; body is below.

All options

Block-level: ```timeline

No required options. Optional:

order=asc / order=desc — sort direction (default: document order)

Event-level: `:::event`

Option	Type	Default	Purpose
`date`	string	(required)	Time label. Any string — `2026-01-01` / `Q1 2026` / `early March` / `09:00` all work. Rho doesn't parse the date; it shows it as-is
`title`	string	(required)	Title, displayed prominently. Keep short (< 25 chars)
`accent`	enum	`blue`	Accent color for this event (same 6-color palette)

Both date and title are strings. Quote values containing spaces: title="v0.6 released".

Examples

Example 1: project milestones

```timeline
:::event date=2026-01-01 title="Project kickoff" accent=gray
v0.0 spec drafted.
:::

:::event date=2026-02-10 title="v0.3 released" accent=blue
12 base capabilities ready (callout / layout / tabs / stepper / ...).
:::

:::event date=2026-04-22 title="v0.5 released" accent=blue
Added timer-driven animation.
:::

:::event date=2026-05-08 title="v0.6 released" accent=green
Added SVG declarative scenes. 15 capabilities complete.
:::

:::event date=2026-05-14 title="Brand locked → Rho" accent=purple
Brand set to **Rho** (ρ); rho.md domain acquired.
:::
```

Renders: 5 events in chronological order. Accent colors encode version significance: gray (kickoff) / blue (regular release) / green (major release) / purple (special event).

Example 2: personal resume work section

```timeline
:::event date="2020-2022" title="Company A — Backend Engineer"
- Led payment system v2 refactor
- Team grew from 3 to 8 people
:::

:::event date="2022-2024" title="Company B — Tech Lead"
- Built the data platform from zero
- Won the annual technology innovation award
:::

:::event date="2024-now" title="Independent consulting"
Focused on technical architecture consulting for early-stage AI / SaaS products.
:::
```

Renders: three work segments visualized as a timeline. Easier to scan chronologically than a traditional bullet list.

Example 3: meeting agenda

```timeline
:::event date="09:00" title="Opening" accent=gray
Host intro + agenda (15 min)
:::

:::event date="09:15" title="Keynote: Markdown in the AI era" accent=blue
Speaker: wuko (45 min)
:::

:::event date="10:00" title="Tea break" accent=gray
:::

:::event date="10:30" title="Panel: the future of tools" accent=purple
3 guests in conversation (60 min)
:::

:::event date="11:30" title="Closing + open mingling" accent=gray
:::
```

Renders: a single-day agenda flattened into a timeline. Readers see "what happens when" in one glance.

Example 4: roadmap (done + planned)

```timeline
:::event date="2026 Q1" title="✅ v0.3 — 12 base capabilities" accent=green
Released. callout / layout / tabs / ... ready.
:::

:::event date="2026 Q2" title="✅ v0.6 — animation + SVG" accent=green
Released. +computed / timer / svg = 15 capabilities.
:::

:::event date="2026 Q3" title="🔨 rho.md cloud MVP" accent=yellow
In progress. Share link + OG preview + 30 demo seed pool.
:::

:::event date="2026 Q4" title="🔮 Rho AI" accent=blue
Planned. LLM directly generates Rho format content.
:::

:::event date="2027 Q1" title="🔮 Rho graph" accent=purple
Planned. STG knowledge graph + cross-document semantic network.
:::
```

Renders: roadmap with state double-encoded: emoji + accent color (✅ done = green / 🔨 in progress = yellow / 🔮 planned = blue/purple).

Plain-text fallback behavior

:::event date=2026-01-01 title="Project kickoff"
v0.0 spec drafted.
:::

→ In readers without directive support, :::event date=... title=... shows as a literal line; the markdown inside the body (bold, lists, links) renders normally. Readers see every event + date + content; only the timeline visualization is lost.

Per-reader breakdown:

Reader	Render
Rho	Full timeline + alternating event cards + accent colors
GitHub web	`:::event ...` literal + body as standard markdown
Obsidian	Same
VS Code default preview	Same
cat / less	Source as plain text

Information preserved — dates, titles, content are all visible; only the visualization is lost.

Common pitfalls

1. date contains spaces — forgot quotes

:::event date=2026 Q1 title="v0.3 released"     ← ❌ "Q1" gets parsed as the next modifier
:::event date="2026 Q1" title="v0.3 released"   ← ✅

Any value with spaces requires quotes. Modifier parsing is shell-style.

2. Events out of order

```timeline
:::event date=2026-05-14
New event
:::
:::event date=2026-01-01
Old event
:::
```

→ Rho renders in document order (doesn't auto-sort), so this displays as "new → old." Order events by time as you write. Or add order=asc to the block header (if your date strings are parseable).

3. Too many events (> 15)

A timeline is comfortable with 5–15 events on desktop. Above 15, the page scrolls forever and readers lose the thread. Fixes:

Cluster: merge adjacent events into one ("2024 Q1: multiple small iterations")
Split: break into multiple timeline blocks by year / phase
Switch to stepper: if the content is tutorial-like, Stepper (one step at a time) fits better

4. Body is too long

:::event date=2026-05-14 title="Brand locked"
A very very very long paragraph, 500 words covering the full story behind this event,
with 5 paragraphs, 3 lists, 2 quotes...
:::

→ A single event card becomes super tall, breaking the timeline's rhythm. Event body should be short (< 100 words / 1-2 paragraphs). When you need richer detail:

Write a summary in body + link to a detail doc
Or wrap content in Modal for click-to-expand

5. Missing `:::` close

```timeline
:::event date=2026-01-01 title="A"
Content A
                  ← ❌ Missing :::
:::event date=2026-02-01 title="B"
Content B
:::
```

→ The whole timeline fails to parse. Every :::event needs a paired ::: to close.

6. Custom emoji in titles renders inconsistently

:::event date=2026 title="✅ Done"

✅ Most readers render standard emoji fine. But custom emoji (Slack :custom_emoji: / Discord <:name:id>) aren't recognized by Rho. Stick to standard Unicode emoji.