How the listing filters work

The blog index filters in the browser with domma-reactive - here is what happens between the click and the cards.

Words and pictures by Darryl Waterhouse ·

The listing you came from is rendered on the server, so it works without JavaScript and search engines see every post. The script then takes it over.

One model

Each card carries a small bundle of plain values - title, date, categories, tags, author. The script reads those into a list and keeps the filters in a handful of observables: the search text, the category, the tag, the author and the sort order.

Derived, not managed

What is shown is a computed value: filter the list, sort it, take the first page. Nothing hides or shows a card by hand; an effect applies whatever the computed says. Change any filter and everything downstream follows.

The right-click menu

Right-clicking a card opens a menu built from that card's own values. "More in Design" simply sets the category observable. The chips above the list are the same observables, drawn the other way round.

The address bar

Filters are written back into the address, so a filtered view is a link you can share.