/** @jsxImportSource https://esm.sh/hono/jsx **/ import { useEffect, useRef } from "https://esm.sh/hono/jsx/dom"; export function BlobEditor(props: { blob: { language?: string; text: string } }) { const ref = useRef(); const saveBlob = async () => { const resp = await fetch("/edit", { method: "POST", body: JSON.stringify({ text: ref.current!.code, }), }); if (!resp.ok) { alert(await resp.text()); return; } window.location.replace("/"); }; return (

); } export function blobEditor(key: string, options?: { title?: string }) { return async (req: Request) => { const { html } = await import("https://esm.town/v/pomdtr/gfm"); const { blob } = await import("https://esm.town/v/std/blob?v=11"); const { Hono } = await import("npm:hono"); const { Island } = await import("https://esm.town/v/pomdtr/hono_island"); const { HTTPException } = await import("npm:hono/http-exception"); const { jsxRenderer, useRequestContext } = await import("npm:hono/jsx-renderer"); const { extractValInfo } = await import("https://esm.town/v/pomdtr/extractValInfo"); async function readBlob(key: string) { const resp = await blob.get(key); if (resp.status == 200) { return resp.text(); } else if (resp.status == 404) { return ""; } else { throw new Error(await resp.text()); } } const router = new Hono(); router.use(jsxRenderer(({ children }) => { const c = useRequestContext(); const { pathname } = new URL(c.req.url); return ( {children} ); })); router.get("/", async (c) => { if (key.endsWith(".md")) { const markdown = await readBlob(key); return c.render( <>

, , ); } const text = await readBlob(key); return c.text(text); }); router.get("/edit", async (c) => { const text = await readBlob(key); const [_, extension] = key.split("."); const language = extension == "md" ? "markdown" : extension; return c.render( , ); }); router.post("/edit", async (c) => { const { text } = await c.req.json(); if (!text) { throw new HTTPException(400, { message: "no text provided", }); } await blob.set(key, text); return c.redirect("/"); }); return router.fetch(req); }; } export default async function(req: Request) { const { modifyFetchHandler } = await import("https://esm.town/v/andreterron/codeOnValTown?v=50"); return modifyFetchHandler(blobEditor("blob_editor_demo.md"))(req); }

Vals using hono/jsx/dom