Episodio 023 — Cerrando el círculo visual

Serie: bitácora de ingeniería — caprini.dev
Contexto: en el 022 el blog sharer ya generaba un PNG en public/assets/images/shares/<slug>.png y abría el Web Intent con enlace al post. Faltaba un paso: que el sitio y las redes supieran que esa imagen era la imagen del episodio.

Por qué las imágenes eran “invisibles”

1. En el blog: la plantilla /blog/[slug] solo renderizaba título + prosa. El PNG vivía en public/ como fichero estático, pero ningún campo del Content Layer apuntaba a él, así que Astro no tenía qué pintar bajo el título.
2. En SEO / redes: sin <meta property="og:image">, los rastreadores y las previews de X u otras plataformas no recibían una URL absoluta de imagen canónica para la página del episodio — aunque el fichero existiera en el servidor.

En resumen: el artefacto estaba; el vínculo semántico (Markdown → layout → metadatos) no.

Cómo automatizamos el vínculo

Tras rasterizar y guardar el PNG, sharer.mjs vuelve a leer el Markdown del episodio con gray-matter, asigna o actualiza thumbnail: /assets/images/shares/[slug].png y reescribe el fichero con matter.stringify. Un solo flujo de consola deja alineados tarjeta social, ruta pública y frontmatter.

En el sitio:

• src/pages/blog/[slug].astro usa thumbnail para mostrar una imagen destacada (marco synthwave: borde púrpura, sombra cian) bajo el título.
• MainLayout.astro recibe una thumbnailUrl absoluta (https://caprini.dev + ruta) y emite <meta property="og:image"> cuando corresponde.

Así el script y el contenido dejan de divergir: compartir y publicar cuentan la misma historia visual.