albertoduran.com

A short guide to the repository shape, local development environment, and Cloudflare deployment target behind albertoduran.com.

One publication change crosses content, manifest, route, layout, runtime, and style boundaries that keep the repository understandable.

The devcontainer standardizes Node 22 and editor tooling while leaving dependency replay, network access, and production checks explicit.

The deployment artifact is a file graph served by Cloudflare Workers Static Assets, with explicit 404 and generated asset behavior.

The publication system behaves like a compiler whose policy stages turn MDX candidates into routes, navigation, and complete article pages.

The active Zod schema accepts less metadata than the MDX files carry, exposing fields that are unsupported, unused, or only partly wired.

A typed manifest turns a fixture tree into publication policy for vault ownership, ordering, read time, inherited images, and pagination.

One published entry travels through static path generation and a thin catch-all route into a complete desktop and mobile article shell.

Plain MDX syntax and explicit component imports follow different paths into the article's headings, tables, code, diagrams, and charts.

A fenced sample becomes dual-theme Shiki HTML, a line-numbered component, and markup protected from the production minifier.

Why Mermaid diagrams render at build time through a custom Astro integration, external browser service, and static SVG assets.

Publishable Markdown files prepare diagrams with one build-scoped coordinator that handles cache lookup, batch rendering, and asset emission.

The repository defines a batch renderer contract but cannot verify the external Worker's source, deployment, fonts, or production telemetry.

Provider selection contains build failures across an external batch Worker, a public mermaid.ink fallback, and deterministic fixtures.

An SVG compiler pass removes scripts, cleans selected styles, rewrites IDs, scopes CSS, and merges light and dark renderer output.

Serializable Mermaid variables carry the site's semantic palettes across a renderer boundary without claiming unmeasured contrast.

One diagram produces themed SVG files and runtime metadata tied to a renderer version.

Why the journal has a static-first ECharts path for data visuals, how it differs from Mermaid, and how the section is organized.

One option object becomes an accessible static SVG, an optional file asset, or a chart that hydrates only when the article requests it.

A published ECharts example page showing common, dense, hierarchical, flow, distribution, and finance chart options in MDX.

The site moves work into the build, but its current evidence covers artifacts and behavior rather than Web Vitals or navigation timing.

Static links gain prefetching, document swaps, and theme lifecycle hooks, though the repository has no navigation timing baseline yet.

A deterministic build shows what each optimizer changes and exposes the JavaScript chunk warning that still needs a measured budget.

Images and fonts receive different loading treatment according to their role, with explicit priorities and an honest measurement gap.

Browser modules own preference, viewport, focus, scroll, and local time while the static build remains responsible for readable content.

Theme correctness has three deadlines around first paint, user choice, and Astro route swaps, each owned by a different layer.

A heading list becomes reliable scroll navigation only after accounting for sticky offsets, page edges, clicks, and route cleanup.

A checkbox-based overlay provides the static baseline, then browser code adds focus control, Escape handling, and scroll containment.

An already-rendered diagram gains theme-aware asset links and disposable popover expansion without shipping Mermaid to the browser.

An unstable ESPN page feeds build-time Atlas data, deterministic fixtures protect tests, and the browser localizes the rendered match time.

A map of the site's visual system across Tailwind tokens, DaisyUI themes, CSS partials, SVG icons, parallax, and UI rules.

One ordered CSS manifest makes the cascade inspectable across Tailwind, DaisyUI, project tokens, shared components, and page rules.

A semantic color token travels from DaisyUI's OKLCH themes through Tailwind utilities, component surfaces, and Mermaid palettes.

Three SVG paths cover typed controls, file-loaded skill marks, and generated ribbons, each with a different trust boundary.

The Atlas hero keeps its content in Astro markup while CSS owns depth, narrow viewport cropping, and reduced motion behavior.

A concise contributor guide for building UI with semantic tokens, consistent spacing, responsive rules, and accessible overlays.

The quality system matches evidence to risk while naming its missing lint, coverage threshold, cross-browser, and accessibility gates.

Diagnostics, unit tests, a deterministic build, and Chromium preview checks each cover a different failure class in the CI sequence.

Focused regression stories show how unit tests catch draft leaks, SVG ID collisions, unsafe chart options, and damaged generated markup.

Chromium tests verify selected reader behaviors while leaving Axe rules, screen readers, reduced motion, Firefox, and WebKit uncovered.