2f:null 30:["$","title",null,{"children":"Build an HTML page for a sequence of slides or screenshots | Simon Willison | Observable"}] 35:[] 33:{"id":"74032d1827c8e552","slug":"build-an-html-page-for-a-sequence-of-slides-or-screenshots","title":"Build an HTML page for a sequence of slides or screenshots","thumbnail":"abf4dac7474092a6adfcbdbbe786789e4ee721ca675f1e65081bcd48a4849319","access_level":"public","create_time":"$D2021-02-09T17:21:22.485Z","update_time":"$D2021-02-09T18:23:49.103Z","view_time":null,"first_public_time":"$D2021-02-09T17:38:12.883Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"3b974c2db4452cfc","login":"simonw","name":"Simon Willison","avatar_url":"https://avatars-next.observableusercontent.com/78a40181b372a172b86abe69479cab717df036b9cdcbaab5a197e45a76ffb4f3","tier":"starter_2024"},"version":79,"publish_version":79,"role":null,"authored":false,"authors":[{"type":"individual","id":"dc026342127b807b","login":"simonw","name":"Simon Willison","avatar_url":"https://avatars-next.observableusercontent.com/78a40181b372a172b86abe69479cab717df036b9cdcbaab5a197e45a76ffb4f3","tier":null}],"members":[{"type":"individual","id":"dc026342127b807b","login":"simonw","name":"Simon Willison","avatar_url":"https://avatars-next.observableusercontent.com/78a40181b372a172b86abe69479cab717df036b9cdcbaab5a197e45a76ffb4f3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Build an HTML page for a sequence of slides or screenshots","cells":[{"id":0,"value":"md`# Build an HTML page for a sequence of slides or screenshots\n\nUse this tool to generate HTML for pages like this one: https://simonwillison.net/2021/Feb/7/video/\n\nPaste in a newline or space-separated list of filenames, e.g. 1.png 2.png 3.png`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"viewof textInput = textarea({width: \"100%\", rows: 4})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"html`

Copy and paste the result from here:

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"viewof height = text({placeholder: \"Image height\", value: 450})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"viewof width = text({placeholder: \"Image width\", value: 253})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"md`You can customize the template used here:`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"viewof template = textarea({\n value: `\n

\n $\"\"$ \n

Words

\n`, width: \"100%\", rows: 12})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"filenames = textInput.split(/\\s+/).filter(s => s)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"sorted = filenames.sort((a, b) => numericComponent(a) - numericComponent(b)); ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"function numericComponent(a) {\n return parseInt(a.split(\".\")[0], 10);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"import {textarea, text} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"function escapeHtml(unsafe) {\n return unsafe\n .replace(/&/g, \"&\")\n .replace(//g, \">\")\n .replace(/\"/g, \""\")\n .replace(/'/g, \"'\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 34:"$33:body"