\n setIsVisible(true)}\n onMouseLeave={() => setIsVisible(false)}\n >\n {children}\n

\n {isVisible && (\n \n {content}\n

\n \n )}\n \n );\n}\n\nfunction formatBytes(bytes: number, decimals = 2) {\n if (bytes === 0) return \"0 Bytes\";\n const k = 1024;\n const dm = decimals < 0 ? 0 : decimals;\n const sizes = [\"Bytes\", \"KB\", \"MB\", \"GB\", \"TB\", \"PB\", \"EB\", \"ZB\", \"YB\"];\n const i = Math.floor(Math.log(bytes) / Math.log(k));\n return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + \" \" + sizes[i];\n}\n\nfunction copyToClipboard(text: string) {\n navigator.clipboard.writeText(text).then(() => {\n console.log(\"Text copied to clipboard\");\n }).catch(err => {\n console.error(\"Failed to copy text: \", err);\n });\n}\n\nfunction ActionMenu({ blob, onDownload, onRename, onDelete, onMoveToPublic, onMoveOutOfPublic }) {\n const [isOpen, setIsOpen] = useState(false);\n const menuRef = useRef(null);\n const isPublic = blob.key.startsWith(\"__public/\");\n const publicUrl = isPublic ? `${window.location.origin}/api/public/${encodeURIComponent(blob.key.slice(9))}` : null;\n\n useEffect(() => {\n function handleClickOutside(event) {\n if (menuRef.current && !menuRef.current.contains(event.target)) {\n event.stopPropagation();\n setIsOpen(false);\n }\n }\n\n document.addEventListener(\"mousedown\", handleClickOutside);\n return () => {\n document.removeEventListener(\"mousedown\", handleClickOutside);\n };\n }, []);\n\n const handleAction = (e, action) => {\n e.stopPropagation();\n setIsOpen(false);\n action();\n };\n\n const handleClick = (e) => {\n e.stopPropagation();\n setIsOpen(!isOpen);\n };\n\n return (\n

\n \n {isOpen && (\n

\n handleAction(e, () => onDownload(blob.key))}\n className=\"block w-full text-left px-4 py-2 text-sm text-white hover:bg-gray-600\"\n >\n Download\n \n handleAction(e, () => onRename(blob.key))}\n className=\"block w-full text-left px-4 py-2 text-sm text-white hover:bg-gray-600\"\n >\n Rename\n \n handleAction(e, () => onDelete(blob.key))}\n className=\"block w-full text-left px-4 py-2 text-sm text-white hover:bg-gray-600\"\n >\n Delete\n \n {isPublic\n ? (\n handleAction(e, () => onMoveOutOfPublic(blob.key))}\n className=\"block w-full text-left px-4 py-2 text-sm text-white hover:bg-gray-600\"\n >\n Move out of public folder\n \n )\n : (\n handleAction(e, () => onMoveToPublic(blob.key))}\n className=\"block w-full text-left px-4 py-2 text-sm text-white hover:bg-gray-600\"\n >\n Move to public folder\n \n )}\n {isPublic && (\n handleAction(e, () => copyToClipboard(publicUrl))}\n className=\"block w-full text-left px-4 py-2 text-sm text-white hover:bg-gray-600\"\n >\n Copy public link\n \n )}\n

\n )}\n

\n );\n}\n\nfunction BlobItem({ blob, onSelect, isSelected, onDownload, onRename, onDelete, onMoveToPublic, onMoveOutOfPublic }) {\n const [isLoading, setIsLoading] = useState(false);\n const decodedKey = decodeURIComponent(blob.key);\n const truncatedName = decodedKey;\n\n const handleClick = async () => {\n setIsLoading(!isSelected);\n await onSelect(blob);\n setIsLoading(false);\n };\n\n return (\n \n

\n \n \n \n

\n {truncatedName}\n

\n {formatBytes(blob.size)} • Last modified: {new Date(blob.lastModified).toLocaleString()}\n

\n {isLoading\n ?

\n : (\n \n )}\n

\n \n );\n}\n\ninterface Blob {\n key: string;\n size: number;\n lastModified: string;\n}\n\nfunction App({ initialEmail, initialProfile }) {\n const encodeKey = (key: string) => encodeURIComponent(key);\n const decodeKey = (key: string) => decodeURIComponent(key);\n\n const [blobs, setBlobs] = useState([]);\n const [searchPrefix, setSearchPrefix] = useState(\"\");\n const [limit, setLimit] = useState(20);\n const [selectedBlob, setSelectedBlob] = useState(null);\n const [editContent, setEditContent] = useState(\"\");\n const [email, setEmail] = useState(initialEmail);\n const [profile, setProfile] = useState(initialProfile);\n const [loading, setLoading] = useState(false);\n const [blobContentLoading, setBlobContentLoading] = useState(false);\n const [isDragging, setIsDragging] = useState(false);\n\n const fetchBlobs = useCallback(async () => {\n setLoading(true);\n try {\n const response = await fetch(`/api/blobs?prefix=${encodeKey(searchPrefix)}&limit=${limit}`);\n const data = await response.json();\n setBlobs(data);\n } catch (error) {\n console.error(\"Error fetching blobs:\", error);\n } finally {\n setLoading(false);\n }\n }, [searchPrefix, limit]);\n\n useEffect(() => {\n fetchBlobs();\n }, [fetchBlobs]);\n\n const handleSearch = (e) => {\n const value = e.target.value;\n setSearchPrefix(value);\n };\n\n const handleBlobClick = async (clickedBlob: Blob) => {\n if (selectedBlob && selectedBlob.key === clickedBlob.key) {\n // Deselect if the clicked blob is already selected\n setSelectedBlob(null);\n setEditContent(\"\");\n } else {\n setBlobContentLoading(true);\n try {\n const response = await fetch(`/api/blob?key=${encodeKey(clickedBlob.key)}`);\n const content = await response.text();\n setSelectedBlob({ ...clickedBlob, key: decodeKey(clickedBlob.key) });\n setEditContent(content);\n } catch (error) {\n console.error(\"Error fetching blob content:\", error);\n } finally {\n setBlobContentLoading(false);\n }\n }\n };\n\n const handleSave = async () => {\n try {\n await fetch(`/api/blob?key=${encodeKey(selectedBlob.key)}`, {\n method: \"PUT\",\n body: editContent,\n });\n setBlobs(blobs.map(b => b.key === selectedBlob.key ? { ...b, lastModified: new Date().toISOString() } : b));\n } catch (error) {\n console.error(\"Error saving blob:\", error);\n }\n };\n\n const handleDelete = async (key) => {\n try {\n await fetch(`/api/blob?key=${encodeKey(key)}`, { method: \"DELETE\" });\n setBlobs(blobs.filter(b => b.key !== key));\n if (selectedBlob && selectedBlob.key === key) {\n setSelectedBlob(null);\n }\n } catch (error) {\n console.error(\"Error deleting blob:\", error);\n }\n };\n\n const handleDrop = async (acceptedFiles) => {\n for (const file of acceptedFiles) {\n try {\n const formData = new FormData();\n formData.append(\"file\", file);\n const key = `${searchPrefix}${file.name}`;\n formData.append(\"key\", encodeKey(key));\n await fetch(\"/api/blob\", { method: \"POST\", body: formData });\n const newBlob = { key, size: file.size, lastModified: new Date().toISOString() };\n setBlobs([newBlob, ...blobs]);\n handleBlobClick(newBlob);\n } catch (error) {\n console.error(\"Error uploading file:\", error);\n }\n }\n fetchBlobs();\n };\n\n const { getRootProps, getInputProps, isDragActive } = useDropzone({\n onDrop: handleDrop,\n noClick: true,\n noKeyboard: true,\n });\n\n const handleCreateTextBlob = async () => {\n const key = prompt(\"Enter blob name:\");\n if (key) {\n try {\n const fullKey = `${searchPrefix}${key}`;\n await fetch(`/api/blob?key=${encodeKey(fullKey)}`, {\n method: \"PUT\",\n body: \"\",\n });\n const newBlob = { key: fullKey, size: 0, lastModified: new Date().toISOString() };\n setBlobs([newBlob, ...blobs]);\n handleBlobClick(newBlob);\n } catch (error) {\n console.error(\"Error creating text blob:\", error);\n }\n }\n };\n\n const handleDownload = async (key) => {\n try {\n const response = await fetch(`/api/blob?key=${encodeKey(key)}`);\n const blob = await response.blob();\n const url = window.URL.createObjectURL(blob);\n const a = document.createElement(\"a\");\n a.style.display = \"none\";\n a.href = url;\n a.download = key.split(\"/\").pop();\n document.body.appendChild(a);\n a.click();\n window.URL.revokeObjectURL(url);\n } catch (error) {\n console.error(\"Error downloading blob:\", error);\n }\n };\n\n const handleRename = async (oldKey) => {\n const newKey = prompt(\"Enter new blob name:\", oldKey);\n if (newKey && newKey !== oldKey) {\n try {\n const response = await fetch(`/api/blob?key=${encodeKey(oldKey)}`);\n const content = await response.blob();\n await fetch(`/api/blob?key=${encodeKey(newKey)}`, {\n method: \"PUT\",\n body: content,\n });\n await fetch(`/api/blob?key=${encodeKey(oldKey)}`, { method: \"DELETE\" });\n setBlobs(blobs.map(b => b.key === oldKey ? { ...b, key: newKey } : b));\n if (selectedBlob && selectedBlob.key === oldKey) {\n setSelectedBlob({ ...selectedBlob, key: newKey });\n }\n } catch (error) {\n console.error(\"Error renaming blob:\", error);\n }\n }\n };\n\n const handleMoveToPublic = async (key) => {\n const newKey = `__public/${key}`;\n try {\n const response = await fetch(`/api/blob?key=${encodeKey(key)}`);\n const content = await response.blob();\n await fetch(`/api/blob?key=${encodeKey(newKey)}`, {\n method: \"PUT\",\n body: content,\n });\n await fetch(`/api/blob?key=${encodeKey(key)}`, { method: \"DELETE\" });\n setBlobs(blobs.map(b => b.key === key ? { ...b, key: newKey } : b));\n if (selectedBlob && selectedBlob.key === key) {\n setSelectedBlob({ ...selectedBlob, key: newKey });\n }\n } catch (error) {\n console.error(\"Error moving blob to public folder:\", error);\n }\n };\n\n const handleMoveOutOfPublic = async (key) => {\n const newKey = key.slice(9); // Remove \"__public/\" prefix\n try {\n const response = await fetch(`/api/blob?key=${encodeKey(key)}`);\n const content = await response.blob();\n await fetch(`/api/blob?key=${encodeKey(newKey)}`, {\n method: \"PUT\",\n body: content,\n });\n await fetch(`/api/blob?key=${encodeKey(key)}`, { method: \"DELETE\" });\n setBlobs(blobs.map(b => b.key === key ? { ...b, key: newKey } : b));\n if (selectedBlob && selectedBlob.key === key) {\n setSelectedBlob({ ...selectedBlob, key: newKey });\n }\n } catch (error) {\n console.error(\"Error moving blob out of public folder:\", error);\n }\n };\n\n const handleCloseBlob = () => {\n setSelectedBlob(null);\n setEditContent(\"\");\n };\n\n return (\n

\n \n

Blob Admin

\n \n View Source\n \n

\n {profile && (\n

\n $\"Profile\"$ \n {profile.username}\n Logout\n

\n )}\n

\n {email\n ? (\n

\n \n

Blobs

\n \n New Text Blob\n \n {\n const file = e.target.files[0];\n if (file) {\n await handleDrop([file]);\n }\n }}\n className=\"hidden\"\n id=\"fileInput\"\n />\n \n Upload File\n \n

\n \n

\n Show:\n setLimit(Number(e.target.value))}\n className=\"px-3 py-2 border rounded bg-gray-700 text-white\"\n >\n \n \n \n \n

\n setSearchPrefix(\"__public/\")}\n className=\"text-blue-400 hover:text-blue-300 text-sm mb-2\"\n >\n View public folder\n \n \n ⓘ\n \n

\n {loading\n ? (\n

\n )\n : (\n

\n ))}\n

\n )}\n

\n {selectedBlob && (\n

{selectedBlob.key}

\n \n ✕\n \n

\n {selectedBlob.key.startsWith(\"__public/\") && (\n

\n Public URL:\n \n copyToClipboard(\n `${window.location.origin}/api/public/${encodeURIComponent(selectedBlob.key.slice(9))}`,\n )}\n className=\"text-blue-400 hover:text-blue-300 text-sm\"\n >\n Copy\n \n

\n )}\n

\n {blobContentLoading\n ? (\n

\n )\n : selectedBlob.key.match(/\\.(jpg|jpeg|png|gif)$/i)\n ? (\n \n console.error(\"Error loading image\")}\n />\n

\n )\n : (\n setEditContent(e.target.value)}\n className=\"w-full h-64 p-2 border rounded bg-gray-700 text-white\"\n />\n )}\n {!selectedBlob.key.match(/\\.(jpg|jpeg|png|gif)$/i) && (\n

\n \n Save\n \n

\n )}\n

\n )}\n \n )\n : (\n

\n \n \n via LastLogin\n \n

Want your own Blob Admin?

\n \n Fork This Val\n \n

Blob Admin Features:

Create and manage text and file blobs
Search and filter blobs by prefix
Upload files via drag-and-drop or file input
Edit text blob contents inline
Rename, delete, and download blobs
Create public shareable links for blobs
View and manage public folder
Preview images directly in the interface

\n )}\n \n \n );\n}\n\nfunction client() {\n const initialEmail = document.getElementById(\"root\").getAttribute(\"data-email\");\n const initialProfile = JSON.parse(document.getElementById(\"root\").getAttribute(\"data-profile\"));\n createRoot(document.getElementById(\"root\")).render(\n ,\n );\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nconst app = new Hono();\n\n// Public route without authentication\napp.get(\"/api/public/:id\", async (c) => {\n const key = `__public/${c.req.param(\"id\")}`;\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n try {\n const originalResponse = await blob.get(key);\n if (key.endsWith(\".mp4\")) {\n // Clone original headers and set the correct Content-Type.\n const headers = new Headers(originalResponse.headers);\n headers.set(\"Content-Type\", \"video/mp4\");\n\n // Create a new Response with the same body and status.\n return new Response(originalResponse.body, {\n status: originalResponse.status,\n statusText: originalResponse.statusText,\n headers,\n });\n }\n return originalResponse;\n } catch (e) {\n return c.text(`Blob not found: ${key}`, 404);\n }\n});\n\n// Middleware to check authentication\nconst checkAuth = async (c, next) => {\n const email = c.req.header(\"X-LastLogin-Email\");\n\n if (!email) {\n return c.html(`\n \n \n Blob Admin\n \n \n \n

\n \n \n

\n \n \n `);\n }\n const { ValTown } = await import(\"npm:@valtown/sdk\");\n const vt = new ValTown();\n const { email: authorEmail, profileImageUrl, username } = await vt.me.profile.retrieve();\n // const authorEmail = me.email;\n\n if (email !== authorEmail) {\n return c.html(\n `\n \n \n Access Restricted\n \n \n \n

Access Restricted

\n This Blob Admin is only accessible to ${username}.\n

\n 🔒 You are currently signed in with:
\n ${email}\n

\n To access this val, you must:\n

Sign in with the email associated with your Val Town account
Ensure you are signed in as ${username}

\n \n Logout\n \n \n Sign In\n \n

\n \n View Val Source\n \n

\n \n \n `,\n 403,\n {\n \"X-Restricted-Access\": \"true\",\n },\n );\n }\n\n c.set(\"email\", email);\n c.set(\"profile\", { profileImageUrl, username });\n await next();\n};\n\napp.get(\"/api/blobs\", checkAuth, async (c) => {\n const prefix = c.req.query(\"prefix\") || \"\";\n const limit = parseInt(c.req.query(\"limit\") || \"20\", 10);\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n const blobList = await blob.list(prefix);\n const result = blobList.slice(0, limit).map(b => ({ ...b, isFolder: false }));\n return c.json(result);\n});\n\napp.get(\"/api/blob\", checkAuth, async (c) => {\n const key = c.req.query(\"key\");\n if (!key) return c.text(\"Missing key parameter\", 400);\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n const content = await blob.get(key);\n return content;\n});\n\napp.put(\"/api/blob\", checkAuth, async (c) => {\n const key = c.req.query(\"key\");\n if (!key) return c.text(\"Missing key parameter\", 400);\n const content = await c.req.arrayBuffer();\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n await blob.set(key, content);\n return c.text(\"OK\");\n});\n\napp.delete(\"/api/blob\", checkAuth, async (c) => {\n const key = c.req.query(\"key\");\n if (!key) return c.text(\"Missing key parameter\", 400);\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n await blob.delete(key);\n return c.text(\"OK\");\n});\n\napp.post(\"/api/blob\", checkAuth, async (c) => {\n const { file, key } = await c.req.parseBody();\n if (!file || !key) return c.text(\"Missing file or key\", 400);\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n await blob.set(key, await file.arrayBuffer());\n return c.text(\"OK\");\n});\n\napp.get(\"*\", checkAuth, async (c) => {\n const email = c.get(\"email\");\n const profile = c.get(\"profile\");\n return c.html(`\n \n \n Blob Admin\n \n \n \n

\n \n \n \n \n `);\n});\n\nexport default lastlogin((request: Request) => app.fetch(request));","createdAt",["D",1740147258470],"version",38,"currentUserHasLiked","likeCount",20,"forkCount",97,"referenceCount",28,"dependencyCount",3,"commentCount","prCount","mergedPr",{"_134":135,"_136":137},"handle","stevekrouse","profileImageUrl","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","forkedVal",{"_114":140,"_134":135,"_98":141,"_119":142,"_143":-5},"7d1b80fa-d5b8-461e-babf-f6351167267c","sqlite_admin",45,"prDisabledHint","interval","slug","stevekrouse/blob_admin","description","Blob Admin This is a lightweight Blob Admin interface to view and debug your Blob data. Versions 0-17 of this val were done with Hono and server-rendering.\nVersions 18+ were generated with Townie and use client-side React. To use this val, fork it to your account.\nAuthentication is handled by @stevekrouse/lastlogin,\nso only the owner of the val will be able to see and edit their own blobs.","versions",[151,154,158,162,166,170,174,178,182,186,190,193,197,201,205,209,214,218,222,225,229,233,237,242,247,251,255,259,264,269,274,278,282,286,290,294,297,300,304],{"_119":120,"_152":-5,"_117":153,"_114":112},"prId",["D",1740147258470],{"_119":155,"_152":-5,"_117":156,"_114":157},37,["D",1740147247832],"1d27dcda-f05e-11ef-a171-e6cdfca9ef9f",{"_119":159,"_152":-5,"_117":160,"_114":161},36,["D",1740147240062],"188712cc-f05e-11ef-a909-e6cdfca9ef9f",{"_119":163,"_152":-5,"_117":164,"_114":165},35,["D",1740147161916],"e9f22852-f05d-11ef-9ac5-e6cdfca9ef9f",{"_119":167,"_152":-5,"_117":168,"_114":169},34,["D",1740147134927],"d9dbe9a8-f05d-11ef-b41a-e6cdfca9ef9f",{"_119":171,"_152":-5,"_117":172,"_114":173},33,["D",1740147123847],"d34047b0-f05d-11ef-b4c2-e6cdfca9ef9f",{"_119":175,"_152":-5,"_117":176,"_114":177},32,["D",1740147106768],"c9151ee6-f05d-11ef-9649-e6cdfca9ef9f",{"_119":179,"_152":-5,"_117":180,"_114":181},31,["D",1734359973647],"90eec67e-bbbb-11ef-a141-e6cdfca9ef9f",{"_119":183,"_152":-5,"_117":184,"_114":185},30,["D",1734123983749],"1bff1cf0-b996-11ef-85d2-e6cdfca9ef9f",{"_119":187,"_152":-5,"_117":188,"_114":189},29,["D",1734123708291],"77cdb97a-b995-11ef-ab19-e6cdfca9ef9f",{"_119":127,"_152":-5,"_117":191,"_114":192},["D",1734012598675],"c5511a88-b892-11ef-b216-e6cdfca9ef9f",{"_119":194,"_152":-5,"_117":195,"_114":196},27,["D",1734012579547],"b9e9c3e8-b892-11ef-ada3-e6cdfca9ef9f",{"_119":198,"_152":-5,"_117":199,"_114":200},26,["D",1733516707363],"2f104822-b410-11ef-a9cb-e6cdfca9ef9f",{"_119":202,"_152":-5,"_117":203,"_114":204},25,["D",1733516666344],"169c4c6e-b410-11ef-8736-e6cdfca9ef9f",{"_119":206,"_152":-5,"_117":207,"_114":208},24,["D",1732726984677],"77a93250-ace1-11ef-acac-e6cdfca9ef9f",{"_119":210,"_152":211,"_117":212,"_114":213},23,"ec3ee9b6-a926-11ef-9760-e6cdfca9ef9f",["D",1732538688497],"0e633bae-ab2b-11ef-bda7-e6cdfca9ef9f",{"_119":215,"_152":-5,"_117":216,"_114":217},22,["D",1732310915860],"bb5064d2-a918-11ef-b8da-e6cdfca9ef9f",{"_119":219,"_152":-5,"_117":220,"_114":221},21,["D",1732310883453],"a7ff76fc-a918-11ef-874e-e6cdfca9ef9f",{"_119":123,"_152":-5,"_117":223,"_114":224},["D",1732310796604],"743c916a-a918-11ef-8643-e6cdfca9ef9f",{"_119":226,"_152":-5,"_117":227,"_114":228},19,["D",1732310749349],"5810e874-a918-11ef-b438-e6cdfca9ef9f",{"_119":230,"_152":-5,"_117":231,"_114":232},18,["D",1732308184469],"5f47517e-a912-11ef-89d0-e6cdfca9ef9f",{"_119":234,"_152":-5,"_117":235,"_114":236},17,["D",1722620091967],"862720a0-50f5-11ef-966c-de64eea55b61",{"_119":238,"_152":239,"_117":240,"_114":241},16,"52748178-024c-11ef-ae2b-cab58f78796a",["D",1714055126130],"a8b0c2f4-030f-11ef-b0e6-cab58f78796a",{"_119":243,"_152":244,"_117":245,"_114":246},15,"0d5fc3be-dc9e-11ee-8e0d-8aad37b30b4b",["D",1709829170719],"56fa9db2-dca0-11ee-8170-8aad37b30b4b",{"_119":248,"_152":-5,"_117":249,"_114":250},14,["D",1709759308405],"adcb57d8-dbfd-11ee-9754-8aad37b30b4b",{"_119":252,"_152":-5,"_117":253,"_114":254},13,["D",1709759032028],"090f8f52-dbfd-11ee-8ae9-8aad37b30b4b",{"_119":256,"_152":-5,"_117":257,"_114":258},12,["D",1709759026086],"0584d220-dbfd-11ee-b86c-8aad37b30b4b",{"_119":260,"_152":261,"_117":262,"_114":263},11,"75c01318-d65a-11ee-9e42-8aad37b30b4b",["D",1709141138467],"63ccab04-d65e-11ee-abcd-8aad37b30b4b",{"_119":265,"_152":266,"_117":267,"_114":268},10,"2346ef76-d650-11ee-8cda-8aad37b30b4b",["D",1709135077122],"46f4c4ac-d650-11ee-b1df-8aad37b30b4b",{"_119":270,"_152":271,"_117":272,"_114":273},9,"68dfb724-cf17-422e-9fbb-10c2676669ae",["D",1703165144310],"1e501a4a-9c4e-4901-91e8-9d8d4c90ec4a",{"_119":275,"_152":-5,"_117":276,"_114":277},8,["D",1702912835496],"1a31ca16-aab4-47fb-a29b-745ab1287613",{"_119":279,"_152":-5,"_117":280,"_114":281},7,["D",1702663864446],"1c1c1751-67fa-4208-b0e1-f5ea90722989",{"_119":283,"_152":-5,"_117":284,"_114":285},6,["D",1702574032268],"cb9b9415-34e0-4632-b0f6-07cbc9574750",{"_119":287,"_152":-5,"_117":288,"_114":289},5,["D",1702489851254],"406ebab4-61e4-471a-a978-2b63a7a69108",{"_119":291,"_152":-5,"_117":292,"_114":293},4,["D",1702489727264],"4fa4ffdd-3dc4-411a-bcb7-ded84d311444",{"_119":129,"_152":-5,"_117":295,"_114":296},["D",1702487333278],"02073dea-b6b8-43c1-adef-57c5dfb162e6",{"_119":90,"_152":-5,"_117":298,"_114":299},["D",1702486963665],"49df3496-bb86-473e-886e-753f662f7c4a",{"_119":301,"_152":-5,"_117":302,"_114":303},1,["D",1702486606619],"885235e1-1870-41a4-b5a5-e28a4275af57",{"_119":31,"_152":-5,"_117":305,"_114":306},["D",1702486580456],"c4c7122b-34ac-4c3b-9099-7fd5f3efd606","recentThread","breadcrumbs","comments",[311,322,327,332,337,344,349,354,361,368,373,378,383,388,393,398,403,408,413,418],{"_114":312,"_313":314,"_117":315,"_316":-5,"_317":26,"_318":26,"_20":319},"5a09395e-51b8-4d1e-af5d-a9369db48836","body","Instead of instructing the user to fork the val, why not suggest the user to create a new val referencing your own ?\n\n```\nexport { default } from \"https://esm.town/v/stevekrouse/blob_admin\";\n```\n\nIt would allow the user to automatically get update from your, or control them using the version query param.",["D",1702562564192],"updatedAt","canDelete","canEdit",{"_134":320,"_136":321},"pomdtr","https://images.clerk.dev/oauth_github/img_2RCoAITJZH1QencEgtVjh4Qirj4.jpeg",{"_114":323,"_313":324,"_117":325,"_316":-5,"_317":26,"_318":26,"_20":326},"bb2fa121-acad-4790-ab3e-57094df9fe56","Excellent idea! That's how @rodrigotello/hnFollow works.\n\nThis way is slightly easier to customize, that way is slightly easier to manage updates.\n\nIn theory, Val Town could help users manage forks like Github does:\n\n![Screenshot 2023-12-14 at 09.28.40.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/47c3752d-8274-4e54-49b5-476aa7ff2900/public)\n\nOr even notify users that they should \"pull\" from the remote val because it has new changes.\n\nThe question of when to use something as a dependency vs as a fork is a fascinating one. I'm eager to see what patterns emerge",["D",1702564241084],{"_134":135,"_136":137},{"_114":328,"_313":329,"_117":330,"_316":-5,"_317":26,"_318":26,"_20":331},"b76629bc-93a5-4356-8349-74e11a8a44fb","I see importing as an installation method a val to my val.town account, while forking is just copying a specific version of a val.\n\nI can see myself using, it depends as if I see myself as a user or a contributor.\n\nEven for the same val, I can see myself having my prod endpoint and my dev endpoint.",["D",1702568650699],{"_134":320,"_136":321},{"_114":333,"_313":334,"_117":335,"_316":-5,"_317":26,"_318":26,"_20":336},"3238e0a7-c06a-4c09-8e2b-3afb83578193","comments really need an edit button 😅",["D",1702568684644],{"_134":320,"_136":321},{"_114":338,"_313":339,"_117":340,"_316":-5,"_317":26,"_318":26,"_20":341},"6b289ca6-4ff7-11ef-ad57-de64eea55b61","It's not working anymore. I'm getting an error message.\n \"message\": \"{\\\"statusCode\\\":500,\\\"error\\\":\\\"Internal Server Error\\\",\\\"message\\\":\\\"Failed to create Turso DB: Namespace store has shutdown\\\"}\",",["D",1722510954510],{"_134":342,"_136":343},"loshmyy","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yallNN3FRQU5FakxNTm16dDFYck04RlNwYkwifQ",{"_114":345,"_313":346,"_117":347,"_316":-5,"_317":26,"_318":26,"_20":348},"16261ab0-5012-11ef-b3e6-de64eea55b61","Sorry about that @loshmyy. We haven't seen that error message before. Is everything working properly now?\n\n",["D",1722522408300],{"_134":135,"_136":137},{"_114":350,"_313":351,"_117":352,"_316":-5,"_317":26,"_318":26,"_20":353},"9b50f768-5c9d-11ef-ac5d-de64eea55b61","@stevekrouse Everything is working now, thank you!",["D",1723901745716],{"_134":342,"_136":343},{"_114":355,"_313":356,"_117":357,"_316":-5,"_317":26,"_318":26,"_20":358},"f63e2f38-b0f3-11ef-8ab6-e6cdfca9ef9f","For UI centric products, I would fork and customize or to contribute a change. With deps I'm specifically looking to use that version. forks are easier to view have updates vs dep generally to me feel like a chore I have to do as maintenance. At min for security patches from socket.io.\n\nbut never thought about it as such. This is very fascinating indeed! ",["D",1733174732658],{"_134":359,"_136":360},"artivilla","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ycEpsUVdoSmpqUUN2RWNBSkdWQkVsSkRSSk8ifQ",{"_114":362,"_313":363,"_117":364,"_316":-5,"_317":26,"_318":26,"_20":365},"9842e484-b85d-11ef-9056-e6cdfca9ef9f","Hello, Steve - I just forked the blob_admin, logged in using Google...and ran into an \"Internal Server Error\". Any ideas why and how to ged rid of it?",["D",1733989759775],{"_134":366,"_136":367},"rozek","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ybjB5SWh3N1NZbElndXIzcnRoT2tlVGFQMFoifQ",{"_114":369,"_313":370,"_117":371,"_316":-5,"_317":26,"_318":26,"_20":372},"e5c201ea-b85d-11ef-a415-e6cdfca9ef9f","The browser complains \"Failed to load resource: the server responded with a status of 500 ()\" for resource \"https://rozek-blob_admin.web.val.run/\"",["D",1733989889793],{"_134":366,"_136":367},{"_114":374,"_313":375,"_117":376,"_316":-5,"_317":26,"_318":26,"_20":377},"52f4671e-b893-11ef-9f23-e6cdfca9ef9f","Hey @rozek, thanks for writing in! I was able to get that same error when logging in with a different email address than the one tied to my Val Town account. I then popped open my request logs, saw the error message, and clicked on the line of code, and fixed it. (It took two fixes.) Hope that's your issue and you can fork it again to get it working!\n\nFor next time, be sure to check out your request logs. You could even pop open Townie to get help fixing it. And then you can send me a pull request with your fix :)\n\nHere's a video of me reproducing, finding, and fixing the bug: https://share.cleanshot.com/cMrD7kdl",["D",1734012836321],{"_134":135,"_136":137},{"_114":379,"_313":380,"_117":381,"_316":-5,"_317":26,"_318":26,"_20":382},"2e78fba4-b909-11ef-8d0b-e6cdfca9ef9f","@stevekrouse cool, how to fix bugs within val.town - thanks for your effort and the video! Unfortunately, your blob_admin does not seem to like me: I forked the new blob_admin, tried it...and failed again. I've taken two screenshots for demonstration:\n![Bildschirmfoto 2024-12-13 um 05.13.19.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/302c28a0-d2e2-4152-1692-800d41303e00/public)\n\n![Bildschirmfoto 2024-12-13 um 05.14.16.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/a2a23464-1cad-4f65-3ec7-c4a6c8f34900/public)\n",["D",1734063455729],{"_134":366,"_136":367},{"_114":384,"_313":385,"_117":386,"_316":-5,"_317":26,"_318":26,"_20":387},"ac2728aa-bbbb-11ef-a6f8-e6cdfca9ef9f","Sorry about that! Should be good now? I think Townie hallucinated the sign in route, but I fixed it",["D",1734360019329],{"_134":135,"_136":137},{"_114":389,"_313":390,"_117":391,"_316":-5,"_317":26,"_318":26,"_20":392},"5161dbfe-bbc0-11ef-8aa2-e6cdfca9ef9f","So gradually it becomes embarrassing: I forked again - and failed again. Here is a screen shot:\n\n![Bildschirmfoto 2024-12-16 um 16.13.06.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/83eded2a-5cd3-49a4-405a-8923a65bf000/public)\n",["D",1734362014525],{"_134":366,"_136":367},{"_114":394,"_313":395,"_117":396,"_316":-5,"_317":26,"_318":26,"_20":397},"209a2dfe-bbc1-11ef-aca0-e6cdfca9ef9f","Sorry to hear that! I just tested it out by logging in with a different account, forking it, and it worked for me. \n\nIf you'd like to debug it further, I'd advise you to:\n\n1. Open the link in a new tab (not view it in val town embedded)\n2. See what's going on on line 106 in your val\n3. See what's going on in your network tab. Maybe there's an error there \n\nGood luck!",["D",1734362362182],{"_134":135,"_136":137},{"_114":399,"_313":400,"_117":401,"_316":-5,"_317":26,"_318":26,"_20":402},"f5fb9962-bbc4-11ef-ace2-e6cdfca9ef9f","hmmm, guess what? Here is the screen shot:\n\n![Bildschirmfoto 2024-12-16 um 16.42.57.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/5ab0e4b2-ecde-4ff6-26c4-66142ffd4a00/public)\n\nwhich occurred after forking your blob_admin and opening the val.run URL in a new tab...the browser console does not contain more details (just HTTP status 500 from the server)",["D",1734364008666],{"_134":366,"_136":367},{"_114":404,"_313":405,"_117":406,"_316":-5,"_317":26,"_318":26,"_20":407},"251fc79a-bbc5-11ef-ad00-e6cdfca9ef9f","ah, I tried again and the server responded now...stay tuned...",["D",1734364087755],{"_134":366,"_136":367},{"_114":409,"_313":410,"_117":411,"_316":-5,"_317":26,"_318":26,"_20":412},"5647dbfa-bbc5-11ef-a112-e6cdfca9ef9f","no - at first, it looked great because it knew me and allowed me to press \"Sign in\" - but then I got the same error as above",["D",1734364170227],{"_134":366,"_136":367},{"_114":414,"_313":415,"_117":416,"_316":-5,"_317":26,"_318":26,"_20":417},"fbfa1630-bbc5-11ef-a8fc-e6cdfca9ef9f","FYI: \"Logout\" and \"Signin\" produce the same error message",["D",1734364448218],{"_134":366,"_136":367},{"_114":419,"_313":420,"_117":421,"_316":-5,"_317":26,"_318":26,"_20":422},"43387980-bbc9-11ef-b24b-e6cdfca9ef9f","FYI: I meanwhile received an email titled \"Your val @rozek.blob_admin errored\" errored with some details - do you want/need them?",["D",1734365856236],{"_134":366,"_136":367},"isOwner","routes/_app.v.$handle.$name.versions.$(version)",{"_93":426,"_427":428,"_94":429},"single","redirect","/v/stevekrouse/blob_admin/versions",{"_114":173,"_115":430,"_119":171,"_117":431,"_432":99,"_100":101,"_109":110,"_134":135,"_11":96,"_433":-5,"_434":-5,"_435":-5,"_423":26,"_145":146},"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Hono } from \"https://esm.sh/hono\";\nimport { debounce } from \"https://esm.sh/lodash-es\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { useDropzone } from \"https://esm.sh/react-dropzone?deps=react@18.2.0,react-dom@18.2.0\";\nimport React, { ReactNode, useCallback, useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { lastlogin } from \"https://esm.town/v/stevekrouse/lastlogin_safe\";\nimport { LoginWithGoogleButton } from \"https://esm.town/v/stevekrouse/LoginWithGoogleButton\";\n\ninterface TooltipProps {\n children: ReactNode;\n content: string;\n}\n\nfunction Tooltip({ children, content }: TooltipProps) {\n const [isVisible, setIsVisible] = useState(false);\n const tooltipRef = useRef(null);\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (tooltipRef.current && !tooltipRef.current.contains(event.target as Node)) {\n setIsVisible(false);\n }\n };\n\n document.addEventListener(\"mousedown\", handleClickOutside);\n return () => {\n document.removeEventListener(\"mousedown\", handleClickOutside);\n };\n }, []);\n\n return (\n

\n setIsVisible(true)}\n onMouseLeave={() => setIsVisible(false)}\n >\n {children}\n

\n {isVisible && (\n \n {content}\n

\n \n {isOpen && (\n

\n )}\n

\n \n \n \n

\n {truncatedName}\n

\n {formatBytes(blob.size)} • Last modified: {new Date(blob.lastModified).toLocaleString()}\n

\n {isLoading\n ?

\n : (\n \n )}\n

\n \n

Blob Admin

\n \n View Source\n \n

\n {profile && (\n

\n $\"Profile\"$ \n {profile.username}\n Logout\n

\n )}\n

\n {email\n ? (\n

\n \n

Blobs

\n \n New Text Blob\n \n {\n const file = e.target.files[0];\n if (file) {\n await handleDrop([file]);\n }\n }}\n className=\"hidden\"\n id=\"fileInput\"\n />\n \n Upload File\n \n

\n \n

\n Show:\n setLimit(Number(e.target.value))}\n className=\"px-3 py-2 border rounded bg-gray-700 text-white\"\n >\n \n \n \n \n

\n setSearchPrefix(\"__public/\")}\n className=\"text-blue-400 hover:text-blue-300 text-sm mb-2\"\n >\n View public folder\n \n \n ⓘ\n \n

\n {loading\n ? (\n

\n )\n : (\n

\n ))}\n

\n )}\n

\n {selectedBlob && (\n

{selectedBlob.key}

\n \n ✕\n \n

\n {selectedBlob.key.startsWith(\"__public/\") && (\n

\n )}\n

\n {blobContentLoading\n ? (\n

\n )\n : selectedBlob.key.match(/\\.(jpg|jpeg|png|gif)$/i)\n ? (\n \n console.error(\"Error loading image\")}\n />\n

\n )\n : (\n setEditContent(e.target.value)}\n className=\"w-full h-64 p-2 border rounded bg-gray-700 text-white\"\n />\n )}\n {!selectedBlob.key.match(/\\.(jpg|jpeg|png|gif)$/i) && (\n

\n \n Save\n \n

\n )}\n

\n )}\n \n )\n : (\n

\n \n \n via LastLogin\n \n

Want your own Blob Admin?

\n \n Fork This Val\n \n

Blob Admin Features:

Create and manage text and file blobs
Search and filter blobs by prefix
Upload files via drag-and-drop or file input
Edit text blob contents inline
Rename, delete, and download blobs
Create public shareable links for blobs
View and manage public folder
Preview images directly in the interface

\n )}\n \n \n );\n}\n\nfunction client() {\n const initialEmail = document.getElementById(\"root\").getAttribute(\"data-email\");\n const initialProfile = JSON.parse(document.getElementById(\"root\").getAttribute(\"data-profile\"));\n createRoot(document.getElementById(\"root\")).render(\n ,\n );\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nconst app = new Hono();\n\n// Public route without authentication\napp.get(\"/api/public/:id\", async (c) => {\n const key = `__public/${c.req.param(\"id\")}`;\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n try {\n return c.body(\n await blob.get(key),\n { headers: { \"Content-Type\": \"application/octet-stream\" } },\n );\n } catch (e) {\n return c.text(`Blob not found: ${key}`, 404);\n }\n});\n\n// Middleware to check authentication\nconst checkAuth = async (c, next) => {\n const email = c.req.header(\"X-LastLogin-Email\");\n\n if (!email) {\n return c.html(`\n \n \n Blob Admin\n \n \n \n

\n \n \n

Access Restricted

\n This Blob Admin is only accessible to ${username}.\n

\n 🔒 You are currently signed in with:
\n ${email}\n

\n To access this val, you must:\n

Sign in with the email associated with your Val Town account
Ensure you are signed in as ${username}

\n \n Logout\n \n \n Sign In\n \n

\n \n View Val Source\n \n

\n \n \n \n \n `);\n});\n\nexport default lastlogin((request: Request) => app.fetch(request));",["D",1740147123847],"valName","deletedAt","messageId","threadId","routes/_app","actionData","errors"]

blob_admin

Version 33