How to Add Category Filters to an Astro Blog
Here’s how to add category filters to an Astro blog — the setup where posts of different kinds (cooking, YouTube, music, US life) live in one blog but get classified by category and picked via filter tabs, instead of splitting into many blogs.
Why one blog + categories
Splitting a blog by topic scatters your post count across several. Keeping it all in one place, classified, means posts pile up together — easier for a visitor to wander between them (good for dwell time and internal circulation), and better for accumulating the post count for ad approval. So even with only a handful of posts, I built the drawers early.
How to add it
- Define the categories — six of them (experiments, cooking, YouTube, music, AI art, US life). Put the labels/emoji in one file (
categories.js) and the enum in the content schema (content.config.ts). A new category means editing just those two files - Tag each post — one line in the post’s frontmatter:
category: youtube - Filter tabs — add tabs on the blog index, but only show categories that actually contain posts (you don’t show guests empty drawers). Make
/blog?cat=cooking-style links work too - Category chips — give each post page a chip for its category so you can see which drawer it’s from
The key is building the drawers before the posts pile up — classifying everything in one late batch is far more work.
Everything else from the two days (briefly)
Beyond categories, a few other things got touched. Just the list:
- Two YouTube channel cards on home — reshuffled the layout, shrank the RPG status window into a compact version, and put Sylvamoor and Eolssigu Trot cards in the freed space. The “coming soon” placeholder became the 🎰 vending machine card
- Vending machine warranty (the Hanja Monster) — the machine leaked Chinese characters and English into the lyrics. The model has a habit of mixing East Asian scripts, and “write in Korean” doesn’t stop it. Fixed with a three-layer defense: ① prompt demands pure Korean ② auto-regenerate if contaminated ③ scrub any survivors. Bonus: capped the chorus lines opening with the hook phrase at three of eight
- An email mailbox — added email to About. Rather than expose my real address, I used Cloudflare Email Routing to make a
contact@sonnyplot.comalias that forwards to my inbox (a few clicks, $0, real address stays private) - The dig (the mailto Monster) — the email button was a
mailto:link, but using this site as a Mac wallpaper (Plash) meant no mail app could open — “unsupported URL.” So the button now copies the address to the clipboard + flashes “Copied ✓.” Most people use webmail anyway, so this is better for everyone — a bug that improved the UX
The result
- ✅ Six blog categories + filter tabs (only non-empty ones show)
- ✅ Two YouTube cards on home, three-layer vending filter,
contact@sonnyplot.commailbox - ⌨️ Lines of code I wrote: still zero
An experiment’s life is longer after launch than before it. Drawers have to be built before there are things to put in them, and a button has to be pressed in your environment before its monster reveals itself.