30:T9c2,md`# Social card builder - Observable edition Back in the day, NPR Visuals and Vox both made word-image ("meme") generator tools. NPR's was turned into a package called Lunchbox. These tools serve a critical media need, but they're now technologicially out of date. They were blessedly low on infrastructure requirements, but still necessitated static hosting. They also tended to struggle with high-resolution output and custom fonts, particularly when trying to combine the two. Here's an attempt at a more modern version. We're developing it on Observable, which could be a good solution for small and micro media organizations that rely heavily on third party platforms. Using Observable's embed mechanism, it's possible to inject into an existing site infrastructure. If it works well, The Marshall Project may consider adapting the tool to our graphics rig and hosting as an internal page in our CMS. This version draws pure SVG, then uses the excellent [canvg](https://github.com/canvg/canvg) to rasterize the SVG. Currently, it barely works but is functional enough to prove the concept. Hacking on this could be a fun team exercise for The Marshall Project data + digital teams. **Fork this notebook, make some fixes, and merge it back!** Features/requirements + TODOs: * **Custom font support**: Fully operational. * **High resolution output (oversampling)**: Fully operational, but poorly factored. * **Functional word wrapping**: Not even remotely operational, this needs a lot of attention. * **Embedded images such as logos**: There's commented-out code in the main SVG rendering routine that can add an external bitmap image. But when we do that, the png export stops working in a particularly mysterious way that may be an Observable bug. This is a big and important mystery for this project. * **Download button**: Not functional. Should be easy, but haven't figured it out. But for now, the native Observable png export mechanism works fine. * **Flexible layout/card elements**: This could be hard because of the SVG drawing mechanism; however if it's well documented, should be quite easy for someone skilled at SVG to adapt. * **Smart text fitting and aspect ratio**: Perhaps more of a nice-to-have, this will depend on word wrapping behavior. * **Reconcile new-school input styling with color picker input styling**: The color picker comes from Jeremy Ashkenas' library, and isn't nearly as slickly styled as the new standard library inputs provided by Observable. `31:T7c3,// Render the svg quoteSvg = { const svgEl = html` `; const svg = d3.select(svgEl); // const svg = d3 // .create("svg") // .attr("width", renderedWidth) // .attr("height", renderedHeight); // Explicitly set a background rectangle to effectively set a background // color. Otherwise, the rasterizer makes a transparent background. const bg = svg .append("rect") .attr("width", renderedWidth) .attr("height", renderedHeight) .attr("fill", backgroundColor); svg .append("g") .append("text") .attr("font-size", `${renderedQuoteSize}px`) .attr("fill", textColor) .attr("font-weight", 900) .attr("font-family", "Roboto, sans-serif") //.attr("font-family", "Orelega One, sans-serif") .attr("x", (d) => renderedPadding) .attr("y", (d) => renderedQuoteSize + renderedPadding) .selectAll("tspan") .data(quoteLines) .join("tspan") .attr("x", (d) => renderedPadding) .attr("y", (d) => renderedQuoteSize + renderedPadding) .attr("dx", 0) .attr("dy", (d, i) => i * renderedLineHeight) .text((d) => d); svg .append("g") .append("text") .attr("font-size", `${renderedQuoteSize}px`) .attr("fill", textColor) .attr("font-weight", 900) .attr("font-family", "Roboto, sans-serif") //.attr("font-family", "Orelega One, sans-serif") .attr("x", (d) => renderedPadding) .attr("y", (d) => renderedHeight - renderedPadding) .text((d) => `— ${quoteAuthor}`); return svg.node(); }32:[{"id":"d3cb1ee8a274e37518019767365ea0a292e477448d90761ac7624c2460ed556f2fb377f47735fdcc7cf2d716b498b40a6c347f6136734d3a2346c16f535a03e0","href":"https://static.observableusercontent.com/files/d3cb1ee8a274e37518019767365ea0a292e477448d90761ac7624c2460ed556f2fb377f47735fdcc7cf2d716b498b40a6c347f6136734d3a2346c16f535a03e0","name":"golgotha@1.png","type":"image/png","lastModified":1627844847942.102,"size":1844}] 2e:{"title":"Social card builder - Observable edition","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":333,"value":"md`# Make and preview the card`","pinned":false,"hidden":false,"mode":"ojs"},{"id":370,"value":"// downloadButton = md`\n// Click the button below to download \\`${downloadFilename}\\`. You'll need to click twice.\n\n// ${DOM.download(\n// async () => await rasterize(canvasImage),\n// downloaddFilename,\n// `Prepare for download`\n// )}\n\n// ---\n// `\n\ndownloadButton = DOM.download(\n rasterize(canvasImage),\n downloadFilename,\n `Download ${downloadFilename}`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"viewof quoteText = Inputs.textarea({\n label: \"Text\",\n rows: 5,\n value: `For God so loved the world, that he gave his only begotten Son, that whosoever believeth in him should not perish, but have everlasting life.`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"viewof quoteAuthor = Inputs.text({\n label: \"Attribution\",\n value: `John⁠ 3:16`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"\n

${canvasImage}

\n","pinned":false,"hidden":false,"mode":"html"},{"id":927,"value":"viewof quotationMarks = Inputs.radio([\"en\", null, \"ru\"], {\n value: null,\n format: (x) => (!x ? \"„Лапки“\" : x === \"en\" ? \"“English”\" : \"«Ёлочки»\"),\n label: \"Quotation marks\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"viewof backgroundColor = Inputs.color({\n value: \"#3a8276\",\n label: \"Background color\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"viewof textColor = Inputs.color({ value: \"#ffffff\", label: \"Text color\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"viewof quoteSize = Inputs.range([8, 80], {\n value: 32,\n step: 1,\n label: \"Font size (px) (this doesn't work right)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"viewof lineHeightMult = Inputs.range([0, 2.5], {\n value: 1.5,\n step: 0.1,\n label: \"Line height\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"viewof padding = Inputs.range([0, 100], {\n value: 40,\n step: 1,\n label: \"Padding (px)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":120,"value":"lineHeight = quoteSize * lineHeightMult","pinned":false,"hidden":false,"mode":"ojs"},{"id":458,"value":"md`# Rendering configuration`","pinned":false,"hidden":false,"mode":"ojs"},{"id":402,"value":"downloadFilename = `${slugify(\n quoteText.toLowerCase().split(\" \").slice(0, 6).join(\"-\")\n)}.png`","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"// Set the size of the oversampled canvas. Oversampling currently hardcoded as 4x;\n// all px units are relative to an 800px wide canvas that is rendered 4x larger.\nbaseWidth = 840","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"sizeMultiplier = 2.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"renderedWidth = Math.round(baseWidth * sizeMultiplier) + 250","pinned":false,"hidden":false,"mode":"ojs"},{"id":427,"value":"renderedHeight = Math.round((quoteLines.length + 1) * renderedLineHeight) +\n renderedPadding * 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":440,"value":"renderedQuoteSize = quoteSize * sizeMultiplier","pinned":false,"hidden":false,"mode":"ojs"},{"id":436,"value":"renderedLineHeight = lineHeightMult * renderedQuoteSize","pinned":false,"hidden":false,"mode":"ojs"},{"id":437,"value":"renderedPadding = padding * sizeMultiplier","pinned":false,"hidden":false,"mode":"ojs"},{"id":330,"value":"md`# Render SVG & canvas for card`","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"// Convert SVG to canvas\nmutable canvasImage = {\n const canvas = html`