[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_197":198,"_199":200},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_69":139,"_41":-7,"_140":-5,"_17":141,"_142":143,"_144":145,"_146":147,"_148":149,"_150":-5,"_151":-5,"_152":153,"_154":49,"_155":156,"_157":26,"_158":-5,"_159":-5,"_160":161},"routes/_app.x.$handle.$name.compare.$branch",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":22,"_23":24,"_25":26,"_27":28,"_29":30,"_31":-5},"handle","jjg","name","placeholdji","branchName","png","project",{"_32":40,"_13":14,"_34":100,"_47":-5,"_101":49,"_50":51,"_102":51,"_103":104,"_105":106,"_107":108,"_109":93,"_110":26,"_111":-5,"_112":94,"_113":114,"_53":54,"_115":-5,"_116":-5,"_117":-5,"_118":-5,"_119":-5,"_120":121,"_122":-5,"_123":-5,"_124":-5,"_125":121,"_126":121,"_127":128,"_129":130,"_131":28,"_48":49},"ahead",17,"behind",2,"diff",{"_62":63,"_64":65,"_66":67},"hasChanges",true,"sourceBranch",{"_41":56,"_13":16,"_32":57,"_39":40,"_43":33,"_44":58,"_59":51,"_60":40,"_61":54,"_55":14,"_52":12},"targetBranch",{"_32":33,"_34":35,"_36":37,"_13":38,"_39":40,"_41":42,"_43":-5,"_44":-5,"_45":46,"_47":-5,"_48":49,"_50":51,"_52":12,"_53":54,"_55":14},"pull","id","5abf7354-2782-11f0-b46e-569c3dd06744","createdAt",["D",1746210127017],"updatedAt",["D",1751126177285],"main","projectId","5abf19ae-2782-11f0-b46e-569c3dd06744","version",26,"forkedBranchId","forkedBranchVersion","lockfileKey","1751126210110-esm.town_v_jjg_placeholdji@26-main","deletedAt","isOwned",false,"privacy","public","userHandle","orgId","636fc787-66cd-4518-95de-3740f42b9de1","projectName",18,"fbd1d9c0-447f-11f0-bf79-76b3cceeab13",24,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","added",[],"deleted",[],"modified",[68],{"_69":70,"_71":72,"_73":74},"path","main.tsx","targetFile",{"_32":92,"_13":70,"_76":93,"_78":-5,"_79":33,"_80":94,"_81":49,"_34":95,"_41":96,"_83":84,"_85":97,"_64":49,"_87":14,"_88":-7,"_69":98,"_90":99},"sourceFile",{"_32":75,"_13":70,"_76":77,"_78":-5,"_79":57,"_80":56,"_81":26,"_34":82,"_41":20,"_83":84,"_85":86,"_64":49,"_87":-5,"_88":-7,"_69":89,"_90":91},"2641e546-5435-11f0-9849-f69ea79377d9","fileId","9623205c-ab4f-44ca-90bc-5e648465edbc","parentId","branchId","branchVersion","latest",["D",1751124770021],"fileType","http","content","import { createCanvas } from \"npm:canvas\";\n\n// Function to check if a string is a valid character\nfunction isValidSymbol(str: string): boolean {\n // Compact regex for Unicode symbols and specific characters\n const symbolRegex =\n /^[\\p{Emoji_Presentation}\\p{Extended_Pictographic}\\p{Symbol}\\p{Math_Symbol}\\p{Other_Symbol}✓✔✕✖➡➢➣➤➥➦➧➨➩➪➫➬➭➮➯⬆⬇⬅➡↑↓←→↔↕↖↗↘↙☀☁☂☃★☆☉☊☋☌☍☎☏⚐⚑⚒⚓⚔⚕⚖⚗⚘⚙⚚⚛⚜⚝⚞⚟]+$/u;\n return symbolRegex.test(str);\n}\n\n// Function to validate and sanitize symbol input\nfunction sanitizeSymbols(input: string): string {\n // Split the input, limit to 3 characters\n const symbols = [...input].filter(isValidSymbol).slice(0, 3);\n\n // If no valid symbols, return default\n return symbols.length > 0 ? symbols.join(\"\") : \"🌈\";\n}\n\n// Cache for the emoji font data\nlet cachedEmojiFont: Uint8Array | null = null;\n\n// Function to load emoji font from CDN\nasync function loadEmojiFont(): Promise {\n if (cachedEmojiFont) {\n return cachedEmojiFont;\n }\n\n try {\n // Load Noto Color Emoji font from Google Fonts or GitHub\n const response = await fetch(\"https://github.com/googlefonts/noto-emoji/raw/main/fonts/NotoColorEmoji.ttf\");\n if (!response.ok) {\n throw new Error(`Failed to fetch emoji font: ${response.status}`);\n }\n cachedEmojiFont = new Uint8Array(await response.arrayBuffer());\n return cachedEmojiFont;\n } catch (error) {\n console.warn(\"Failed to load emoji font, falling back to system fonts:\", error);\n throw error;\n }\n}\n\n// Function to create PNG using deno-canvas with emoji support\nasync function createPngWithEmoji(symbol: string, size: number, color: string, shadow: boolean): Promise {\n const canvas = createCanvas(size, size);\n const ctx = canvas.getContext(\"2d\");\n\n // Try to load emoji font\n try {\n const emojiFont = await loadEmojiFont();\n canvas.loadFont(emojiFont, { family: \"Noto Color Emoji\" });\n } catch (error) {\n console.warn(\"Using fallback font rendering\");\n }\n\n // Set background to transparent\n ctx.clearRect(0, 0, size, size);\n\n // Apply shadow if requested\n if (shadow) {\n ctx.shadowColor = \"rgba(0,0,0,0.3)\";\n ctx.shadowBlur = 3;\n ctx.shadowOffsetX = 2;\n ctx.shadowOffsetY = 2;\n }\n\n // Set font and color\n const fontSize = size * 0.8;\n ctx.font = `${fontSize}px Noto Color Emoji, Apple Color Emoji, Segoe UI Emoji, sans-serif`;\n ctx.fillStyle = color === \"shadow\" ? \"black\" : color;\n ctx.textAlign = \"center\";\n ctx.textBaseline = \"middle\";\n\n // Draw the symbol\n ctx.fillText(symbol, size / 2, size / 2);\n\n // Return PNG buffer\n return canvas.toBuffer();\n}\n\nconst MIN_SIZE = 5;\nconst MAX_SIZE = 500;\n\nexport default async function server(request: Request): Promise {\n const url = new URL(request.url);\n const pathSegments = url.pathname.split(\"/\").filter(Boolean);\n\n // Default values\n let symbol = \"🌈\";\n let size = MAX_SIZE / 2;\n let color = \"black\";\n let shadow = false;\n let format = \"svg\"; // Default format\n\n // Parse path segments if they exist\n if (pathSegments.length >= 1) {\n symbol = sanitizeSymbols(decodeURIComponent(pathSegments[0]));\n }\n if (pathSegments.length >= 2) {\n size = Math.min(Math.max(Number(pathSegments[1]), MIN_SIZE), MAX_SIZE);\n }\n if (pathSegments.length >= 3) {\n color = decodeURI(pathSegments[2]);\n shadow = color === \"shadow\";\n }\n if (pathSegments.length >= 4) {\n shadow = pathSegments[3] === \"shadow\";\n }\n\n // Check for format parameter in query string or file extension\n const formatParam = url.searchParams.get(\"format\");\n if (formatParam === \"png\") {\n format = \"png\";\n } else if (pathSegments[pathSegments.length - 1]?.endsWith(\".png\")) {\n format = \"png\";\n }\n\n // Return PNG if requested\n if (format === \"png\") {\n try {\n const pngData = await createPngWithEmoji(symbol, size, color, shadow);\n return new Response(pngData, {\n headers: {\n \"Content-Type\": \"image/png\",\n \"Cache-Control\": \"public, max-age=3600\",\n },\n });\n } catch (error) {\n console.error(\"PNG generation failed:\", error);\n // Fall through to SVG generation\n }\n }\n\n // Generate SVG (default or fallback)\n const padding = size * 0.1; // 10% padding\n const viewBoxSize = size + (2 * padding);\n\n const svg =\n ``;\n\n return new Response(svg, {\n headers: {\n \"Content-Type\": \"image/svg+xml\",\n \"Cache-Control\": \"public, max-age=3600\",\n },\n });\n}","label","children",[70],"contentHash","8c8744ff1d6096186c7f449fe49a49e24223445b4766fbb87e180b794de66a8e","8d575512-3cb7-11f0-97a2-9e149126039e","5ac1d2f2-2782-11f0-b46e-569c3dd06744",22,["D",1748541949642],19,"// Function to check if a string is a valid character\nfunction isValidSymbol(str: string): boolean {\n // Compact regex for Unicode symbols and specific characters\n const symbolRegex =\n /^[\\p{Emoji_Presentation}\\p{Extended_Pictographic}\\p{Symbol}\\p{Math_Symbol}\\p{Other_Symbol}✓✔✕✖➡➢➣➤➥➦➧➨➩➪➫➬➭➮➯⬆⬇⬅➡↑↓←→↔↕↖↗↘↙☀☁☂☃★☆☉☊☋☌☍☎☏⚐⚑⚒⚓⚔⚕⚖⚗⚘⚙⚚⚛⚜⚝⚞⚟]+$/u;\n return symbolRegex.test(str);\n}\n\n// Function to validate and sanitize symbol input\nfunction sanitizeSymbols(input: string): string {\n // Split the input, limit to 3 characters\n const symbols = [...input].filter(isValidSymbol).slice(0, 3);\n\n // If no valid symbols, return default\n return symbols.length > 0 ? symbols.join(\"\") : \"🌈\";\n}\n\nconst MIN_SIZE = 5;\nconst MAX_SIZE = 500;\n\nexport default async function server(request: Request): Promise {\n const url = new URL(request.url);\n const pathSegments = url.pathname.split(\"/\").filter(Boolean);\n\n // Default values\n let symbol = \"🌈\";\n let size = MAX_SIZE / 2;\n let color = \"black\";\n let shadow = false;\n\n // Parse path segments if they exist\n if (pathSegments.length >= 1) {\n symbol = sanitizeSymbols(decodeURIComponent(pathSegments[0]));\n }\n if (pathSegments.length >= 2) {\n size = Math.min(Math.max(Number(pathSegments[1]), MIN_SIZE), MAX_SIZE);\n }\n if (pathSegments.length >= 3) {\n color = decodeURI(pathSegments[2]);\n shadow = color === \"shadow\";\n }\n if (pathSegments.length >= 4) {\n shadow = pathSegments[3] === \"shadow\";\n }\n\n // Increase viewBox slightly and adjust text positioning\n const padding = size * 0.1; // 10% padding\n const viewBoxSize = size + (2 * padding);\n\n const svg =\n ``;\n\n return new Response(svg, {\n headers: {\n \"Content-Type\": \"image/svg+xml\",\n \"Cache-Control\": \"public, max-age=3600\",\n },\n });\n}",[70],"edba0a82bae52625793044e8de9c9140ad35dda3fc3eb80e73f5116ed4fea2cf",["D",1746210127017],"legacyEnvVars","httpPrivacy","description","Placeholder image service with emojis 🖼️","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/33235103-716b-4686-4591-183b86872500/square512?exp=1789585199&sig=893963125a84fcaf09201a65265b3ae7d7f3600a49c1cd075cd301a56f7dd6f5","userId","900a1ecc-26fd-4771-962a-c13dfb9ef64a","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","valPerm","r","blobPerm","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_138":134},"org",{"_11":12,"_132":-5,"_133":134,"_107":108,"_135":136,"_137":49},"branch","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yYXJGSnhuRlpsMXE1ZnFWbElnbG15WlJKS0UifQ","tier","free","canRestrictVals","profileImageUrl","","adoptOrgId",{"_32":40,"_13":14,"_34":193,"_47":-5,"_101":49,"_50":51,"_102":51,"_103":104,"_105":106,"_107":108,"_109":93,"_110":26,"_111":-5,"_112":94,"_113":114,"_53":54,"_115":-5,"_116":-5,"_117":-5,"_118":-5,"_119":-5,"_120":121,"_122":-5,"_123":-5,"_124":-5,"_125":121,"_126":121,"_127":194,"_129":195,"_131":196,"_48":49},"tree",[186,187],"files",[186,187],"counts",{"_175":114,"_176":177,"_178":114,"_179":180,"_181":182},"contents",[164,165],"file","upstreamProject","upstreamBranch",{"_32":33,"_34":162,"_36":163,"_13":38,"_39":40,"_41":42,"_43":-5,"_44":-5,"_45":46,"_47":-5,"_48":49,"_50":51,"_52":12,"_53":54,"_55":14},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1746210127017],["D",1751126177285],{"_32":168,"_13":169,"_76":170,"_78":-5,"_79":57,"_80":171,"_81":26,"_34":172,"_41":114,"_83":150,"_85":173,"_64":49,"_87":-5,"_69":174},{"_32":75,"_13":70,"_76":77,"_78":-5,"_79":57,"_80":56,"_81":26,"_34":166,"_41":20,"_83":84,"_85":86,"_64":49,"_87":-5,"_69":167},["D",1751124770021],[70],"fbd4cd42-447f-11f0-bf79-76b3cceeab13","README.md","cb9be877-888d-4a5a-88f6-443dde41cc6d",1,["D",1749397692496],"# placeholdji\n> 🖼️ Emjoi placeholder image service\n\n[CodePen Demo ↗️](https://codepen.io/jasongardner/pen/KwpdRxJ)\n\n## Use Case\n1. Emojis are *technically* \"text\" in the browser, but you might need them as an image someday. (e.g. Backgrounds, masks, filtered, fallbacks)\n2. You need a quick, arbitrary placeholder image _with a shape_.\n\n## Usage\n`https://placeholdji.val.run/💎/`\\\n__Use trailing slashes!__\n\n#### Output\n> ![Diamond emoji](https://placeholdji.val.run/💎/)\n\n### Sizes\n__Biggest__ (500)\\\n`https://placeholdji.val.run/🤠/500/`\n> ![Big cowboy](https://placeholdji.val.run/🤠/500/)\n\n__Smallest__ (5)\\\n`https://placeholdji.val.run/🐱/5/`\n> ![Smol kitty](https://placeholdji.val.run/🐱/5/)\n\n__Anything Between__\\\n`https://placeholdji.val.run/👻/256/`\n> ![Ghost emoji](https://placeholdji.val.run/👻/256/)\n\n`https://placeholdji.val.run/🍩/33.333/`\n> ![Ghost emoji](https://placeholdji.val.run/🍩/33.333/)\n\n### Fallback Colors\nThe browser/server may render a single-color symbol from the font instead of an emoji.\nA color string can optionally be provided in the URL to be used by the font.\n\n`https://placeholdji.val.run/⚠️/256/red/`\n> ![Red alert](https://placeholdji.val.run/⚠️/256/red/)\n\n`https://placeholdji.val.run/☀/256/rgb(255,200,0)/`\n> ![Yellow sun](https://placeholdji.val.run/☀/256/rgb(255,200,0)/)\n\n### Shadows\n`https://placeholdji.val.run/🌲/256/shadow/`\n> ![Shady tree](https://placeholdji.val.run/🌲/256/shadow/)\n\n`https://placeholdji.val.run/☆/256/gold/shadow/`\n> ![Shady tree](https://placeholdji.val.run/☆/256/gold/shadow/)",[169],"pulls","branches",3,"forks","envVars",{"_183":114,"_185":114},"connections",{"_183":114,"_184":114},"count","unfilledCount","emptyCount",{"_32":168,"_13":169,"_76":170,"_78":-5,"_79":57,"_80":171,"_81":26,"_34":190,"_41":114,"_83":150,"_85":173,"_64":49,"_87":-5,"_88":191,"_69":192},{"_32":75,"_13":70,"_76":77,"_78":-5,"_79":57,"_80":56,"_81":26,"_34":82,"_41":20,"_83":84,"_85":86,"_64":49,"_87":-5,"_88":188,"_69":189},[],[70],["D",1749397692496],[],[169],["D",1746210127017],{"_11":12,"_138":134},{"_11":12,"_132":-5,"_133":134,"_107":108,"_135":136,"_137":49},{"_41":56,"_13":16,"_32":57,"_39":40,"_43":33,"_44":58,"_59":51,"_60":40,"_61":54,"_55":14,"_52":12},"ctx",{"_127":-5,"_159":230,"_231":232,"_233":234,"_235":49,"_236":49,"_237":49,"_238":26,"_239":-5,"_240":-7,"_241":-7,"_242":114,"_243":49,"_244":49,"_245":-5,"_246":49,"_247":49,"_248":49,"_249":-5},"ENV",{"_201":202,"_203":204,"_205":38,"_206":207,"_208":209,"_210":211,"_212":213,"_214":215,"_216":217,"_218":219,"_220":221,"_222":223,"_224":225,"_226":227,"_228":229},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","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",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Compare

Mergepngintomain

Hmain.tsx+89-1