Section divider slides

The speaker does this while building a deck. The talk has sections. Each section needs a divider: a number and a name, 16:9, same type as the other dividers. Eight sections means eight dividers that should not slowly diverge as the deck gets edited.

This is deck-building work. You are not restyling divider 5 because you restyled divider 1 by hand last night. The set has to stay one type. Number and name change. Type does not.

The job is one artboard per section, each with colocated data, and one export for the group. You import the PNGs into whatever deck tool you already use. Lerret writes the images. The deck tool places 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 component is .lerret/talks/divider.jsx. It shows the section number and the section name. That is the divider. Number and name come from the colocated file for that artboard. The component does the type. The data does the section.

Data is one artboard per section with colocated data. That is bulk pattern 2: many artboards, each with its own .data.json or .data.js, one export captures them all. Adding a section is adding an artboard and a data file. Renaming a section is editing that file. Eight sections is eight artboards in one group.

The images are PNGs 1920×1080, imported into whatever deck tool is being used. One image per section. 1920×1080 is 16:9, the same size as the title slide in this family of cases.

You use Lerret because eight dividers come with identical typography from one export. The type is the component. The section is the data. When the section list changes, you re-export the group and the set matches again. Eight slides that slowly diverge as the deck is edited will not.

This is the second of the four bulk patterns: put many artboards in a page or group, each with its own colocated .data.json / .data.js. One export captures them all. Eight dividers with identical typography from one export, instead of eight slides that slowly diverge as the deck is edited.

npx @lerret/cli@latest export

Export the group folder that holds the section artboards. Start a project with npx create-lerret@latest. More in the use cases index.

--data on a run applies to every artboard and is never written back into .lerret/. For this case the values already sit next to each divider as colocated .data.json or .data.js, so the group export is enough. The list is stills from local files.

Eight dividers with identical typography from one export, instead of eight slides that slowly diverge. That is the whole reason this case exists.