Vectors

\n \n \n \n

\n );\n}",[],[206,213],{"_103":222,"_95":223,"_156":224,"_158":207,"_159":138,"_160":225,"_162":163,"_105":226,"_99":227,"_166":199,"_168":228,"_169":22,"_170":-5,"_171":229,"_98":230},"77a0282c-3319-11f0-a4f2-9e149126039e","identicon.tsx","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,223],{"_103":232,"_95":233,"_156":234,"_158":207,"_159":138,"_160":235,"_162":163,"_105":236,"_99":237,"_166":199,"_168":238,"_169":22,"_170":-5,"_171":239,"_98":240},"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,233],{"_103":242,"_95":243,"_156":244,"_158":207,"_159":138,"_160":245,"_162":163,"_105":246,"_99":247,"_166":199,"_168":248,"_169":22,"_170":-5,"_171":249,"_98":250},"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,243],{"_103":252,"_95":253,"_156":254,"_158":207,"_159":138,"_160":255,"_162":163,"_105":256,"_99":257,"_166":199,"_168":258,"_169":22,"_170":-5,"_171":259,"_98":260},"3177d898-328a-11f0-bc28-569c3dd06744","vector.tsx","92b6539e-327d-11f0-85fe-569c3dd06744",158,["D",1747422956521],43,"/** @jsxImportSource ../jsx */\nimport { useLoaderData, Outlet } from \"https://esm.sh/react-router\";\nimport * as ident from \"../vectors/identicon.tsx\";\n\nexport const path = \"vector\";\n\nexport async function loader (_args) {\n return {\n };\n}\n\nexport function Component () {\n const data = useLoaderData();\n\n return (\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,253],[206],{"_103":263,"_95":96,"_156":264,"_158":-5,"_159":138,"_160":265,"_162":163,"_105":266,"_99":165,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":267,"_98":304},"dbf501c8-327c-11f0-8a51-569c3dd06744","da202f1c-327c-11f0-9586-569c3dd06744",25,["D",1747417229598],[268,278,287,296],{"_103":269,"_95":270,"_156":271,"_158":264,"_159":138,"_160":272,"_162":163,"_105":273,"_99":274,"_166":199,"_168":275,"_169":22,"_170":-5,"_171":276,"_98":277},"6e3d4574-3280-11f0-9821-569c3dd06744","circle","dec13f3e-327c-11f0-87a9-569c3dd06744",82,["D",1747418763507],8,"/** @jsxImportSource ../jsx */\n\nexport function Component () {\n return (\n \n \n \n \n );\n}",[],[96,270],{"_103":279,"_95":280,"_156":281,"_158":264,"_159":138,"_160":282,"_162":163,"_105":283,"_99":190,"_166":199,"_168":284,"_169":22,"_170":-5,"_171":285,"_98":286},"c7ab5782-3284-11f0-91c4-569c3dd06744","comp-color.tsx","41538ec0-3284-11f0-8125-569c3dd06744",110,["D",1747420631536],"import chroma from \"https://esm.sh/chroma-js\";\n\nexport const negate = (color: string) => {\n const rgb = chroma(color).rgb();\n const neg = rgb.map((val) => 255 - val);\n return chroma(neg);\n}",[],[96,280],{"_103":288,"_95":289,"_156":290,"_158":264,"_159":138,"_160":291,"_162":22,"_105":292,"_99":165,"_166":199,"_168":293,"_169":22,"_170":-5,"_171":294,"_98":295},"4b7ac1d4-5291-11f0-a444-f69ea79377d9","identicon-square.tsx","47a868fe-5291-11f0-98d6-f69ea79377d9",267,["D",1750944443845],"/** @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}",[],[96,289],{"_103":297,"_95":223,"_156":298,"_158":264,"_159":138,"_160":299,"_162":163,"_105":300,"_99":301,"_166":199,"_168":293,"_169":22,"_170":-5,"_171":302,"_98":303},"3f92fb10-3294-11f0-801d-569c3dd06744","aa69e960-3282-11f0-93c5-569c3dd06744",254,["D",1747427275144],88,[],[96,223],[96],{"_103":306,"_95":307,"_156":308,"_158":-5,"_159":138,"_160":190,"_162":22,"_105":309,"_99":165,"_166":180,"_168":310,"_169":22,"_170":-5,"_171":311,"_98":312},"829058b8-327b-11f0-a78d-569c3dd06744","README.md","d5a8023a-ec40-4846-bce4-66ec0a83d0e1",["D",1747416650126],"# Vectors",[],[307],{"_103":314,"_95":315,"_156":316,"_158":-5,"_159":138,"_160":317,"_162":163,"_105":318,"_99":198,"_166":199,"_168":319,"_169":22,"_170":-5,"_171":320,"_98":321},"4cbb30bc-327d-11f0-87a9-569c3dd06744","client.tsx","ae786305-32cc-4754-89be-cd264f5cec93",39,["D",1747417418803],"/** @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);",[],[315],{"_103":323,"_95":324,"_156":325,"_158":-5,"_159":138,"_160":100,"_162":22,"_105":326,"_99":190,"_166":327,"_168":328,"_169":22,"_170":-5,"_171":329,"_98":330},"632bfe9c-5291-11f0-8cf3-f69ea79377d9","identicon-square.png.tsx","3473ceea-5291-11f0-bd11-f69ea79377d9",["D",1750944483592],"http","/** @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}",[],[324],{"_103":332,"_95":333,"_156":334,"_158":-5,"_159":138,"_160":335,"_162":163,"_105":336,"_99":337,"_166":327,"_168":338,"_169":22,"_170":-5,"_171":339,"_98":340},"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}",[],[333],{"_103":342,"_95":343,"_156":344,"_158":-5,"_159":138,"_160":345,"_162":22,"_105":346,"_99":347,"_166":327,"_168":348,"_169":22,"_170":-5,"_171":349,"_98":350},"3a49018e-3287-11f0-b21c-569c3dd06744","server.tsx","999db588-d86e-4793-b415-ef4c24e621d4",128,["D",1747421682823],4,"/** @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;",[],[343],"files",[153,173,185,192,204,211,221,231,241,251,262,268,278,287,296,305,313,322,331,341],"counts",{"_355":32,"_356":190,"_357":32,"_358":32},"pulls","branches","forks","envVars","contents",[361,364,367,370,373,376,379,382,385],{"_103":154,"_95":155,"_156":157,"_158":-5,"_159":138,"_160":161,"_162":163,"_105":362,"_99":165,"_166":167,"_168":-5,"_169":22,"_170":-5,"_98":363},["D",1747421819441],[155],{"_103":186,"_95":187,"_156":188,"_158":-5,"_159":138,"_160":143,"_162":163,"_105":365,"_99":190,"_166":167,"_168":-5,"_169":22,"_170":-5,"_98":366},["D",1747417306732],[187],{"_103":205,"_95":206,"_156":207,"_158":-5,"_159":138,"_160":208,"_162":163,"_105":368,"_99":165,"_166":167,"_168":-5,"_169":22,"_170":-5,"_98":369},["D",1747416663781],[206],{"_103":263,"_95":96,"_156":264,"_158":-5,"_159":138,"_160":265,"_162":163,"_105":371,"_99":165,"_166":167,"_168":-5,"_169":22,"_170":-5,"_98":372},["D",1747417229598],[96],{"_103":306,"_95":307,"_156":308,"_158":-5,"_159":138,"_160":190,"_162":22,"_105":374,"_99":165,"_166":180,"_168":310,"_169":22,"_170":-5,"_98":375},["D",1747416650126],[307],{"_103":314,"_95":315,"_156":316,"_158":-5,"_159":138,"_160":317,"_162":163,"_105":377,"_99":198,"_166":199,"_168":319,"_169":22,"_170":-5,"_98":378},["D",1747417418803],[315],{"_103":323,"_95":324,"_156":325,"_158":-5,"_159":138,"_160":100,"_162":22,"_105":380,"_99":190,"_166":327,"_168":328,"_169":22,"_170":-5,"_98":381},["D",1750944483592],[324],{"_103":332,"_95":333,"_156":334,"_158":-5,"_159":138,"_160":335,"_162":163,"_105":383,"_99":337,"_166":327,"_168":338,"_169":22,"_170":-5,"_98":384},["D",1747427241517],[333],{"_103":342,"_95":343,"_156":344,"_158":-5,"_159":138,"_160":345,"_162":22,"_105":386,"_99":347,"_166":327,"_168":348,"_169":22,"_170":-5,"_98":387},["D",1747421682823],[343],"upstreamProject",{"_103":146,"_95":390,"_111":391,"_113":392,"_109":110,"_23":393},"react-router-hono-starter","Minimal React Router + Hono starter example","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/c6ac4b2d-2d7e-4ea8-c2bf-7e369bfdb600/square512",{"_93":94,"_130":131},"upstreamBranch",{"_103":141,"_105":396,"_397":398,"_95":43,"_139":146,"_99":399,"_140":400,"_142":399,"_401":402,"_107":-5,"_150":22,"_109":110,"_149":94,"_16":119,"_148":390},["D",1747318612210],"updatedAt",["D",1752864216699],33,"87fadf0a-3193-11f0-aa5b-569c3dd06744","lockfileKey","1752886005540-esm.town_v_jxnblk_react-router-hono-starter@33-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_101":409,"_99":100,"_414":415},{"_103":104,"_95":96,"_105":410,"_107":-5,"_108":22,"_109":110,"_111":112,"_113":-5,"_14":114,"_115":-5,"_116":22,"_117":-5,"_118":32,"_16":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":411,"_132":412,"_135":413,"_150":22},["D",1747416639792],{"_93":94,"_130":131},{"_93":94,"_134":131},{"_99":137,"_95":43,"_103":138,"_139":104,"_140":141,"_142":143,"_144":110,"_145":146,"_147":119,"_148":96,"_149":94},"changes",[416],{"_180":417,"_419":420,"_98":324},{"_156":325,"_95":324,"_166":327,"_168":328,"_105":418,"_160":100,"_159":138},["D",1750944483592],"previous",{"_156":325,"_95":324,"_166":327,"_168":338},"actionData","errors"]