[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_193":194,"_195":196},"routes/_app.x.$handle.$name",{"_103":102,"_32":45,"_112":91,"_27":55,"_13":14,"_113":-5,"_11":114,"_115":116,"_117":118,"_119":120,"_121":122,"_20":-5,"_123":-5,"_124":125,"_126":25,"_127":128,"_129":60,"_130":-5,"_131":-5,"_132":133},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":55,"_18":56,"_57":58,"_59":60,"_61":60,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":72,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":84,"_85":86,"_87":88,"_89":25},"version",7,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.ts","latestPath","fileId","01997713-a841-7736-8a7e-1e818554e331","name","fileType","http","content","import MD5 from \"npm:js-md5\";\nimport chroma from \"npm:chroma-js\";\n\nexport default async function (req: Request): Promise {\n const url = new URL(req.url);\n const name = url.searchParams.get(\"name\");\n const svg = createIdenticon({\n name,\n size: 512,\n });\n \n return new Response(svg, {\n headers: {\n \"Content-Type\": \"image/svg+xml\",\n \"Cache-Control\": \"max-age=3600\",\n },\n });\n}\n\nconst RESOLUTION = 5;\nconst SIZE = 256;\nconst VIEWBOX = `0 0 ${SIZE} ${SIZE}`;\nconst CELL = SIZE / (RESOLUTION + 4);\nconst OFFSET = CELL * 2;\n\nfunction createIdenticon ({ name, background, size = 256 }: {\n name: string;\n background: boolean;\n size: number;\n}) {\n const hash = MD5(name ?? \"\");\n const base = \"#\" + hash.substring(0, 6);\n const color = chroma(base).desaturate(1).hex();\n const bg = chroma(base).desaturate(2).brighten(2).hex();\n \n const tail = hash.substring(6);\n const pattern = to2D(tail);\n const points = get2DPoints(pattern);\n \n return (`\n \n \n ${points.map((p, i) => (`\n \n `)).join(\"\\n\")}\n \n `);\n}\n\nfunction to2D (hex: string) {\n let arr = []\n for (let i = 0; i < hex.length; i++) {\n const d = parseInt(hex[i], 16);\n const a = (d >> 2) & 3;\n const b = d & 3;\n arr.push([a, b]);\n }\n return arr;\n}\n\nfunction get2DPoints (pattern: number[][]) {\n const points: { x: number, y: number, size: number, shift }[] = [];\n const half = Math.ceil(RESOLUTION / 2);\n for (let y = 0; y < RESOLUTION; y++) {\n for (let x = 0; x < half; x++) {\n const index = y * half + x;\n const [size, shift] = pattern[index];\n if (size > 0) {\n points.push({ x, y, size, shift });\n if (x < Math.floor(RESOLUTION / 2)) {\n const x2 = RESOLUTION - 1 - x;\n points.push({ x: x2, y, size, shift });\n }\n }\n }\n }\n return points;\n}","import MD5 from \"npm:js-md5\";\nimport chroma from \"npm:chroma-js\";\n\nexport default async function (req: Request): Promise {\n const url = new URL(req.url);\n const name = url.searchParams.get(\"name\");\n const svg = createIdenticon({\n name,\n size: 512,\n });\n \n return new Response(svg, {\n headers: {\n \"Content-Type\": \"image/svg+xml\",\n \"Cache-Control\": \"max-age=3600\",\n },\n });\n}\n\nconst RESOLUTION = 5;\nconst SIZE = 256;\nconst VIEWBOX = `0 0 ${SIZE} ${SIZE}`;\nconst CELL = SIZE / (RESOLUTION + 4);\nconst OFFSET = CELL * 2;\n\nfunction createIdenticon ({ name, background, size = 256 }: {\n name: string;\n background: boolean;\n size: number;\n}) {\n const hash = MD5(name ?? \"\");\n const base = \"#\" + hash.substring(0, 6);\n const color = chroma(base).desaturate(1).hex();\n const bg = chroma(base).desaturate(2).brighten(2).hex();\n \n const tail = hash.substring(6);\n const pattern = to2D(tail);\n const points = get2DPoints(pattern);\n \n return (`\n \n \n ${points.map((p, i) => (`\n \n `)).join(\" \")}\n \n `);\n}\n\nfunction to2D (hex: string) {\n let arr = []\n for (let i = 0; i < hex.length; i++) {\n const d = parseInt(hex[i], 16);\n const a = (d >> 2) & 3;\n const b = d & 3;\n arr.push([a, b]);\n }\n return arr;\n}\n\nfunction get2DPoints (pattern: number[][]) {\n const points: { x: number, y: number, size: number, shift }[] = [];\n const half = Math.ceil(RESOLUTION / 2);\n for (let y = 0; y < RESOLUTION; y++) {\n for (let x = 0; x < half; x++) {\n const index = y * half + x;\n const [size, shift] = pattern[index];\n if (size > 0) {\n points.push({ x, y, size, shift });\n if (x < Math.floor(RESOLUTION / 2)) {\n const x2 = RESOLUTION - 1 - x;\n points.push({ x: x2, y, size, shift });\n }\n }\n }\n }\n return points;\n}","createdAt",["D",1758639690129],"branchVersion","branchId","83598bfc-988d-11f0-851f-0224a6c84d84","id","268a59ba-8f28-11f0-adeb-0224a6c84d84","identicon",["D",1757606305651],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","SVG Identicon Service","imageUrl","","5e11e267-23cd-4ee4-86f4-3bf2a5ed69d7","pinnedFileId","71a886e8-988c-11f0-aa91-0224a6c84d84","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","62a75f8d-be32-4eaa-989a-23f3433a7d42","tursoName","268a59ba8f2811f0adeb0224a6c84d84","tursoHostname","268a59ba8f2811f0adeb0224a6c84d84-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789527031073],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_103":102,"_111":107},"org",{"_103":102,"_104":105,"_106":107,"_18":56,"_108":109,"_110":25},"branch",{"_13":90,"_32":91,"_43":42,"_92":44,"_93":94,"_95":96,"_97":50,"_98":44,"_99":66,"_100":45,"_101":102},"isOwned",20,"remove-react","projectId","forkedBranchId","268abb12-8f28-11f0-adeb-0224a6c84d84","forkedBranchVersion",63,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","jxnblk","handle","displayName","Brent Jackson","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/fca87e60-4ad1-453c-af10-2782c6823400/square512?exp=1789589105&sig=f34b0abcf95f6de0760714f909a7242611c56996466772bb5b7be36c2735f1f3","tier","pro","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_43":44,"_32":45,"_38":188,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":55,"_18":56,"_57":58,"_59":60,"_61":60,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":189,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":190,"_85":191,"_87":192,"_89":25},"tree",[175,176,177],"files",[175,176,177],"counts",{"_164":64,"_165":166,"_167":64,"_168":169,"_170":171},"contents",[141,142,143],"upstreamProject","upstreamBranch",{"_43":94,"_38":134,"_135":136,"_32":137,"_92":44,"_13":138,"_93":-5,"_95":-5,"_139":140,"_47":-5,"_89":25,"_49":50,"_101":102,"_65":66,"_100":45},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1757606305651],"updatedAt",["D",1758649563526],"main",64,"lockfileKey","1758649576109-esm.town_v_jxnblk_identicon@64-main",{"_43":158,"_32":159,"_30":160,"_145":-5,"_41":42,"_40":154,"_146":60,"_38":161,"_13":64,"_33":20,"_35":162,"_24":25,"_149":-5,"_27":163},{"_43":151,"_32":152,"_30":153,"_145":-5,"_41":42,"_40":154,"_146":60,"_38":155,"_13":64,"_33":34,"_35":156,"_24":25,"_149":-5,"_27":157},{"_43":144,"_32":28,"_30":31,"_145":-5,"_41":42,"_40":14,"_146":25,"_38":147,"_13":148,"_33":34,"_35":37,"_24":25,"_149":-5,"_27":150},"2fb1ad80-988e-11f0-8496-0224a6c84d84","parentId","latest",["D",1758639690129],6,"label",[28],"835fc5c6-988d-11f0-851f-0224a6c84d84","demo.tsx","01997713-a841-7736-8a7e-18c64ca9aee3",1,["D",1758639401027],"/** @jsxImportSource npm:hono/jsx */\nimport { Hono } from \"npm:hono\";\nimport crs from \"npm:crypto-random-string\";\n\nconst URL = \"https://identicon.val.run\";\n\nconst app = new Hono();\n\nconst rand = (min = 1, max = 24) =>\n Math.random() * (max - min) + min;\n\nconst css = `\nbody {\n margin: 0;\n padding: 32px;\n font-family: system-ui;\n}\npre {\n font-size: 10px;\n}\n.grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n \n}\n`;\n\nfunction Thumb ({\n name,\n size = 128,\n}: {\n name: string;\n size?: number\n}) {\n const url = `${URL}/?name=${name}`;\n return (\n

\n $\"demo$ \n

{name}

\n )\n}\n\napp.get(\"/\", async c => {\n const names = Array.from({ length: 32 }).map((n, i) => {\n const length = rand();\n return crs({ length, type: \"alphanumeric\" });\n });\n\n return c.html(\n \n \n

Diff · v7