\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, sourceURL }) {\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 via LastLogin\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\nconst root = document.getElementById(\"root\");\nconst initialEmail = window.email;\nconst initialProfile = window.profile;\nconst sourceURL = window.sourceURL;\ncreateRoot(root).render(\n ,\n);",[18,71],"pulls","branches","forks","envVars",{"_209":26,"_211":26},"connections",{"_209":26,"_210":26},"count","unfilledCount","emptyCount",{"_36":185,"_13":18,"_69":102,"_46":-5,"_38":39,"_186":43,"_187":24,"_40":237,"_42":26,"_72":103,"_189":-5,"_74":30,"_190":-5,"_221":238,"_17":239},{"_36":198,"_13":71,"_69":70,"_46":102,"_38":39,"_186":43,"_187":24,"_40":234,"_42":26,"_72":73,"_189":200,"_74":30,"_190":-5,"_221":235,"_17":236},{"_36":194,"_13":86,"_69":85,"_46":102,"_38":39,"_186":97,"_187":24,"_40":231,"_42":80,"_72":94,"_189":196,"_74":30,"_190":-5,"_221":232,"_17":233},{"_36":224,"_13":225,"_69":226,"_46":-5,"_38":39,"_186":43,"_187":24,"_40":227,"_42":26,"_72":21,"_189":228,"_74":30,"_190":-5,"_221":229,"_17":230},{"_36":217,"_13":218,"_69":113,"_46":-5,"_38":39,"_186":43,"_187":24,"_40":219,"_42":26,"_72":94,"_189":220,"_74":30,"_190":-5,"_221":222,"_17":223},"3f08603c-3d47-11f0-8267-76b3cceeab13","main.tsx",["D",1748603665738],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { type Context, Hono } from \"https://esm.sh/hono\";\nimport { debounce } from \"https://esm.sh/lodash-es\";\nimport React, { ReactNode, useCallback, useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { parseProject, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { lastlogin } from \"https://esm.town/v/stevekrouse/lastlogin_safe\";\n\nconst app = new Hono();\n\napp.get(\"/public/*\", (c: Context) => {\n const url = new URL(c.req.url);\n return serveFile(url.pathname, import.meta.url);\n});\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\nconst sourceURL = parseProject(import.meta.url).links.self.project;\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});\n\nexport default lastlogin((request: Request) => app.fetch(request));","children",[],[218],"3f085cfe-3d47-11f0-8267-76b3cceeab13","README.md","bc54acc7-0d34-4507-bfd2-36ca08c4372d",["D",1748603665738],"# Blob Admin\n\nThis is a lightweight Blob Admin interface to view and debug your Blob data.\n\n![Screenshot 2024-11-22 at 15.43.43@2x.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/d075a4ee-93ec-4cdd-4823-7c8aee593f00/public)\n\nTo use this, 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.",[],[225],["D",1748603717731],[],[18,86],["D",1748603665738],[],[18,71],["D",1748603665738],[213,214],[18],["D",1748603665738],{"_11":12,"_152":77},{"_11":12,"_148":-5,"_76":77,"_31":75,"_149":150,"_151":30},{"_42":97,"_13":16,"_36":39,"_137":105,"_138":66,"_139":140,"_141":18,"_142":143,"_144":145,"_146":14,"_147":12},"ctx",{"_55":-5,"_173":277,"_278":279,"_280":281,"_282":30,"_283":30,"_284":30,"_285":24,"_286":-5,"_287":-7,"_288":-7,"_289":26,"_290":30,"_291":30,"_292":-5,"_293":30,"_294":30,"_295":30,"_296":-5},"ENV",{"_248":249,"_250":251,"_252":16,"_253":254,"_255":256,"_257":258,"_259":260,"_261":262,"_263":264,"_265":266,"_267":268,"_269":270,"_271":272,"_273":274,"_275":276},"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"]

History · public