[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_151":152,"_153":154},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_113":-5,"_20":114,"_22":115,"_116":117,"_118":119,"_26":120,"_24":121,"_122":-5,"_123":-5,"_124":51,"_125":126,"_127":42,"_128":-5,"_129":-5,"_130":131},"routes/_app.x.$handle.$name.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":-5,"_29":-5,"_30":-5,"_31":-5},"handle","itseieio","name","opengraphImageCreator","branchName","main","version","path","main.tsx","project",{"_32":59,"_13":14,"_43":60,"_61":-5,"_62":51,"_63":64,"_65":64,"_66":-5,"_67":-5,"_68":69,"_70":35,"_71":42,"_72":-5,"_73":-5,"_74":75,"_76":77,"_78":-5,"_79":-5,"_80":-5,"_81":-5,"_82":83,"_84":83,"_85":86,"_87":86,"_88":86,"_89":83,"_90":83,"_91":92,"_93":94,"_95":96,"_97":51},"tree",[54],"file",{"_32":33,"_13":19,"_34":35,"_36":-5,"_37":38,"_39":40,"_41":42,"_43":44,"_17":45,"_46":47,"_48":49,"_50":51,"_52":-5,"_18":53},"contents",[],"upstream","pull","ahead","behind","id","c3d15d58-26c9-11f0-9439-569c3dd06744","fileId","c3a79694-26c9-11f0-9439-569c3dd06744","parentId","branchId","c3a48f12-26c9-11f0-9439-569c3dd06744","branchVersion",7,"latest",true,"createdAt",["D",1733764380272],6,"fileType","http","content","/** @jsxImportSource https://esm.sh/react */\nimport React, { useState, useRef, useEffect } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\n\n// List of web-safe and popular fonts, now including monospace\nconst FONT_FAMILIES = [\n 'Arial', \n 'Helvetica', \n 'Times New Roman', \n 'Courier New', \n 'Verdana', \n 'Georgia', \n 'Palatino', \n 'Garamond', \n 'Bookman', \n 'Comic Sans MS', \n 'Trebuchet MS', \n 'Arial Black', \n 'Impact',\n 'Courier',\n 'Lucida Console',\n 'Monaco',\n 'Monospace'\n];\n\n// Gradient types\nconst GRADIENT_TYPES = [\n 'linear',\n 'radial'\n];\n\ninterface TextNode {\n id: string;\n text: string;\n x: number;\n y: number;\n fontSize: number;\n fontFamily: string;\n color: string;\n}\n\ninterface BackgroundConfig {\n type: 'solid' | 'gradient';\n color1: string;\n color2?: string;\n gradientType?: 'linear' | 'radial';\n angle?: number;\n}\n\nfunction App() {\n const [backgroundImage, setBackgroundImage] = useState(null);\n const [backgroundConfig, setBackgroundConfig] = useState({\n type: 'gradient',\n color1: 'hsl(240, 23%, 10%)',\n color2: 'hsl(240, 26%, 13%)',\n gradientType: 'linear',\n angle: 90\n });\n const [textNodes, setTextNodes] = useState([]);\n const [draggedNode, setDraggedNode] = useState(null);\n const [selectionOffset, setSelectionOffset] = useState<{ x: number, y: number } | null>(null);\n const canvasRef = useRef(null);\n\n const handleImageUpload = (e: React.ChangeEvent) => {\n const file = e.target.files?.[0];\n if (file) {\n const reader = new FileReader();\n reader.onload = (event) => {\n setBackgroundImage(event.target?.result as string);\n };\n reader.readAsDataURL(file);\n }\n };\n\n const addTextNode = () => {\n const newNode: TextNode = {\n id: `text-${Date.now()}`,\n text: \"New Text\",\n x: 600,\n y: 315,\n fontSize: 72,\n fontFamily: 'Arial',\n color: 'hsl(8, 37%, 88%)'\n };\n setTextNodes([...textNodes, newNode]);\n };\n\n const updateTextNode = (id: string, updates: Partial) => {\n setTextNodes(textNodes.map(node => \n node.id === id ? { ...node, ...updates } : node\n ));\n };\n\n const centerTextHorizontally = (id: string) => {\n const canvas = canvasRef.current;\n if (!canvas) return;\n\n const ctx = canvas.getContext('2d');\n if (!ctx) return;\n\n setTextNodes(textNodes.map(node => {\n if (node.id === id) {\n // Set font to match the node's configuration\n ctx.font = `${node.fontSize}px ${node.fontFamily}`;\n \n // Measure the text width\n const textMetrics = ctx.measureText(node.text);\n \n // Calculate the x-coordinate to center the text\n // Subtract half the text width from the canvas center\n const centeredX = (canvas.width / 2) - (textMetrics.width / 2);\n \n return { ...node, x: centeredX };\n }\n return node;\n }));\n };\n\n const centerTextVertically = (id: string) => {\n const canvas = canvasRef.current;\n if (!canvas) return;\n\n const ctx = canvas.getContext('2d');\n if (!ctx) return;\n\n setTextNodes(textNodes.map(node => \n node.id === id ? { ...node, y: canvas.height / 2 } : node\n ));\n };\n\n const removeTextNode = (id: string) => {\n setTextNodes(textNodes.filter(node => node.id !== id));\n };\n\n const startDrag = (id: string, e: React.MouseEvent) => {\n setDraggedNode(id);\n const canvas = canvasRef.current;\n if (!canvas) return;\n\n const rect = canvas.getBoundingClientRect();\n const scaleX = canvas.width / rect.width;\n const scaleY = canvas.height / rect.height;\n\n const mouseX = (e.clientX - rect.left) * scaleX;\n const mouseY = (e.clientY - rect.top) * scaleY;\n\n const node = textNodes.find(n => n.id === id);\n if (node) {\n setSelectionOffset({\n x: mouseX - node.x,\n y: mouseY - node.y\n });\n }\n };\n\n const endDrag = () => {\n setDraggedNode(null);\n };\n\n const handleMouseMove = (e: React.MouseEvent) => {\n if (!draggedNode) return;\n \n const canvas = canvasRef.current;\n if (!canvas) return;\n\n const rect = canvas.getBoundingClientRect();\n const scaleX = canvas.width / rect.width;\n const scaleY = canvas.height / rect.height;\n\n const x = (e.clientX - rect.left) * scaleX;\n const y = (e.clientY - rect.top) * scaleY;\n\n const offsetX = selectionOffset ? selectionOffset.x : 0;\n const offsetY = selectionOffset ? selectionOffset.y : 0;\n\n setTextNodes(textNodes.map(node => \n node.id === draggedNode ? { ...node, x: x - offsetX, y: y - offsetY } : node\n ));\n };\n\n const createGradient = (ctx: CanvasRenderingContext2D) => {\n const { type, color1, color2, gradientType, angle } = backgroundConfig;\n \n if (type === 'solid') {\n ctx.fillStyle = color1;\n ctx.fillRect(0, 0, 1200, 630);\n return;\n }\n\n if (!color2) return;\n\n if (gradientType === 'linear') {\n const gradient = ctx.createLinearGradient(\n angle === 90 ? 0 : 1200, \n angle === 90 ? 630 : 0, \n angle === 90 ? 1200 : 0, \n angle === 90 ? 0 : 630\n );\n gradient.addColorStop(0, color1);\n gradient.addColorStop(1, color2);\n ctx.fillStyle = gradient;\n } else {\n const gradient = ctx.createRadialGradient(600, 315, 10, 600, 315, 800);\n gradient.addColorStop(0, color1);\n gradient.addColorStop(1, color2);\n ctx.fillStyle = gradient;\n }\n\n ctx.fillRect(0, 0, 1200, 630);\n };\n\n useEffect(() => {\n const canvas = canvasRef.current;\n if (!canvas) return;\n\n const ctx = canvas.getContext('2d');\n if (!ctx) return;\n\n // Clear and create background\n createGradient(ctx);\n\n // Draw background image if uploaded\n if (backgroundImage) {\n const img = new Image();\n img.onload = () => {\n // Scale and center image\n const scale = Math.max(1200 / img.width, 630 / img.height);\n const width = img.width * scale;\n const height = img.height * scale;\n const x = (1200 - width) / 2;\n const y = (630 - height) / 2;\n \n ctx.drawImage(img, x, y, width, height);\n \n // Draw text nodes\n textNodes.forEach(node => {\n ctx.fillStyle = node.color;\n ctx.font = `${node.fontSize}px ${node.fontFamily}`;\n ctx.textAlign = 'left';\n ctx.fillText(node.text, node.x, node.y);\n });\n };\n img.src = backgroundImage;\n } else {\n // Draw text nodes without background image\n textNodes.forEach(node => {\n ctx.fillStyle = node.color;\n ctx.font = `${node.fontSize}px ${node.fontFamily}`;\n ctx.textAlign = 'left';\n ctx.fillText(node.text, node.x, node.y);\n });\n }\n }, [backgroundImage, backgroundConfig, textNodes]);\n\n const downloadImage = () => {\n const canvas = canvasRef.current;\n if (!canvas) return;\n\n const link = document.createElement('a');\n link.download = 'opengraph-image.png';\n link.href = canvas.toDataURL('image/png');\n link.click();\n };\n\n return (\n

OpenGraph Image Generator

\n \n

\n \n \n \n\n {backgroundConfig.type === 'solid' && (\n setBackgroundConfig({\n ...backgroundConfig, \n color1: e.target.value\n })}\n />\n )}\n\n {backgroundConfig.type === 'gradient' && (\n <>\n setBackgroundConfig({\n ...backgroundConfig, \n color1: e.target.value\n })}\n />\n setBackgroundConfig({\n ...backgroundConfig, \n color2: e.target.value\n })}\n />\n \n {backgroundConfig.gradientType === 'linear' && (\n \n )}\n \n )}\n \n \n

\n\n {textNodes.map((node) => (\n

\n updateTextNode(node.id, { text: e.target.value })}\n />\n \n updateTextNode(node.id, { color: e.target.value })}\n />\n updateTextNode(node.id, { fontSize: Number(e.target.value) })}\n min=\"12\"\n max=\"200\"\n />\n \n \n \n

\n ))}\n\n \n\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n return new Response(`\n \n \n OpenGraph Image Generator\n \n \n \n

\n \n \n \n \n `, {\n headers: { \"content-type\": \"text/html\" }\n });\n}","deleted",false,"label",[19],{"_32":33,"_13":19,"_34":35,"_36":-5,"_37":38,"_39":40,"_41":42,"_43":55,"_17":45,"_46":47,"_48":-5,"_50":51,"_52":-5,"_56":57,"_18":58},["D",1733764380272],"children",[],[19],"c3a44200-26c9-11f0-9439-569c3dd06744",["D",1746130846106],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","082cb5d7-5173-406f-ac20-30ff6583fe9b","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",2,"orgId","411910d4-7a11-4871-b434-2573b253a103","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_112":108},"org",{"_11":12,"_106":-5,"_107":108,"_68":69,"_109":110,"_111":51},"branch",{"_17":40,"_13":16,"_32":38,"_98":59,"_99":-5,"_100":-5,"_101":-5,"_102":-5,"_103":-5,"_104":14,"_105":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yaFdXRFlnVDZ0aGFFSEU3eXdoN0FKYzFHR0cifQ","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_32":59,"_13":14,"_43":147,"_61":-5,"_62":51,"_63":64,"_65":64,"_66":-5,"_67":-5,"_68":69,"_70":35,"_71":42,"_72":-5,"_73":-5,"_74":75,"_76":77,"_78":-5,"_79":-5,"_80":-5,"_81":-5,"_82":83,"_84":83,"_85":86,"_87":86,"_88":86,"_89":83,"_90":83,"_91":148,"_93":149,"_95":150,"_97":51},[144],"files",[144],"counts",{"_133":134,"_135":134,"_136":134,"_137":138,"_139":140},[],{"_32":33,"_13":19,"_34":35,"_36":-5,"_37":38,"_39":40,"_41":42,"_43":44,"_17":45,"_46":47,"_48":49,"_50":51,"_52":-5,"_18":132},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},[19],"pulls",0,"branches","forks","envVars",{"_141":134,"_143":134},"connections",{"_141":134,"_142":134},"count","unfilledCount","emptyCount",{"_32":33,"_13":19,"_34":35,"_36":-5,"_37":38,"_39":40,"_41":42,"_43":55,"_17":45,"_46":47,"_48":-5,"_50":51,"_52":-5,"_56":145,"_18":146},[],[19],["D",1746130846106],{"_11":12,"_112":108},{"_11":12,"_106":-5,"_107":108,"_68":69,"_109":110,"_111":51},{"_17":40,"_13":16,"_32":38,"_98":59,"_99":-5,"_100":-5,"_101":-5,"_102":-5,"_103":-5,"_104":14,"_105":12},"ctx",{"_91":-5,"_184":185,"_129":186,"_187":188,"_189":190,"_191":51,"_192":51,"_193":51,"_194":42,"_195":-5,"_196":-7,"_197":-7,"_198":134,"_199":51,"_200":51,"_201":-5},"ENV",{"_155":156,"_157":158,"_159":16,"_160":161,"_162":163,"_164":165,"_166":167,"_168":169,"_170":171,"_172":173,"_174":175,"_176":177,"_178":179,"_180":181,"_182":183},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","062e3653a6c832c70f878fb5d69af4bb53420e71","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town","aiChatModels",[202,203,204,205,206],[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","navCollapsed","currentOrgId",{"_207":230,"_52":231,"_210":232,"_66":233,"_213":42,"_214":42,"_215":216,"_217":42},{"_207":226,"_52":227,"_210":228,"_66":229,"_213":42,"_214":42,"_215":216,"_217":51},{"_207":222,"_52":223,"_210":224,"_66":225,"_213":42,"_214":42,"_215":216,"_217":51},{"_207":218,"_52":219,"_210":220,"_66":221,"_213":42,"_214":42,"_215":216,"_217":51},{"_207":208,"_52":209,"_210":211,"_66":212,"_213":42,"_214":42,"_215":216,"_217":51},"value","fable","Claude Fable 5.1","shortLabel","Fable","Most capable; 2× Opus pricing","imageInput","thinking","contextWindowSize",1000000,"isDefault","opus55","Claude Opus 5.5","Opus","Highly capable for complex work","sonnet55","Claude Sonnet 5.5","Sonnet","Balanced speed and capability","haiku55","Claude Haiku 5.5","Haiku 5.5","Fast; good for straightforward edits","deepseekflash","DeepSeek V4.1 Flash","DeepSeek Flash","Smart and very cheap"]