{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 {type === \"text\" && (\n \n );\n}","deleted","label","children",[],[155],{"_103":174,"_95":175,"_156":176,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":177,"_100":32,"_164":165,"_166":178,"_168":22,"_169":-5,"_170":179,"_98":180},"fc2a1ef6-7ab1-11f0-9667-0224a6c84d84","Home.tsx","0198b367-07f5-772d-a59b-fc887561341a",["D",1755356530580],"/** @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};",[],[175],{"_103":182,"_95":183,"_156":184,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":185,"_100":32,"_164":165,"_166":186,"_168":22,"_169":-5,"_170":187,"_98":188},"fc2a2c16-7ab1-11f0-9667-0224a6c84d84","Layout.tsx","0198b367-07f5-772d-a59c-005ba7697e84",["D",1755356530580],"/** @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 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}",[],[183],{"_103":190,"_95":191,"_156":192,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":193,"_100":32,"_164":165,"_166":194,"_168":22,"_169":-5,"_170":195,"_98":196},"fc2a2e0a-7ab1-11f0-9667-0224a6c84d84","LoginPage.tsx","0198b367-07f5-772d-a59c-06a7b1810e4c",["D",1755356530580],"/** @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}",[],[191],{"_103":198,"_95":199,"_156":200,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":201,"_100":32,"_164":165,"_166":202,"_168":22,"_169":-5,"_170":203,"_98":204},"fc2a2fa4-7ab1-11f0-9667-0224a6c84d84","NewPage.tsx","0198b367-07f5-772d-a59c-0becd5b59d74",["D",1755356530580],"/** @jsxImportSource npm:hono/jsx */\nimport { Layout } from \"./Layout.tsx\";\n\nexport function NewPage(props) {\n return (\n \n

Save Blob

\n \n );\n}",[],[199],{"_103":206,"_95":207,"_156":208,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":209,"_100":32,"_164":165,"_166":210,"_168":22,"_169":-5,"_170":211,"_98":212},"fc2a31e8-7ab1-11f0-9667-0224a6c84d84","NotAuthorizedPage.tsx","0198b367-07f5-772d-a59c-0c649cd18651",["D",1755356530580],"/** @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}",[],[207],{"_103":214,"_95":215,"_156":216,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":217,"_100":32,"_164":218,"_166":219,"_168":22,"_169":-5,"_170":220,"_98":221},"fc2a33c8-7ab1-11f0-9667-0224a6c84d84","README.md","0198b367-07f5-772d-a59c-11dbccc93113",["D",1755356530580],"file","# Blob Admin\n\nHand-crafted server-rendered Hono JSX. Back to basics.\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",[],[215],{"_103":223,"_95":224,"_156":225,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":226,"_100":32,"_164":227,"_166":228,"_168":22,"_169":-5,"_170":229,"_98":230},"fc2a356c-7ab1-11f0-9667-0224a6c84d84","main.tsx","0198b367-07f5-772d-a59c-1603a0dd0b76",["D",1755356530580],"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, 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 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);",[],[224],{"_103":232,"_95":99,"_156":233,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":234,"_100":32,"_164":165,"_166":235,"_168":22,"_169":-5,"_170":236,"_98":237},"fc2a3a08-7ab1-11f0-9667-0224a6c84d84","0198b367-07f5-772d-a59c-18fa96e537d7",["D",1755356530580],"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}",[],[99],"files",[153,173,181,189,197,205,213,222,231],"counts",{"_242":32,"_243":136,"_244":32,"_245":32},"pulls","branches","forks","envVars","contents",[],{"_103":232,"_95":99,"_156":233,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":249,"_100":32,"_164":165,"_166":235,"_168":22,"_169":-5,"_98":250},["D",1755356530580],[99],"upstreamProject",{"_103":145,"_95":96,"_111":-5,"_112":-5,"_109":110,"_23":253},{"_93":254,"_129":255},"stevekrouse","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","upstreamBranch",{"_103":140,"_105":258,"_259":260,"_95":43,"_138":145,"_100":261,"_139":-5,"_141":-5,"_262":263,"_107":-5,"_150":22,"_109":110,"_149":254,"_16":147,"_148":96},["D",1744657032829],"updatedAt",["D",1755556326672],62,"lockfileKey","1755556327825-esm.town_v_stevekrouse_blob_admin@62-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_93":94,"_95":96,"_97":43,"_100":-7,"_98":99,"_101":270,"_151":275,"_238":303,"_218":304,"_246":306,"_307":308,"_311":22,"_312":-5,"_313":32,"_314":315,"_316":317},{"_103":104,"_95":96,"_105":271,"_107":-5,"_108":22,"_109":110,"_111":-5,"_112":-5,"_14":113,"_114":-5,"_115":22,"_116":-5,"_117":32,"_16":118,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_23":272,"_131":273,"_134":274,"_150":22},["D",1755356530580],{"_93":94,"_129":130},{"_93":94,"_133":130},{"_100":136,"_95":43,"_103":137,"_138":104,"_139":140,"_141":142,"_143":110,"_144":145,"_146":147,"_148":96,"_149":94},[276,279,282,285,288,291,294,297,300],{"_103":154,"_95":155,"_156":157,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":163,"_100":32,"_164":165,"_166":167,"_168":22,"_169":-5,"_170":277,"_98":278},[],[155],{"_103":174,"_95":175,"_156":176,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":177,"_100":32,"_164":165,"_166":178,"_168":22,"_169":-5,"_170":280,"_98":281},[],[175],{"_103":182,"_95":183,"_156":184,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":185,"_100":32,"_164":165,"_166":186,"_168":22,"_169":-5,"_170":283,"_98":284},[],[183],{"_103":190,"_95":191,"_156":192,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":193,"_100":32,"_164":165,"_166":194,"_168":22,"_169":-5,"_170":286,"_98":287},[],[191],{"_103":198,"_95":199,"_156":200,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":201,"_100":32,"_164":165,"_166":202,"_168":22,"_169":-5,"_170":289,"_98":290},[],[199],{"_103":206,"_95":207,"_156":208,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":209,"_100":32,"_164":165,"_166":210,"_168":22,"_169":-5,"_170":292,"_98":293},[],[207],{"_103":214,"_95":215,"_156":216,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":217,"_100":32,"_164":218,"_166":219,"_168":22,"_169":-5,"_170":295,"_98":296},[],[215],{"_103":223,"_95":224,"_156":225,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":226,"_100":32,"_164":227,"_166":228,"_168":22,"_169":-5,"_170":298,"_98":299},[],[224],{"_103":232,"_95":99,"_156":233,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":234,"_100":32,"_164":165,"_166":235,"_168":22,"_169":-5,"_170":301,"_98":302},[],[99],[276,279,282,285,288,291,294,297,300],{"_103":232,"_95":99,"_156":233,"_158":-5,"_159":137,"_160":136,"_161":162,"_105":249,"_100":32,"_164":165,"_166":235,"_168":22,"_169":-5,"_98":305},[99],[],"upstream",{"_103":140,"_105":309,"_259":310,"_95":43,"_138":145,"_100":261,"_139":-5,"_141":-5,"_262":263,"_107":-5,"_150":22,"_109":110,"_149":254,"_16":147,"_148":96},["D",1744657032829],["D",1755556326672],"showCompareCallout","pull","ahead","behind",2,"templates",[318,332],{"_103":319,"_95":320,"_105":321,"_107":-5,"_108":22,"_109":110,"_111":322,"_112":323,"_14":324,"_114":325,"_115":162,"_116":326,"_117":327,"_16":147,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_23":328,"_131":329,"_134":330,"_150":22},"8e7382ae-d835-11ef-bbbf-e6cdfca9ef9f","markdownBlogStarter",["D",1737491000655],"Starter template for a markdown blog","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/44a31e5c-3e8a-48a8-d067-5785c0b08200/square512","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","a4a9ad14-d835-11ef-8351-e6cdfca9ef9f",167,11,{"_93":254,"_129":255},{"_93":254,"_133":255},{"_103":331,"_95":43,"_100":326,"_138":319,"_139":-5,"_141":-5},"8e73c264-d835-11ef-bbbf-e6cdfca9ef9f",{"_103":333,"_95":334,"_105":335,"_107":-5,"_108":22,"_109":110,"_111":336,"_112":-5,"_14":337,"_114":338,"_115":162,"_116":339,"_117":340,"_16":341,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_23":342,"_131":345,"_134":346,"_150":22},"96102714-f528-11ef-aa68-569c3dd06744","reactHonoStarter",["D",1740674013689],"Starter template with client-side React & Hono server","c9143560-63b6-444f-8f9f-e2647fabe09f","a9b2b20a-f528-11ef-9e98-569c3dd06744",39,14,"c606f87f-4d7e-48c8-9c39-ef5ab94aec49",{"_93":343,"_129":344},"std","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJVaVhpQ1BId3dscVpBbkdZVWlMNjJtcjkxWS5wbmcifQ",{"_93":343,"_133":344},{"_103":347,"_95":43,"_100":348,"_138":333,"_139":-5,"_141":-5},"961078ea-f528-11ef-aa68-569c3dd06744",72,"actionData","errors"]

stetson

blob_admin