Commits

From the Summary to the Editor: the panel takes shape

Umami was missing from the homepage, the chart gains a metric selector

Yesterday closed the Summary phase and today I continued with the rest of the panel: analytics, rail (the sidebar), Account, Articles and editor. It has been a day of constant redesign. Let me go piece by piece (if you want to see the previous step, it's at The day production didn't forgive: dashboard, editor and statistics).

Umami wasn't showing on the homepage

The public source code of the homepage didn't include the Umami script (the tool that measures visits), even though the configuration was active. The reason: index.astro was being prerendered during the build (a static page was generated at compile time) and couldn't query the dynamic API configuration (the communication channel with the server). I removed the prerender: the homepage now does SSR (the server generates the page on each visit), same as the blog, and BaseLayout inserts the script on every request. I verified it on the real domain: / and /blog/ have exactly one tracking tag.

Metric selector on the chart

The Statistics chart now offers three series: unique visitors, page views and visits, with a second FilterBar (the filter strip) with the same look as the days one. There were two bugs worth mentioning here. On the first commit only the types and options were added: the React state (the component's live data) and the JSX (the language used to draw the interface) were missing, and nothing changed on screen. On the second, the visits series was queried at /metrics as if it were a temporal one, and Umami answered 400 (bad request): the valid series comes from /pageviews, in the sessions field. I also made the selector always render: for a range with no data it shows a message instead of hiding the filters.

The struggle to align the rail

To align the rail collapse button with «New article» I had to correct the agent three times on the same request. First it created new controls instead of reusing the existing ones; then it calculated absolute positions by eye, misinterpreting the screenshot annotations. The final solution: measure at runtime (while the page is running) the real bottom edge of the primary action and anchor the controls to it; the show-rail one, additionally, to the right edge of the last KPI (each key figure of the panel). Lesson: when facing a visual reference with explicit coordinates, no fixed offsets.

The rail stops being navigation

The right rail moved from «Accesses», which duplicated the navigation, to a «Your blog» section: continue where you left off, the blog today (7-day visitors and most viewed page, with Umami data), the latest article and three placeholders (spaces reserved for content that isn't there yet) with a «Coming soon» pill: pending comments, editorial queue and subscribers. With this, the Summary was closed and approved as the panel's reference page, with the patterns locked in: zinc/teal/rose palette, KPIs in matrix with dividers, panel headlines at 18px with green dot and no duplicated navigation on the rail.

Account, forms and Articles

Account has been the first page that replicates the mockup: header, panels with accent dot and glass rail with the session module. Panel.astro becomes the Astro mirror of the React primitive (the original component). The profile and password forms have changed top to bottom: inline validation on blur (as you leave the field), show/hide on the three fields, strength meter with live checklist and button disabled until everything is valid. And Articles brought a product decision: no rail, it's a working page. New table with sorting, multi-select, batch actions, its own confirmation dialog (goodbye, window.confirm), loading skeletons and relative dates.

The editor and a shared utility

The editor already has the reference structure: header with the Save button always visible (the form HTML5 attribute allows it even if the button lives outside the form), canvas as a card with Milkdown (the rich text editor) and options on the system's teal rail. The first attempt put the options on its own white panel; I moved them to the layout's rail with the same portal pattern as the Summary's drafts. And seeing the same control misalignment that I had already fixed on the Summary, the logic ended up in utils/rail-alignment.ts, shared by both pages; the ones without a primary action keep the base CSS height (the web's styling language).

The cleanup phase remains: PageHead.astro is now orphaned and already has a date to disappear.

Other diary entries