[Saifjafri212213]

What and why

Adds the Code Comment quote template (quote-code-comment), for developer quotes shared like a snippet. The quote is a block comment in an editor-style panel:

/**
 * Talk is cheap. Show me the code.
 * @author Linus Torvalds
 */

All in JetBrains Mono. The comment markers use a muted colour, the quote the text colour and @author the accent colour. A small file name tab ("quote.ts") sits above the panel.

• Wrapping: each wrapped line starts with *. The lines are wrapped in the template itself (Satori's own wrapping can't add the *). JetBrains Mono is fixed width (0.6 em per character), so the line length comes straight from the text size. A single word longer than a line is split.
• Sizing: the text size drops as the quote gets longer, so the whole comment fits in the panel. Quotes are cut at 240 characters with …, and if a quote has so many short lines that it still can't fit, the last line that fits ends in ….
• Optional parts: an empty or blank author hides the @author line; an empty or blank fileName hides the tab (and the panel's top-left corner becomes round).
• Line breaks typed in the quote are kept, and an empty line shows as *.
• Light backgrounds: the panel, its border, the muted markers and the file name are mixed from the background and text colours, and a pale accent is pulled toward the text colour, so it reads on white as well as on dark.

Fields: quote (textarea), author, fileName (default quote.ts), bgColor, accentColor, textColor. Re-exported in src/templates/quote/index.ts and registered at the end of the Quote block in src/templates/registry.ts.

Closes #222

How I tested this

• tests/templates/quote-code-comment.test.ts (54 tests): the default comment, the tab, wrapping (every line starts with *, lines read back as the same quote, line length fits the panel, a long word is split, line breaks and blank lines, CRLF and lone CR, tabs and runs of spaces), long quotes and the row cap, hiding the author and the tab, odd input (empty, blank, numbers, null, text that looks like a comment), layout (1200x630, JetBrains Mono, display flex on every div, no grid, deterministic), and contrast for the quote, the @author line, the markers and the file name 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 17 ways to see whether the tests notice (no * prefix, author always shown, tab always shown, wrong character width, no truncation, no word split, dropped blank lines, no row cap, no accent adjustment, faint markers, panel the same colour as the page, no pre white-space, square corner always, no space collapsing, no CR handling, author not shortened). All were caught. One (the \r handling) survived at first, because Windows line breaks are cleaned up by the trim anyway, so I added a lone-CR test.
• In the editor (/create/quote?template=quote-code-comment) with Chrome: the template shows in the gallery with its thumbnail, the live preview updates as I edit the quote, author and file name, and Download PNG gives a 1200x630 PNG that matches the preview. No console errors or warnings. The screenshots below are from the server image API (/api/og).
• I checked by eye that an empty author and an empty file name hide their parts (screenshot 5). My browser script's text search for these can't see text in the SVG (Satori outlines it), so only the unit tests and the screenshot back this up.
• npm run check (0 errors, 0 warnings, same hints as dev), and the full suite: 1095/1095.

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

Long quote, wrapped

No author, no file name

Line breaks, other file name

Checklist

• Root element is width: '1200px', height: '630px'
• Every div has display: 'flex', inline styles only, flexbox only
• Fonts: JetBrains Mono (400/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 (author, bgColor, accentColor, textColor)
• Targets dev, includes screenshots, says Closes #222