Los pills de filtro existían, solo que no donde alguien pudiera encontrarlos
Una revisión de UI/UX señaló algo que se me había pasado por construir funciones en el orden equivocado: el dev log tiene vistas filtradas por proyecto, /blog/project/deep-cut-atlas, /blog/project/greenhouse, y así, cada una con una linda fila de navegación en forma de pills para saltar entre proyectos. Pero la única forma de llegar a una de esas páginas era un enlace desde una tarjeta de la portada. El índice principal /blog, la página a la que en realidad apunta cada enlace de navegación “Dev Log” y cada lector de RSS, no tenía pills en absoluto ni ninguna forma de llegar a una vista filtrada desde ahí.
Misma historia un nivel más abajo: cada post muestra sus tags como pequeños chips en forma de pill, astro, dev-log, greenhouse, y una de esas tags siempre coincide con un proyecto filtrable real. Simplemente se renderizaba como un <span> plano. Se veía exactamente como un enlace, no hacía nada al hacer clic.
Ambos arreglos fueron más pequeños de lo esperado, porque la maquinaria de filtrado ya existía, la construí para las páginas de proyecto y nunca la llevé hacia arriba, al índice. Agregar la fila de pills a /blog significó importar el mismo componente TagFilterNav y el mapa projectLabels que ya usan las páginas de proyecto, y luego cambiar cuál pill se marca como activo: en una página de proyecto es el pill de ese proyecto; en el índice sin filtrar, es “View all.” Hacer que los chips de tags fueran cliqueables significó revisar cada tag contra projectLabels y envolver en un <a> solo los que coinciden, las demás tags de un post (rails, meta, lo que sea) se quedan tan inertes como antes, para que la fila no se convierta en silencio en una página llena de enlaces misteriosos.
La parte que casi hice mal: este sitio se publica en inglés y en español, y los dos árboles de blog son archivos casi idénticos que viven en rutas paralelas. Es muy fácil copiar la fila de pills en inglés al archivo en español y dejar un href="/blog/..." sin el prefijo, y se vería perfectamente bien hasta que alguien hiciera clic en él desde la página en español y terminara de vuelta en la inglesa. Antes de darlo por terminado, revisé con grep los archivos en español ya terminados en busca de algún enlace de blog perdido sin el prefijo /es/, una verificación barata, exactamente el tipo de cosa que es invisible en una captura de pantalla pero obvia en un diff de hrefs.
Nada de esto necesitó un cambio en el paquete compartido @vdaluz/astro-blog, ambos arreglos son pura composición de piezas que ese paquete ya exporta. Una rama, un commit, sin bump de versión, sin tarball que retaggear.
Lecturas relacionadas
El CTA que apuntaba al dev log equivocado
El único llamado a la acción de la página de Deep Cut Atlas enlazaba al blog completo sin filtrar, un enlace que funcionaba, devolvía 200, y en silencio mandó a todos al lugar equivocado durante semanas.
El linter estaba señalando la línea correcta por el motivo equivocado
Un atributo que casi borré por una suposición, un desborde que solo existe en ancho de teléfono, y una suite de accesibilidad que pasó en cada versión de esto, la rota y la arreglada.
Un número de versión que mintió por tres lanzamientos
Una insignia fija en una página pública es una promesa que hay que cumplir a mano, y nadie la cumple, así que la solución no fue calcularla, fue eliminarla.