Travel collection
The first collection: five routes, sixteen icons and a linked filter, over a demo dataset small enough to read.
The first collection, and the one the sections were designed against. Five routes over a deliberately small demo dataset — five countries and seven cities is enough to prove the filters link up, and forty would only be a data-entry exercise.
The five routes
Each one opens in a new tab. They are plain files: no server, no build, no framework.
| Route | What is on it |
|---|---|
Index — | The whole collection: hero, regions, countries, cities, the latest trip, featured, and every post. The only route with all three cuts on it. |
Group — | One cut already made. Same sections, fewer things in them — an unordered set that share an attribute. |
Place — | The cities inside it, the trips through it, and its posts. |
Series — | A trip. The one route with a first, a last and a sequence — so it gets a spine instead of a grid. |
Post — | The article, a rail that says which series it belongs to, and what to read next. |
How the filtering links up
Region narrows countries, country narrows cities, and the facets narrow everything. None of it is travel-specific: the script reads data attributes, so any collection with groups, places and spots gets the same behaviour.
<div data-collection>
<button data-group="asia">Asia</button>
<button data-place="japan" data-of="asia" data-tags="city food">Japan</button>
<a data-spot="tokyo" data-of="japan" data-tags="city food party">Tokyo</a>
<a data-post data-of="japan" data-region="asia" data-tags="city">A post</a>
<label><input type="checkbox" data-facet="beach"> Beach</label>
<p data-empty-for="[data-post]" hidden>Nothing matches.</p>
</div>the script only ever sets data-filtered="out"; the stylesheet decides what that means
With the script blocked, every item shows — which is the correct fallback for a page whose job is listing things. A city belongs to a country and a country to a region, so a city survives a filter only if its country did.
Travel icons
Sixteen, on the same 24×24 grid at 1.5px, currentColor only — so they follow the text colour and theme themselves.
icons/travel/ — inline them, or use a sprite when you need theming