Kram-Beckman Wall Display

Upload an image and it'll show up on the wall of our living room. It gets resized to fit the screen. See what's currently displayed.

\n\n \n\n \n\n \n

\n\n \n\n\n",[],[59,100],["D",1777085072479],[111,112],[67],{"_36":123,"_13":124,"_39":125,"_41":68,"_42":43,"_44":126,"_46":47,"_48":127,"_17":128,"_51":129,"_52":130,"_54":55,"_56":-5,"_82":131,"_18":132},{"_36":113,"_13":114,"_39":115,"_41":68,"_42":43,"_44":116,"_46":47,"_48":117,"_17":118,"_51":119,"_52":120,"_54":55,"_56":-5,"_82":121,"_18":122},"c41d4d54-4189-11f1-b1c6-42b51c65c3df","index.ts","b073704c-4050-11f1-9b9c-42b51c65c3df",37,["D",1777219538148],10,"http","import { Hono } from \"https://esm.sh/hono\";\nimport { readFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { blob } from \"https://esm.town/v/std/blob\";\nimport { runReminders, sendReminderEmail } from \"./cron.ts\";\n\nconst app = new Hono();\napp.onError((err) => Promise.reject(err));\n\nconst BLOB_KEY = \"trmnl_image_data\";\nconst UPLOADERS_KEY = \"trmnl_uploaders\";\n\ntype Uploader = {\n lastUpload: string;\n count: number;\n reminders: boolean;\n lastReminded?: string | null;\n reminderCount?: number;\n};\ntype Uploaders = Record;\n\nasync function getUploaders(): Promise {\n return (await blob.getJSON(UPLOADERS_KEY) as Uploaders) || {};\n}\n\napp.get(\"/\", async (c) => {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\napp.get(\"/frontend/*\", async (c) => {\n const { serveFile } = await import(\"https://esm.town/v/std/utils/index.ts\");\n return serveFile(c.req.path, import.meta.url);\n});\n\napp.post(\"/upload\", async (c) => {\n const body = await c.req.json();\n const { image, caption, email } = body;\n\n if (!image) {\n return c.json({ error: \"No image data provided\" }, 400);\n }\n if (!email) {\n return c.json({ error: \"Email is required\" }, 400);\n }\n\n await blob.setJSON(BLOB_KEY, { image, caption: caption || \"\" });\n\n const uploaders = await getUploaders();\n const existing = uploaders[email];\n uploaders[email] = {\n lastUpload: new Date().toISOString(),\n count: (existing?.count || 0) + 1,\n reminders: existing?.reminders ?? true,\n lastReminded: null,\n reminderCount: 0,\n };\n await blob.setJSON(UPLOADERS_KEY, uploaders);\n\n return c.json({ ok: true });\n});\n\nfunction requireAdmin(c: any): Response | null {\n const password = Deno.env.get(\"ADMIN_PASSWORD\");\n if (!password) {\n return new Response(\"ADMIN_PASSWORD env var not set\", { status: 500 });\n }\n const auth = c.req.header(\"authorization\");\n const expected = \"Basic \" + btoa(`admin:${password}`);\n if (auth !== expected) {\n return new Response(\"Auth required\", {\n status: 401,\n headers: { \"WWW-Authenticate\": 'Basic realm=\"admin\"' },\n });\n }\n return null;\n}\n\napp.get(\"/admin/test-email\", async (c) => {\n const denied = requireAdmin(c);\n if (denied) return denied;\n\n const to = c.req.query(\"to\");\n if (!to) return c.text(\"Missing ?to=email\", 400);\n\n await sendReminderEmail(to);\n return c.json({ ok: true, sentTo: to });\n});\n\napp.get(\"/admin/run-cron\", async (c) => {\n const denied = requireAdmin(c);\n if (denied) return denied;\n\n const dryRun = c.req.query(\"dry\") === \"1\";\n const daysAhead = parseInt(c.req.query(\"days_ahead\") || \"0\", 10) || 0;\n const now = Date.now() + daysAhead * 24 * 60 * 60 * 1000;\n\n const result = await runReminders({ now, dryRun });\n return c.json(result, 200, { \"Content-Type\": \"application/json\" });\n});\n\napp.get(\"/admin\", async (c) => {\n const denied = requireAdmin(c);\n if (denied) return denied;\n\n const uploaders = await getUploaders();\n const entries = Object.entries(uploaders).sort(\n ([, a], [, b]) => new Date(b.lastUpload).getTime() - new Date(a.lastUpload).getTime(),\n );\n\n const fmt = (iso: string | null | undefined) =>\n iso ? new Date(iso).toLocaleString(\"en-US\", { dateStyle: \"medium\", timeStyle: \"short\" }) : \"—\";\n\n const rows = entries.map(([addr, u]) => `\n${escapeHtml(addr)}\n${u.count}\n${fmt(u.lastUpload)}\n${u.reminders ? \"yes\" : \"no\"}\n${u.reminderCount ?? 0}\n${fmt(u.lastReminded)}\n`).join(\"\");\n\n return c.html(`Admin\n\n\n\n

Uploaders

${entries.length} ${entries.length === 1 ? \"person has\" : \"people have\"} uploaded.

\n\n\n${rows || ``}\n

Email	Uploads	Last upload	Reminders	# sent	Last reminded
No uploaders yet.

\n`);\n});\n\napp.get(\"/opt-out\", async (c) => {\n const email = c.req.query(\"email\");\n const shell = (title: string, body: string) => `\n\n\n

${title}

${body}

`;\n\n if (!email) {\n return c.html(shell(\"Missing email\", \"

No email address was provided.

\"));\n }\n\n const uploaders = await getUploaders();\n if (uploaders[email]) {\n uploaders[email].reminders = false;\n await blob.setJSON(UPLOADERS_KEY, uploaders);\n }\n\n return c.html(shell(\"Opted out\", `

You won't receive any more reminders.

Back to upload`));\n});\n\napp.get(\"/image\", async (c) => {\n const data = await blob.getJSON(BLOB_KEY) as { image: string; caption: string } | null;\n if (!data) {\n return c.text(\"No image\", 404);\n }\n\n const base64 = data.image.replace(/^data:image\\/png;base64,/, \"\");\n const binary = Uint8Array.from(atob(base64), (ch) => ch.charCodeAt(0));\n return new Response(binary, {\n headers: { \"Content-Type\": \"image/png\", \"Cache-Control\": \"no-cache\" },\n });\n});\n\napp.get(\"/display\", async (c) => {\n const data = await blob.getJSON(BLOB_KEY) as { image: string; caption: string } | null;\n\n if (!data) {\n return c.html(`\n\n

No image uploaded yet.

`);\n }\n\n const origin = new URL(c.req.url).origin;\n const captionHtml = data.caption\n ? `

${escapeHtml(data.caption)}

`\n : \"\";\n\n return c.html(`\n\n\n\n

\n${captionHtml}\n`);\n});\n\nfunction escapeHtml(s: string): string {\n return s.replace(/&/g, \"&\").replace(//g, \">\").replace(/\"/g, \""\");\n}\n\nexport default app.fetch;\n",[],[67,114],"c426431e-4189-11f1-a107-42b51c65c3df","cron.ts","3bbbd114-40a4-11f1-b7ee-42b51c65c3df",38,["D",1777219538174],5,"interval","import { blob } from \"https://esm.town/v/std/blob\";\nimport { email } from \"https://esm.town/v/std/email\";\n\nconst UPLOADERS_KEY = \"trmnl_uploaders\";\nconst UPLOAD_URL = \"http://www.joshbeckman.org/frametags/home-trmnl-small\";\nconst DAY_MS = 24 * 60 * 60 * 1000;\nconst BASE_WAIT_DAYS = 14;\nconst MAX_REMINDERS = 4;\n\ntype Uploader = {\n lastUpload: string;\n count: number;\n reminders: boolean;\n lastReminded?: string | null;\n reminderCount?: number;\n};\ntype Uploaders = Record;\n\nexport async function sendReminderEmail(to: string): Promise {\n const optOutUrl = `https://joshbeckman--b073704c405011f19b9c42b51c65c3df.web.val.run/opt-out?email=${encodeURIComponent(to)}`;\n await email({\n to,\n replyTo: \"josh@joshbeckman.org\",\n subject: \"What's new with you? Update the Kram-Beckman wall display!\",\n html: `

Hey! It's been a while since you last uploaded an image to the Kram-Beckman wall display.

We'd love to see what's new with you. Upload a photo and it'll show up on the wall of our living room.

Upload a new image

\nStop receiving these reminders\n

`,\n });\n}\n\nexport type RunResult = {\n now: string;\n dryRun: boolean;\n considered: number;\n sent: { email: string; reminderNumber: number }[];\n skipped: { email: string; reason: string; waitDaysRemaining?: number }[];\n};\n\nexport async function runReminders(\n opts: { now?: number; dryRun?: boolean } = {},\n): Promise {\n const now = opts.now ?? Date.now();\n const dryRun = opts.dryRun ?? false;\n const uploaders = (await blob.getJSON(UPLOADERS_KEY) as Uploaders) || {};\n\n const result: RunResult = {\n now: new Date(now).toISOString(),\n dryRun,\n considered: 0,\n sent: [],\n skipped: [],\n };\n\n let changed = false;\n\n for (const [addr, uploader] of Object.entries(uploaders)) {\n result.considered++;\n\n if (!uploader.reminders) {\n result.skipped.push({ email: addr, reason: \"opted out\" });\n continue;\n }\n\n const reminderCount = uploader.reminderCount ?? 0;\n if (reminderCount >= MAX_REMINDERS) {\n result.skipped.push({ email: addr, reason: \"max reminders reached\" });\n continue;\n }\n\n const waitMs = BASE_WAIT_DAYS * Math.pow(2, reminderCount) * DAY_MS;\n const sinceLastTouch = uploader.lastReminded || uploader.lastUpload;\n const elapsed = now - new Date(sinceLastTouch).getTime();\n if (elapsed < waitMs) {\n result.skipped.push({\n email: addr,\n reason: \"not enough time elapsed\",\n waitDaysRemaining: Math.ceil((waitMs - elapsed) / DAY_MS),\n });\n continue;\n }\n\n if (!dryRun) {\n await sendReminderEmail(addr);\n uploader.lastReminded = new Date(now).toISOString();\n uploader.reminderCount = reminderCount + 1;\n changed = true;\n }\n\n result.sent.push({ email: addr, reminderNumber: reminderCount + 1 });\n }\n\n if (changed && !dryRun) {\n await blob.setJSON(UPLOADERS_KEY, uploaders);\n }\n\n return result;\n}\n\nexport default async function () {\n await runReminders();\n}\n",[],[67,124],["D",1777084928464],[136],[73],{"_36":137,"_13":138,"_39":139,"_41":74,"_42":43,"_44":140,"_46":47,"_48":141,"_17":69,"_51":24,"_52":142,"_54":55,"_56":-5,"_82":143,"_18":144},"9656c41c-40a4-11f1-9f45-42b51c65c3df","settings.local.json","5a8d55da-4050-11f1-89ba-42b51c65c3df",24,["D",1777121106612],"{\n \"permissions\": {\n \"allow\": [\n \"Bash(vt create:*)\",\n \"Bash(vt status:*)\",\n \"Bash(vt val:*)\",\n \"Bash(vt clone:*)\",\n \"Bash(vt push:*)\",\n \"Bash(vt browse:*)\",\n \"mcp__chrome-devtools__list_pages\",\n \"mcp__chrome-devtools__navigate_page\",\n \"mcp__chrome-devtools__take_screenshot\",\n \"mcp__chrome-devtools__take_snapshot\",\n \"mcp__chrome-devtools__upload_file\",\n \"mcp__chrome-devtools__click\",\n \"mcp__chrome-devtools__list_console_messages\",\n \"mcp__chrome-devtools__get_console_message\",\n \"mcp__chrome-devtools__list_network_requests\",\n \"mcp__chrome-devtools__evaluate_script\",\n \"mcp__chrome-devtools__wait_for\",\n \"mcp__chrome-devtools__fill\"\n ]\n }\n}\n",[],[73,138],"5a38035a-4050-11f1-99d7-42b51c65c3df",["D",1777084928031],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Backend for TRMNL screenshot plugin","imageUrl","userId","f8d90ec1-81be-4efc-b861-a032f3f5b85f","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","b1ec36cc-9d04-4938-872f-34bf39599d6a","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_198":194},"org",{"_11":12,"_192":-5,"_193":194,"_155":156,"_195":196,"_197":55},"branch",{"_17":45,"_13":16,"_36":43,"_184":145,"_185":-5,"_186":-5,"_187":-5,"_188":-5,"_189":-5,"_190":14,"_191":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJTZm1HaHJGdDFmQ2s5ME05RW9lT1JGbHZPYyIsImluaXRpYWxzIjoiSkIifQ","tier","pro","canRestrictVals","profileImageUrl","adoptOrgId",{"_36":145,"_13":14,"_48":261,"_147":-5,"_148":55,"_149":150,"_151":150,"_152":153,"_154":-5,"_155":156,"_157":-5,"_158":55,"_159":-5,"_160":-5,"_161":63,"_162":163,"_164":-5,"_165":-5,"_166":-5,"_167":-5,"_168":169,"_170":169,"_171":172,"_173":172,"_174":172,"_175":169,"_176":169,"_177":262,"_179":263,"_181":264,"_183":55},[234,236,239,242],"files",[234,235,236,237,238,239,240,241,242],"counts",{"_225":63,"_226":50,"_227":63,"_31":228,"_229":230},[217,218,219,220],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_36":72,"_13":73,"_39":74,"_41":-5,"_42":43,"_44":50,"_46":47,"_48":75,"_17":63,"_51":64,"_52":-5,"_54":55,"_56":-5,"_18":224},{"_36":66,"_13":67,"_39":68,"_41":-5,"_42":43,"_44":69,"_46":47,"_48":70,"_17":63,"_51":64,"_52":-5,"_54":55,"_56":-5,"_18":223},{"_36":58,"_13":59,"_39":60,"_41":-5,"_42":43,"_44":61,"_46":47,"_48":62,"_17":63,"_51":64,"_52":-5,"_54":55,"_56":-5,"_18":222},{"_36":37,"_13":38,"_39":40,"_41":-5,"_42":43,"_44":45,"_46":47,"_48":49,"_17":50,"_51":24,"_52":53,"_54":55,"_56":-5,"_18":221},[38],[59],[67],[73],"pulls","branches","forks",{"_231":50,"_233":63},"connections",{"_231":63,"_232":63},"count","unfilledCount","emptyCount",{"_36":72,"_13":73,"_39":74,"_41":-5,"_42":43,"_44":50,"_46":47,"_48":133,"_17":63,"_51":64,"_52":-5,"_54":55,"_56":-5,"_82":259,"_18":260},{"_36":137,"_13":138,"_39":139,"_41":74,"_42":43,"_44":140,"_46":47,"_48":141,"_17":69,"_51":24,"_52":142,"_54":55,"_56":-5,"_82":257,"_18":258},{"_36":66,"_13":67,"_39":68,"_41":-5,"_42":43,"_44":69,"_46":47,"_48":108,"_17":63,"_51":64,"_52":-5,"_54":55,"_56":-5,"_82":255,"_18":256},{"_36":123,"_13":124,"_39":125,"_41":68,"_42":43,"_44":126,"_46":47,"_48":127,"_17":128,"_51":129,"_52":130,"_54":55,"_56":-5,"_82":253,"_18":254},{"_36":113,"_13":114,"_39":115,"_41":68,"_42":43,"_44":116,"_46":47,"_48":117,"_17":118,"_51":119,"_52":120,"_54":55,"_56":-5,"_82":251,"_18":252},{"_36":58,"_13":59,"_39":60,"_41":-5,"_42":43,"_44":61,"_46":47,"_48":85,"_17":63,"_51":64,"_52":-5,"_54":55,"_56":-5,"_82":249,"_18":250},{"_36":99,"_13":100,"_39":101,"_41":60,"_42":43,"_44":102,"_46":47,"_48":103,"_17":104,"_51":24,"_52":105,"_54":55,"_56":-5,"_82":247,"_18":248},{"_36":90,"_13":91,"_39":92,"_41":60,"_42":43,"_44":93,"_46":47,"_48":94,"_17":61,"_51":95,"_52":96,"_54":55,"_56":-5,"_82":245,"_18":246},{"_36":37,"_13":38,"_39":40,"_41":-5,"_42":43,"_44":45,"_46":47,"_48":81,"_17":50,"_51":24,"_52":53,"_54":55,"_56":-5,"_82":243,"_18":244},[],[38],[],[59,91],[],[59,100],[240,241],[59],[],[67,114],[],[67,124],[237,238],[67],[],[73,138],[235],[73],["D",1777084928031],{"_11":12,"_198":194},{"_11":12,"_192":-5,"_193":194,"_155":156,"_195":196,"_197":55},{"_17":45,"_13":16,"_36":43,"_184":145,"_185":-5,"_186":-5,"_187":-5,"_188":-5,"_189":-5,"_190":14,"_191":12},"ctx",{"_177":-5,"_214":298,"_299":300,"_301":302,"_303":55,"_304":55,"_305":55,"_306":47,"_307":-5,"_308":-7,"_309":-7,"_310":63,"_311":55,"_312":55,"_313":-5,"_314":55,"_315":55,"_316":55,"_317":-5},"ENV",{"_269":270,"_271":272,"_273":16,"_274":275,"_276":277,"_278":279,"_280":281,"_282":283,"_284":285,"_286":287,"_288":289,"_290":291,"_292":293,"_294":295,"_296":297},"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"]

Kram-Beckman Wall Display

Preview (800×480)

Uploaders

${title}