Unified Tag Filtering, Robust Article Previews, and Component Architecture Improvements

Summary

A sweeping refactor and enhancement of article preview and collection entry components, introducing a canonical news preview component, modular columnar rendering, extensible tag filtering for all content collections, and stricter prop typing. This update also delivers significant UI/UX polish and eliminates technical debt in type definitions and data mapping.

Why Care

These changes establish a single-source-of-truth for article previews and tag filtering, dramatically improving maintainability, extensibility, and visual consistency across the site. By enforcing strict prop typing, modularizing layout logic, centralizing data handling, and enabling tag filtering for all content collections (not just tooling), the codebase is now far easier to extend, debug, and reason about. The improved UI/UX and accessibility directly benefit both end users and future developers, while the removal of technical debt ensures a more stable and predictable system.

Major Features & Improvements

  • Unified Tag Filtering Across Collections
    • Introduced a new tag filtering system that aggregates and displays items from both the "prompts" and "specs" content collections.
    • Implemented new dynamic routes: /vibe-with/[tag].astro, /vibe-with/[collection]/[...slug].astro, and /vibe-with/[collection]/[tag].astro for seamless cross-collection navigation and filtering.
    • Added a robust utility for slug generation (src/utils/slugify.ts) to ensure consistent URL handling across the site.
  • Robust, DRY Article Preview Components
    • Created ArticleListNewsPreview.astro as a new, canonical component for rendering news-style article previews.
    • Refactored ArticleListColumn.astro to support modular, columnar rendering of arbitrary entry types, enabling flexible content layouts.
    • Ensured all preview components now receive and correctly handle essential props (title, lede, banner_image, etc.), eliminating missing data and rendering bugs.
    • Updated prop typing and mapping throughout the pipeline for strict type safety and single-source-of-truth data flow.
  • UI/UX Enhancements
    • Improved visual consistency and accessibility in CollectionEntryRow.astro and all tag-related components.
    • Refined color, font-weight, and spacing in article previews for a more professional and legible presentation.
    • Enhanced the tag chip, tag cloud, and related components for better discoverability and filtering experience.

Technical Debt Addressed

  • Removed all hallucinated or unused fields (e.g., summary) from type definitions and data pipelines.
  • Centralized all mapping and conditional logic in the Astro script blocks, in accordance with project commenting and DRY rules.
  • Added or updated comprehensive comment blocks and inline documentation for all affected files and functions.

Files Added

  • src/components/articles/ArticleListNewsPreview.astro
  • src/pages/vibe-with/[collection]/[...slug].astro
  • src/pages/vibe-with/[collection]/[tag].astro
  • src/pages/vibe-with/[tag].astro
  • src/utils/slugify.ts

Files Modified

  • src/components/articles/ArticleListColumn.astro
  • src/components/articles/PostCardFeature.astro
  • src/components/basics/CollectionEntryRow.astro
  • src/components/tool-components/TagChip.astro
  • src/components/tool-components/TagCloud.astro
  • src/components/tool-components/TagColumn.astro
  • src/components/tool-components/TagRow.astro

Impact

  • Content teams can now tag, filter, and preview articles and specs with complete reliability and visual clarity.
  • Developers benefit from a DRY, modular, and well-documented codebase, reducing future maintenance and onboarding costs.
  • End users enjoy a seamless, consistent browsing experience across all tag and article views.
This release marks a major milestone in the unification of content filtering, preview rendering, and codebase maintainability across the lossless-monorepo.