Saltar al contenido

Proyecto personal

@santi020k/og

Built a renderer-agnostic Open Graph image pipeline with deterministic caching, safe cleanup, parallel generation, and CI verification while leaving every project's visual system in its own hands.

Rol
Creator
Trayectoria
- Present
Duración
3 mo
En esta página 1 sección

Project notes

Active project

Open Graph generation without surrendering the design

Estimated reading time
About 3 minutes
In this project story
6 sections

I built @santi020k/og to separate two concerns that are often bundled together: the mechanics of generating social images and the visual decisions that make those images belong to a product.

The package handles paths, output formats, caching, concurrency, cleanup, and verification. The consuming project supplies its content, assets, fonts, card composition, and renderer. That boundary makes the pipeline reusable without turning every brand into a preset.

Goals

  • Keep brand ownership inside each project instead of prescribing a template or content model.

  • Make committed social images verifiable with deterministic fingerprints and a read-only CI command.

  • Regenerate only what changed across collections that may contain hundreds of cards.

  • Stay framework-agnostic so the same pipeline works with Astro, Next.js, Node.js, a CMS, or a static array.

What I built

  • A typed configuration API and CLI

    with init, generate, check, and force-generation workflows.

  • Sharp and Satori entry points

    for SVG-based designs, HTML-like templates, font loading, and raster encoding.

  • Five output families

    selected by extension: SVG, PNG, WebP, JPEG, and AVIF.

  • Content-aware caching

    that fingerprints card data, dimensions, output names, configuration, templates, fonts, logos, and declared source files.

  • Bounded worker-thread generation

    for large collections without letting native image work overwhelm CI memory.

  • Tracked cleanup

    that removes only obsolete outputs recorded by the previous manifest instead of scanning and deleting arbitrary files.

Technical highlights

Renderer contract

projects can return SVG, use the bundled Sharp or Satori adapters, or provide a completely custom renderer.

Safe paths

output files and the cache manifest are constrained to the project root to prevent traversal.

Deterministic CI

santi-og check reports missing or stale outputs without mutating the repository.

Portable inputs

card data can come from content collections, Markdown, CMS responses, framework loaders, or any serializable source.

Parallel builds

worker renderer modules support structured-cloneable data and automatic or fixed concurrency.

Results

  • One generation workflow across different stacks
    without adding a framework runtime.
  • Faster repeat builds
    because unchanged cards keep their existing output.
  • Safer repository maintenance
    through manifest-scoped cleanup and explicit path validation.
  • Project-owned visuals
    that remain free to evolve independently from the generator.

Why it matters

Social images are small artifacts backed by a surprisingly repetitive build system.

The valuable shared abstraction is not a universal card design. It is a dependable way to discover inputs, detect changes, render in parallel, encode files, clean obsolete artifacts, and prove that committed output is current.

@santi020k/og owns that machinery and stops at the boundary where a project’s identity begins.

De este proyecto

Dentro del trabajo.

Engineering notes

Deterministic Open Graph images without design lock-in

Why I separated social-image generation mechanics from project-owned visuals, then built caching, safe cleanup, worker concurrency, and CI checks around that boundary.

Leer artículo

Tool ecosystem

How I Built the santi020k Developer Tool Ecosystem

How Lumen, ESLint Config Basic, Quality, Astro Doctor, Commitprompt, Dep Beacon, OG, Theme, and Auth form one practical system for my projects.

Leer artículo

Comparte este artículo

Compártelo.

Creator

quality

Built a fast, predictable code-quality CLI and GitHub Action that detects and coordinates native analyzers across Rust, Swift, Android, Kotlin, JavaScript, and Astro repositories.

Leer el caso de estudio

Creator

eslint-config-basic

Built a DX-first ESLint toolkit for JavaScript and TypeScript teams that want stronger defaults, less setup friction, and cleaner reviews.

Leer el caso de estudio