Desenvolupament web

Del Resum a l'editor: el panell agafa forma

Umami desapareixia de la portada, el gràfic guanya un selector de mètrica i el disseny de referència del Resumen s'estén a Cuenta, Articles i l'editor.

Del Resum a l'editor: el panell agafa forma

Ahir es va tancar la fase del Resumen i avui he continuat amb la resta del panell: analítica, rail, Cuenta, Articles i editor. Ha estat un dia de redisseny constant. Vaig per parts.

Umami no apareixia a la portada

El codi font públic de la portada no incloïa el script d’Umami, tot i que la configuració estava activa. El motiu: index.astro es prerenderitzava durant el build i no podia consultar la configuració dinàmica de l’API. He retirat el prerender: la portada ara fa SSR, igual que el blog, i BaseLayout insereix el script a cada petició. Ho he verificat al domini real: / i /blog/ tenen exactament una etiqueta de seguiment.

Selector de mètrica al gràfic

El gràfic d’Estadístiques ara ofereix tres sèries: visitants únics, pàgines vistes i visites, amb un segon FilterBar amb la mateixa estètica que el de dies. Aquí hi va haver dos bugs dignes de menció. Al primer commit només es van afegir els tipus i les opcions: faltaven l’estat de React i el JSX, i a la pantalla no va canviar res. Al segon, la sèrie de visites es consultava a /metrics com si fos temporal, i Umami respon 400: la sèrie vàlida ve de /pageviews, al camp sessions. També vaig fer que el selector sempre es renderitzi: amb un rang sense dades mostra un missatge en lloc d’amagar els filtres.

La lluita per alinear el rail

Per alinear el botó de plegar el rail amb «Nuevo artículo» vaig haver de corregir l’agent tres vegades sobre la mateixa petició. Primer va crear controls nous en lloc de reutilitzar els existents; després va calcular posicions absolutes a ull, malinterpretant les anotacions de les captures. La solució final: mesurar en runtime la vora inferior real de l’acció principal i ancorar-hi els controls; el de mostrar rail, a més, a la vora dreta de l’últim KPI. Lliçó: davant d’una referència visual amb coordenades explícites, res d’offsets fixos.

El rail deixa de ser navegació

El rail dret passava de «Accesos», que duplicava la navegació, a un apartat «Tu blog»: continuar on ho vas deixar, el blog avui (visitants de 7 dies i pàgina més vista, amb dades d’Umami), l’últim article i tres placeholders amb píldora «Pròximament» (comentaris pendents, cua editorial i subscriptors). Amb això, el Resumen va quedar tancat i aprovat com a pàgina de referència del panell, amb els patrons bloquejats: paleta zinc/teal/rose, KPI en matriu amb divisòries, titulares de panell de 18px amb punt verd i res de navegació duplicada al rail.

Cuenta, formularis i Articles

Cuenta ha estat la primera pàgina que replica la mostra: capçalera, panells amb punt d’accent i rail de cristall amb el mòdul de sessió. Panel.astro passa a ser el mirall Astro de la primitiva React. Els formularis de perfil i contrasenya han canviat de dalt a baix: validació inline en blur, mostrar/amagar als tres camps, medidor de força amb checklist en viu i botó deshabilitat fins que tot és vàlid. I Articles ha portat una decisió de producte: sense rail, és una pàgina de treball. Taula nova amb ordenació, selecció múltiple, accions en lot, diàleg de confirmació propi (adeu, window.confirm), esquelets de càrrega i dates relatives.

L’editor i una utilitat compartida

L’editor ja té l’estructura de referència: capçalera amb el botó Guardar sempre visible (l’atribut form d’HTML5 ho permet encara que el botó visqui fora del formulari), llenç com a targeta amb Milkdown i opcions al rail teal del sistema. El primer intent va posar les opcions en un panell blanc propi; les he portat al rail del layout amb el mateix patró de portal que els borradors del Resumen. I en veure-hi el mateix desfase de controls que ja havia arreglat al Resumen, la lògica ha acabat a utils/rail-alignment.ts, compartida per totes dues pàgines; les que no tenen acció principal conserven l’alçada base de CSS.

Queda la fase de neteja: PageHead.astro ha quedat orfe i ja té data per desaparèixer.