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 four colours at two 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 32> **Try it.** `cargo run -p card --example dump -- /tmp/cards` writes every 33> kind of card to a folder, to look at. 34 35## For the people who maintain it 36 37`png(Card::Home)` is the site's own card. `png(Card::Question { input, said })` 38is a question's: `said` is what Jev answered (`archive::Answer`s), empty for 39a question nobody has asked yet. `png(Card::Code { url, latest })` is the 40code page's, with `Commit` for the latest commit. `WIDTH` and `HEIGHT` are 41also the `og:image` size the page declares. `apps/lmjtfy/src/lib.rs` serves 42it at `/card.png`, and `view.rs` and `view/code.rs` point the pages' 43`og:image` at it. 44 45## In this folder 46 47| Path | What | 48| --- | --- | 49| [src/](src/) | The canvas, the face, and the cards. | 50| [examples/](examples/) | `dump`, which writes every kind of card to a folder. | 51| [Cargo.toml](Cargo.toml) | The crate: `archive`, `font8x8` and `png`. | 52 53← Previous: [Chapter 10½, budget/src/](../budget/src/) · Up: [packages](../) · Next: [Chapter 11½, card/src/](src/) →