[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_172":173,"_174":175},"routes/_app.x.$handle.$name",{"_105":104,"_33":53,"_113":95,"_28":114,"_13":14,"_115":-5,"_11":116,"_117":118,"_119":120,"_121":122,"_123":124,"_21":-5,"_125":-5,"_126":-5,"_127":26,"_128":129,"_130":67,"_131":-5,"_132":-5,"_133":134},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_51":52,"_33":53,"_38":54,"_55":-5,"_56":26,"_57":58,"_59":58,"_60":61,"_62":63,"_18":64,"_65":46,"_66":67,"_68":-5,"_69":70,"_71":72,"_73":74,"_75":-5,"_76":-5,"_77":-5,"_78":-5,"_79":-5,"_80":81,"_82":-5,"_83":-5,"_84":-5,"_85":81,"_86":81,"_87":88,"_89":90,"_91":92,"_93":26},"version",25,"changes",[19,20],"aiChatInfo","userId",{"_21":43,"_23":44,"_25":26,"_27":26,"_28":45,"_30":45},{"_21":22,"_23":24,"_25":26,"_27":26,"_28":29,"_30":29},"file",{"_31":32,"_33":29,"_34":21,"_35":37,"_38":39,"_40":14,"_41":42,"_25":26},"previous",{"_31":32,"_33":29,"_34":21,"_35":36},"deleted",false,"deletedHere","path","README.md","latestPath","fileId","e159454e-3cb2-11f0-bf97-9e149126039e","name","fileType","content","# 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/)","# 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### Filters\nSome SVG filter presets have been created.\\\nUse the following preset names in a URL to apply the filter's effects to the placeholder:\n\n- __shadow__ - Enhanced drop shadow with better opacity\n- __glow__ - Soft glow effect around the symbol\n- __neon__ - Multi-layered neon glow effect\n- __emboss__ - 3D embossed appearance using convolution matrix\n- __threed__ - Simple 3D effect with offset shadow\n- __blur__ - Gaussian blur effect\n- __outline__ - Black outline around the symbol\n- __vintage__ - Sepia-toned vintage color effect\n- __metallic__ - Chrome/metallic appearance with specular lighting\n- __fire__ - Red/orange fire-like color transformation\n- __ice__ - Cool blue ice-like effect\n- __rainbow__ - RGB color separation effect\n- __hologram__ - Translucent holographic appearance\n\n#### Shadow\n`https://placeholdji.val.run/🔥/100/red/shadow/`\n> ![Fire with shadow](https://placeholdji.val.run/🔥/100/red/shadow/)\n\n`https://placeholdji.val.run/⭐/150/gold/shadow/`\n> ![Star with shadow](https://placeholdji.val.run/⭐/150/gold/shadow/)\n\n#### Glow\n`https://placeholdji.val.run/💎/120/blue/glow/`\n> ![Diamond with glow](https://placeholdji.val.run/💎/120/blue/glow/)\n\n`https://placeholdji.val.run/🌟/100/yellow/glow/`\n> ![Star with glow](https://placeholdji.val.run/🌟/100/yellow/glow/)\n\n#### Neon\n`https://placeholdji.val.run/⚡/150/cyan/neon/`\n> ![Lightning with neon](https://placeholdji.val.run/⚡/150/cyan/neon/)\n\n`https://placeholdji.val.run/🎯/120/magenta/neon/`\n> ![Target with neon](https://placeholdji.val.run/🎯/120/magenta/neon/)\n\n#### Emboss\n`https://placeholdji.val.run/🛡️/140/silver/emboss/`\n> ![Shield with emboss](https://placeholdji.val.run/🛡️/140/silver/emboss/)\n\n`https://placeholdji.val.run/⚙️/100/gray/emboss/`\n> ![Gear with emboss](https://placeholdji.val.run/⚙️/100/gray/emboss/)\n\n#### 3D Effect\n`https://placeholdji.val.run/🎲/130/white/threed/`\n> ![Dice with 3D effect](https://placeholdji.val.run/🎲/130/white/threed/)\n\n`https://placeholdji.val.run/📦/110/brown/threed/`\n> ![Package with 3D effect](https://placeholdji.val.run/📦/110/brown/threed/)\n\n#### Blur\n`https://placeholdji.val.run/👻/140/white/blur/`\n> ![Ghost with blur](https://placeholdji.val.run/👻/140/white/blur/)\n\n`https://placeholdji.val.run/💨/100/lightgray/blur/`\n> ![Wind with blur](https://placeholdji.val.run/💨/100/lightgray/blur/)\n\n#### Outline\n`https://placeholdji.val.run/💡/120/yellow/outline/`\n> ![Lightbulb with outline](https://placeholdji.val.run/💡/120/yellow/outline/)\n\n`https://placeholdji.val.run/🔑/100/gold/outline/`\n> ![Key with outline](https://placeholdji.val.run/🔑/100/gold/outline/)\n\n#### Vintage\n`https://placeholdji.val.run/📸/150/vintage/`\n> ![Camera with vintage filter](https://placeholdji.val.run/📸/150/vintage/)\n\n`https://placeholdji.val.run/🎭/120/vintage/`\n> ![Theater masks with vintage filter](https://placeholdji.val.run/🎭/120/vintage/)\n\n#### Metallic\n`https://placeholdji.val.run/⚔️/140/metallic/`\n> ![Sword with metallic effect](https://placeholdji.val.run/⚔️/140/metallic/)\n\n`https://placeholdji.val.run/🏆/130/metallic/`\n> ![Trophy with metallic effect](https://placeholdji.val.run/🏆/130/metallic/)\n\n#### Fire\n`https://placeholdji.val.run/🔥/120/fire/`\n> ![Fire with fire filter](https://placeholdji.val.run/🔥/120/fire/)\n\n`https://placeholdji.val.run/🌶️/100/fire/`\n> ![Pepper with fire filter](https://placeholdji.val.run/🌶️/100/fire/)\n\n#### Ice\n`https://placeholdji.val.run/🐖/130/ice/`\n> ![Snowflake with ice filter](https://placeholdji.val.run/🐖/130/ice/)\n\n`https://placeholdji.val.run/🐷/110/ice/`\n> ![Ice cube with ice filter](https://placeholdji.val.run/🐷/110/ice/)\n\n#### Rainbow\n`https://placeholdji.val.run/🌈/150/rainbow/`\n> ![Rainbow with rainbow filter](https://placeholdji.val.run/🌈/150/rainbow/)\n\n`https://placeholdji.val.run/🦄/120/rainbow/`\n> ![Unicorn with rainbow filter](https://placeholdji.val.run/🦄/120/rainbow/)\n\n#### Hologram\n`https://placeholdji.val.run/👽/140/hologram/`\n> ![Alien with hologram filter](https://placeholdji.val.run/👽/140/hologram/)\n\n`https://placeholdji.val.run/🛸/120/hologram/`\n> ![UFO with hologram filter](https://placeholdji.val.run/🛸/120/hologram/)","createdAt",["D",1751125675526],"branchVersion","branchId","5abf7354-2782-11f0-b46e-569c3dd06744",{"_31":46,"_33":45,"_34":47,"_35":49,"_38":50,"_40":14,"_41":42,"_25":26},{"_31":46,"_33":45,"_34":47,"_35":48},"main.tsx","5ac1d2f2-2782-11f0-b46e-569c3dd06744","http","// 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}","// 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// Function to generate SVG filter definitions\nfunction generateFilters(): string {\n return `\n \n \n \n \n\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n `;\n}\n\n// Function to get valid filter names\nfunction getValidFilters(): string[] {\n return [\n \"shadow\",\n \"glow\",\n \"neon\",\n \"emboss\",\n \"threed\",\n \"blur\",\n \"outline\",\n \"vintage\",\n \"metallic\",\n \"fire\",\n \"ice\",\n \"rainbow\",\n \"hologram\",\n ];\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 filter = \"\";\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 const param3 = decodeURI(pathSegments[2]).toLowerCase();\n if (getValidFilters().includes(param3)) {\n filter = param3;\n } else {\n color = decodeURI(pathSegments[2]);\n }\n }\n if (pathSegments.length >= 4) {\n const param4 = pathSegments[3].toLowerCase();\n if (getValidFilters().includes(param4)) {\n filter = param4;\n }\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}",["D",1751125675526],"id","5abf19ae-2782-11f0-b46e-569c3dd06744","placeholdji",["D",1746210127017],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Placeholder image service with emojis 🖼️","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/33235103-716b-4686-4591-183b86872500/square512?exp=1789559999&sig=fa3425452aac163409987d7f278d61940151e451e573f5df365abbedf48524c7","900a1ecc-26fd-4771-962a-c13dfb9ef64a","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion",22,"likeCount",0,"orgId","636fc787-66cd-4518-95de-3740f42b9de1","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","valPerm","r","blobPerm","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_105":104,"_112":108},"org",{"_105":104,"_106":-5,"_107":108,"_18":64,"_109":110,"_111":26},"branch",{"_13":94,"_33":95,"_51":42,"_96":52,"_97":-5,"_98":-5,"_99":-5,"_100":-5,"_101":-5,"_102":53,"_103":104},"isOwned",26,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","jjg","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yYXJGSnhuRlpsMXE1ZnFWbElnbG15WlJKS0UifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_51":52,"_33":53,"_38":168,"_55":-5,"_56":26,"_57":58,"_59":58,"_60":61,"_62":63,"_18":64,"_65":46,"_66":67,"_68":-5,"_69":70,"_71":72,"_73":74,"_75":-5,"_76":-5,"_77":-5,"_78":-5,"_79":-5,"_80":81,"_82":-5,"_83":-5,"_84":-5,"_85":81,"_86":81,"_87":169,"_89":170,"_91":171,"_93":26},"tree",[159,160],"files",[159,160],"counts",{"_148":72,"_149":150,"_151":72,"_152":153,"_154":155},"contents",[135,136],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_51":144,"_33":29,"_31":32,"_138":-5,"_41":42,"_40":14,"_139":26,"_38":145,"_13":146,"_34":21,"_35":37,"_25":26,"_142":-5,"_28":147},{"_51":137,"_33":45,"_31":46,"_138":-5,"_41":42,"_40":14,"_139":67,"_38":140,"_13":141,"_34":47,"_35":49,"_25":26,"_142":53,"_28":143},"41fb3394-5437-11f0-b945-f69ea79377d9","parentId","latest",["D",1751125675526],20,"label",[45],"41fb2084-5437-11f0-b945-f69ea79377d9",["D",1751125675526],4,[29],"pulls","branches",3,"forks","envVars",{"_156":72,"_158":72},"connections",{"_156":72,"_157":72},"count","unfilledCount","emptyCount",{"_51":144,"_33":29,"_31":32,"_138":-5,"_41":42,"_40":14,"_139":26,"_38":165,"_13":146,"_34":21,"_35":37,"_25":26,"_142":-5,"_162":166,"_28":167},{"_51":137,"_33":45,"_31":46,"_138":-5,"_41":42,"_40":14,"_139":67,"_38":161,"_13":141,"_34":47,"_35":49,"_25":26,"_142":53,"_162":163,"_28":164},["D",1751125675526],"children",[],[45],["D",1751125675526],[],[29],["D",1746210127017],{"_105":104,"_112":108},{"_105":104,"_106":-5,"_107":108,"_18":64,"_109":110,"_111":26},{"_13":94,"_33":95,"_51":42,"_96":52,"_97":-5,"_98":-5,"_99":-5,"_100":-5,"_101":-5,"_102":53,"_103":104},"ctx",{"_87":-5,"_132":205,"_206":207,"_208":209,"_210":26,"_211":26,"_212":26,"_213":67,"_214":-5,"_215":-7,"_216":-7,"_217":72,"_218":26,"_219":26,"_220":-5,"_221":26,"_222":26,"_223":26,"_224":-5},"ENV",{"_176":177,"_178":179,"_180":95,"_181":182,"_183":184,"_185":186,"_187":188,"_189":190,"_191":192,"_193":194,"_195":196,"_197":198,"_199":200,"_201":202,"_203":204},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","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"]

Diff · v25