{props.title}

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_201":202,"_203":204},"routes/_app.x.$handle.$name",{"_105":104,"_32":50,"_114":95,"_27":115,"_13":14,"_116":-5,"_11":117,"_118":119,"_120":121,"_122":123,"_124":125,"_21":-5,"_126":-5,"_127":-5,"_128":25,"_129":130,"_131":64,"_132":-5,"_133":-5,"_134":135},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_48":49,"_32":50,"_36":51,"_52":-5,"_53":25,"_54":55,"_56":55,"_57":58,"_59":-5,"_18":60,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":72,"_73":74,"_75":76,"_77":-5,"_78":79,"_80":79,"_81":82,"_83":82,"_84":82,"_85":79,"_86":79,"_87":88,"_89":90,"_91":92,"_93":25},"version",4,"changes",[19,20],"aiChatInfo","userId",{"_21":41,"_23":-7,"_24":25,"_26":25,"_27":42,"_29":42},{"_21":22,"_23":-7,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":-5,"_36":37,"_38":14,"_39":40,"_24":25},"previous","deleted",false,"deletedHere","path","frontend","latestPath","fileId","84591506-8494-4a4c-bb02-86fe0fa9f7ec","name","fileType","directory","content","createdAt",["D",1781376794906],"branchVersion","branchId","b06b90cc-3145-4e0c-a601-5498a45bf388",{"_30":43,"_32":44,"_33":45,"_35":46,"_36":47,"_38":14,"_39":40,"_24":25},"frontend/Layout.tsx","2239ebe6-6759-11f1-96b7-1607ee4eb77e","Layout.tsx","script","/** @jsxImportSource npm:hono@4/jsx */\n\nexport function Layout(\n props: { title: string; bare?: boolean; children: any },\n) {\n return (\n \n \n \n \n {props.title}\n \n \n \n \n {props.bare ? props.children : (\n

\n {props.children}\n

\n )}\n \n \n );\n}\n\nfunction Footer() {\n return (\n \n );\n}\n",["D",1781376794906],"id","d790bcce-8376-49d3-8ba5-0bbcf66987bc","team-artifacts",["D",1781376559300],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Host and share HTML and Markdown artifacts with your team","imageUrl","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","pinnedFileId","95d06ed2-6758-11f1-8f78-1607ee4eb77e","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019aa807-52c2-709c-928b-2029bae9a558","tursoName","d790bcce837649d38ba50bbcf66987bc","tursoHostname","d790bcce837649d38ba50bbcf66987bc-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789500689328],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_105":104,"_113":109},"org",{"_105":104,"_106":107,"_108":109,"_18":-5,"_110":111,"_112":64},"branch",{"_13":94,"_32":95,"_48":40,"_96":49,"_97":-5,"_98":-5,"_99":-5,"_100":-5,"_101":-5,"_102":50,"_103":104},"isOwned",50,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","templates","handle","displayName","Templates","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789556399&sig=d4d039bf60786a03d56ec8a29ec1b19630253aab318e490fcd07a6f24846b070","tier","business","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_48":49,"_32":50,"_36":196,"_52":-5,"_53":25,"_54":55,"_56":55,"_57":58,"_59":-5,"_18":60,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":72,"_73":74,"_75":197,"_77":-5,"_78":79,"_80":79,"_81":82,"_83":82,"_84":82,"_85":79,"_86":79,"_87":198,"_89":199,"_91":200,"_93":25},"tree",[170,172,174],"files",[170,171,172,173,174],"counts",{"_160":68,"_161":145,"_162":142,"_163":164,"_165":166},"contents",[136,137,138],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_48":154,"_32":155,"_30":156,"_141":-5,"_39":40,"_38":157,"_143":64,"_36":158,"_13":68,"_33":34,"_35":-5,"_24":25,"_148":-5,"_27":159},{"_48":151,"_32":28,"_30":31,"_141":-5,"_39":40,"_38":14,"_143":64,"_36":152,"_13":68,"_33":34,"_35":-5,"_24":25,"_148":-5,"_27":153},{"_48":139,"_32":140,"_30":62,"_141":-5,"_39":40,"_38":142,"_143":25,"_36":144,"_13":145,"_33":146,"_35":147,"_24":25,"_148":149,"_27":150},"aabfa83d-8d16-440a-91b9-c22d9fee0f38","main.tsx","parentId",2,"latest",["D",1781376687822],1,"http","/** @jsxImportSource npm:hono@4/jsx */\nimport { Hono } from \"npm:hono@4\";\nimport {\n getOAuthUserData,\n oauthMiddleware,\n} from \"https://esm.town/v/std/oauth/middleware.ts\";\nimport { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\n\nimport {\n createArtifact,\n deleteArtifact,\n getArtifact,\n initDb,\n listArtifacts,\n} from \"./backend/db.ts\";\nimport { Layout } from \"./frontend/Layout.tsx\";\nimport { Landing } from \"./frontend/Landing.tsx\";\nimport { Dashboard } from \"./frontend/Dashboard.tsx\";\nimport { Viewer } from \"./frontend/Viewer.tsx\";\nimport { AccessDenied } from \"./frontend/AccessDenied.tsx\";\n\n// The org this app gates to = whoever owns the val. Remix it into your own org\n// and it automatically becomes private to your team — nothing to configure.\nconst ORG = parseVal().username;\n\nawait initDb();\n\nconst app = new Hono();\napp.onError((err) => Promise.reject(err)); // surface real stack traces\n\n// Render a JSX page as a full HTML document.\nconst page = (node: any, status = 200) =>\n new Response(\"\" + node.toString(), {\n status,\n headers: { \"content-type\": \"text/html; charset=utf-8\" },\n });\n\n// Require a logged-in member of this val's org. Gates every read/write route.\nconst requireOrg = async (c: any, next: any) => {\n const session = await getOAuthUserData(c.req.raw);\n if (!session?.user) return c.redirect(\"/auth/login\");\n if (!session.isOrgMember) {\n return page(\n \n \n ,\n 403,\n );\n }\n c.set(\"user\", session.user);\n await next();\n};\n\n// Public landing → dashboard for members, marketing for everyone else.\napp.get(\"/\", async (c) => {\n const session = await getOAuthUserData(c.req.raw);\n if (!session?.user) {\n return page();\n }\n if (!session.isOrgMember) {\n return page(\n \n \n ,\n 403,\n );\n }\n const artifacts = await listArtifacts();\n return page(\n \n \n ,\n );\n});\n\n// Create an artifact from a dropped/selected HTML file.\napp.post(\"/upload\", requireOrg, async (c) => {\n const form = await c.req.formData();\n const file = form.get(\"file\");\n const html = file instanceof File\n ? await file.text()\n : (form.get(\"html\")?.toString() ?? \"\");\n if (!html.trim()) return c.json({ error: \"Empty HTML\" }, 400);\n const rawName = form.get(\"name\")?.toString()\n || (file instanceof File ? file.name : \"\")\n || \"untitled\";\n const name = rawName.replace(/\\.html?$/i, \"\").trim().slice(0, 80) || \"untitled\";\n const user = c.get(\"user\");\n const id = await createArtifact({\n name,\n html,\n createdBy: user.username ?? user.id,\n });\n return c.json({ id, url: `/a/${id}` });\n});\n\n// View an artifact, rendered inside a sandboxed iframe (see Viewer).\napp.get(\"/a/:id\", requireOrg, async (c) => {\n const artifact = await getArtifact(c.req.param(\"id\"));\n if (!artifact) {\n return page(, 404);\n }\n return page(\n ,\n );\n});\n\n// Raw artifact HTML — only ever loaded as the sandboxed iframe's source.\napp.get(\"/a/:id/raw\", requireOrg, async (c) => {\n const artifact = await getArtifact(c.req.param(\"id\"));\n if (!artifact) return c.text(\"Not found\", 404);\n return new Response(artifact.html, {\n headers: { \"content-type\": \"text/html; charset=utf-8\" },\n });\n});\n\napp.post(\"/a/:id/delete\", requireOrg, async (c) => {\n await deleteArtifact(c.req.param(\"id\"));\n return c.redirect(\"/\");\n});\n\n// Drag-and-drop client script (kept out of the markup per house style).\napp.get(\n \"/upload.client.js\",\n (c) => serveFile(\"./frontend/upload.client.ts\", import.meta.url),\n);\n\n// Every Val Town app links to its own source.\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\nexport default oauthMiddleware(app.fetch);\n","label","artifacts-demo",[140],"d7f9be9e-b52f-4fac-a791-c3a9eea8781e",["D",1781376794906],[28],"f21e7a0a-9b8d-4e09-be62-f7880b77ea61","backend","8e92c53c-11df-463e-aac7-0a8b38124988",3,["D",1781376790297],[155],"pulls","branches","forks","envVars",{"_167":68,"_169":68},"connections",{"_167":68,"_168":68},"count","unfilledCount","emptyCount",{"_48":154,"_32":155,"_30":156,"_141":-5,"_39":40,"_38":157,"_143":64,"_36":193,"_13":68,"_33":34,"_35":-5,"_24":25,"_148":-5,"_176":194,"_27":195},{"_48":186,"_32":187,"_30":188,"_141":156,"_39":40,"_38":157,"_143":25,"_36":189,"_13":68,"_33":45,"_35":190,"_24":25,"_148":-5,"_176":191,"_27":192},{"_48":151,"_32":28,"_30":31,"_141":-5,"_39":40,"_38":14,"_143":64,"_36":183,"_13":68,"_33":34,"_35":-5,"_24":25,"_148":-5,"_176":184,"_27":185},{"_48":179,"_32":44,"_30":43,"_141":31,"_39":40,"_38":14,"_143":64,"_36":180,"_13":68,"_33":45,"_35":46,"_24":25,"_148":-5,"_176":181,"_27":182},{"_48":139,"_32":140,"_30":62,"_141":-5,"_39":40,"_38":142,"_143":25,"_36":175,"_13":145,"_33":146,"_35":147,"_24":25,"_148":149,"_176":177,"_27":178},["D",1781376687822],"children",[],[140],"b3c314e8-5a8b-4215-a3a1-0f48744aa917",["D",1781376794906],[],[28,44],["D",1781376794906],[173],[28],"1672de06-d6b1-4bd7-8805-c6f9f349aaba","db.ts","1f7c8fd0-6759-11f1-95fe-1607ee4eb77e",["D",1781376790297],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { listFiles, readFile } from \"https://esm.town/v/std/utils/index.ts\";\n\nexport type Artifact = {\n id: string;\n name: string;\n html: string;\n createdBy: string;\n createdAt: number;\n};\n\nconst TABLE = \"artifacts_v1\";\n\nlet ready: Promise | null = null;\n\n/** Idempotent: creates the table and seeds the example artifacts once. */\nexport function initDb(): Promise {\n if (!ready) ready = setup();\n return ready;\n}\n\nasync function setup() {\n await sqlite.execute(\n `CREATE TABLE IF NOT EXISTS ${TABLE} (\n id TEXT PRIMARY KEY,\n name TEXT NOT NULL,\n html TEXT NOT NULL,\n created_by TEXT NOT NULL,\n created_at INTEGER NOT NULL\n )`,\n );\n await seedExamples();\n}\n\n// Seed examples/*.html on first run so a fresh remix isn't empty. These are\n// real files in the val — edit or delete them and they won't come back.\nasync function seedExamples() {\n const { rows } = await sqlite.execute(`SELECT COUNT(*) AS n FROM ${TABLE}`);\n if (Number(rows[0].n) > 0) return;\n const files = await listFiles();\n const examples = files\n .filter((f: any) =>\n f.type === \"file\" && f.path.startsWith(\"examples/\") &&\n f.path.endsWith(\".html\")\n )\n .map((f: any) => f.path as string)\n .sort();\n for (const path of examples) {\n const html = await readFile(path);\n const name = path.replace(/^examples\\//, \"\").replace(/\\.html$/, \"\");\n await createArtifact({ name, html, createdBy: \"example\" });\n }\n}\n\nfunction newId() {\n return crypto.randomUUID().replace(/-/g, \"\").slice(0, 10);\n}\n\nexport async function createArtifact(\n input: { name: string; html: string; createdBy: string },\n): Promise {\n const id = newId();\n await sqlite.execute({\n sql:\n `INSERT INTO ${TABLE} (id, name, html, created_by, created_at) VALUES (?, ?, ?, ?, ?)`,\n args: [id, input.name, input.html, input.createdBy, Date.now()],\n });\n return id;\n}\n\n/** List metadata only (no html) for the dashboard. */\nexport async function listArtifacts(): Promise {\n const { rows } = await sqlite.execute(\n `SELECT id, name, created_by, created_at FROM ${TABLE} ORDER BY created_at DESC`,\n );\n return rows.map(toArtifact);\n}\n\nexport async function getArtifact(id: string): Promise {\n const { rows } = await sqlite.execute({\n sql:\n `SELECT id, name, html, created_by, created_at FROM ${TABLE} WHERE id = ?`,\n args: [id],\n });\n if (!rows.length) return null;\n return { ...toArtifact(rows[0]), html: rows[0].html as string };\n}\n\nexport async function deleteArtifact(id: string): Promise {\n await sqlite.execute({ sql: `DELETE FROM ${TABLE} WHERE id = ?`, args: [id] });\n}\n\nfunction toArtifact(r: any): Artifact {\n return {\n id: r.id as string,\n name: r.name as string,\n html: \"\",\n createdBy: r.created_by as string,\n createdAt: Number(r.created_at),\n };\n}\n",[],[155,187],["D",1781376790297],[171],[155],["D",1781376559300],["D",1789500689328],{"_105":104,"_113":109},{"_105":104,"_106":107,"_108":109,"_18":-5,"_110":111,"_112":64},{"_13":94,"_32":95,"_48":40,"_96":49,"_97":-5,"_98":-5,"_99":-5,"_100":-5,"_101":-5,"_102":50,"_103":104},"ctx",{"_87":-5,"_133":234,"_235":236,"_237":238,"_239":25,"_240":25,"_241":25,"_242":64,"_243":-5,"_244":-7,"_245":-7,"_246":68,"_247":25,"_248":25,"_249":-5,"_250":25,"_251":25,"_252":25,"_253":-5},"ENV",{"_205":206,"_207":208,"_209":95,"_210":211,"_212":213,"_214":215,"_216":217,"_218":219,"_220":221,"_222":223,"_224":225,"_226":227,"_228":229,"_230":231,"_232":233},"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"]

Diff · v4