Tasks

Semantic task lists from vault markdown. data-task on <li> elements.

ASW's task vocabulary maps directly to Obsidian's task syntax: - [ ] todo, - [x] done, - [?] blocked. The HTML representation uses data-task attributes on list items — no checkboxes, no JavaScript, just semantic markup with monospace glyphs.

Vault origin

These components are designed for rendering vault content in a browser. An agent reads tasks.md, transforms task markdown to HTML, and serves it styled — no framework required.

States

Four task states, each with a distinct glyph and colour:

  • Write documentation
  • Set up the repo
  • Deploy to production
  • Rewrite in Rust
<ul>
  <li data-task="todo">Write documentation</li>
  <li data-task="done">Set up the repo</li>
  <li data-task="blocked">Deploy to production</li>
  <li data-task="cancelled">Rewrite in Rust</li>
</ul>
StateGlyphColourMeaning
todo○OrangeNot started or in progress
done●Green (accent)Completed
blocked◐RedWaiting on something external
cancelled×DimNo longer relevant

Mixed task list

Real-world task lists mix states. A sprint, a checklist, a project's open items:

  • Project scaffold
  • Config system
  • PDF extraction
  • SQLite storage
  • MCP server — waiting on spec review
  • Redis queue — overkill for v0.1
<ul>
  <li data-task="done">Project scaffold</li>
  <li data-task="done">Config system</li>
  <li data-task="todo">PDF extraction</li>
  <li data-task="todo">SQLite storage</li>
  <li data-task="blocked">MCP server — waiting on spec review</li>
  <li data-task="cancelled">Redis queue — overkill for v0.1</li>
</ul>

Nested tasks

Sub-tasks nest naturally. The glyph system stays readable at any depth:

  • Build the docs site
    • Taxonomy defined
    • Vault extension pages
    • Content section
    • Forms section
  • Typography system
<ul>
  <li data-task="todo">Build the docs site
    <ul>
      <li data-task="done">Taxonomy defined</li>
      <li data-task="todo">Content section</li>
    </ul>
  </li>
  <li data-task="done">Typography system</li>
</ul>

With metadata

Tasks often carry inline metadata — due dates, owners, tags. Combine with data-text="dim" for secondary content:

  • Ship v0.2 due 2026-04-15 · assigned: vigilio
  • Write changelog 2026-03-28
  • DNS migration waiting on: registrar access
<li data-task="todo">
  Ship v0.2
  <span data-text="dim">due 2026-04-15 · assigned: vigilio</span>
</li>

Reference

AttributeValuesElement
data-tasktodo done blocked cancelled<li>