/** @jsxImportSource https://esm.sh/react */ import { Hono } from "https://esm.sh/hono"; import { debounce } from "https://esm.sh/lodash-es"; import React, { ReactNode, useCallback, useEffect, useRef, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import { useDropzone } from "https://esm.sh/react-dropzone"; import { lastlogin } from "https://esm.town/v/stevekrouse/lastlogin_safe"; import { LoginWithGoogleButton } from "https://esm.town/v/stevekrouse/LoginWithGoogleButton"; interface TooltipProps { children: ReactNode; content: string; } function Tooltip({ children, content }: TooltipProps) { const [isVisible, setIsVisible] = useState(false); const tooltipRef = useRef(null); useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if (tooltipRef.current && !tooltipRef.current.contains(event.target as Node)) { setIsVisible(false); } }; document.addEventListener("mousedown", handleClickOutside); return () => { document.removeEventListener("mousedown", handleClickOutside); }; }, []); return (

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

{isVisible && (

{content}

)}

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

{isOpen && (

{isPublic ? ( ) : ( )} {isPublic && ( )}

)}

); } function BlobItem({ blob, onSelect, isSelected, onDownload, onRename, onDelete, onMoveToPublic, onMoveOutOfPublic }) { const [isLoading, setIsLoading] = useState(false); const decodedKey = decodeURIComponent(blob.key); const truncatedName = decodedKey.length > 20 ? decodedKey.slice(0, 20) + "..." : decodedKey; const handleClick = async () => { setIsLoading(!isSelected); await onSelect(blob); setIsLoading(false); }; return (

{truncatedName}

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

{isLoading ?

: ( )}

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

Blob Storage Admin

View Source

{profile && (

{profile.username} Logout

)}

{email ? (

Blobs

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

Show:

ⓘ

{loading ? (

) : (

))}

)}

{selectedBlob && (

{selectedBlob.key}

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

Public URL:

)}

{blobContentLoading ? (

) : selectedBlob.key.match(/\.(jpg|jpeg|png|gif)$/i) ? (

console.error("Error loading image")} />

) : (

setEditContent(e.target.value)}
                          className="w-full h-64 p-2 border rounded bg-gray-700 text-white"
                        />
                      )}
                    {!selectedBlob.key.match(/\.(jpg|jpeg|png|gif)$/i) && (
                      <div className="mt-4 flex justify-end">
                        <button
                          onClick={handleSave}
                          className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
                        >
                          Save
                        </button>
                      </div>
                    )}
                  </div>
                </div>
              )}
            </div>
          )
          : (
            <div className="flex flex-col items-center justify-center">
              <LoginWithGoogleButton text="Sign in with Google" />
              <a href="https://lastlogin.io/" className="mt-2 text-sm text-gray-400 hover:text-gray-300">
                via LastLogin
              </a>
              <div className="mt-6 rounded p-4 flex flex-col">
                <div className="text-center">
                  <p className="text-sm text-gray-400 mb-2">Want your own Blob Storage Admin?</p>
                  <a
                    href={import.meta.url.replace("esm.town", "val.town")}
                    target="_blank"
                    className="px-4 py-2 bg-purple-600 text-white rounded hover:bg-purple-700 transition"
                  >
                    Fork This Val
                  </a>
                </div>
                <h3 className="text-lg font-semibold text-white mt-8 mb-2">Blob Storage Admin Features:</h3>
                <ul className="list-disc list-inside space-y-2 text-gray-300">
                  <li>Create and manage text and file blobs</li>
                  <li>Search and filter blobs by prefix</li>
                  <li>Upload files via drag-and-drop or file input</li>
                  <li>Edit text blob contents inline</li>
                  <li>Rename, delete, and download blobs</li>
                  <li>Create public shareable links for blobs</li>
                  <li>View and manage public folder</li>
                  <li>Preview images directly in the interface</li>
                </ul>
              </div>
            </div>
          )}
      </main>
    </div>
  );
}

if (typeof document !== "undefined") {
  client();
}

const app = new Hono();

// Public route without authentication
app.get("/api/public/:id", async (c) => {
  const key = `__public/${c.req.param("id")}`;
  const { blob } = await import("https://esm.town/v/std/blob");
  const content = await blob.get(key);
  if (!content) {
    return c.text("Not Found", 404);
  }
  return content;
});

// Middleware to check authentication
const checkAuth = async (c, next) => {
  const email = c.req.header("X-LastLogin-Email");

if (!email) {
    return c.html(`
      <html>
        <head>
          <title>Blob Storage Admin</title>
          <script src="https://cdn.tailwindcss.com"></script>
        </head>
        <body class="bg-gray-900 text-white h-screen flex items-center justify-center">
          <div class="bg-gray-800 p-8 rounded shadow-md">
            <div id="root"></div>
            <script src="https://esm.town/v/std/catch"></script>
            <script type="module" src="${import.meta.url}"></script>
          </div>
        </body>
      </html>
    `);
  }
  const { ValTown } = await import("npm:@valtown/sdk");
  const vt = new ValTown();
  const { email: authorEmail, profileImageUrl, username } = await vt.me.profile.retrieve();
  // const authorEmail = me.email;

if (email !== authorEmail) {
    return c.html(
      `
      <html>
        <head>
          <title>Access Restricted</title>
          <script src="https://cdn.tailwindcss.com"></script>
        </head>
        <body class="bg-gray-900 text-white flex items-center justify-center">
          <div class="bg-gray-800 p-8 rounded shadow-md max-w-md w-full">
            <h1 class="text-2xl font-bold mb-4 text-red-500">Access Restricted</h1>
            <p class="mb-4">
              This Blob Storage Admin is only accessible to <strong>${me.username}</strong>.
            </p>
            <div class="bg-gray-700 p-4 rounded mb-4">
              <p class="text-sm">
                🔒 You are currently signed in with: <br>
                <span class="font-mono text-yellow-400">${email}</span>
              </p>
            </div>
            <div class="space-y-4">
              <p class="text-sm">
                To access this val, you must:
                <ol class="list-decimal list-inside ml-2 mt-2">
                  <li>Sign in with the email associated with your Val Town account</li>
                  <li>Ensure you are signed in as <strong>${me.username}</strong></li>
                </ol>
              </p>
              <div class="flex space-x-4">
                <a 
                  href="/auth/logout" 
                  class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition"
                >
                  Logout
                </a>
                <a 
                  href="https://val.town/signin" 
                  target="_blank" 
                  class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 transition"
                >
                  Sign In
                </a>
              </div>
            </div>
            <div class="mt-6 text-sm text-gray-400 text-center">
              <a 
                href=${import.meta.url.replace("esm.town", "val.town")}
                target="_top" 
                class="underline"
              >
                View Val Source
              </a>
            </div>
          </div>
        </body>
      </html>
    `,
      403,
      {
        "X-Restricted-Access": "true",
      },
    );
  }

c.set("email", email);
  c.set("profile", { profileImageUrl, username });
  await next();
};

app.get("/api/blobs", checkAuth, async (c) => {
  const prefix = c.req.query("prefix") || "";
  const limit = parseInt(c.req.query("limit") || "20", 10);
  const { blob } = await import("https://esm.town/v/std/blob");
  const blobList = await blob.list(prefix);
  const result = blobList.slice(0, limit).map(b => ({ ...b, isFolder: false }));
  return c.json(result);
});

app.get("/api/blob", checkAuth, async (c) => {
  const key = c.req.query("key");
  if (!key) return c.text("Missing key parameter", 400);
  const { blob } = await import("https://esm.town/v/std/blob");
  const content = await blob.get(key);
  return content;
});

app.put("/api/blob", checkAuth, async (c) => {
  const key = c.req.query("key");
  if (!key) return c.text("Missing key parameter", 400);
  const content = await c.req.arrayBuffer();
  const { blob } = await import("https://esm.town/v/std/blob");
  await blob.set(key, content);
  return c.text("OK");
});

app.delete("/api/blob", checkAuth, async (c) => {
  const key = c.req.query("key");
  if (!key) return c.text("Missing key parameter", 400);
  const { blob } = await import("https://esm.town/v/std/blob");
  await blob.delete(key);
  return c.text("OK");
});

app.post("/api/blob", checkAuth, async (c) => {
  const { file, key } = await c.req.parseBody();
  if (!file || !key) return c.text("Missing file or key", 400);
  const { blob } = await import("https://esm.town/v/std/blob");
  await blob.set(key, await file.arrayBuffer());
  return c.text("OK");
});

app.get("*", checkAuth, async (c) => {
  const email = c.get("email");
  const profile = c.get("profile");
  return c.html(`
    <html>
      <head>
        <title>Blob Storage Admin</title>
        <script src="https://cdn.tailwindcss.com"></script>
      </head>
      <body class="bg-gray-900 text-white">
        <div id="root" data-email="${email}" data-profile='${JSON.stringify(profile)}'></div>
        <script src="https://esm.town/v/std/catch"></script>
        <script type="module" src="${import.meta.url}"></script>
      </body>
    </html>
  `);
});

export default lastlogin((request: Request) => app.fetch(request));</article></body></html>

tobiasdossinger