Newsletter header image

A newsletter author runs this per issue. Email clients mangle CSS, so the header is an image anyway. Each issue needs a header that shows the issue number, the date, the issue title, and the masthead.

This is weekly work, or whatever the issue cadence is. Doing it in a design tool every issue is a chore. Doing it from a data file makes the image a build artifact. Sending the email is not part of this. Lerret produces the image.

The job is one header PNG per issue. You put { issue, date, title } in a file. You export. Next issue is the same component and a new file. The masthead stays put. The issue fields change.

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

The component is .lerret/email/newsletter-header.jsx. It draws the issue number, the date, the issue title, and the masthead. One file in the repo. The masthead stays in the component. The issue, date, and title come from data.

The data is { issue, date, title } per issue via --data. That is bulk pattern 1: re-run export with a different --data file each time. Same component, new values, new image. --data applies to the run and is never written back into .lerret/.

The image is a PNG at 2× the email column width for retina, for example 1200 wide.

Email clients mangle CSS, so headers are images anyway. This makes the image a build artifact rather than a weekly design chore. You edit three fields and re-run. The masthead and the type stay in the component.

Point --data at this issue’s file. The fields are issue, date, and title. The command writes a retina-wide PNG, for example 1200 wide. Next issue is a new file and the same command. --data is never written back into .lerret/. Sending the email is not part of this.

npx @lerret/cli@latest export --data

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