28:null 29:["$","title",null,{"children":"Meme Generator | I001962 | Observable"}] 2e:T6aa,viewof url = { const form = html`

`; form.file.oninput = () => { form.select.value = "Other"; form.value = URL.createObjectURL(form.file.files[0]); }; form.select.onchange = () => { if (form.select.value === "Other") { form.file.click(); } else { form.value = form.select.value; form.dispatchEvent(new CustomEvent("input")); } }; form.select.onchange(); return form; }2f:[] 2c:{"id":"8c7daa6990597edb","slug":"meme-generator","title":"Meme Generator","thumbnail":"9d002a0d793b2a8f1bb758a06cdeb9e47b0f8d82940105ffa35fbf976e0c3e7a","access_level":"public","create_time":"$D2018-12-29T06:40:50.041Z","update_time":"$D2018-12-29T06:43:18.270Z","view_time":null,"first_public_time":"$D2018-12-29T06:44:43.837Z","has_unpublished_edits":null,"fork":{"id":"4c56423769abd096","slug":"meme-generator","title":"Meme Generator","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":1,"starred":false,"owner":{"type":"team","id":"436acea24096daff","login":"i001962","name":"I001962","avatar_url":"https://avatars-next.observableusercontent.com/7212e15f56a82fc2cc6f6e4457694ecaa8dc7341f61c1244b492e2649b21ddc8","tier":"starter_2024"},"version":189,"publish_version":189,"role":null,"authored":false,"authors":[{"type":"individual","id":"3f12d775ca68a2fb","login":"i001962","name":"I001962","avatar_url":"https://avatars-next.observableusercontent.com/7212e15f56a82fc2cc6f6e4457694ecaa8dc7341f61c1244b492e2649b21ddc8","tier":null}],"members":[{"type":"individual","id":"3f12d775ca68a2fb","login":"i001962","name":"I001962","avatar_url":"https://avatars-next.observableusercontent.com/7212e15f56a82fc2cc6f6e4457694ecaa8dc7341f61c1244b492e2649b21ddc8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Meme Generator","cells":[{"id":0,"value":"md`# Meme Generator\n\nI’m sorry. Right click to save or copy the image.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"canvas = {\n const width = image.naturalWidth;\n const height = image.naturalHeight;\n const context = DOM.context2d(width, height, 1);\n context.canvas.style.maxWidth = \"100%\";\n context.drawImage(image, 0, 0);\n context.font = `${fontSize}px ${fontFamily}`;\n context.textAlign = \"center\";\n context.fillStyle = \"#fff\";\n context.lineWidth = 3;\n context.lineJoin = \"round\";\n context.textBaseline = \"top\";\n context.strokeText(toptext, width / 2, height * padding);\n context.fillText(toptext, width / 2, height * padding);\n context.textBaseline = \"bottom\";\n context.strokeText(bottomtext, width / 2, height * (1 - padding));\n context.fillText(bottomtext, width / 2, height * (1 - padding));\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"viewof toptext = textarea({placeholder: \"Enter top text\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"viewof bottomtext = textarea({value: \"memes\", placeholder: \"Enter bottom text\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"viewof fontFamily = {\n const form = html`\n \n \n`;\n form.text.oninput = () => form.value = form.text.value;\n form.select.onchange = () => {\n if (form.select.value === \"Other\") {\n form.text.style.display = \"inline\";\n form.text.select();\n form.value = form.text.value;\n } else {\n form.text.style.display = \"none\";\n form.value = form.select.value;\n }\n form.dispatchEvent(new CustomEvent(\"input\"));\n };\n form.select.onchange();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"viewof fontSize = {\n const form = html`\n \n \n

`;\n form.i.oninput = () => form.o.value = `${form.value = form.i.valueAsNumber}px font-size`;\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"viewof padding = {\n const form = html``;\n form.i.oninput = () => form.o.value = `${((form.value = form.i.valueAsNumber) * 100).toFixed(0)}% padding`;\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"image = new Promise((resolve, reject) => {\n const image = new Image;\n image.src = url;\n image.style.height = \"33px\";\n image.style.display = \"block\";\n image.onload = () => resolve(image);\n image.onerror = reject;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"function* textarea({value = \"\", placeholder = \"Enter text here\"}) {\n const textarea = html``;\n textarea.placeholder = placeholder;\n textarea.value = value;\n textarea.style.display = \"block\";\n textarea.style.boxSizing = \"border-box\";\n textarea.style.width = \"calc(100% + 28px)\";\n textarea.style.font = \"var(--mono_fonts)\";\n textarea.style.border = \"none\";\n textarea.style.padding = \"6px 10px\";\n textarea.style.margin = \"0 -14px\";\n textarea.style.background = \"rgb(247,247,249)\";\n yield textarea;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"