[{"_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",{"_96":95,"_32":45,"_104":86,"_27":105,"_13":14,"_106":-5,"_11":107,"_108":109,"_110":111,"_112":113,"_114":115,"_20":-5,"_116":-5,"_117":-5,"_118":25,"_119":120,"_121":58,"_122":-5,"_123":-5,"_124":125},"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":56,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":79,"_80":81,"_82":83,"_84":25},"version",54,"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","minimal.tsx","latestPath","fileId","e414a18c-7fb1-11f1-a5ef-1607ee4eb77e","name","fileType","http","content","/** @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()}

404: Blob Not Found

No blob exists with the key {key}.

← Back to all blobs

); };\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

404: Blob Not Found

\n No blob exists with the key {blobKey}.\n

\n ← Back to all blobs\n

\n);\n\n/**\n * Builds a ready-to-serve Hono app for listing, creating, viewing, editing,\n * uploading to, downloading from, and deleting blobs.\n *\n * ⚠️ Security: this app has NO authentication of its own. Anyone who can\n * reach it can read and delete every blob in the store you pass in. Always\n * wrap the returned app's `fetch` in an auth layer before exporting it as a\n * val's default handler — see the README for the recommended pattern.\n */\nexport function createBlobAdmin(\n { blob, valName = \"Your Val's\" }: BlobAdminOptions,\n) {\n const app = new Hono();\n\n app.use(\n jsxRenderer(({ children }) => (\n \n \n {valName} Blob Admin\n \n \n \n

{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\n    let text: string;\n    try {\n      text = await (await blob.get(key)).text();\n    } catch (e) {\n      if (e instanceof ValTownBlobNotFoundError) {\n        c.status(404);\n        return c.render(<NotFoundPage blobKey={key} />);\n      }\n      throw e;\n    }\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\n    let content: string;\n    try {\n      content = await (await blob.get(key)).text();\n    } catch (e) {\n      if (e instanceof ValTownBlobNotFoundError) {\n        c.status(404);\n        return c.render(<NotFoundPage blobKey={key} />);\n      }\n      throw e;\n    }\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],"354763c9-9a69-410a-9109-0f303e0c6ba6","README.md","79d75cea-8003-11f1-8c88-1607ee4eb77e",50,["D",1784235885039],1,"# 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 types (`BlobStore`, `BlobAdminOptions`) + the JSON syntax highlighter. Plain TS, no Val Town–specific code. |\n| `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| `minimal.tsx` | A single-file, compact version of the same app for quick reference/remixing without the multi-file split. |\n\nThe refactor's whole point is that `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/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```\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 `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 `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`minimal.tsx` is a self-contained, single-file version kept around for anyone\nwho'd rather grab one compact file than wire up the multi-file split.\n",[172],"pulls","branches","forks","envVars",{"_186":62,"_188":62},"connections",{"_186":62,"_187":62},"count","unfilledCount","emptyCount",{"_43":171,"_32":172,"_30":173,"_133":-5,"_41":42,"_40":174,"_134":58,"_38":211,"_13":176,"_33":20,"_35":177,"_24":25,"_137":-5,"_196":212,"_27":213},{"_43":163,"_32":164,"_30":165,"_133":-5,"_41":42,"_40":166,"_134":25,"_38":208,"_13":168,"_33":153,"_35":169,"_24":25,"_137":-5,"_196":209,"_27":210},{"_43":156,"_32":157,"_30":56,"_133":-5,"_41":42,"_40":158,"_134":25,"_38":205,"_13":160,"_33":153,"_35":161,"_24":25,"_137":-5,"_196":206,"_27":207},{"_43":147,"_32":148,"_30":149,"_133":-5,"_41":42,"_40":150,"_134":58,"_38":202,"_13":152,"_33":153,"_35":154,"_24":25,"_137":-5,"_196":203,"_27":204},{"_43":139,"_32":140,"_30":141,"_133":-5,"_41":42,"_40":142,"_134":58,"_38":199,"_13":144,"_33":34,"_35":145,"_24":25,"_137":-5,"_196":200,"_27":201},{"_43":132,"_32":28,"_30":31,"_133":-5,"_41":42,"_40":14,"_134":25,"_38":195,"_13":136,"_33":34,"_35":37,"_24":25,"_137":-5,"_196":197,"_27":198},["D",1784245279352],"children",[],[28],["D",1784218604924],[],[140],["D",1784218626069],[],[148],["D",1784235867930],[],[157],["D",1784245273725],[],[164],["D",1784235885039],[],[172],["D",1784053743735],{"_96":95,"_103":99},{"_96":95,"_97":-5,"_98":99,"_18":54,"_100":101,"_102":25},{"_13":85,"_32":86,"_43":42,"_87":44,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":45,"_94":95},"ctx",{"_78":-5,"_123":251,"_252":253,"_254":255,"_256":25,"_257":25,"_258":25,"_259":58,"_260":-5,"_261":-7,"_262":-7,"_263":62,"_264":25,"_265":25,"_266":-5,"_267":25,"_268":25,"_269":25,"_270":-5},"ENV",{"_222":223,"_224":225,"_226":86,"_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"]

Diff · v54