`{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()}

);\n});\napp.post(\"/edit/:key\", async (c) => {\n const key = c.req.param(\"key\"), { content, new_key } = await c.req.parseBody() as { content: string; new_key: string };\n await blob.set(key, content);\n if (new_key !== key) await blob.move(key, new_key);\n return c.redirect(\"/\");\n});\n\napp.get(\"/delete/:key\", (c) => c.render());\napp.post(\"/delete/:key\", async (c) => { await blob.delete(c.req.param(\"key\")); return c.redirect(\"/\"); });\n\napp.get(\"/download/:key\", (c) => blob.get(c.req.param(\"key\")));\n\nexport default modifyFetchHandler(passwordAuth(app.fetch, { verifyPassword: verifyToken }));","label",[130],"9f036933-7350-42fd-8d8b-6cd2bdf82624","main.tsx","fd8ab606-7fb1-11f1-aae8-1607ee4eb77e",12,["D",1784059957850],"/**\n * Val-scoped Blob Admin — standalone demo / your personal admin panel.\n *\n * This file wires `createBlobAdmin()` up to THIS val's own project-scoped\n * blob storage and puts it behind Val Town's password auth (sign in with\n * your own Val Town API token — see README for details).\n *\n * Want this admin UI in your OWN val instead of copy-pasting this file?\n * See the README for the ~6-line snippet you need.\n */\n/** @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\"; // val-scoped blobs\nimport { parseVal } from \"https://esm.town/v/std/utils/index.ts\";\n\nimport { createBlobAdmin } from \"./lib/blob-admin.tsx\";\n\nconst val = parseVal(import.meta.url);\n\nconst app = createBlobAdmin({ blob, title: `${val.name} Blob Admin` });\n\nexport default modifyFetchHandler(\n passwordAuth(app.fetch, { verifyPassword: verifyToken }),\n);\n",[142],"744f4813-7a8c-4d48-a8a1-5c6fbdddb44b","helper.ts","48a4b9e4-7fc0-11f1-994f-1607ee4eb77e",16,["D",1784063520410],2,"/**\n * Lightweight JSON syntax highlighting for the blob viewer.\n * No dependencies — just regex-based token wrapping, rendered with `viewerCss`.\n */\n\nexport const viewerCss = `\npre {\n outline: 1px solid #ccc;\n padding: 5px;\n margin: 15px;\n white-space: pre-wrap;\n}\n.string { color: green; }\n.number { color: darkorange; }\n.boolean { color: blue; }\n.null { color: magenta; }\n.key { color: red; }`;\n\n// Matches JSON strings (incl. object keys), booleans, null, and numbers.\nconst JSON_TOKEN =\n /(\"(\\\\u[a-zA-Z0-9]{4}|\\\\[^u]|[^\\\\\"])*\"(\\s*:)?|\\b(true|false|null)\\b|-?\\d+(?:\\.\\d*)?(?:[eE][+\\-]?\\d+)?)/g;\n\n/** Wraps each JSON token in a `` so `viewerCss` can color it. */\nexport function syntaxHighlight(json: string): string {\n const escaped = json\n .replace(/&/g, \"&\")\n .replace(//g, \">\");\n\n return escaped.replace(JSON_TOKEN, (match) => {\n let cls = \"number\";\n if (/^\"/.test(match)) {\n cls = /:$/.test(match) ? \"key\" : \"string\";\n } else if (/true|false/.test(match)) {\n cls = \"boolean\";\n } else if (/null/.test(match)) {\n cls = \"null\";\n }\n return `${match}`;\n });\n}\n",[149],"cf77505c-6513-44d3-8fd2-495dd43c0a2e",["D",1784063836921],1,[28],"f67c6362-095c-45ab-83cb-81d72015b852","lib","a55ab6f6-1b52-44a8-9ebe-9b6d1ba45956",9,["D",1784059916850],"directory",[161],"pulls","branches","forks","envVars",{"_174":61,"_176":61},"connections",{"_174":61,"_175":61},"count","unfilledCount","emptyCount",{"_43":160,"_32":161,"_30":162,"_132":-5,"_41":42,"_40":163,"_134":25,"_38":204,"_13":61,"_34":165,"_36":-5,"_24":25,"_139":-5,"_184":205,"_27":206},{"_43":196,"_32":197,"_30":198,"_132":162,"_41":42,"_40":199,"_134":25,"_38":200,"_13":158,"_34":35,"_36":201,"_24":25,"_139":-5,"_184":202,"_27":203},{"_43":156,"_32":28,"_30":31,"_132":-5,"_41":42,"_40":14,"_134":25,"_38":193,"_13":158,"_34":35,"_36":37,"_24":25,"_139":-5,"_184":194,"_27":195},{"_43":148,"_32":149,"_30":150,"_132":-5,"_41":42,"_40":151,"_134":25,"_38":190,"_13":153,"_34":35,"_36":154,"_24":25,"_139":-5,"_184":191,"_27":192},{"_43":141,"_32":142,"_30":143,"_132":-5,"_41":42,"_40":144,"_134":25,"_38":187,"_13":136,"_34":137,"_36":146,"_24":25,"_139":-5,"_184":188,"_27":189},{"_43":129,"_32":130,"_30":131,"_132":-5,"_41":42,"_40":133,"_134":25,"_38":183,"_13":136,"_34":137,"_36":138,"_24":25,"_139":-5,"_184":185,"_27":186},["D",1784063157841],"children",[],[130],["D",1784059957850],[],[142],["D",1784063520410],[],[149],["D",1784063836921],[],[28],"badb30d8-6880-4a20-9b6b-80bbf38ff9e1","blob-admin.tsx","561d0752-7fc0-11f1-8a32-1607ee4eb77e",14,["D",1784063188805],"/** @jsxImportSource https://esm.sh/hono@4.0.8/jsx **/\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\nimport type { BlobStore } from \"./blob-store.ts\";\nimport { syntaxHighlight, viewerCss } from \"./json-highlight.ts\";\n\nexport interface BlobAdminOptions {\n /**\n * The blob client this admin panel reads/writes/deletes from. Pass in\n * your OWN val's blob import — the panel only ever touches whatever\n * store you give it, never reaches out and grabs one itself:\n *\n * import { blob } from \"https://esm.town/v/std/blob/main.ts\"; // val-scoped (recommended)\n * import { blob } from \"https://esm.town/v/std/blob/global.ts\"; // account-global\n */\n blob: BlobStore;\n /** Shown in the page title and header. Defaults to \"Blob Admin\". */\n title?: string;\n}\n\nconst encodeBlobKey = (key: string) => encodeURIComponent(key);\n\nconst ActionLink = ({ href, label }: { href: string; label: string }) => (\n \n {label}\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, title = \"Blob Admin\" }: BlobAdminOptions,\n) {\n const app = new Hono();\n\n app.use(\n jsxRenderer(({ children }) => (\n \n \n {title}\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

{title}

\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 = encodeBlobKey(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}",[],[161,197],["D",1784059916850],[178],[161],["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,"_121":244,"_245":246,"_247":248,"_249":25,"_250":25,"_251":25,"_252":57,"_253":-5,"_254":-7,"_255":-7,"_256":61,"_257":25,"_258":25,"_259":-5,"_260":25,"_261":25,"_262":25,"_263":-5},"ENV",{"_215":216,"_217":218,"_219":85,"_220":221,"_222":223,"_224":225,"_226":227,"_228":229,"_230":231,"_232":233,"_234":235,"_236":237,"_238":239,"_240":241,"_242":243},"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 · v19