2b:null 2c:["$","title",null,{"children":"Meme Generator | Christopher Pietsch | Observable"}] 31:T64a,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; }32:[] 2f:{"id":"e95849e51cc07821","slug":"meme-generator","title":"Meme Generator","thumbnail":"78ecc7155cdd1b883ee5b6c955b39ce59988ca6168c80273cb65a4a544fcbae0","access_level":"public","create_time":"$D2019-10-02T10:54:18.199Z","update_time":"$D2019-10-02T10:57:21.016Z","view_time":null,"first_public_time":"$D2019-10-02T10:54:58.659Z","fork":{"id":"4c56423769abd096","slug":"meme-generator","title":"Meme Generator","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":0,"starred":false,"owner":{"type":"team","id":"dbaac3ef74ea8f0c","login":"cpietsch","name":"Christopher Pietsch","avatar_url":"https://avatars-next.observableusercontent.com/5c893db7cf5c2699bda61c80eaa28fc9ebd560ec948b9bec441e6eefe34c25f8","tier":"starter_2024"},"version":197,"publish_version":197,"role":null,"authored":false,"authors":[{"type":"individual","id":"42a00b3d53c425cb","login":"cpietsch","name":"Christopher Pietsch","avatar_url":"https://avatars-next.observableusercontent.com/5c893db7cf5c2699bda61c80eaa28fc9ebd560ec948b9bec441e6eefe34c25f8","tier":null}],"members":[{"type":"individual","id":"42a00b3d53c425cb","login":"cpietsch","name":"Christopher Pietsch","avatar_url":"https://avatars-next.observableusercontent.com/5c893db7cf5c2699bda61c80eaa28fc9ebd560ec948b9bec441e6eefe34c25f8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"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"},{"id":3,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"id":86,"value":"viewof toptext = textarea({value: \"one does not simply observe\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":30,"value":"viewof bottomtext = textarea({value: \"the observables\", placeholder: \"Enter bottom text\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"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"},{"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"},{"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"},{"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"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"