[Saifjafri212213]

What and why

Adds the Year in Review developer template (developer-year-review), for "my year in code" posts in December and January.

• Layout: the year sits large at the top with the name next to it. Below are up to three stats in a row (a big value over a short label, such as 1,248 over commits), and an optional one-line highlight at the bottom with a small accent bar.
• Stats: a stat with an empty value (or only spaces) is left out, with its label, and the others share the row. With none, the row is left out. A label can be empty on its own.
• Sizing: every value uses one size, the largest that fits the longest value in the space the cards have. That gets bigger when fewer stats share the row and smaller for a long value. Values are cut at 14 characters, labels at 28, the name at 26 and the highlight at 80, with …. If a value of wide capitals still doesn't fit, it ends in an ellipsis rather than being clipped.
• Highlight: empty, spaces-only or missing hides it cleanly. Line breaks in any text become single spaces.
• Year: defaults to 2026; an empty year falls back to it. A longer year such as FY2026-27 uses a smaller size.
• Light backgrounds: the cards, their border and the labels are mixed from the background and text colours, and an accent as light as the background is pulled toward the text colour, so it reads on white as well as on dark.

Fields: name, year, stat1Value and stat1Label to stat3Value and stat3Label, highlight, and bgColor, accentColor, textColor from commonFields. Re-exported in src/templates/developer/index.ts and registered in the Developer block of src/templates/registry.ts.

Closes #248

How I tested this

• tests/templates/developer-year-review.test.ts (49 tests): the defaults, the fields, stats (shared row, a missing, empty or spaces-only value, order, no row when there are none, an empty label, truncation, one size for all values, shrinking and growing, the ellipsis guard, numbers and line breaks), the highlight (hidden for empty, spaces, tabs and missing; truncation), the year and name (hidden name, year fallback, smaller size for a long year, truncation), odd input (null, numbers, objects, nothing filled in), layout (1200x630, Inter, display flex on every div, no grid, deterministic, only characters the fonts have), and contrast on five colour setups (dark, white, white with a pale accent, cream with a dark accent, dark with a dark accent).
• I changed the template on purpose in 23 ways to see whether the tests notice (no filtering, no trimming, no year fallback, always showing the name, highlight or stats row, a fixed size, no truncation, no accent adjustment, faint labels, a panel the same colour as the page, no ellipsis, unequal cards and others). Two survived at first: nothing checked that no empty row, or empty label element with its spacing, is left behind, so I added those tests. All are caught now.
• In the editor (/create/developer?template=developer-year-review) with Chrome: the template shows in the gallery, the live preview updates as I edit, and Download PNG gives a 1200x630 PNG. No console errors or warnings. The screenshots below are from the server image API (/api/og).
• npm run check (0 errors, 0 warnings, same hints as dev) and the full suite: 1260/1260.

AI assistance

An AI coding assistant helped write the template and the tests. I read through it, ran the checks above myself and looked at every rendered image.

Screenshots

Default colours

White background

White background, pale accent

Two stats share the row

Long values, name and labels

No highlight, no name

Checklist

• Root element is width: '1200px', height: '630px'
• Every div has display: 'flex', inline styles only, flexbox only
• Fonts: Inter (500/600/700)
• No emoji or remote images in defaults
• Long text handled; empty optional fields are hidden cleanly
• Readable on a light background (screenshots 2 and 3)
• No Math.random() or dates in render
• Clear description and 5 tags
• Reuses commonFields (bgColor, accentColor, textColor)
• Targets dev, includes screenshots, says Closes #248

Notes for reviewers

• In the editor, clearing a field hides it in the live preview, but Download PNG and /api/og treat an empty value as missing and use the template's default (this is how the shared URL builder and API work for every template). So to hide a stat or the highlight in the downloaded image or an image URL, use a single space. Screenshots 4 and 6 were made that way. I left the shared behaviour alone.

[anurag629]

Thanks @Saifjafri212213, really thorough work. Check, all 1260 tests and the build pass on top of dev, and the default, white, pale accent, one stat, no stats, long values and FY2026-27 renders all look right.

One thing before I merge: with a long name in capitals, for example MAXIMILIANO WOLFGANG RODRIGUEZ, the year gets squeezed and its last digit runs into the name with no gap, because the year span can still shrink. Adding flexShrink: 0 to the year keeps its width and the 36px gap, and the name then wraps next to it (I tried it locally). A test for it would be good too.

[Saifjafri212213]

Thanks for the review, @anurag629, and for the fix. Done in 4f32227.

I reproduced it first with MAXIMILIANO WOLFGANG RODRIGUEZ: the year was squeezed and its last digit touched the name. I added flexShrink: 0 to the year, and now it keeps its width and the 36px gap while the name wraps next to it. I looked at the same name with FY2026 and FY2026-27 as the year too, and both keep the gap and stay inside the margin. Renders with shorter names are unchanged.

I also added a test for it (it fails without the change). All 1261 tests, the type check and npm run check pass.

[anurag629]

Thanks @Saifjafri212213, that does it. The long name keeps its gap now, and check, all 1272 tests and the build pass on top of dev.