Personal site OG and favicon set

An individual does this once, then rarely. You need an OG card, a favicon, a /now hero, and a blog header. Four assets, four very different sizes, one set of facts about you.

This is a setup pass. You change the tagline later, re-export, and all four update together. You do not redraw a favicon by hand so it matches a new OG card. Name, tagline, and accent live in one file.

The job is one --data file with { name, tagline, accent } and one export of the personal preset. Four assets, one command.

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 the personal preset: OG card, favicon, /now hero, blog header. Each artboard has its own dimensions. The tiny favicon is drawn by the same component logic as the big OG card. That is the point of one preset and one data file.

Data is shared { name, tagline, accent } via one --data. The flag applies to every artboard in the run. You do not keep four copies of your name. One file feeds the set. A tagline edit is one field.

The images are PNGs at each artboard’s own dimensions, including the small favicon size. Four files, four sizes, one command. The OG card is a social size. The favicon is small. The /now hero and the blog header use the sizes those artboards already declare.

You use Lerret because four assets, four very different sizes, come from one set of facts and one command. The tiny favicon is drawn by the same component logic as the big OG card, so a color or name change cannot miss the small one. Four one-off exports that disagree on the tagline will miss it.

--data applies to every artboard in the run and is never written back into .lerret/. The four assets are the OG card, the favicon, the /now hero, and the blog header, each at its own dimensions, including the small favicon size. Four assets, four very different sizes, one set of facts, one command.

npx @lerret/cli@latest export --data

Pass the shared { name, tagline, accent } file. Start a project with npx create-lerret@latest. More in the use cases index.

--data applies to every artboard in the run and is never written back into .lerret/. One { name, tagline, accent } file is enough for the OG card, the favicon, the /now hero, and the blog header. The list is stills from local files.

You do this once, then rarely. The next visit is a tagline or accent change and the same command.