Docs page OG images in bulk

A docs maintainer ships OG cards once per docs release. Not page by page as each heading lands. The set has to match the docs tree. A new page should mean a new data file, not a new frame in a design file.

This is release work. The docs already have sections, titles, and kinds. The cards have to say the same things the pages say. If the brand color changes between releases, the whole set should regenerate the same way, not card by card by hand.

The job is a card for every docs section in the release. Each card shows a section breadcrumb, the page title, and a small doc-type chip. One export writes the whole set. Next release you add or edit the data files that changed and run the same command. You do not restyle fifty frames.

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 component is .lerret/social/docs-og.tsx. It draws the section breadcrumb, the page title, and the small doc-type chip. One artboard per docs section lives under .lerret/social/docs/. The .tsx is the same component for every section. What changes is the colocated data sitting next to each artboard.

Data is { section, title, kind } in a colocated .data.json on each artboard. That is the second of the four bulk patterns: many artboards with colocated .data.json / .data.js. Put many artboards in a page or group, each with its own file. One export captures them all. You do not pass --data for this run, because each artboard already has its own file. Adding a docs page means adding a data file next to a new artboard.

The image is a PNG at 1200×630. Output folders are nested and mirror the docs tree, so the files land where the docs site expects them.

You use Lerret because fifty cards come from one command. Adding a docs page means adding a data file, not opening a design tool, and the whole set regenerates identically when the brand color changes. A folder of design-file exports will drift the first time someone restyles one card by hand. A folder of screenshots will drift the first time a page title wraps differently.

npx @lerret/cli@latest export

Start a project with npx create-lerret@latest. More in the use cases index.