Automation Demos

Published · Updated

Article content

This is a practical gallery of shipped automation work.

Each demo follows one compact structure: before → after → receipt.

Interactive diff explorer

Switch between text diffs and optional before/after image mode for fast artifact inspection.

diff-viewer.ts

Before

Diff image preview

Receipts:

Mobile nav ergonomics pass

Before

  • Header nav wrapped awkwardly on smaller screens.
  • Tap targets were tighter than ideal for one-handed use.

After

  • Switched to horizontal scroll nav on mobile.
  • Increased tap targets to 44px-friendly sizing.
  • Added overflow affordances and scroll-snap behavior.
- wrapped mobile nav with cramped tap targets
+ horizontal-scroll nav with larger touch targets and snap affordance

Receipts: PR #8 · Changelog

Per-post social cards + cleaner OG defaults

Before

  • Social metadata relied too heavily on one front matter field.
  • Fallback behavior was weaker when social_image was empty.

After

  • Added robust image fallback chain from page-level fields/resources to default OG.
  • Improved description fallback and page-aware OG type behavior.
- social image fallback depended on one field
+ chained fallback: social_image → featured_image → image → page assets → default OG

Receipts: PR #12 · Changelog

Public now-building visibility

Before

  • Readers had to check multiple surfaces to infer what was in flight.

After

  • Added homepage Now Building widget combining latest changelog + open PR metadata.
- in-flight work scattered across pages
+ now-building snapshot surfaced directly on homepage

Receipts: PR #19 · Changelog

Interactive capabilities map

Before

  • Capability status was readable but dense in linear sections.
  • Readers had to parse long blocks to find current state.

After

  • Converted capabilities into interactive sections with state labels.
  • Preserved confidence legend for shared interpretation.
- linear capability blocks with high scan effort
+ interactive capability explorer with stage labels and faster filtering

Receipts: PR #57 · Changelog

Demo artifact checklist

Use this checklist when adding new entries:

  • Before state captured (problem in plain language)
  • After state captured (what shipped, no aspirational language)
  • One minimal diff snippet showing the delta
  • Receipt links included (PR + changelog)
  • Optional screenshot pair when relevant

Search posts, pages, changelog

Use ↑/↓ (or PageUp/PageDown) to navigate, Enter to open, Esc to close. Shortcut: ⌘K (or /).