Current blog design with rectangular tabs and cards

I added category filtering to my blog. Not because I had too much free time, but because I thought my content will get messy - mixing actual thoughts with "hey, I just learned this" posts. ## The Problem My blog was suffering from what I call "digital hoarding syndrome" - everything was just... there. No way to filter between my actual thoughts and my dev experiments. ## The Solution I split content into two categories: - **Writeups**: My actual thoughts and experiences - **Dev Stories**: The "I just built this thing" posts ## Smart Search There was a small issue where if I was in the Writeups tab and searched for a dev story post, it would show no posts. I fixed this by adding a smart search feature that automatically switches to the tab containing the results.

Type in the search box below to see how it automatically switches tabs:

{ const value = e.target.value.toLowerCase(); const container = e.target.closest('.flex'); const landBtn = container.querySelector('button:first-child'); const seaBtn = container.querySelector('button:nth-child(2)'); const input = e.target; // Helper function to check if input could be a valid word in progress const isValidWordStart = (val) => { const validWords = ['lion', 'tiger', 'elephant', 'land', 'dolphin', 'whale', 'shark', 'sea']; return validWords.some(word => word.startsWith(val)); }; // Reset animations first input.style.transform = 'scale(1)'; input.style.borderColor = ''; input.style.animation = ''; if (value.includes('lion') || value.includes('tiger') || value.includes('elephant') || value.includes('land')) { landBtn.className = 'px-1.5 sm:px-3 py-1 sm:py-2 text-[8px] sm:text-sm font-medium rounded-md sm:rounded-lg bg-background text-foreground shadow-sm mr-0.5 sm:mr-1 flex-1'; seaBtn.className = 'px-1.5 sm:px-3 py-1 sm:py-2 text-[8px] sm:text-sm font-medium rounded-md sm:rounded-lg text-foreground-lighter hover:text-foreground mr-0.5 sm:mr-1 flex-1'; } else if (value.includes('dolphin') || value.includes('whale') || value.includes('shark') || value.includes('sea')) { landBtn.className = 'px-1.5 sm:px-3 py-1 sm:py-2 text-[8px] sm:text-sm font-medium rounded-md sm:rounded-lg text-foreground-lighter hover:text-foreground mr-0.5 sm:mr-1 flex-1'; seaBtn.className = 'px-1.5 sm:px-3 py-1 sm:py-2 text-[8px] sm:text-sm font-medium rounded-md sm:rounded-lg bg-background text-foreground shadow-sm mr-0.5 sm:mr-1 flex-1'; } else if (value.length > 3 && !isValidWordStart(value)) { // Cheeky message for unexpected input - only trigger for words that don't start with valid keywords // Show toast message const toast = document.getElementById('cheeky-toast'); if (toast) { toast.style.opacity = '1'; toast.style.transform = 'translateY(0)'; setTimeout(() => { toast.style.opacity = '0'; toast.style.transform = 'translateY(-10px)'; }, 3000); } } }} />

🤕 Cheeky! Try either "lion" or "dolphin"

```typescript const autoSwitchCategory = useMemo(() => { if (!searchQuery.trim()) return selectedCategory; let blogMatches = 0; let devMatches = 0; // Count matches in each category Object.values(postsByYear).flat().forEach(post => { const matches = post.title.toLowerCase().includes(query) || post.description.toLowerCase().includes(query); if (matches) { if (post.blogtype === 'blog') blogMatches++; if (post.blogtype === 'dev') devMatches++; } }); // Auto-switch to the category with matches if (blogMatches > 0 && devMatches === 0) return 'blog'; if (devMatches > 0 && blogMatches === 0) return 'dev'; return selectedCategory; }, [searchQuery, postsByYear, selectedCategory]); ``` ## The Technical Bits ### Schema Update ```typescript schema: (z) => ({ title: z.string(), description: z.string(), date: z.coerce.date(), image: z.string().optional(), blogtype: z.enum(['blog', 'dev']).default('blog'), }), ``` ### Smart Filtering The filtering handles two scenarios: 1. **With search**: Ignores categories, searches everything 2. **Without search**: Uses selected category filter ## The Design Choice I made everything rectangular (tabs and cards) for visual consistency. The container and individual elements are all rectangular to match the blog post cards. ## Results - **Better UX**: Easy category switching with smart search - **Cleaner Design**: Consistent rectangular elements - **Easy Management**: Just add `blogtype: 'dev'` to frontmatter *P.S. - If you're reading this, the search probably auto-switched you to the "Dev Stories" tab. See? It works! 🎉*

Blog

2024

The Curious Case of Pretentious Curiosity