Saltar al contenido
Development

Los pills de filtro existían, solo que no donde alguien pudiera encontrarlos

Por Victor Da Luz
astrodev-logsite

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

Development

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.

Leer