[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_392":393,"_394":395},"routes/_app.x.$handle.$name",{"_97":96,"_31":42,"_106":84,"_26":107,"_13":14,"_108":-5,"_11":109,"_110":111,"_112":113,"_114":115,"_116":117,"_20":-5,"_118":119,"_120":121,"_122":24,"_123":124,"_125":56,"_126":-5,"_127":-5,"_128":129},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_40":41,"_31":42,"_35":43,"_44":-5,"_45":24,"_46":47,"_48":47,"_49":50,"_51":-5,"_18":52,"_53":54,"_55":56,"_57":56,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":77,"_78":79,"_80":81,"_82":24},"version",308,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":27,"_32":20,"_33":34,"_35":36,"_37":14,"_38":39,"_23":24},"previous","deleted",false,"deletedHere","path","deno.json","latestPath","fileId","a3a29bc0-8e73-11f0-87a4-0224a6c84d84","name","fileType","content","{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": false,\n \"types\": [\n \"https://www.val.town/types/valtown.d.ts\"\n ],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"files\": {\n \"include\": [\n \"deno:/https/esm.town/**/*\"\n ]\n },\n \"rules\": {\n \"exclude\": [\n \"no-explicit-any\"\n ]\n }\n },\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n }\n}","createdAt",["D",1757528776614],"branchVersion","branchId","7c696510-327b-11f0-b5f6-569c3dd06744","id","7c6732c2-327b-11f0-b5f6-569c3dd06744","vectors",["D",1747416639792],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Generative SVG prototypes","imageUrl","5e11e267-23cd-4ee4-86f4-3bf2a5ed69d7","pinnedFileId","0a757b7c-b040-11f0-a966-0224a6c84d84","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","62a75f8d-be32-4eaa-989a-23f3433a7d42","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_97":96,"_105":101},"org",{"_97":96,"_98":99,"_100":101,"_18":52,"_102":103,"_104":24},"branch",{"_13":83,"_31":84,"_40":39,"_85":41,"_86":87,"_88":89,"_90":47,"_91":92,"_93":62,"_94":42,"_95":96},"isOwned",315,"main","projectId","forkedBranchId","3f6d7dac-3197-11f0-bd56-569c3dd06744","forkedBranchVersion",31,"forkedProjectPrivacy","forkedProjectId","3f6981c0-3197-11f0-bd56-569c3dd06744","forkedProjectOrgId","projectName","userHandle","jxnblk","handle","displayName","Brent Jackson","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/fca87e60-4ad1-453c-af10-2782c6823400/square512?exp=1789549199&sig=bc8d33a2bffc245b3d08546aa73424a09b8bb310daeb62d7343a50ed4d018c0e","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_40":41,"_31":42,"_35":388,"_44":-5,"_45":24,"_46":47,"_48":47,"_49":50,"_51":-5,"_18":52,"_53":54,"_55":56,"_57":56,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":389,"_78":390,"_80":391,"_82":24},"tree",[231,233,235,241,247,248,249,250,251,252],"files",[231,232,233,234,235,236,237,238,239,240,241,242,243,244,245,246,247,248,249,250,251,252],"counts",{"_221":60,"_222":186,"_223":60,"_224":225,"_226":227},"contents",[140,141,142,143,144,145,146,147,148,149],"upstreamProject",{"_40":92,"_31":136,"_49":137,"_51":138,"_46":47,"_76":139},"upstreamBranch",{"_40":87,"_35":130,"_131":132,"_31":84,"_85":92,"_13":133,"_86":-5,"_88":-5,"_134":135,"_44":-5,"_82":24,"_46":47,"_95":96,"_61":62,"_94":136},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1747318612210],"updatedAt",["D",1779898921971],34,"lockfileKey","1786296728251-esm.town_v_jxnblk_react-router-hono-starter@34-main","react-router-hono-starter","Minimal React Router + Hono starter example","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/c6ac4b2d-2d7e-4ea8-c2bf-7e369bfdb600/square512?exp=1789549199&sig=b59b48b6d813b3c99944e326a995033569c16199c0a66c92fdb6a2cd93640485",{"_97":96,"_105":101},{"_40":215,"_31":216,"_29":217,"_153":-5,"_38":39,"_37":218,"_155":56,"_35":219,"_13":202,"_32":203,"_33":-5,"_23":24,"_160":-5,"_26":220},{"_40":210,"_31":211,"_29":212,"_153":-5,"_38":39,"_37":89,"_155":56,"_35":213,"_13":195,"_32":203,"_33":-5,"_23":24,"_160":-5,"_26":214},{"_40":205,"_31":206,"_29":207,"_153":-5,"_38":39,"_37":157,"_155":56,"_35":208,"_13":202,"_32":203,"_33":-5,"_23":24,"_160":-5,"_26":209},{"_40":198,"_31":42,"_29":199,"_153":-5,"_38":39,"_37":200,"_155":56,"_35":201,"_13":202,"_32":203,"_33":-5,"_23":24,"_160":-5,"_26":204},{"_40":190,"_31":191,"_29":192,"_153":-5,"_38":39,"_37":193,"_155":24,"_35":194,"_13":195,"_32":20,"_33":196,"_23":24,"_160":-5,"_26":197},{"_40":181,"_31":182,"_29":183,"_153":-5,"_38":39,"_37":184,"_155":56,"_35":185,"_13":186,"_32":187,"_33":188,"_23":24,"_160":-5,"_26":189},{"_40":178,"_31":27,"_29":30,"_153":-5,"_38":39,"_37":14,"_155":56,"_35":179,"_13":60,"_32":20,"_33":34,"_23":24,"_160":-5,"_26":180},{"_40":170,"_31":171,"_29":172,"_153":-5,"_38":39,"_37":173,"_155":56,"_35":174,"_13":175,"_32":158,"_33":176,"_23":24,"_160":-5,"_26":177},{"_40":162,"_31":163,"_29":164,"_153":-5,"_38":39,"_37":165,"_155":56,"_35":166,"_13":167,"_32":158,"_33":168,"_23":24,"_160":-5,"_26":169},{"_40":150,"_31":151,"_29":152,"_153":-5,"_38":39,"_37":154,"_155":56,"_35":156,"_13":157,"_32":158,"_33":159,"_23":24,"_160":-5,"_26":161},"1555cdb4-5c06-11f0-aa2a-0224a6c84d84","server.tsx","999db588-d86e-4793-b415-ef4c24e621d4","parentId",305,"latest",["D",1751984164588],5,"http","/** @jsxImportSource ./jsx */\nimport { Hono } from \"npm:hono@4\";\nimport * as React from \"https://esm.sh/react@19\";\nimport ReactDOMServer from \"https://esm.sh/react-dom@19/server\";\nimport {\n createStaticHandler,\n createStaticRouter,\n StaticRouterProvider,\n} from \"https://esm.sh/react-router\";\nimport routes from \"./routes/index.tsx\";\n\nconst CLIENT_MODULE = import.meta.resolve(\"./client.tsx\");\n\nconst app = new Hono();\n\n// api server\napp.get(\"/api\", async (c) => {\n return c.json({ hello: \"hi\" });\n});\n\n// react app\napp.get(\"*\", async (c) => {\n const { query, dataRoutes } = createStaticHandler(routes);\n const context = await query(c.req.raw);\n const router = createStaticRouter(dataRoutes, context);\n \n let html = await ReactDOMServer.renderToReadableStream(\n \n , {\n bootstrapModules: [ CLIENT_MODULE ],\n });\n\n return new Response(html, {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n });\n});\n\nexport default app.fetch;","label",[151],"2b864d52-3294-11f0-811a-569c3dd06744","identicon.png.tsx","a2dd60a8-3293-11f0-bdc4-569c3dd06744",252,["D",1747427241517],7,"/** @jsxImportSource ./jsx */\nimport { Identicon2D } from \"./vectors/identicon.tsx\";\nimport { renderToString } from \"npm:react-dom@19/server\";\nimport { render } from \"https://deno.land/x/resvg_wasm@0.2.0/mod.ts\";\n\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 = renderToString();\n const png = await render(svg);\n \n return new Response(png, {\n headers: {\n \"Content-Type\": \"image/png\",\n },\n });\n \n // return new Response(svg, {\n // headers: {\n // \"Content-Type\": \"image/svg+xml\",\n // },\n // });\n}",[163],"c1dfd612-7d0b-11f0-869a-0224a6c84d84","identicon-square.png.tsx","3473ceea-5291-11f0-bd11-f69ea79377d9",307,["D",1755614989913],4,"/** @jsxImportSource ./jsx */\nimport { Identicon2D } from \"./vectors/identicon-square.tsx\";\nimport { renderToString } from \"npm:react-dom@19/server\";\nimport { render } from \"https://deno.land/x/resvg_wasm@0.2.0/mod.ts\";\n\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 = renderToString();\n const png = await render(svg);\n \n return new Response(png, {\n headers: {\n \"Content-Type\": \"image/png\",\n },\n });\n \n // return new Response(svg, {\n // headers: {\n // \"Content-Type\": \"image/svg+xml\",\n // },\n // });\n}",[171],"a3a29b0c-8e73-11f0-87a4-0224a6c84d84",["D",1757528776614],[27],"4cbb30bc-327d-11f0-87a9-569c3dd06744","client.tsx","ae786305-32cc-4754-89be-cd264f5cec93",39,["D",1747417418803],3,"script","/** @jsxImportSource ./jsx */\nimport React from \"https://esm.sh/react@19\";\nimport ReactDOM from \"https://esm.sh/react-dom@19/client\";\nimport { createBrowserRouter, RouterProvider } from \"https://esm.sh/react-router\";\nimport routes from \"./routes/index.tsx\";\n\nconst router = createBrowserRouter(routes);\n\nReactDOM.hydrateRoot(\n document, \n \n);",[182],"470cd0e4-5cd5-11f0-b02d-0224a6c84d84","README.md","d5a8023a-ec40-4846-bce4-66ec0a83d0e1",306,["D",1752073153813],2,"# Vectors\n\n",[191],"dbf501c8-327c-11f0-8a51-569c3dd06744","da202f1c-327c-11f0-9586-569c3dd06744",25,["D",1747417229598],1,"directory",[42],"8ab3fb9e-327b-11f0-9ca3-569c3dd06744","routes","8990300c-327b-11f0-9661-569c3dd06744",["D",1747416663781],[206],"09eea174-327d-11f0-87a9-569c3dd06744","jsx","022b0c66-327d-11f0-8082-569c3dd06744",["D",1747417306732],[211],"8bb73c70-3287-11f0-8b66-569c3dd06744","css","8a84b09e-3287-11f0-8760-569c3dd06744",130,["D",1747421819441],[216],"pulls","branches","forks","envVars",{"_228":60,"_230":60},"connections",{"_228":60,"_229":60},"count","unfilledCount","emptyCount",{"_40":215,"_31":216,"_29":217,"_153":-5,"_38":39,"_37":218,"_155":56,"_35":385,"_13":202,"_32":203,"_33":-5,"_23":24,"_160":-5,"_254":386,"_26":387},{"_40":376,"_31":377,"_29":378,"_153":217,"_38":39,"_37":379,"_155":56,"_35":380,"_13":381,"_32":20,"_33":382,"_23":24,"_160":-5,"_254":383,"_26":384},{"_40":210,"_31":211,"_29":212,"_153":-5,"_38":39,"_37":89,"_155":56,"_35":373,"_13":195,"_32":203,"_33":-5,"_23":24,"_160":-5,"_254":374,"_26":375},{"_40":365,"_31":366,"_29":367,"_153":212,"_38":39,"_37":368,"_155":24,"_35":369,"_13":186,"_32":187,"_33":370,"_23":24,"_160":-5,"_254":371,"_26":372},{"_40":205,"_31":206,"_29":207,"_153":-5,"_38":39,"_37":157,"_155":56,"_35":362,"_13":202,"_32":203,"_33":-5,"_23":24,"_160":-5,"_254":363,"_26":364},{"_40":353,"_31":354,"_29":355,"_153":207,"_38":39,"_37":356,"_155":56,"_35":357,"_13":358,"_32":187,"_33":359,"_23":24,"_160":-5,"_254":360,"_26":361},{"_40":345,"_31":281,"_29":346,"_153":207,"_38":39,"_37":347,"_155":56,"_35":348,"_13":349,"_32":187,"_33":350,"_23":24,"_160":-5,"_254":351,"_26":352},{"_40":336,"_31":337,"_29":338,"_153":207,"_38":39,"_37":339,"_155":56,"_35":340,"_13":341,"_32":187,"_33":342,"_23":24,"_160":-5,"_254":343,"_26":344},{"_40":327,"_31":328,"_29":329,"_153":207,"_38":39,"_37":330,"_155":56,"_35":331,"_13":332,"_32":187,"_33":333,"_23":24,"_160":-5,"_254":334,"_26":335},{"_40":318,"_31":319,"_29":320,"_153":207,"_38":39,"_37":321,"_155":56,"_35":322,"_13":323,"_32":187,"_33":324,"_23":24,"_160":-5,"_254":325,"_26":326},{"_40":198,"_31":42,"_29":199,"_153":-5,"_38":39,"_37":200,"_155":56,"_35":315,"_13":202,"_32":203,"_33":-5,"_23":24,"_160":-5,"_254":316,"_26":317},{"_40":306,"_31":307,"_29":308,"_153":199,"_38":39,"_37":309,"_155":56,"_35":310,"_13":311,"_32":187,"_33":312,"_23":24,"_160":-5,"_254":313,"_26":314},{"_40":298,"_31":299,"_29":300,"_153":199,"_38":39,"_37":301,"_155":56,"_35":302,"_13":195,"_32":187,"_33":303,"_23":24,"_160":-5,"_254":304,"_26":305},{"_40":289,"_31":290,"_29":291,"_153":199,"_38":39,"_37":292,"_155":56,"_35":293,"_13":294,"_32":187,"_33":295,"_23":24,"_160":-5,"_254":296,"_26":297},{"_40":280,"_31":281,"_29":282,"_153":199,"_38":39,"_37":283,"_155":56,"_35":284,"_13":285,"_32":187,"_33":286,"_23":24,"_160":-5,"_254":287,"_26":288},{"_40":272,"_31":273,"_29":274,"_153":199,"_38":39,"_37":275,"_155":56,"_35":276,"_13":277,"_32":187,"_33":107,"_23":24,"_160":-5,"_254":278,"_26":279},{"_40":190,"_31":191,"_29":192,"_153":-5,"_38":39,"_37":193,"_155":24,"_35":269,"_13":195,"_32":20,"_33":196,"_23":24,"_160":-5,"_254":270,"_26":271},{"_40":181,"_31":182,"_29":183,"_153":-5,"_38":39,"_37":184,"_155":56,"_35":266,"_13":186,"_32":187,"_33":188,"_23":24,"_160":-5,"_254":267,"_26":268},{"_40":178,"_31":27,"_29":30,"_153":-5,"_38":39,"_37":14,"_155":56,"_35":263,"_13":60,"_32":20,"_33":34,"_23":24,"_160":-5,"_254":264,"_26":265},{"_40":170,"_31":171,"_29":172,"_153":-5,"_38":39,"_37":173,"_155":56,"_35":260,"_13":175,"_32":158,"_33":176,"_23":24,"_160":-5,"_254":261,"_26":262},{"_40":162,"_31":163,"_29":164,"_153":-5,"_38":39,"_37":165,"_155":56,"_35":257,"_13":167,"_32":158,"_33":168,"_23":24,"_160":-5,"_254":258,"_26":259},{"_40":150,"_31":151,"_29":152,"_153":-5,"_38":39,"_37":154,"_155":56,"_35":253,"_13":157,"_32":158,"_33":159,"_23":24,"_160":-5,"_254":255,"_26":256},["D",1751984164588],"children",[],[151],["D",1747427241517],[],[163],["D",1755614989913],[],[171],["D",1757528776614],[],[27],["D",1747417418803],[],[182],["D",1752073153813],[],[191],"66d8f01c-574c-11f0-bfba-f69ea79377d9","temp.tsx","4f075e92-574c-11f0-93a0-f69ea79377d9",304,["D",1751464610304],13,[],[42,273],"3f92fb10-3294-11f0-801d-569c3dd06744","identicon.tsx","aa69e960-3282-11f0-93c5-569c3dd06744",254,["D",1747427275144],88,"/** @jsxImportSource ../jsx */\nimport { useState } from \"https://esm.sh/react@19\";\nimport { useParams, useSearchParams, useNavigate } from \"https://esm.sh/react-router\";\nimport MD5 from \"https://esm.sh/js-md5\";\nimport chroma from \"https://esm.sh/chroma-js\";\n\nexport const path = \"identicon/:name?\";\n\nfunction negate (color: string) {\n const rgb = chroma(color).rgb();\n const neg = rgb.map((val) => 255 - val);\n return chroma(neg);\n}\n\nfunction toBinary (hex: string) {\n let bin = \"\";\n for (let i = 0; i < hex.length; i++) {\n const d = parseInt(hex[i], 16);\n const b = d.toString(2).padStart(4, \"0\");\n bin += b;\n }\n return bin;\n}\n\nfunction toDecimal (hex: string) {\n let nums = [];\n for (let i = 0; i < hex.length; i++) {\n const d = parseInt(hex[i], 16);\n nums.push(d);\n }\n return nums;\n}\n\nfunction toB4 (hex: string) {\n let b4 = []\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 b4.push(a, b);\n }\n return b4;\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\nconst size = 256;\nconst resolution = 5;\nconst viewBox = `0 0 ${size} ${size}`;\nconst cell = size / (resolution + 1);\nconst radius = cell / 2;\n\nfunction getPoints (pattern: number[]) {\n const points: { x: number, y: number, size: number }[] = [];\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 if (pattern[index] > 0) {\n const size = pattern[index];\n points.push({ x, y, size });\n if (x < Math.floor(resolution / 2)) {\n const x2 = resolution - 1 - x;\n points.push({ x: x2, y, size });\n }\n }\n }\n }\n return points;\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}\n\n\nexport function Component () {\n const { name } = useParams();\n const [searchParams] = useSearchParams();\n\n const background = searchParams.has(\"background\");\n\n // \n return (\n

Identicon

\n \n \n

\n )\n}\n\nexport function Identicon ({ name, background }: {\n name: string;\n background: boolean;\n}) {\n const hash = MD5(name ?? \"\");\n const color = \"#\" + hash.substring(0, 6);\n const comp = negate(color).hex();\n const tail = hash.substring(6);\n const pattern = toB4(tail);\n const points = getPoints(pattern);\n \n return (\n \n {background && (\n \n )}\n {points.map((p, i) => (\n \n ))}\n \n );\n}\n\nexport function Identicon2D ({ name, background, size = 256 }: {\n name: string;\n background: boolean;\n size: number;\n}) {\n const hash = MD5(name ?? \"\");\n const color = \"#\" + hash.substring(0, 6);\n const comp = negate(color).hex();\n const tail = hash.substring(6);\n const pattern = to2D(tail);\n const points = get2DPoints(pattern);\n \n return (\n \n {background && (\n \n )}\n {points.map((p, i) => (\n \n ))}\n \n );\n}\n\nfunction getXShift (n: number, x: number) {\n if (n !== 3) return 0;\n const center = Math.floor(resolution / 2);\n const left = x < center;\n const right = x > center;\n if (left) return cell * 0.2;\n if (right) return cell * -0.2;\n return 0;\n}\n\nfunction getYShift (n: number) {\n if (n === 1) return cell * 0.2;\n if (n === 2) return cell * -0.2;\n return 0;\n}\n\nfunction NameForm () {\n const params = useParams();\n const navigate = useNavigate();\n const [name, setName] = useState(params.name ?? \"\");\n const [searchParams, setSearchParams] = useSearchParams();\n const bg = searchParams.has(\"background\");\n\n const toggleBackground = () => {\n if (searchParams.has(\"background\")) {\n searchParams.delete(\"background\");\n } else {\n searchParams.append(\"background\", \"1\");\n }\n setSearchParams(searchParams);\n }\n\n const randomValue = () => {\n const next = generateRandomString();\n navigate(`/vector/identicon/${next}?${searchParams.toString()}`);\n }\n\n return (\n {\n e.preventDefault();\n console.log(\"submit\", name);\n navigate(`/vector/identicon/${name}`);\n }}>\n \n Name\n \n {\n setName(e.target.value);\n }}\n />\n \n\n \n \n \n \n )\n}\n\nconst CHARS = \"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789\";\nfunction generateRandomString(minLength = 4, maxLength = 32): string {\n const length = Math.floor(Math.random() * (maxLength - minLength + 1)) + minLength;\n let result = \"\";\n for (let i = 0; i < length; i++) {\n const randomIndex = Math.floor(Math.random() * CHARS.length);\n result += CHARS.charAt(randomIndex);\n }\n return result;\n}",[],[42,281],"bb9e7324-5292-11f0-93e6-f69ea79377d9","identicon-square.tsx","47a868fe-5291-11f0-98d6-f69ea79377d9",290,["D",1750945061482],22,"/** @jsxImportSource ../jsx */\nimport { useState } from \"https://esm.sh/react@19\";\nimport { useParams, useSearchParams, useNavigate } from \"https://esm.sh/react-router\";\nimport MD5 from \"https://esm.sh/js-md5\";\nimport chroma from \"https://esm.sh/chroma-js\";\n\nexport const path = \"identicon/:name?\";\n\nfunction negate (color: string, desat : number = 0) {\n const rgb = chroma(color)\n .desaturate(desat)\n .rgb();\n const neg = rgb.map((val) => 255 - val);\n return chroma(neg);\n}\n\nfunction toBinary (hex: string) {\n let bin = \"\";\n for (let i = 0; i < hex.length; i++) {\n const d = parseInt(hex[i], 16);\n const b = d.toString(2).padStart(4, \"0\");\n bin += b;\n }\n return bin;\n}\n\nfunction toDecimal (hex: string) {\n let nums = [];\n for (let i = 0; i < hex.length; i++) {\n const d = parseInt(hex[i], 16);\n nums.push(d);\n }\n return nums;\n}\n\nfunction toB4 (hex: string) {\n let b4 = []\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 b4.push(a, b);\n }\n return b4;\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\nconst size = 256;\nconst resolution = 5;\nconst viewBox = `0 0 ${size} ${size}`;\nconst cell = size / (resolution + 1);\nconst off = cell / 2;\n\nfunction getPoints (pattern: number[]) {\n const points: { x: number, y: number, size: number }[] = [];\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 if (pattern[index] > 0) {\n const size = pattern[index];\n points.push({ x, y, size });\n if (x < Math.floor(resolution / 2)) {\n const x2 = resolution - 1 - x;\n points.push({ x: x2, y, size });\n }\n }\n }\n }\n return points;\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}\n\n\nexport function Component () {\n const { name } = useParams();\n const [searchParams] = useSearchParams();\n\n const background = searchParams.has(\"background\");\n\n // \n return (\n

Identicon

\n \n \n

Vector

\n \n\n

{JSON.stringify(data, null, 2)}

\n );\n}\n\nexport const children = [\n {\n path: \"circle\",\n lazy: async () => await import(\"../vectors/circle\"),\n },\n {\n path: \"lazy-identicon/:name?\",\n lazy: async () => await import(\"../vectors/identicon.tsx\"),\n },\n ident,\n];",[],[206,319],"26dc8670-3296-11f0-a2a9-569c3dd06744","root.tsx","8de6d93a-327b-11f0-a8de-569c3dd06744",261,["D",1747428092688],21,"/** @jsxImportSource ../jsx */\nimport React from \"https://esm.sh/react@19\";\nimport { useLoaderData, Link, Outlet, useParams } from \"https://esm.sh/react-router@7\";\n\nconst STYLESHEET = import.meta.resolve(\"../css/base.css\").replace(\"esm.town\", \"juicy.town\");\n\nfunction HTML ({ children }: {\n children: React.ReactNode;\n}) {\n const params = useParams();\n const name = params.name ?? \"identicon\";\n const image = `https://identicon.val.run/?name=${name}`;\n \n return (\n \n \n vectors\n \n \n \n \n \n \n {children}\n \n \n )\n}\n\nexport default function Layout () {\n return (\n \n

\n \n

\n \n );\n}",[],[206,328],"23521c02-3293-11f0-801d-569c3dd06744","index.tsx","c3c5d6fa-327b-11f0-a8de-569c3dd06744",240,["D",1747426798256],12,"import Root from \"./root.tsx\";\nimport * as home from \"./home.tsx\";\nimport * as vector from \"./vector.tsx\";\nimport * as identicon from \"./identicon.tsx\";\n\n// vectors\nimport Circle from \"../vectors/circle\";\n\nexport const routes = [\n {\n Component: Root,\n children: [\n home,\n identicon,\n vector,\n ]\n },\n]\n\nexport default routes;",[],[206,337],"77a0282c-3319-11f0-a4f2-9e149126039e","f353a3fe-3292-11f0-9a3d-569c3dd06744",263,["D",1747484492260],11,"/** @jsxImportSource ../jsx */\nimport { useState } from \"https://esm.sh/react@19\";\nimport { useParams, useSearchParams, useNavigate } from \"https://esm.sh/react-router\";\nimport { Identicon2D } from \"../vectors/identicon.tsx\";\n\nexport const path = \"id/:name?\";\n\nexport function Component () {\n const params = useParams();\n const [searchParams, setSearchParams] = useSearchParams();\n const background = searchParams.has(\"background\");\n \n return (\n

Identicon

\n \n \n

\n );\n}\n\nfunction NameForm () {\n const params = useParams();\n const navigate = useNavigate();\n const [name, setName] = useState(params.name ?? \"hello\");\n const [searchParams, setSearchParams] = useSearchParams();\n const bg = searchParams.has(\"background\");\n\n const toggleBackground = () => {\n if (searchParams.has(\"background\")) {\n searchParams.delete(\"background\");\n } else {\n searchParams.append(\"background\", \"1\");\n }\n setSearchParams(searchParams);\n }\n\n const randomValue = () => {\n const next = generateRandomString();\n navigate(`/id/${next}?${searchParams.toString()}`);\n }\n\n return (\n {\n e.preventDefault();\n navigate(`/id/${name}?${searchParams.toString()}`);\n }}>\n \n Name\n \n {\n setName(e.target.value);\n }}\n />\n \n\n \n \n \n \n )\n}\n\nconst CHARS = \"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789\";\nfunction generateRandomString(minLength = 4, maxLength = 32): string {\n const length = Math.floor(Math.random() * (maxLength - minLength + 1)) + minLength;\n let result = \"\";\n for (let i = 0; i < length; i++) {\n const randomIndex = Math.floor(Math.random() * CHARS.length);\n result += CHARS.charAt(randomIndex);\n }\n return result;\n}",[],[206,281],"87e656fe-3295-11f0-8cad-569c3dd06744","home.tsx","de53692e-327b-11f0-81fa-569c3dd06744",259,["D",1747427825993],10,"/** @jsxImportSource ../jsx */\nimport { Link } from \"https://esm.sh/react-router\";\nimport { Identicon2D } from \"../vectors/identicon.tsx\";\n\nexport const index = true;\n\nexport function Component () {\n return (\n

Vectors

\n \n \n \n

\n );\n}",[],[206,354],["D",1747416663781],[236,237,238,239,240],[206],"44aaa088-327d-11f0-9fe0-569c3dd06744","jsx-runtime","0b887622-327d-11f0-87a9-569c3dd06744",38,["D",1747417405273],"export { jsx, jsxs } from 'https://esm.sh/react@19/jsx-runtime';\nexport { Fragment } from \"https://esm.sh/react@19\";",[],[211,366],["D",1747417306732],[234],[211],"8867e5a2-328b-11f0-8b9f-569c3dd06744","base.css","8d681f3a-3287-11f0-959f-569c3dd06744",183,["D",1747423531874],23,"* { box-sizing: border-box }\n\nbody {\n font-family: system-ui, sans-serif;\n line-height: 1.5;\n margin: 0;\n color: black;\n background-color: white;\n}\n\n.container {\n max-width: 1024px;\n margin: 0 auto;\n padding: 32px;\n}\n.container.small {\n max-width: 768px;\n}\n\ninput[type=text] {\n font-family: inherit;\n font-size: 14px;\n padding: 4px 8px;\n border: 0;\n border-radius: 2px;\n background-color: #bff;\n color: black;\n}\ninput[type=text]:focus {\n color: #066;\n background-color: cyan;\n outline: none;\n} \n\nbutton {\n appearance: none;\n display: inline-flex;\n align-items: center;\n font-family: inherit;\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 0.2em;\n border-radius: 2px;\n font-weight: bold;\n color: white;\n background-color: black;\n padding: 6px 12px;\n border: 0;\n cursor: pointer;\n}\nbutton:hover {\n color: #044;\n background-color: cyan;\n}",[],[216,377],["D",1747421819441],[232],[216],["D",1747416639792],{"_97":96,"_105":101},{"_97":96,"_98":99,"_100":101,"_18":52,"_102":103,"_104":24},{"_13":83,"_31":84,"_40":39,"_85":41,"_86":87,"_88":89,"_90":47,"_91":92,"_93":62,"_94":42,"_95":96},"ctx",{"_76":-5,"_127":425,"_426":427,"_428":429,"_430":24,"_431":24,"_432":24,"_433":56,"_434":-5,"_435":-7,"_436":-7,"_437":60,"_438":24,"_439":24,"_440":-5,"_441":24,"_442":24,"_443":24,"_444":-5},"ENV",{"_396":397,"_398":399,"_400":84,"_401":402,"_403":404,"_405":406,"_407":408,"_409":410,"_411":412,"_413":414,"_415":416,"_417":418,"_419":420,"_421":422,"_423":424},"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 · v308