Preview images for a docs site build

The docs build needs these images on every deploy. Page titles move. Sections get renamed. A folder of hand-made OG files will lag the pages they sit on, and someone has to notice.

This is deploy work, not a one-off export. The cards have to say what the pages say after the last title edit. If a heading changes, the next deploy should write a new PNG from the same colocated data. Nobody should maintain a parallel folder by hand.

The job is to render the docs OG set as part of that build. The data does not change between builds. You point --out at the docs site’s static assets directory and the PNGs land where the site already serves them.

Give Lerret a React component under .lerret/ and optional data. export writes a PNG. Same component, data swapped, many images. There is no batch product, no queue, no orchestrator.

The components are the docs OG artboards from the docs-page set: .lerret/social/docs-og.tsx, with a section breadcrumb, a page title, and a small doc-type chip. One artboard lives per docs section under .lerret/social/docs/. Each artboard keeps a colocated .data.json holding { section, title, kind }. That data stays put between builds. You’re not swapping a --data file for each deploy. Export reads the colocated files as they stand.

Data is colocated per page, unchanged between builds. That’s the second of the four bulk patterns: many artboards with colocated .data.json / .data.js. One export captures the group. Adding a docs page means adding an artboard and a data file. The same files the bulk docs OG case already uses.

The image is a PNG set, written straight into the docs site’s static assets directory via --out. Those artboards are the 1200×630 docs OG cards. Nested output can follow the docs tree the way that set already writes. The useful part here is the destination. The files are a build output.

You use Lerret because OG images become a build output. Nobody maintains a folder of hand-made images that falls out of sync with the page titles. When a title changes, the colocated data changes with the page and the next deploy writes a new PNG. A design-file folder will lag. A screenshot folder will lag.

npx @lerret/cli@latest export --out

Point --out at the docs site’s static assets directory. Start a project with npx create-lerret@latest. More in the use cases index.