[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_218":219,"_220":221},"routes/_app.x.$handle.$name",{"_123":122,"_35":70,"_131":109,"_30":132,"_13":14,"_133":-5,"_11":134,"_135":136,"_137":138,"_139":140,"_141":142,"_24":-5,"_143":144,"_145":146,"_147":28,"_148":149,"_150":82,"_151":-5,"_152":-5,"_153":154},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_68":69,"_35":70,"_40":71,"_72":-5,"_73":28,"_74":75,"_76":75,"_77":-5,"_78":-5,"_18":79,"_80":34,"_81":82,"_83":82,"_84":-5,"_85":86,"_87":88,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":94,"_95":94,"_96":97,"_98":97,"_99":97,"_100":94,"_101":94,"_102":103,"_104":105,"_106":107,"_108":28},"version",1,"changes",[19,20,21,22,23],"aiChatInfo","userId",{"_24":61,"_26":-7,"_27":28,"_29":28,"_30":62,"_32":62},{"_24":55,"_26":-7,"_27":28,"_29":28,"_30":56,"_32":56},{"_24":50,"_26":-7,"_27":28,"_29":28,"_30":51,"_32":51},{"_24":45,"_26":-7,"_27":28,"_29":28,"_30":46,"_32":46},{"_24":25,"_26":-7,"_27":28,"_29":28,"_30":31,"_32":31},"file",{"_33":34,"_35":31,"_36":37,"_38":39,"_40":41,"_42":14,"_43":44,"_27":28},"previous","deleted",false,"deletedHere","path","ama.tsx","latestPath","fileId","019834c4-8de1-75fe-a2c5-7ec0786c95f6","name","fileType","http","content","/** @jsxImportSource npm:hono@4.7/jsx */\nimport { email } from \"https://esm.town/v/std/email?v=13\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite2?v=1\";\nimport { Hono } from \"npm:hono@4.7\";\nimport { serveFile } from \"https://esm.town/v/std/utils@105-main/index.ts\";\n\nconst app = new Hono();\n\nconst name = \"Tom MacWright\";\nconst url = \"https://macwright.com/\";\n\n/**\n * Reusable layout method so that our multiple pages can share a header and footer\n */\nconst layout = (content) => (\n \n \n AMA / {name}\n \n\n \n \n \n

\n AMA\n

\n Ask me ({name}) anything.\n

\n {content}\n

\n \n \n \n);\n\n// TODO: include updated too?\nawait sqlite.execute(\n `CREATE TABLE IF NOT EXISTS ama (question TEXT, answer TEXT, secret TEXT, created_at TEXT, id TEXT)`,\n);\n\n/**\n * Serve all /frontend files. There is just one.\n */\napp.get(\"/static/**/*\", (c) => serveFile(c.req.path, import.meta.url));\n\n/**\n * The main page, where you can see questions other people have asked and\n * ask a new question if you want to.\n */\napp.get(\"/\", async (c) => {\n const questions = await sqlite.execute(\n `SELECT * from ama WHERE answer IS NOT NULL ORDER BY created_at DESC;`,\n );\n\n const d = new Intl.DateTimeFormat(\"en-US\");\n\n return c.html(\n layout(\n <>\n \n\n {questions.rows.map((question) => (\n

Question: {question.question}

\n Answer: {question.answer}\n
\n \n {d.format(new Date(question.created_at as string))}\n \n \n ♥\n \n

\n ))}\n ,\n ),\n );\n});\n\n/**\n * This is for the 'admin' of the AMA - you get a link to this page in your email,\n * and it contains a ?secret= query parameter that lets you view and answer\n * a specific AMA. That secret is how the whole thing works with no 'authentication'.\n */\napp.get(\"/answer\", async (c) => {\n const secret = c.req.query(\"secret\");\n if (!secret) return c.html(

No secret provided

);\n const questions = await sqlite.execute({\n sql: `SELECT * from ama WHERE secret = ?;`,\n args: [secret],\n });\n const question = questions.rows.at(0);\n if (!question) return c.html(

No question found

);\n return c.html(\n layout(\n <>\n Question: {question.question}\n\n \n ,\n ),\n );\n});\n\n/**\n * This is just here for helping you test the layout, it's a development thing,\n * you can ignore it.\n */\napp.get(\"/test-banner\", async (c) => {\n return c.html(\n layout(

Test banner

),\n );\n});\n\n/**\n * When the 'admin' submits a new answer, this is the URL it is submitted to.\n * Like the previous page, this uses the ?secret= value as a way to do authentication\n * without much fuss.\n */\napp.post(\"/answer\", async (c) => {\n const body: FormData = await c\n .req\n .formData();\n\n const answer = String(body.get(\"answer\"));\n const secret = String(body.get(\"secret\"));\n if (!secret) return c.html(

No secret provided

);\n await sqlite.execute({\n sql: `UPDATE ama SET answer = ? WHERE secret = ?;`,\n args: [answer, secret],\n });\n return c.html(\n layout(

Answer recorded!

),\n );\n});\n\n/**\n * When someone submits a new AMA, this is the URL it is submitted to.\n *\n * This sends the email, too!\n */\napp.post(\"/\", async (c) => {\n const body: FormData = await c\n .req\n .formData();\n const url = new URL(c.req.url);\n url.pathname = \"/answer\";\n const userAgent = c.req.header(\"User-Agent\");\n const question = String(body.get(\"question\"));\n\n const secret = crypto.randomUUID();\n\n url.searchParams.set(\"secret\", secret);\n\n await sqlite.execute({\n sql:\n \"INSERT INTO ama (question, secret, created_at, id) VALUES (?, ?, ?, ?)\",\n args: [question, secret, new Date().toISOString(), crypto.randomUUID()],\n });\n\n const blockBg = \"#eee\";\n\n let html =\n `

Someone asked an AMA question on Val Town! Do you want to answer it? this val on Val Town.

`;\n\n html += `\n

${question}

\n Want to answer it?\n\n
\n User agent: ${userAgent}\n `;\n\n html += \"\";\n\n await email(\n {\n subject: `A new AMA question!`,\n html,\n },\n );\n return c.html(\n layout(

Question asked!

),\n );\n});\n\nexport default app.fetch;","createdAt",["D",1753231953297],"branchVersion","branchId","51630060-675f-11f0-93c0-0224a6c84d84",{"_33":47,"_35":46,"_36":24,"_38":48,"_40":49,"_42":14,"_43":44,"_27":28},"README.md","019834c4-8de1-75fe-a2c5-7b494195e41c","# AMA\n\n\"Ask me anything\" is a question & answer format that I most associate with\n[Reddit](https://en.wikipedia.org/wiki/R/IAmA): you can take questions from\noptionally anonymous people on the internet and answer them. It can be fun!\n\nSome folks have set up their own self-hosted AMAs on their own websites:\n[Mikkel Malmberg](https://mikkelmalmberg.com/ama)'s is one of my favorites. My\n[website](https://macwright.com/) could use one, but I keep things\n[super simple](https://macwright.com/2019/02/06/how-to-blog) over there so the\nlittle bit of data storage & CRUD involved in an AMA is too much for me.\n\nSo this val does it, and you can make it your own!\n\n## Make it your own\n\nClick **Remix** in the top right and that'll make a copy of this val in your\naccount. Then click on `ama.tsx` and see where it has my name & web address, and\nreplace those with your own.\n\nThen you probably want a nicer URL - with `ama.tsx` open, you should have that\nweb preview on the right side of the screen (or the bottom if you have a small\nscreen) - click the pencil icon to the right of the URL and select a nicer\nsubdomain. For me, I chose `tmcw-ama`. Then you'll get a nice subdomain that you\ncan copy with the copy button next to that button.\n\nAnd then you're pretty much ready to go!",["D",1753231953297],{"_33":52,"_35":51,"_36":53,"_38":-5,"_40":54,"_42":14,"_43":44,"_27":28},"static","019834c4-8de1-75fe-a2c5-76226e1b74cd","directory",["D",1753231953297],{"_33":57,"_35":58,"_36":24,"_38":59,"_40":60,"_42":14,"_43":44,"_27":28},"static/style.css","019834c4-8de1-75fe-a2c5-72852344b0a7","style.css","body {\n font-family:\n -apple-system,\n BlinkMacSystemFont,\n avenir next,\n avenir,\n segoe ui,\n helvetica neue,\n Adwaita Sans,\n Cantarell,\n Ubuntu,\n roboto,\n noto,\n helvetica,\n arial,\n sans-serif;\n line-height: 1.4;\n padding: 0;\n margin: 0;\n font-size: 18px;\n}\n\nheader {\n border-bottom: 1px solid #000;\n padding: 20px;\n}\n\nheader h1 a {\n text-decoration: none;\n color: inherit;\n}\n\nheader h1 a:hover {\n text-decoration: underline;\n}\n\nheader h1, header p {\n margin: 0;\n}\n\na {\n color: blue;\n text-decoration: underline;\n text-decoration-skip-ink: auto;\n}\n\na:hover {\n background: yellow;\n}\n\nmain {\n max-width: 680px;\n padding: 0 20px;\n margin: 40px auto 40px auto;\n}\n\nmain h2 {\n margin-top: 1rem;\n margin-bottom: 0.5rem;\n font-size: 20px;\n}\n\nmain time {\n opacity: 0.5;\n}\n\nmain textarea {\n font: inherit;\n width: 100%;\n height: 100px;\n padding: 5px 5px 15px 5px;\n resize: none;\n border-radius: 5px;\n border: 1px solid #000;\n}\n\nmain article {\n font-weight: bold;\n font-style: italic;\n}\n\nform {\n position: relative;\n margin-bottom: 2rem;\n}\n\nform button {\n font: inherit;\n position: absolute;\n bottom: 5px;\n right: 5px;\n border-radius: 5px;\n border: 1px solid #000;\n background: #eee;\n padding: 1px 7px;\n}\n\nform button:hover {\n background: #eec;\n}\n\nfooter {\n border-top: 1px solid #000;\n padding: 20px;\n}\n\nopen-heart {\n display: inline-flex;\n padding: 0.4em 0.8em;\n cursor: pointer;\n font-size: 20px;\n transition: transform 0.3s;\n color: #ccc;\n font-family:\n -apple-system,\n BlinkMacSystemFont,\n avenir next,\n avenir,\n segoe ui,\n helvetica neue,\n Adwaita Sans,\n Cantarell,\n Ubuntu,\n roboto,\n noto,\n helvetica,\n arial,\n sans-serif;\n}\n\n.off {\n transition: opacity 0.3s;\n}\n\n.on {\n position: absolute;\n z-index: 1;\n opacity: 0;\n transform: scale(0);\n transition: transform 0.3s;\n}\n\nopen-heart:not([disabled]):hover,\nopen-heart:not([disabled]):focus {\n transform: scale(1.2);\n}\n\nopen-heart::after {\n font-size: 18px;\n padding-left: 4px;\n content: \" \" attr(count) \"\";\n}\n\n[aria-pressed=\"true\"] .on {\n transform: scale(1);\n opacity: 1;\n}\n\n[aria-pressed=\"true\"] .off {\n opacity: 0;\n}\n\n[aria-pressed=\"true\"] {\n color: #f00;\n}\n\n[aria-busy=\"true\"] {\n animation: pulsate 0.4s infinite;\n}\n\n@keyframes pulsate {\n 0% {\n transform: scale(1);\n }\n 100% {\n transform: scale(1.2);\n }\n}\n\n[errored] {\n opacity: 0.5;\n}",["D",1753231953297],{"_33":63,"_35":64,"_36":65,"_38":66,"_40":67,"_42":14,"_43":44,"_27":28},"static/heart.js","019834c4-8de1-75fe-a2c5-6ce7c8ee10b7","heart.js","script","class OpenHeartElement extends HTMLElement {\n constructor() {\n super(), this.KEY = \"_open_heart\", this._send = this.send.bind(this);\n }\n connectedCallback() {\n if (\n this.tabIndex = 0,\n this.setAttribute(\"role\", \"button\"),\n this.setAttribute(\"aria-busy\", \"false\"),\n !this.emoji || !this.href\n ) {\n return console.error(this, \"missing required attributes\"),\n void this.toggleAttribute(\"disabled\", !0);\n }\n this.validateEmoji()\n ? this.hasReacted()\n ? this.setReacted()\n : (this.addEventListener(\"click\", this._send),\n this.addEventListener(\"keydown\", this._send))\n : console.error(this, \"emoji attribute incorrect\");\n this.getCount();\n }\n validateEmoji() {\n if (\"Segmenter\" in Intl) {\n const t = Array.from(\n new Intl.Segmenter(navigator.language || \"en\", {\n granularity: \"grapheme\",\n }).segment(this.emoji),\n ),\n e = t.length > 0 && t[0].segment;\n return this.emoji == e && /\\p{Emoji}/u.test(e);\n }\n {\n const t = this.emoji.match(/\\p{Emoji}/u);\n return !(!t || !t[0]);\n }\n }\n get href() {\n return this.getAttribute(\"href\");\n }\n get emoji() {\n return this.getAttribute(\"emoji\");\n }\n get key() {\n return `${this.emoji}@${encodeURIComponent(this.href)}`;\n }\n get disabled() {\n return this.hasAttribute(\"disabled\");\n }\n hasReacted() {\n return (localStorage.getItem(this.KEY) || \"\").split(\",\").includes(this.key);\n }\n setReacted() {\n this.setAttribute(\"aria-pressed\", \"true\"),\n this.toggleAttribute(\"disabled\", !0),\n this.removeEventListener(\"click\", this._send);\n }\n saveReaction() {\n const t = (localStorage.getItem(this.KEY) || \"\").split(\",\").filter(\n (t) => t,\n );\n t.push(this.key), localStorage.setItem(this.KEY, t.join(\",\"));\n }\n async getCount() {\n const t = await fetch(this.href, {\n headers: { Accept: \"application/json\" },\n });\n if (!t.ok) return;\n let e = {};\n try {\n e = await t.json();\n } catch {}\n this.setAttribute(\"count\", Number(e[this.emoji] || 0).toString());\n }\n async send(t) {\n if (\n (!(t instanceof KeyboardEvent) || [\"Enter\", \" \"].includes(t.key)) &&\n !this.disabled && \"true\" !== this.getAttribute(\"aria-busy\")\n ) {\n if (this.hasReacted()) return this.setReacted();\n this.setAttribute(\"aria-busy\", \"true\"),\n await fetch(this.href, {\n method: \"post\",\n body: this.emoji,\n mode: \"no-cors\",\n }),\n this.setAttribute(\"aria-busy\", \"false\"),\n this.saveReaction(),\n this.setReacted(),\n this.dispatchEvent(new CustomEvent(\"open-heart\", { bubbles: !0 }));\n this.getCount();\n }\n }\n}\nwindow.customElements.get(\"open-heart\") ||\n (window.OpenHeartElement = OpenHeartElement,\n window.customElements.define(\"open-heart\", OpenHeartElement));\nexport default OpenHeartElement;",["D",1753231953297],"id","51604186-675f-11f0-93c0-0224a6c84d84","ama",["D",1753231953297],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","019834c0-9b8a-719e-9b77-d9a37e1df872","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019834c0-9b8a-719e-9b77-dd3955796463","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_123":122,"_130":126},"org",{"_123":122,"_124":-5,"_125":126,"_18":79,"_127":128,"_129":28},"branch",{"_13":14,"_35":109,"_68":44,"_110":69,"_111":112,"_113":114,"_115":75,"_116":117,"_118":119,"_120":70,"_121":122},"isOwned","main","projectId","forkedBranchId","bd0d0f00-3658-11f0-b149-9e149126039e","forkedBranchVersion",231,"forkedProjectPrivacy","forkedProjectId","bd0cd814-3658-11f0-b149-9e149126039e","forkedProjectOrgId","f407f111-fdbb-4126-923f-44aed4d9e9ad","projectName","userHandle","Roots","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzMwRm1QTDRlZmIwcENGMG83ajNBR3FoWXFobCJ9","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_68":69,"_35":70,"_40":214,"_72":-5,"_73":28,"_74":75,"_76":75,"_77":-5,"_78":-5,"_18":79,"_80":34,"_81":82,"_83":82,"_84":-5,"_85":86,"_87":88,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":94,"_95":94,"_96":97,"_98":97,"_99":97,"_100":94,"_101":94,"_102":215,"_104":216,"_106":217,"_108":28},"tree",[191,194,195],"files",[191,192,193,194,195],"counts",{"_181":86,"_182":14,"_183":86,"_184":185,"_186":187},"contents",[166,167,168],"upstreamProject",{"_68":117,"_35":70,"_77":162,"_78":163,"_74":75,"_102":164},"upstreamBranch",{"_68":112,"_40":155,"_156":157,"_35":109,"_110":117,"_13":158,"_111":-5,"_113":-5,"_159":160,"_72":-5,"_108":28,"_74":75,"_121":161,"_87":119,"_120":70},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1747841520522],"updatedAt",["D",1786119768587],234,"lockfileKey","1786119768929-esm.town_v_tmcw_ama@234-main","tmcw","Ask me anything","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/35d463db-babe-4859-4e74-a99a8c1c3b00/square512?exp=1789585199&sig=6109739f875884c223966beec0d2f217973611128f123764d5ab78f6b0453448",{"_123":161,"_130":165},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/7935dc1b-7699-4095-366a-2e9103307501/square512?exp=1789585199&sig=1140b03e10bb10cbbc5fc52fea03e51f88c015ceaa8ce18e41e3898ea5efb3b1",{"_68":178,"_35":51,"_33":52,"_170":-5,"_43":44,"_42":14,"_171":82,"_40":179,"_13":86,"_36":53,"_38":-5,"_27":28,"_173":-5,"_30":180},{"_68":175,"_35":46,"_33":47,"_170":-5,"_43":44,"_42":14,"_171":82,"_40":176,"_13":86,"_36":24,"_38":48,"_27":28,"_173":-5,"_30":177},{"_68":169,"_35":31,"_33":34,"_170":-5,"_43":44,"_42":14,"_171":82,"_40":172,"_13":86,"_36":37,"_38":39,"_27":28,"_173":-5,"_30":174},"5168f970-675f-11f0-93c0-0224a6c84d84","parentId","latest",["D",1753231953297],"label",[31],"5168f858-675f-11f0-93c0-0224a6c84d84",["D",1753231953297],[46],"5168f70e-675f-11f0-93c0-0224a6c84d84",["D",1753231953297],[51],"pulls","branches","forks","envVars",{"_188":86,"_190":86},"connections",{"_188":86,"_189":86},"count","unfilledCount","emptyCount",{"_68":178,"_35":51,"_33":52,"_170":-5,"_43":44,"_42":14,"_171":82,"_40":211,"_13":86,"_36":53,"_38":-5,"_27":28,"_173":-5,"_197":212,"_30":213},{"_68":207,"_35":64,"_33":63,"_170":52,"_43":44,"_42":14,"_171":82,"_40":208,"_13":86,"_36":65,"_38":66,"_27":28,"_173":-5,"_197":209,"_30":210},{"_68":203,"_35":58,"_33":57,"_170":52,"_43":44,"_42":14,"_171":82,"_40":204,"_13":86,"_36":24,"_38":59,"_27":28,"_173":-5,"_197":205,"_30":206},{"_68":175,"_35":46,"_33":47,"_170":-5,"_43":44,"_42":14,"_171":82,"_40":200,"_13":86,"_36":24,"_38":48,"_27":28,"_173":-5,"_197":201,"_30":202},{"_68":169,"_35":31,"_33":34,"_170":-5,"_43":44,"_42":14,"_171":82,"_40":196,"_13":86,"_36":37,"_38":39,"_27":28,"_173":-5,"_197":198,"_30":199},["D",1753231953297],"children",[],[31],["D",1753231953297],[],[46],"5168f40c-675f-11f0-93c0-0224a6c84d84",["D",1753231953297],[],[51,58],"5168e840-675f-11f0-93c0-0224a6c84d84",["D",1753231953297],[],[51,64],["D",1753231953297],[192,193],[51],["D",1753231953297],{"_123":122,"_130":126},{"_123":122,"_124":-5,"_125":126,"_18":79,"_127":128,"_129":28},{"_13":14,"_35":109,"_68":44,"_110":69,"_111":112,"_113":114,"_115":75,"_116":117,"_118":119,"_120":70,"_121":122},"ctx",{"_102":-5,"_152":251,"_252":253,"_254":255,"_256":28,"_257":28,"_258":28,"_259":82,"_260":-5,"_261":-7,"_262":-7,"_263":86,"_264":28,"_265":28,"_266":-5,"_267":28,"_268":28,"_269":28,"_270":-5},"ENV",{"_222":223,"_224":225,"_226":109,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236,"_237":238,"_239":240,"_241":242,"_243":244,"_245":246,"_247":248,"_249":250},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","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 · v1