31:[] 2f:{"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"},{"id":5,"value":"viewof textInput = textarea({width: \"100%\", rows: 4})","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"html`

Copy and paste the result from here:

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

\n $\"\"$ \n

Words

\n`, width: \"100%\", rows: 12})","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"filenames = textInput.split(/\\s+/).filter(s => s)","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"sorted = filenames.sort((a, b) => numericComponent(a) - numericComponent(b)); ","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"function numericComponent(a) {\n return parseInt(a.split(\".\")[0], 10);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"import {textarea, text} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"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"}],"files":"$W31","stdlib":"1","titling":"auto"}