[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_218":219,"_220":221},"routes/_app.x.$handle.$name",{"_95":94,"_32":45,"_103":85,"_27":104,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":-5,"_116":-5,"_117":25,"_118":119,"_120":57,"_121":-5,"_122":-5,"_123":124},"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":-5,"_53":-5,"_18":54,"_55":31,"_56":57,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":25},"version",49,"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","example.tsx","latestPath","fileId","601f1b10-7fc9-11f1-8358-1607ee4eb77e","name","fileType","script","content","/**\n * EXAMPLE: this is the full snippet you'd put in your own val to get a\n * blob admin panel for your OWN blobs — no copy-pasting the full app.\n *\n * Swap the import path below for the real one:\n * https://esm.town/v/gwoods22/val_scoped_blob_admin/lib/blob-admin.tsx\n */\n/** @jsxImportSource https://esm.sh/hono@4.0.8/jsx **/\nimport { passwordAuth } from \"https://esm.town/v/pomdtr/password_auth/main.tsx\";\nimport { verifyToken } from \"https://esm.town/v/pomdtr/verifyToken\";\nimport { blob } from \"https://esm.town/v/std/blob/main.ts\"; // your val's own blobs\nimport { createBlobAdmin } from \"https://esm.town/v/gwoods22/val_scoped_blob_admin/lib/blob-admin.tsx\";\n\nconst app = createBlobAdmin({ blob, title: \"My App's Blobs\" });\n\n// createBlobAdmin has no auth of its own — always wrap it before exporting.\nexport default passwordAuth(app.fetch, { verifyPassword: verifyToken });\n","/**\n * EXAMPLE: this is the full snippet you'd put in your own val to get a\n * blob admin panel for your OWN blobs — no copy-pasting the full app.\n *\n * Swap the import path below for the real one:\n * https://esm.town/v/gwoods22/val_scoped_blob_admin/blob-admin.tsx\n */\n/** @jsxImportSource https://esm.sh/hono@4.0.8/jsx **/\nimport { passwordAuth } from \"https://esm.town/v/pomdtr/password_auth/main.tsx\";\nimport { verifyToken } from \"https://esm.town/v/pomdtr/verifyToken\";\nimport { blob } from \"https://esm.town/v/std/blob/main.ts\"; // your val's own blobs\nimport { createBlobAdmin } from \"https://esm.town/v/gwoods22/val_scoped_blob_admin/blob-admin.tsx\";\n\nconst app = createBlobAdmin({ blob, valName: \"My App's\" });\n\n// createBlobAdmin has no auth of its own — always wrap it before exporting.\nexport default passwordAuth(app.fetch, { verifyPassword: verifyToken });\n","createdAt",["D",1784235867930],"branchVersion","branchId","262386e9-a9ac-46f9-a03b-d01f8b617a46","id","0b45b565-af42-463d-85fb-fdef24b7b40d","val_scoped_blob_admin",["D",1784053743735],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","354e78a1-5c0c-4900-b140-d249df71fc38","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","7418eb80-7666-4f00-aa43-5c71d89e5806","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_95":94,"_102":98},"org",{"_95":94,"_96":-5,"_97":98,"_18":54,"_99":100,"_101":25},"branch",{"_13":84,"_32":85,"_43":42,"_86":44,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":45,"_93":94},"isOwned",64,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","gwoods22","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJmOGRvdmRqYzZXdW5MWFVsZzFCSjRUcTVsZiIsImluaXRpYWxzIjoiR1cifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":214,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":31,"_56":57,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":215,"_79":216,"_81":217,"_83":25},"tree",[189,190,191,192,193,194],"files",[189,190,191,192,193,194],"counts",{"_178":61,"_179":180,"_181":61,"_182":183,"_184":185},"contents",[125,126,127,128,129,130],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":171,"_32":172,"_30":173,"_134":-5,"_41":42,"_40":174,"_136":25,"_38":175,"_13":61,"_33":20,"_35":176,"_24":25,"_141":-5,"_27":177},{"_43":163,"_32":164,"_30":165,"_134":-5,"_41":42,"_40":166,"_136":25,"_38":167,"_13":168,"_33":34,"_35":169,"_24":25,"_141":-5,"_27":170},{"_43":159,"_32":28,"_30":31,"_134":-5,"_41":42,"_40":14,"_136":25,"_38":160,"_13":161,"_33":34,"_35":37,"_24":25,"_141":-5,"_27":162},{"_43":151,"_32":152,"_30":153,"_134":-5,"_41":42,"_40":154,"_136":57,"_38":155,"_13":156,"_33":34,"_35":157,"_24":25,"_141":-5,"_27":158},{"_43":143,"_32":144,"_30":145,"_134":-5,"_41":42,"_40":146,"_136":57,"_38":147,"_13":148,"_33":139,"_35":149,"_24":25,"_141":-5,"_27":150},{"_43":131,"_32":132,"_30":133,"_134":-5,"_41":42,"_40":135,"_136":25,"_38":137,"_13":138,"_33":139,"_35":140,"_24":25,"_141":-5,"_27":142},"04309f6e-88cb-412a-8e27-4f612e38c9e2","minimal.tsx","e414a18c-7fb1-11f1-a5ef-1607ee4eb77e","parentId",47,"latest",["D",1784218764026],6,"http","/** @jsxImportSource https://esm.sh/hono@4.0.8/jsx **/\nimport { modifyFetchHandler } from \"https://esm.town/v/andreterron/codeOnValTown\";\nimport { passwordAuth } from \"https://esm.town/v/pomdtr/password_auth/main.tsx\";\nimport { verifyToken } from \"https://esm.town/v/pomdtr/verifyToken\";\nimport { blob } from \"https://esm.town/v/std/blob/main.ts\";\nimport { parseVal } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono@4.0.8\";\nimport { jsxRenderer } from \"npm:hono@4.0.8/jsx-renderer\";\nimport { HTTPException } from \"npm:hono@4.0.8/http-exception\";\n\nconst app = new Hono(), val = parseVal(import.meta.url), enc = encodeURIComponent;\nconst A = ({ href, label }: { href: string; label: string }) => {label};\nconst css = `pre{outline:1px solid #ccc;padding:5px;margin:15px;white-space:pre-wrap}.string{color:green}.number{color:darkorange}.boolean{color:blue}.null{color:magenta}.key{color:red}`;\nconst hl = (j: string) => j.replace(/&/g, \"&\").replace(//g, \">\").replace(/(\"(\\\\u[a-zA-Z0-9]{4}|\\\\[^u]|[^\\\\\"])*\"(\\s*:)?|\\b(true|false|null)\\b|-?\\d+(?:\\.\\d*)?(?:[eE][+\\-]?\\d+)?)/g, (m) => `${m}`);\n\napp.use(jsxRenderer(({ children }) => {val.name} Blob Admin

{children}

));\n\napp.get(\"/\", async (c) => c.render(

`{val.name}` Blob Admin

New Blob Upload Blob

{(await blob.list()).map((b) => { const k = enc(b.key); return ; })}

Name	Size (kb)	Last Modified	Edit	Delete	Download
{b.key}	{Math.round(b.size / 1000)}	{new Date(b.lastModified).toLocaleString(\"en-CA\",{timeZone:\"Canada/Eastern\",dateStyle:\"short\",timeStyle:\"short\"})}

));\n\napp.get(\"/create\", (c) => c.render(

KeyContent

<input type=\"submit\" value=\"Create\" /></form>));\napp.post(\"/create\", async (c) => {\n  const { key, content } = await c.req.parseBody() as { key: string; content: string };\n  const exists = await blob.get(key).then(() => true, () => false);\n  if (exists) throw new HTTPException(400, { message: `key ${key} already exists` });\n  await blob.set(key, content);\n  return c.redirect(\"/\");\n});\n\napp.get(\"/upload\", (c) => c.render(<form method=\"POST\" enctype=\"multipart/form-data\"><input name=\"file\" type=\"file\" /><input type=\"submit\" value=\"Upload\" /></form>));\napp.post(\"/upload\", async (c) => {\n  const { file } = await c.req.parseBody();\n  if (!(file instanceof File)) return c.text(\"Invalid file\", 400);\n  await blob.set(file.name, await file.arrayBuffer());\n  return c.redirect(\"/\");\n});\n\napp.get(\"/view/:key\", async (c) => {\n  const key = c.req.param(\"key\"), text = await (await blob.get(key)).text();\n  let j: string, isJson = true;\n  try { j = JSON.stringify(JSON.parse(text), null, 2); } catch { isJson = false; }\n  return c.render(<div><style>{css}</style><h1>{key}</h1>{isJson ? <pre dangerouslySetInnerHTML={{ __html: hl(j!) }} /> : <pre>{text + \"\\n\"}</pre>}</div>);\n});\n\napp.get(\"/edit/:key\", async (c) => {\n  const key = c.req.param(\"key\");\n  return c.render(<form method=\"POST\"><input name=\"new_key\" value={key} /><textarea name=\"content\">{await (await blob.get(key)).text()}

{children}

\n \n \n )),\n );\n\n // --- Home: table of every blob in the store ---\n app.get(\"/\", async (c) => {\n const blobs = await blob.list();\n\n return c.render(\n

`{valName}` Blob Admin

\n\n

\n New Blob\n Upload Blob\n

\n\n \n \n \n \n \n \n \n \n \n \n \n \n {blobs.map((b) => {\n const key = encodeURIComponent(b.key);\n return (\n \n \n \n \n \n \n \n \n );\n })}\n \n

Name	Size (kb)	Last Modified	Edit	Delete	Download
\n {b.key}\n	{Math.round(b.size / 1000)}	\n {new Date(b.lastModified).toLocaleString(\"en-CA\", {\n timeZone: \"Canada/Eastern\",\n dateStyle: \"short\",\n timeStyle: \"short\"\n })}\n

,\n );\n });\n\n // --- Create a blob from a text field ---\n app.get(\"/create\", (c) =>\n c.render(\n

\n Key\n \n Content\n

\n        <input type=\"submit\" value=\"Create\" />\n      </form>,\n    ));\n\n  app.post(\"/create\", async (c) => {\n    const { key, content } = await c.req.parseBody() as {\n      key: string;\n      content: string;\n    };\n\n    const alreadyExists = await blob.get(key).then(() => true, () => false);\n    if (alreadyExists) {\n      throw new HTTPException(400, { message: `key ${key} already exists` });\n    }\n\n    await blob.set(key, content);\n    return c.redirect(\"/\");\n  });\n\n  // --- Upload a file directly as a blob (key = file name) ---\n  app.get(\"/upload\", (c) =>\n    c.render(\n      <form method=\"POST\" enctype=\"multipart/form-data\">\n        <input name=\"file\" type=\"file\" />\n        <input type=\"submit\" value=\"Upload\" />\n      </form>,\n    ));\n\n  app.post(\"/upload\", async (c) => {\n    const { file } = await c.req.parseBody();\n    if (!(file instanceof File)) {\n      return c.text(\"Invalid file\", 400);\n    }\n\n    await blob.set(file.name, await file.arrayBuffer());\n    return c.redirect(\"/\");\n  });\n\n  // --- View a blob's content, pretty-printed and highlighted if it's JSON ---\n  app.get(\"/view/:key\", async (c) => {\n    const key = c.req.param(\"key\");\n    const text = await (await blob.get(key)).text();\n\n    let prettyJson: string | undefined;\n    try {\n      prettyJson = JSON.stringify(JSON.parse(text), null, 2);\n    } catch {\n      // Not valid JSON — fall back to plain text rendering below.\n    }\n\n    return c.render(\n      <div>\n        <style>{viewerCss}</style>\n        <h1>{key}</h1>\n        {prettyJson\n          ? (\n            <pre\n              dangerouslySetInnerHTML={{ __html: syntaxHighlight(prettyJson) }}\n            />\n          )\n          : <pre>{text + \"\\n\"}</pre>}\n      </div>,\n    );\n  });\n\n  // --- Edit a blob's content, or rename its key ---\n  app.get(\"/edit/:key\", async (c) => {\n    const key = c.req.param(\"key\");\n    const content = await (await blob.get(key)).text();\n\n    return c.render(\n      <form method=\"POST\">\n        <input name=\"new_key\" value={key} />\n        <textarea name=\"content\">{content}

\n \n

,\n );\n });\n\n app.post(\"/edit/:key\", async (c) => {\n const key = c.req.param(\"key\");\n const { content, new_key } = await c.req.parseBody() as {\n content: string;\n new_key: string;\n };\n\n await blob.set(key, content);\n if (new_key !== key) {\n await blob.move(key, new_key);\n }\n return c.redirect(\"/\");\n });\n\n // --- Delete a blob (with a confirmation step) ---\n app.get(\"/delete/:key\", (c) => {\n const key = c.req.param(\"key\");\n return c.render(\n ,\n );\n });\n\n app.post(\"/delete/:key\", async (c) => {\n await blob.delete(c.req.param(\"key\"));\n return c.redirect(\"/\");\n });\n\n // --- Download a blob's raw content ---\n app.get(\"/download/:key\", (c) => blob.get(c.req.param(\"key\")));\n\n return app;\n}",[164],"c7049c7c-210f-4239-a662-c7204eb7add0","README.md","79d75cea-8003-11f1-8c88-1607ee4eb77e",24,["D",1784088784249],"# Val-Scoped Blob Admin\n\nA little admin UI for browsing, creating, viewing, editing, uploading to,\ndownloading from, and deleting [Val Town blobs](https://docs.val.town/std/blob) —\nright from your browser.\n\nThis is a fork of Steve Krouse's\n[Global Blob Admin](https://www.val.town/x/stevekrouse/blob_admin_app), updated to:\n\n- add **JSON syntax highlighting** when viewing a blob (numbers, strings, keys,\n booleans, and `null` are colored)\n- work against **val-scoped** blob storage (`std/blob/main.ts`) instead of only\n account-global blobs, so you can run one of these per-project and it only\n ever sees that project's blobs\n\n## How it's organized\n\n| File | What it does |\n| ---------------------- | ----------------------------------------------------------------------- |\n| `helper.ts` | Shared `BlobStore` type + the JSON syntax highlighter. No Val Town–specific code — plain TS. |\n| `lib/blob-admin.tsx` | `createBlobAdmin()` — builds the Hono app (all the routes/pages). This is the reusable part. |\n| `main.tsx` | Standalone demo: wires `createBlobAdmin()` to this val's own blobs, behind password auth. This is what's deployed at this val's URL. |\n| `example.tsx` | The exact snippet you'd copy into your own val (see below). |\n\nThe refactor's whole point is that `lib/blob-admin.tsx` doesn't know anything\nabout *this* val — you give it a blob client and it gives you back a Hono app.\n`main.tsx` is just one particular way of using it.\n\n## Using this in your own val\n\nYou don't need to copy the full app. Import `createBlobAdmin` and pass it\n**your own val's blob import** — that's the whole integration:\n\n```tsx\n/** @jsxImportSource https://esm.sh/hono@4.0.8/jsx **/\nimport { passwordAuth } from \"https://esm.town/v/pomdtr/password_auth/main.tsx\";\nimport { verifyToken } from \"https://esm.town/v/pomdtr/verifyToken\";\nimport { blob } from \"https://esm.town/v/std/blob/main.ts\"; // your val's own blobs\nimport { createBlobAdmin } from \"https://esm.town/v/gwoods22/val_scoped_blob_admin/lib/blob-admin.tsx\";\n\nconst app = createBlobAdmin({ blob, title: \"My App's Blobs\" });\n\n// createBlobAdmin has no auth of its own — always wrap it before exporting.\nexport default passwordAuth(app.fetch, { verifyPassword: verifyToken });\n```\n\nThat's it — no copy-pasting the routes, the JSX, or the syntax highlighter.\nSee `example.tsx` in this val for the same snippet, ready to remix.\n\n### Why you pass in your own `blob`\n\n`createBlobAdmin()` takes a `blob` client as a required option instead of\nimporting one itself. Two reasons, both about security:\n\n1. **Scoping.** Val Town's `std/blob/main.ts` import is scoped to *the val\n it's imported into* — when your val imports it, it can only ever reach\n your val's blobs. If this library imported its own `blob` client instead,\n every val using it would be sharing (and could accidentally clobber) the\n same storage.\n2. **No hidden network access.** The library never reaches out on its own —\n it only ever touches whatever store object you hand it. You can audit\n exactly what it does to your data by reading `lib/blob-admin.tsx`.\n\nIf you'd rather manage blobs globally across your whole account, swap the\nimport for `https://esm.town/v/std/blob/global.ts` — same shape, so nothing\nelse changes.\n\n### Add your own auth\n\n`createBlobAdmin()` deliberately ships with **no authentication**. This admin\npanel can read, overwrite, and delete every blob in whatever store you give\nit, so an unauthenticated deployment means anyone with the URL has full\nread/write/delete access to that data.\n\nThe example above uses Val Town's built-in `passwordAuth` + `verifyToken`\npattern (same as this val's own `main.tsx`), which is a nice fit for personal\nprojects: the \"password\" you sign in with is your own Val Town API token, so\nonly you can get in. You're of course free to swap in any other auth\nmiddleware that wraps a `fetch` handler.\n\n## Local development\n\nEverything here is plain Hono + JSX, no build step. Edit `lib/blob-admin.tsx`\nto change routes or markup, `helper.ts` for shared types/utilities, and\n`main.tsx` to change how the standalone deployment of this val is configured.\n",[172],"pulls","branches",1,"forks","envVars",{"_186":61,"_188":61},"connections",{"_186":61,"_187":61},"count","unfilledCount","emptyCount",{"_43":171,"_32":172,"_30":173,"_134":-5,"_41":42,"_40":174,"_136":25,"_38":211,"_13":61,"_33":20,"_35":176,"_24":25,"_141":-5,"_196":212,"_27":213},{"_43":163,"_32":164,"_30":165,"_134":-5,"_41":42,"_40":166,"_136":25,"_38":208,"_13":168,"_33":34,"_35":169,"_24":25,"_141":-5,"_196":209,"_27":210},{"_43":159,"_32":28,"_30":31,"_134":-5,"_41":42,"_40":14,"_136":25,"_38":205,"_13":161,"_33":34,"_35":37,"_24":25,"_141":-5,"_196":206,"_27":207},{"_43":151,"_32":152,"_30":153,"_134":-5,"_41":42,"_40":154,"_136":57,"_38":202,"_13":156,"_33":34,"_35":157,"_24":25,"_141":-5,"_196":203,"_27":204},{"_43":143,"_32":144,"_30":145,"_134":-5,"_41":42,"_40":146,"_136":57,"_38":199,"_13":148,"_33":139,"_35":149,"_24":25,"_141":-5,"_196":200,"_27":201},{"_43":131,"_32":132,"_30":133,"_134":-5,"_41":42,"_40":135,"_136":25,"_38":195,"_13":138,"_33":139,"_35":140,"_24":25,"_141":-5,"_196":197,"_27":198},["D",1784218764026],"children",[],[132],["D",1784218604924],[],[144],["D",1784218626069],[],[152],["D",1784235867930],[],[28],["D",1784218800284],[],[164],["D",1784088784249],[],[172],["D",1784053743735],{"_95":94,"_102":98},{"_95":94,"_96":-5,"_97":98,"_18":54,"_99":100,"_101":25},{"_13":84,"_32":85,"_43":42,"_86":44,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":45,"_93":94},"ctx",{"_77":-5,"_122":251,"_252":253,"_254":255,"_256":25,"_257":25,"_258":25,"_259":57,"_260":-5,"_261":-7,"_262":-7,"_263":61,"_264":25,"_265":25,"_266":-5,"_267":25,"_268":25,"_269":25,"_270":-5},"ENV",{"_222":223,"_224":225,"_226":85,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236,"_237":238,"_239":240,"_241":242,"_243":244,"_245":246,"_247":248,"_249":250},"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"]

{val.name} Blob Admin

{valName} Blob Admin

`{val.name}` Blob Admin

`{valName}` Blob Admin

Diff · v49