Caprini Dev

sagas/odisea-del-blog-maestro/013-de-la-terminal-al-lienzo.md

2026-03-24 published

Episodio 013 — De la terminal al lienzo

Episodio 013 — De la terminal al lienzo

Serie: bitácora de ingeniería — caprini.dev
Slug: 013-de-la-terminal-al-lienzo
Resumen: la tarjeta de progreso deja de ser un archivo “al lado del script” y pasa a formar parte del circuito público del sitio. Este episodio nombra el pipeline que une Git, GitLab, Node y Astro en una sola historia: de un git push a un píxel en el hero.

El pipeline Caprini (de punta a punta)

  1. Commit — alguien empuja cambios a la rama acordada (habitualmente main) en el proyecto GitLab.
  2. API GitLab — tracker.mjs (en projects/001-progress-tracker/) usa un token con read_api, pide el último commit de esa rama y obtiene mensaje, fechas y URL canónica del commit.
  3. Latido JSON — el mismo run serializa un resumen en src/content/last-activity.json para que el build de Astro tenga metadatos de “última actividad” sin base de datos.
  4. Satori → SVG — con los datos del commit, Satori compone un árbol tipográfico (subset de layout) coherente con BRANDING (void, neón, JetBrains Mono).
  5. resvg → PNG — @resvg/resvg-js rasteriza a 1200×675; el buffer se escribe en public/assets/images/ como latest.png (nombre fijo para la web) y last-progress-card.png (alias legible). Opcionalmente, con PROGRESS_CARD_SNAPSHOT=1, se añade un archivo progress-card-<ISO>.png para archivo histórico.
  6. Astro Home — src/pages/index.astro referencia /assets/images/latest.png en el hero: Astro sirve lo que está bajo public/ tal cual, así que la tarjeta es estática respecto al último ñpm run build` (o la última vez que alguien ejecutó el tracker y volvió a construir).

No hay servidor dinámico en producción para esta imagen: el pipeline es dev-time / CI-time → artefacto en public/ → sitio estático.

Por qué latest.png

Los nombres con marca de tiempo ayudan a auditar o a conservar capturas, pero la Home necesita una ruta estable que no cambie en el código en cada ejecución. latest.png es el contrato: el tracker siempre sobrescribe ese archivo cuando corre; el HTML sigue apuntando al mismo URL.

Cierre

Lo que antes era “salida de consola + JSON + PNG local” ahora es también showcase en la portada: el Pipeline de Caprini — commit, API, Satori, PNG, Astro — queda explícito para humanos y para el agente que lea esta bitácora.