{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],{"_104":176,"_95":100,"_156":177,"_158":-5,"_159":139,"_160":138,"_162":163,"_106":178,"_101":119,"_166":167,"_168":179,"_170":22,"_171":-5,"_172":180,"_99":181},"5e9cd78c-4bb3-11f0-99c6-76b3cceeab13","782808ea-a715-4c49-956a-cc60de338921",["D",1750189420695],"/** @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};",[],[100],{"_104":183,"_95":184,"_156":185,"_158":-5,"_159":139,"_160":119,"_162":163,"_106":186,"_101":32,"_166":167,"_168":187,"_170":22,"_171":-5,"_172":188,"_99":189},"b029ff5e-4bb2-11f0-8b1f-76b3cceeab13","Layout.tsx","08801eb9-ba7c-4e3c-bf64-92eb5c1dc2bb",["D",1750189128019],"/** @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}",[],[184],{"_104":191,"_95":192,"_156":193,"_158":-5,"_159":139,"_160":119,"_162":163,"_106":194,"_101":32,"_166":167,"_168":195,"_170":22,"_171":-5,"_172":196,"_99":197},"b02a0198-4bb2-11f0-8b1f-76b3cceeab13","LoginPage.tsx","2529a4d1-8710-4d3e-a5de-812ee36105f9",["D",1750189128019],"/** @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],{"_104":199,"_95":200,"_156":201,"_158":-5,"_159":139,"_160":119,"_162":163,"_106":202,"_101":32,"_166":167,"_168":203,"_170":22,"_171":-5,"_172":204,"_99":205},"b02a030a-4bb2-11f0-8b1f-76b3cceeab13","NewPage.tsx","f3b9b28e-95e5-41d2-a0f1-8b3047a93b2c",["D",1750189128019],"/** @jsxImportSource npm:hono/jsx */\nimport { Layout } from \"./Layout.tsx\";\n\nexport function NewPage(props) {\n return (\n \n

Save Blob

\n \n );\n}",[],[200],{"_104":207,"_95":208,"_156":209,"_158":-5,"_159":139,"_160":119,"_162":163,"_106":210,"_101":32,"_166":167,"_168":211,"_170":22,"_171":-5,"_172":212,"_99":213},"b02a0652-4bb2-11f0-8b1f-76b3cceeab13","NotAuthorizedPage.tsx","932d1cb2-fbfc-41ef-bdc3-6d8e9438aaaf",["D",1750189128019],"/** @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],{"_104":215,"_95":216,"_156":217,"_158":-5,"_159":139,"_160":119,"_162":163,"_106":218,"_101":32,"_166":219,"_168":220,"_170":22,"_171":-5,"_172":221,"_99":222},"b02a08b4-4bb2-11f0-8b1f-76b3cceeab13","README.md","1663b48d-56f7-4d30-8da1-0e5a2cb5ccb8",["D",1750189128019],"file","# Blob Admin\n\nHand-crafted server-rendered Hono JSX. Back to basics.",[],[216],{"_104":224,"_95":225,"_156":226,"_158":-5,"_159":139,"_160":227,"_162":163,"_106":228,"_101":229,"_166":230,"_168":231,"_170":22,"_171":-5,"_172":232,"_99":233},"f7cbbb22-4bb2-11f0-af81-76b3cceeab13","main.tsx","31685752-ec35-4ad4-b59c-367dfd9e540c",4,["D",1750189248193],3,"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\napp.get(\"/public\", (c) => {\n return blob.get(\"__public/\" + c.req.query(\"name\"));\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\", async (c) => {\n const name = c.req.query(\"name\");\n const matches = await blob.list(name);\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(name);\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\", (c) => {\n return blob.get(c.req.query(\"name\"));\n});\n\napp.post(\"/blob/delete\", async (c) => {\n const name = c.req.query(\"name\");\n await blob.delete(name);\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/\" + name);\n }\n const text = formData[\"text\"];\n if (typeof text === \"string\") {\n await blob.set(name, text);\n return c.redirect(\"/blob/\" + 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);",[],[225],{"_104":235,"_95":236,"_156":237,"_158":-5,"_159":139,"_160":119,"_162":163,"_106":238,"_101":32,"_166":167,"_168":239,"_170":22,"_171":-5,"_172":240,"_99":241},"b02a0dd2-4bb2-11f0-8b1f-76b3cceeab13","utils.ts","b1570d15-0865-4d2a-b20c-0d4e53c6e979",["D",1750189128019],"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}",[],[236],"files",[153,175,182,190,198,206,214,223,234],"counts",{"_246":32,"_247":229,"_248":32,"_249":32},"pulls","branches","forks","envVars","contents",[],{"_104":176,"_95":100,"_156":177,"_158":-5,"_159":139,"_160":138,"_162":163,"_106":253,"_101":119,"_166":167,"_168":179,"_170":22,"_171":-5,"_99":254},["D",1750189420695],[100],"upstreamProject",{"_104":257,"_95":258,"_112":-5,"_113":-5,"_110":111,"_23":259},"4679026c-1962-11f0-aff0-569c3dd06744","blob_admin",{"_93":94,"_131":132},"upstreamBranch",{"_104":142,"_106":262,"_263":264,"_95":43,"_140":105,"_101":265,"_141":266,"_143":267,"_268":269,"_108":-5,"_150":22,"_110":111,"_149":94,"_16":120,"_148":96},["D",1750188474174],"updatedAt",["D",1755555139020],44,"46794d58-1962-11f0-aff0-569c3dd06744",60,"lockfileKey","1755555088139-esm.town_v_stevekrouse_blob_admin_hono@35-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.history_.$",{"_93":94,"_95":96,"_97":98,"_99":100,"_102":276,"_219":281,"_284":285,"_292":293,"_297":-7,"_298":32,"_299":22},{"_104":105,"_95":96,"_106":277,"_108":-5,"_109":22,"_110":111,"_112":-5,"_113":-5,"_14":114,"_115":-5,"_116":22,"_117":-5,"_118":119,"_16":120,"_121":122,"_123":122,"_124":125,"_126":125,"_127":125,"_128":122,"_129":122,"_23":278,"_133":279,"_136":280,"_150":22},["D",1750188474174],{"_93":94,"_131":132},{"_93":94,"_135":132},{"_101":138,"_95":98,"_104":139,"_140":105,"_141":142,"_143":144,"_145":111,"_146":105,"_147":120,"_148":96,"_149":94},{"_104":176,"_95":100,"_156":177,"_158":-5,"_159":139,"_160":138,"_162":163,"_106":282,"_101":119,"_166":167,"_168":179,"_170":22,"_171":-5,"_99":283},["D",1750189420695],[100],"history",[286,288],{"_104":176,"_159":139,"_156":177,"_95":100,"_168":179,"_166":167,"_101":119,"_158":-5,"_106":287,"_160":138,"_171":-5},["D",1750189420695],{"_104":289,"_159":139,"_156":177,"_95":100,"_168":290,"_166":167,"_101":32,"_158":-5,"_106":291,"_160":119,"_171":-5},"b029f6b2-4bb2-11f0-8b1f-76b3cceeab13","/** @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 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};",["D",1750189128019],"versions",[294,296],{"_219":286,"_295":288},"previous",{"_219":288,"_295":-5},"versionNumber","page","hasNext","actionData","errors"]

History for Home.tsx