Episodio 024 — La estética del arquitecto

Serie: bitácora de ingeniería — caprini.dev
Contexto: las tarjetas de compartir dejaron de ser solo “título sobre morado”: pasan a leerse como superficie de sistema — fondo texturizado, barra de estado ficticia, marco doble cian/púrpura y logo anclado con intención, sin perder el pipeline Markdown → PNG → thumbnail → redes.

Qué cambió en el amplificador

1. bg-share.png en public/assets/images/ se incrusta como data URL en la escena Satori (misma idea que el logo): el rasterizador ve un lienzo continuo, no una URL externa en runtime.
2. Barra superior fija el tono: STATUS: LOG_DECRYPTED // CAPRINI_OS — guiño a bitácora técnica sin fingir que es un producto real.
3. Título con text-shadow cian apilado para sensación de halógeno en CRT, legible sobre el fondo.
4. logo-writer.png pasa a la esquina inferior derecha, tamaño contenido, para equilibrar el bloque de título.
5. Bordes dobles (cian + “canal” oscuro + púrpura) refuerzan profundidad sin añadir capas DOM innecesarias en el sitio público — solo en el PNG.

Open Graph: que el “Ver código fuente” no mienta

Si **óg:image** solo existía cuando el episodio tenía **thumbnail** en el frontmatter, cualquier olvido dejaba el **** sin imagen social aunque el artículo fuera perfecto. **MainLayout.astro** ahora resuelve siempre una **URL absoluta** (https://caprini.dev/…`): la del thumbnail cuando viene del contenido, o un fallback de marca cuando no hay miniatura explícita. Así el HTML estático siempre declara una imagen OG coherente con el dominio canónico.

Límites conscientes

Un PNG grande en base64 puede, en teoría, chocar con límites de buffer del motor. Si el render falla con mensajes de tamaño o asignación, el flujo debe detenerse y revisar peso del fondo o estrategia (p. ej. versión más ligera del asset), no insistir a ciegas.

Cierre

La estética del arquitecto no es decoración: es contrato visual con quien comparte el enlace. Cuando la tarjeta y el <meta property="og:image"> cuentan la misma historia, el circuito repo → build → SFTP → preview en X deja de ser magia y pasa a ser ingeniería visible.