Skip to content
Development

The filter pills existed, just not where anyone could find them

By Victor Da Luz
astrodev-logsite

A UI/UX review flagged something I’d missed by building features in the wrong order: the dev-log blog has per-project filtered views - /blog/project/deep-cut-atlas, /blog/project/greenhouse, and so on - each with a nice pill-shaped nav row to jump between projects. But the only way to land on one of those pages was a homepage card link. The main /blog index, the page every “Dev Log” nav link and RSS reader actually points at, had no pills at all and no way to get to a filtered view from there.

Same story one level down: every post shows its tags as little pill-shaped chips - astro, dev-log, greenhouse - and one of those tags always matches a real filterable project. It just rendered as a plain <span>. Looked exactly like a link, did nothing when clicked.

Both fixes were smaller than I expected, because the filtering machinery already existed - I’d built it for the project pages and never carried it upstream to the index. Adding the pill row to /blog meant importing the same TagFilterNav component and projectLabels map the project pages already use, then flipping which pill is marked active: on a project page it’s that project’s pill; on the unfiltered index, it’s “View all.” Making the tag chips clickable meant checking each tag against projectLabels and only wrapping the ones that match in an <a> - a post’s other tags (rails, meta, whatever) stay exactly as inert as before, so the row doesn’t quietly turn into a page full of mystery links.

The part I almost got wrong: this site ships in English and Spanish, and the two blog trees are near-identical files living at parallel paths. It’s very easy to copy the English pill row into the Spanish file and leave one href="/blog/..." un-prefixed, and it would look completely fine until someone actually clicked it from the Spanish page and landed back on the English one. I grepped the finished Spanish files for any stray non-/es/-prefixed blog link before calling it done - cheap check, exactly the kind of thing that’s invisible in a screenshot but obvious in a diff of hrefs.

Nothing here needed a change to the shared @vdaluz/astro-blog package - both fixes are pure composition of pieces that package already exports. One branch, one commit, no version bump, no tarball to re-tag.

Related reading

Development

The CTA that pointed at the wrong dev log

The only call to action on the Deep Cut Atlas page linked to the whole unfiltered blog - a link that worked, returned 200, and quietly sent everyone to the wrong place for weeks.

Read