README.md1# Chapter 11: card, drawing a PNG one pixel at a time 2 3Paste a link to this site into Discord and it unfurls: a title, a line of 4text, and a picture. This chapter is the picture. Here is a real one, drawn 5by the site just now for a question it has been asked before: 6 7 8 9The answer is large, and under it is the half that makes it fun: the 10numbers. A yes-or-no gets a slider from no to yes (from 0% to 100% for a 11how-likely). A pick gets a slider for each of its three likeliest options. A 12how-much gets a column for every level, like a histogram. The code has its 13own card too: 14 15 16 17> **Aside: why by hand?** A Worker on the free plan gets ten milliseconds of 18> CPU per request. A font engine and a vector renderer would eat that, and 19> several megabytes besides. So the card is drawn the way old computers drew 20> text: an 8 by 8 bitmap face (`font8x8`, public domain), scaled up, a pixel 21> at a time, into a 600 by 315 canvas with sixteen colours at four bits a 22> pixel. That is also exactly the page's look. The PNG comes out at about 23> 4 KB. 24 25A preview never asks anything. Chat apps fetch every pasted link, often 26several times, so the preview is read from the archive (chapter 9): a 27question asked before shows its answer, and one never asked says "Let me Jev 28that for you." The picture's address carries a short mark of the answer, so 29a chat fetches it again when the answer changes (a question asked for the 30first time, most of all). 31 32A question Jev cannot take gets a card of its own, `Card::Declined`: the 33question, the name "LMMPTFY" in a pink badge as the site it points to prints 34it, and the three LLM logos (Claude, ChatGPT, Gemini) in their real colours, 35and nothing that says Jev answered. The logos are drawn from the same 36vendored SVG files the page embeds (`third-party/pixel-icons`): `pixel.rs` 37reads their rectangles and axis-aligned paths and the canvas paints the 38cells, so the canvas now holds sixteen colours (four bits a pixel): the 39page's four and up to twelve from pixel art. 40 41> **Try it.** `cargo run -p card --example dump -- /tmp/cards` writes every 42> kind of card to a folder, to look at. 43 44## For the people who maintain it 45 46`png(Card::Home)` is the site's own card. `png(Card::Question { input, said })` 47is a question's: `said` is what Jev answered (`archive::Answer`s), empty for 48a question nobody has asked yet. `png(Card::Code { url, latest })` is the 49code page's, with `Commit` for the latest commit. `WIDTH` and `HEIGHT` are 50also the `og:image` size the page declares. `apps/lmjtfy/src/lib.rs` serves 51it at `/card.png`, and `view.rs` and `view/code.rs` point the pages' 52`og:image` at it. 53 54## In this folder 55 56| Path | What | 57| --- | --- | 58| [src/](src/) | The canvas, the face, and the cards. | 59| [examples/](examples/) | `dump`, which writes every kind of card to a folder. | 60| [src/pixel.rs](src/pixel.rs) | Reads the vendored pixel-icon SVGs into coloured cells, refusing anything but rects and `M H V z` paths. | 61| [Cargo.toml](Cargo.toml) | The crate: `archive`, `font8x8` and `png`. | 62 63← Previous: [Chapter 10½, budget/src/](../budget/src/) · Up: [packages](../) · Next: [Chapter 11½, card/src/](src/) →