{name}

\n {metadata\n ? (\n

\n {metadata.size > 1024 * 1024\n ? `${(metadata.size / (1024 * 1024)).toFixed(0)} MB`\n : metadata.size > 1024\n ? `${(metadata.size / 1024).toFixed(0)} KB`\n : `${metadata.size} B`}\n

Last edited: {metadata.lastModified}

\n )\n :

}\n

\n {name.startsWith(\"__public\") && (\n \n Public Link\n \n )}\n \n Replace\n \n \n Download\n \n \n \n Delete\n \n \n

\n {error &&

{error}

}\n\n {type === \"text\" ||\n type === \"json\" && (\n \n );\n}","deleted","label","children",[],[156],{"_102":175,"_95":176,"_157":177,"_159":-5,"_160":138,"_161":162,"_163":116,"_104":178,"_99":32,"_165":166,"_167":179,"_169":22,"_170":-5,"_171":180,"_98":181},"7291746e-92fd-11f0-b8e2-0224a6c84d84","Home.tsx","72917518-92fd-11f0-b8e2-0224a6c84d84",["D",1758027769483],"/** @jsxImportSource npm:hono/jsx */\nimport { blob } from \"https://esm.town/v/std/blob\";\nimport { Layout } from \"./Layout.tsx\";\n\ntype Blob = Awaited>[number];\n\nexport const Home = (props: {\n blobs: Blob[];\n prefix: string;\n limit: number;\n page: number;\n}) => {\n return (\n \n

\n \n

\n \n +\n \n

\n \n {/* Define column widths with a */}\n \n {/* Key (no width = flex) */}\n \n \n \n\n \n \n \n \n \n \n \n\n \n {props.blobs.map((blob, index) => (\n \n {/* Key cell: no fixed width here */}\n \n\n {/* Size cell: forced to 6rem (w-24) */}\n \n\n {/* Last Modified cell: forced to 8rem (w-32) */}\n \n \n ))}\n \n

\n Key \n	\n Size \n	\n Last Edited \n
\n \n \n {blob.key}\n \n \n	\n \n {blob.size > 1024 * 1024\n ? `${(blob.size / (1024 * 1024)).toFixed(0)} MB`\n : blob.size > 1024\n ? `${(blob.size / 1024).toFixed(0)} KB`\n : `${blob.size} B`}\n \n	\n \n {blob.lastModified.split(\"T\")[0]}\n \n

\n \n Previous\n {\" \"}\n

{props.page}

\n \n Next\n \n

\n \n );\n};",[],[176],{"_102":183,"_95":184,"_157":185,"_159":-5,"_160":138,"_161":162,"_163":116,"_104":186,"_99":32,"_165":166,"_167":187,"_169":22,"_170":-5,"_171":188,"_98":189},"7291853a-92fd-11f0-b8e2-0224a6c84d84","Layout.tsx","729185e4-92fd-11f0-b8e2-0224a6c84d84",["D",1758027769483],"/** @jsxImportSource npm:hono/jsx */\n\nexport function Layout({ children, showLogout = true }) {\n return (\n \n \n Blob Admin\n \n \n\n \n \n \n

\n \n Blob Admin\n \n

\n \n View source\n \n

\n {showLogout && (\n \n Logout\n \n )}\n

\n {children}\n

\n \n \n );\n}",[],[184],{"_102":191,"_95":192,"_157":193,"_159":-5,"_160":138,"_161":162,"_163":116,"_104":194,"_99":32,"_165":166,"_167":195,"_169":22,"_170":-5,"_171":196,"_98":197},"7291880a-92fd-11f0-b8e2-0224a6c84d84","LoginPage.tsx","729188a0-92fd-11f0-b8e2-0224a6c84d84",["D",1758027769483],"/** @jsxImportSource npm:hono/jsx */\nimport { Layout } from \"./Layout.tsx\";\n\nexport function LoginPage({ username }: { username: string }) {\n return (\n \n

\n Blob Admin helps you manage your blob files in{\" \"}\n \n Val Town Blob Storage\n .\n

\n If you're {username},{\" \"}\n \n login here\n .\n

\n If you're sadly not {username},{\" \"}\n \n remix yourself a Blob Admin here\n .\n

\n \n );\n}",[],[192],{"_102":199,"_95":200,"_157":201,"_159":-5,"_160":138,"_161":162,"_163":116,"_104":202,"_99":32,"_165":166,"_167":203,"_169":22,"_170":-5,"_171":204,"_98":205},"72918ab2-92fd-11f0-b8e2-0224a6c84d84","NewPage.tsx","72918b48-92fd-11f0-b8e2-0224a6c84d84",["D",1758027769483],"/** @jsxImportSource npm:hono/jsx */\nimport { Layout } from \"./Layout.tsx\";\n\nexport function NewPage(props) {\n return (\n \n

Save Blob

\n \n );\n}",[],[200],{"_102":207,"_95":208,"_157":209,"_159":-5,"_160":138,"_161":162,"_163":116,"_104":210,"_99":32,"_165":166,"_167":211,"_169":22,"_170":-5,"_171":212,"_98":213},"72918d78-92fd-11f0-b8e2-0224a6c84d84","NotAuthorizedPage.tsx","72918e18-92fd-11f0-b8e2-0224a6c84d84",["D",1758027769483],"/** @jsxImportSource npm:hono/jsx */\nimport { Layout } from \"./Layout.tsx\";\n\nexport function NotAuthorizedPage(\n { username, email }: { username: string; email: string },\n) {\n return (\n \n

Not authorized

\n You are logged in as {email}.\n

\n You must log in with {username}'s email.\n

\n If you're sadly not {username},{\" \"}\n \n remix yourself a Blob Admin here\n .\n

\n \n );\n}",[],[208],{"_102":215,"_95":216,"_157":217,"_159":-5,"_160":138,"_161":162,"_163":116,"_104":218,"_99":219,"_165":220,"_167":221,"_169":22,"_170":-5,"_171":222,"_98":223},"72919f20-92fd-11f0-b8e2-0224a6c84d84","README.md","0799ee7e-2797-11f0-9d52-569c3dd06744",["D",1758027769483],1,"file","# Blob Admin\n\n<<<<<<< main\nThis is a lightweight Blob Admin interface to view and debug your Blob data.\n\n![b7321ca2cd80899250589b9aa08bc3cae9c7cea276282561194e7fc537259b46.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/311a81bb-18d8-4583-b7e3-64bac326f700/public)\n\n## Installation\n\nUse this button to install the val:\n\n[![](https://stevekrouse-button.web.val.run/Install)](https://www.val.town/v/stevekrouse/blob_admin_app/fork)\n\nIt uses [basic authentication](https://www.val.town/v/pomdtr/basicAuth) with your [Val Town API Token](https://www.val.town/settings/api) as the password (leave the username field blank).\n\n# TODO\n\n- [x] `/new` - render a page to write a new blob key and value\n- [x] `/edit/:blob` - render a page to edit a blob (prefilled with the existing content)\n- [x] `/delete/:blob` - delete a blob and render success\n- [x] add upload/download buttons\n- [ ] Use [modals](https://picocss.com/docs/modal) for create/upload/edit/view/delete page (htmx ?)\n- [ ] handle non-textual blobs properly\n- [ ] use codemirror instead of a textarea for editing text blobs\n=======\nHand-crafted server-rendered Hono JSX. Back to basics.\n\n## Features\n\n- **File Management**: Upload, view, edit, and delete blob files\n- **Authentication**: Secure access with lastlogin middleware\n- **File Type Support**:\n - **Images**: Display inline with preview\n - **Text Files**: Editable in textarea with syntax highlighting\n - **JSON Files**: Interactive JSON viewer with collapsible nodes and edit capability\n - **Binary Files**: Metadata view with download option\n- **JSON Detection**: Automatically detects JSON files by:\n - `.json` file extension\n - Files under 100KB that parse as valid JSON\n- **Public Files**: Support for public file hosting via `__public/` prefix\n- **Search & Pagination**: Browse files with prefix search and pagination\n\n## JSON Viewer\n\nThe JSON viewer provides:\n- Collapsible/expandable object and array nodes\n- Syntax highlighting\n- Copy functionality\n- Edit mode with JSON validation\n- Error handling for invalid JSON\n\n## Todo\n\n- [ ] Make a seperate val for hosting public files?\n- [ ] Explain how the public folder works\n- [ ] Button to move blobs into or out of the public folder\n- [ ] Merge this back to the orignal\n- [ ] Ability to rename blobs\n>>>>>>> main",[],[216],{"_102":225,"_95":226,"_157":114,"_159":-5,"_160":138,"_161":137,"_163":116,"_104":227,"_99":162,"_165":228,"_167":229,"_169":22,"_170":-5,"_171":230,"_98":231},"99d6364a-92fd-11f0-98bb-0224a6c84d84","main.tsx",["D",1758027835368],"http","/** @jsxImportSource npm:hono/jsx */\nimport { Hono } from \"npm:hono\";\nimport { blob } from \"https://esm.town/v/std/blob\";\nimport { liveReload } from \"https://esm.town/v/stevekrouse/live-reload/main.ts\";\nimport { Home } from \"./Home.tsx\";\nimport { BlobPage } from \"./BlobPage.tsx\";\nimport { isImage, isJSON, isText } from \"./utils.ts\";\nimport { Layout } from \"./Layout.tsx\";\nimport { NewPage } from \"./NewPage.tsx\";\nimport { LoginPage } from \"./LoginPage.tsx\";\nimport { lastlogin } from \"https://esm.town/v/stevekrouse/lastlogin\";\nimport { ValTown } from \"npm:@valtown/sdk\";\nimport { NotAuthorizedPage } from \"./NotAuthorizedPage.tsx\";\n\nconst vt = new ValTown();\nconst { email: authorEmail, username } = await vt.me.profile.retrieve();\n\nconst app = new Hono();\n\n// For backwards-compatibility with the old blob-admin\n// TODO - test that more\napp.get(\"/api/public/:key\", (c) => {\n return blob.get(\"__public/\" + c.req.param(\"key\"));\n});\n\napp.get(\"/public/:key\", (c) => {\n return blob.get(\"__public/\" + c.req.param(\"key\"));\n});\n\napp.get(\"/login\", (c) => {\n const email = c.req.header(\"X-LastLogin-Email\");\n if (email) {\n return c.redirect(\"/\");\n }\n return c.html();\n});\n\n// auth middleware\napp.use(\"*\", async (c, next) => {\n const email = c.req.header(\"X-LastLogin-Email\");\n if (!email) {\n return c.redirect(\"/login\");\n } else if (email != authorEmail) {\n return c.html(\n ,\n );\n }\n await next();\n});\n\n// Home page (table list view)\napp.get(\"/\", async (c) => {\n const prefix = c.req.query(\"prefix\") || \"\";\n const limit = parseInt(c.req.query(\"limit\")) || 10;\n const page = parseInt(c.req.query(\"page\")) || 1;\n\n const blobs = await blob.list(prefix);\n const subset = blobs.slice((page - 1) * limit, page * limit);\n\n return c.html(\n ,\n );\n});\n\n// New page to add new blob\napp.get(\"/new\", (c) => {\n return c.html();\n});\n\n// Single blob page\napp.get(\"/blob/:key\", async (c) => {\n const key = c.req.param(\"key\");\n const matches = await blob.list(key);\n if (matches.length === 0) {\n return c.html();\n } else if (matches.length > 1) {\n return c.html();\n }\n const metadata = matches[0];\n if (isImage(metadata.key)) {\n return c.html();\n }\n if (metadata.size < 1024 || isText(metadata.key)) { // is text or small\n try {\n const blob_ = await blob.get(key);\n const text = await blob_.text();\n\n const blob_type = isJSON(metadata.key, text, metadata.size)\n ? \"json\"\n : \"text\";\n\n return c.html(\n ,\n );\n } catch (err: any) {\n return c.html(\n ,\n );\n }\n }\n return c.html();\n});\n\n// actually get the blob for downloading\napp.get(\"/raw/:key\", (c) => {\n return blob.get(c.req.param(\"key\"));\n});\n\napp.post(\"/blob/:key/delete\", async (c) => {\n const key = c.req.param(\"key\");\n await blob.delete(key);\n return c.redirect(\"/\");\n});\n\n// Used by BlobPage to update blobs\n// and by NewPage to create new blobs\napp.post(\"/update-blob\", async (c) => {\n const formData = await c.req.parseBody();\n const key = formData[\"key\"];\n const file = formData[\"file\"] as File;\n const name = key || file.name;\n if (!name) {\n return c.html(\n \n

Can't set blob without name

\n ,\n );\n }\n if (file instanceof File && file.size > 0) {\n console.log(\"is file\");\n console.log(file.name);\n await blob.set(name, file);\n return c.redirect(\"/blob/\" + encodeURIComponent(name));\n }\n const text = formData[\"text\"];\n if (typeof text === \"string\") {\n await blob.set(name, text);\n return c.redirect(\"/blob/\" + encodeURIComponent(name));\n }\n return c.html(\n \n

Invalid form data

\n ,\n );\n});\n\napp.onError((err) => Promise.reject(err));\nexport default liveReload(lastlogin(app.fetch), import.meta.url);",[],[226],{"_102":233,"_95":234,"_157":235,"_159":-5,"_160":138,"_161":162,"_163":116,"_104":236,"_99":32,"_165":166,"_167":237,"_169":22,"_170":-5,"_171":238,"_98":239},"7291903e-92fd-11f0-b8e2-0224a6c84d84","utils.ts","729190ca-92fd-11f0-b8e2-0224a6c84d84",["D",1758027769483],"const COMMON_IMAGE_EXTENSIONS = [\n \"jpg\",\n \"jpeg\",\n \"png\",\n \"gif\",\n \"webp\",\n \"svg\",\n \"svgz\",\n \"bmp\",\n \"ico\",\n \"avif\",];\n\nconst COMMON_TEXT_EXTENSIONS = [\n \"txt\",\n \"md\",\n \"json\",\n \"html\",\n \"xml\",\n \"yaml\",\n \"yml\",\n \"csv\",\n \"ts\",\n \"js\",\n \"jsx\",\n \"tsx\",\n \"css\",\n \"scss\",\n \"sass\",\n \"less\",\n \"styl\",\n \"vue\",\n \"py\",\n \"sh\",\n \"c\",\n \"h\",\n \"cpp\",\n \"cs\",\n \"java\",\n \"rb\",\n \"pl\",\n \"go\",\n \"rs\",\n \"php\",\n \"text\",\n];\n\nexport function isImage(path: string) {\n return COMMON_IMAGE_EXTENSIONS.includes(path.split(\".\").pop());\n}\n\nexport function isText(path: string) {\n return COMMON_TEXT_EXTENSIONS.includes(path.split(\".\").pop());\n}\n\nexport function isJSON(path: string, text?: string, size?: number): boolean {\n // Check if file extension is .json\n if (path.endsWith('.json')) {\n return true;\n }\n \n // If we have text content and size is less than 100KB, try to parse as JSON\n if (text && size && size < 100 * 1024) {\n try {\n JSON.parse(text);\n return true;\n } catch {\n return false;\n }\n }\n \n return false;\n}",[],[234],"files",[154,174,182,190,198,206,214,224,232],"counts",{"_244":32,"_245":219,"_246":32,"_247":32},"pulls","branches","forks","envVars","contents",[250,253,256,259,262,265,268,271,274],{"_102":155,"_95":156,"_157":158,"_159":-5,"_160":138,"_161":162,"_163":116,"_104":251,"_99":32,"_165":166,"_167":168,"_169":22,"_170":-5,"_98":252},["D",1758027769483],[156],{"_102":175,"_95":176,"_157":177,"_159":-5,"_160":138,"_161":162,"_163":116,"_104":254,"_99":32,"_165":166,"_167":179,"_169":22,"_170":-5,"_98":255},["D",1758027769483],[176],{"_102":183,"_95":184,"_157":185,"_159":-5,"_160":138,"_161":162,"_163":116,"_104":257,"_99":32,"_165":166,"_167":187,"_169":22,"_170":-5,"_98":258},["D",1758027769483],[184],{"_102":191,"_95":192,"_157":193,"_159":-5,"_160":138,"_161":162,"_163":116,"_104":260,"_99":32,"_165":166,"_167":195,"_169":22,"_170":-5,"_98":261},["D",1758027769483],[192],{"_102":199,"_95":200,"_157":201,"_159":-5,"_160":138,"_161":162,"_163":116,"_104":263,"_99":32,"_165":166,"_167":203,"_169":22,"_170":-5,"_98":264},["D",1758027769483],[200],{"_102":207,"_95":208,"_157":209,"_159":-5,"_160":138,"_161":162,"_163":116,"_104":266,"_99":32,"_165":166,"_167":211,"_169":22,"_170":-5,"_98":267},["D",1758027769483],[208],{"_102":215,"_95":216,"_157":217,"_159":-5,"_160":138,"_161":162,"_163":116,"_104":269,"_99":219,"_165":220,"_167":221,"_169":22,"_170":-5,"_98":270},["D",1758027769483],[216],{"_102":225,"_95":226,"_157":114,"_159":-5,"_160":138,"_161":137,"_163":116,"_104":272,"_99":162,"_165":228,"_167":229,"_169":22,"_170":-5,"_98":273},["D",1758027835368],[226],{"_102":233,"_95":234,"_157":235,"_159":-5,"_160":138,"_161":162,"_163":116,"_104":275,"_99":32,"_165":166,"_167":237,"_169":22,"_170":-5,"_98":276},["D",1758027769483],[234],"upstreamProject",{"_102":146,"_95":96,"_110":-5,"_111":-5,"_108":109,"_23":279},{"_93":280,"_130":281},"stevekrouse","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","upstreamBranch",{"_102":141,"_104":284,"_285":286,"_95":43,"_139":146,"_99":143,"_140":-5,"_142":-5,"_287":288,"_106":-5,"_151":22,"_108":109,"_150":280,"_16":148,"_149":96},["D",1744657032829],"updatedAt",["D",1755556326672],"lockfileKey","1755556327825-esm.town_v_stevekrouse_blob_admin@62-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.compare.$branch",{"_93":94,"_95":96,"_97":43,"_100":295,"_300":162,"_301":32,"_302":303,"_324":116,"_325":299,"_326":327,"_330":-5},{"_102":103,"_95":96,"_104":296,"_106":-5,"_107":22,"_108":109,"_110":-5,"_111":-5,"_14":112,"_113":114,"_115":116,"_117":-5,"_118":32,"_16":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":297,"_132":298,"_135":299,"_151":22},["D",1746219006932],{"_93":94,"_130":131},{"_93":94,"_134":131},{"_99":137,"_95":43,"_102":138,"_139":103,"_140":141,"_142":143,"_144":109,"_145":146,"_147":148,"_149":96,"_150":94},"ahead","behind","diff",{"_304":305,"_169":306,"_307":308},"added",[],[],"modified",[309],{"_98":216,"_310":311,"_320":321},"targetFile",{"_102":312,"_95":216,"_157":313,"_159":-5,"_160":141,"_161":143,"_163":116,"_104":314,"_99":315,"_165":220,"_167":316,"_169":22,"_170":-5,"_171":-7,"_98":317,"_318":319},"2bdb8fd6-7c83-11f0-a361-0224a6c84d84","8cfe7c9c-42ea-11f0-b5eb-76b3cceeab13",["D",1755556326672],6,"# Blob Admin\n\nHand-crafted server-rendered Hono JSX. Back to basics.\n\n## Features\n\n- **File Management**: Upload, view, edit, and delete blob files\n- **Authentication**: Secure access with lastlogin middleware\n- **File Type Support**:\n - **Images**: Display inline with preview\n - **Text Files**: Editable in textarea with syntax highlighting\n - **JSON Files**: Interactive JSON viewer with collapsible nodes and edit capability\n - **Binary Files**: Metadata view with download option\n- **JSON Detection**: Automatically detects JSON files by:\n - `.json` file extension\n - Files under 100KB that parse as valid JSON\n- **Public Files**: Support for public file hosting via `__public/` prefix\n- **Search & Pagination**: Browse files with prefix search and pagination\n\n## JSON Viewer\n\nThe JSON viewer provides:\n- Collapsible/expandable object and array nodes\n- Syntax highlighting\n- Copy functionality\n- Edit mode with JSON validation\n- Error handling for invalid JSON\n\n## Todo\n\n- [ ] Make a seperate val for hosting public files?\n- [ ] Explain how the public folder works\n- [ ] Button to move blobs into or out of the public folder\n- [ ] Merge this back to the orignal\n- [ ] Ability to rename blobs",[216],"contentHash","8e3caad59174bf8e27424d9531a7d4b07f39fa58ea146b02a2eaeb4c8c8edc59","sourceFile",{"_102":215,"_95":216,"_157":217,"_159":-5,"_160":138,"_161":162,"_163":116,"_104":218,"_99":219,"_165":220,"_167":221,"_169":22,"_170":-5,"_171":-7,"_98":322,"_318":323},[216],"0e7a6db8d0b5ab392f7512675d39a8adbed2f63c8ca74e20b844b53e33e6a65b","hasChanges","sourceBranch","targetBranch",{"_102":141,"_104":328,"_285":329,"_95":43,"_139":146,"_99":143,"_140":-5,"_142":-5,"_287":288,"_106":-5,"_151":22,"_108":109,"_150":280,"_16":148,"_149":96},["D",1744657032829],["D",1755556326672],"pull","actionData","errors"]

Mergedanfishgold/mainintostevekrouse/main

README.md+25-1