[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_262":263,"_264":265},"routes/_app.x.$handle.$name",{"_103":102,"_33":47,"_112":93,"_27":113,"_13":14,"_114":-5,"_11":115,"_116":117,"_118":119,"_120":121,"_122":123,"_20":-5,"_124":-5,"_125":-5,"_126":25,"_127":128,"_129":62,"_130":-5,"_131":-5,"_132":133},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_45":46,"_33":47,"_40":48,"_49":-5,"_50":25,"_51":52,"_53":52,"_54":55,"_56":57,"_18":58,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":66,"_67":68,"_69":70,"_71":72,"_73":74,"_75":66,"_76":77,"_78":77,"_79":80,"_81":80,"_82":80,"_83":77,"_84":77,"_85":86,"_87":88,"_89":90,"_91":25},"version",136,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":30},"file",{"_31":32,"_33":34,"_35":36,"_37":39,"_40":41,"_42":14,"_43":44,"_24":25},"previous",{"_31":32,"_33":34,"_35":36,"_37":38},"deleted",false,"deletedHere","path","jsx/newsletter.tsx","latestPath","jsx/Clipping.tsx","fileId","daff0c20-6281-11f0-a9bd-0224a6c84d84","name","newsletter.tsx","fileType","script","content","/** @jsxImportSource npm:hono@3/jsx */\n\ninterface NewsletterProps {\n webUrl: string;\n content: string;\n toEmail: string;\n}\n\nexport default function Newsletter({ webUrl, content, toEmail }: NewsletterProps) {\n return (\n

\n \n A Web version of this clipping is available on petemillspaugh.com.\n \n

\n\n {content}\n\n \n

\n );\n}","/** @jsxImportSource npm:hono@3/jsx */\n\ninterface NewsletterProps {\n webUrl: string;\n content: string;\n toEmail: string;\n}\n\nexport default function Newsletter({ webUrl, content, toEmail }: NewsletterProps) {\n return (\n \n

\n \n A Web version of this clipping is available on petemillspaugh.com.\n \n

\n\n {content}\n\n \n \n );\n}","createdAt",["D",1752697903107],"branchVersion","branchId","798e355a-2772-11f0-b46e-569c3dd06744","id","798de9ec-2772-11f0-b46e-569c3dd06744","garden",["D",1746203306756],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","https://petemillspaugh.com","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/ccc02d2f-ec0d-49a2-d1de-8e476f454c00/square512?exp=1789577999&sig=abbfc30d883a144cc5a3355ce7739a24da42c14b4e8eaaac720819b1508785a8","6906d0a1-0165-46b9-8717-60dfd935316a","pinnedFileId","7990876a-2772-11f0-b46e-569c3dd06744","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",1,"orgId","631c5cff-7089-4994-8427-c7580df789cd","tursoName","798de9ec277211f0b46e569c3dd06744","tursoHostname","798de9ec277211f0b46e569c3dd06744-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789504321592],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_103":102,"_111":107},"org",{"_103":102,"_104":105,"_106":107,"_18":58,"_108":109,"_110":25},"branch",{"_13":92,"_33":93,"_45":44,"_94":46,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":47,"_101":102},"isOwned",362,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","pmillspaugh","handle","displayName","Pete Millspaugh","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/c3c0aadf-86a9-4c2e-ef01-fb649d6fb000/square512?exp=1789577999&sig=3927c0e321408bea96baab0e45026aeb9713898f5b433aef2217dbb0caa42bf2","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_45":46,"_33":47,"_40":257,"_49":-5,"_50":25,"_51":52,"_53":52,"_54":55,"_56":57,"_18":58,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":66,"_67":68,"_69":70,"_71":72,"_73":258,"_75":66,"_76":77,"_78":77,"_79":80,"_81":80,"_82":80,"_83":77,"_84":77,"_85":259,"_87":260,"_89":261,"_91":25},"tree",[181,187,190,191],"files",[181,182,183,184,185,186,187,188,189,190,191],"counts",{"_170":171,"_172":66,"_173":66,"_174":175,"_176":177},"contents",[134,135,136,137],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_45":164,"_33":165,"_31":166,"_140":-5,"_43":44,"_42":167,"_142":62,"_40":168,"_13":66,"_35":162,"_37":-5,"_24":25,"_147":-5,"_27":169},{"_45":157,"_33":158,"_31":159,"_140":-5,"_43":44,"_42":160,"_142":62,"_40":161,"_13":66,"_35":162,"_37":-5,"_24":25,"_147":-5,"_27":163},{"_45":149,"_33":150,"_31":151,"_140":-5,"_43":44,"_42":152,"_142":25,"_40":153,"_13":154,"_35":20,"_37":155,"_24":25,"_147":-5,"_27":156},{"_45":138,"_33":139,"_31":60,"_140":-5,"_43":44,"_42":141,"_142":25,"_40":143,"_13":144,"_35":145,"_37":146,"_24":25,"_147":47,"_27":148},"cc5b6b6a-6280-11f0-963f-0224a6c84d84","main.ts","parentId",118,"latest",["D",1752696577222],91,"http","import Confirm from \"https://esm.town/v/petermillspaugh/garden/jsx/confirm.tsx\";\nimport Signup from \"https://esm.town/v/petermillspaugh/garden/jsx/signup.tsx\";\nimport { email } from \"https://esm.town/v/std/email?v=11\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite?v=4\";\nimport { Context, Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// Signup form to test in val town preview\napp.get(\"/\", async (c: Context) => {\n return c.html(Signup().toString());\n});\n\n// Sends verification email upon signup\napp.post(\"/send-verification\", async (c: Context) => {\n const formData = await c.req.formData();\n const name = formData.get(\"name\");\n const emailAddress = formData.get(\"email\");\n\n if (typeof name !== \"string\" || typeof emailAddress !== \"string\") {\n return Response.json({ message: \"Missing name or email\" });\n }\n\n const token = crypto.randomUUID();\n await sqlite.execute({\n sql: `\n INSERT INTO subscribers (name, email, verification_token)\n VALUES (?, ?, ?)\n ON CONFLICT(email)\n DO UPDATE SET\n name = excluded.name,\n verification_token = excluded.verification_token,\n subscribed_at = CURRENT_TIMESTAMP;\n `,\n args: [name, emailAddress, token],\n });\n\n // email a confirmation link to the subscriber\n await email({\n to: emailAddress,\n from: {\n name: \"Pete Millspaugh\",\n email: \"petermillspaugh.garden@valtown.email\",\n },\n replyTo: \"pete@petemillspaugh.com\",\n subject: \"Confirm your subscription to petemillspaugh.com\",\n html: Confirm({ email: emailAddress, token }).toString(),\n });\n\n // No need to await: just emailing myself a notification\n email({\n subject: `${emailAddress} subscribed to petemillspaugh.com`,\n text: `A notification for ${emailAddress} verification should come in any minute now.`,\n });\n\n return Response.json({ success: true, message: \"Sent verification email.\" });\n});\n\n// Endpoint petemillspaugh.com/email-confirmation hits from email verification link\napp.put(\"/confirm-verification\", async (c: Context) => {\n const emailAddress = c.req.query(\"email\");\n const token = c.req.query(\"token\");\n\n // If the token is >24h old, refresh the token\n const newToken = crypto.randomUUID();\n const { rowsAffected } = await sqlite.execute({\n sql: `\n UPDATE subscribers\n SET \n verification_token = ?,\n subscribed_at = CURRENT_TIMESTAMP\n WHERE email = ?\n AND verification_token = ?\n AND subscribed_at < datetime('now', '-24 hours');\n `,\n args: [newToken, emailAddress, token],\n });\n\n // Send another confirmation email if the token was refreshed\n if (rowsAffected === 1) {\n await email({\n subject: \"Confirm your subscription to petemillspaugh.com\",\n to: emailAddress,\n from: {\n name: \"Pete Millspaugh\",\n email: \"petermillspaugh.garden@valtown.email\",\n },\n replyTo: \"pete@petemillspaugh.com\",\n html: (Confirm({ email: emailAddress, token: newToken }).toString()),\n });\n\n return Response.json({ message: \"Resent confirmation email.\" });\n }\n\n await sqlite.execute({\n sql: `UPDATE subscribers SET verified = 1 WHERE email = ?;`,\n args: [emailAddress],\n });\n\n // No need to await: just emailing myself a notification\n email({\n subject: `${emailAddress} verified for petemillspaugh.com subscription`,\n text: `Verification complete for ${emailAddress}'s subscription to petemillspaugh.com`,\n });\n\n return Response.json({ confirmed: true, message: \"Verified email address.\" });\n});\n\n// Endpoint to unsubscribe\napp.get(\"/unsubscribe\", async (c: Context) => {\n const emailAddress = c.req.query(\"email\");\n\n if (!emailAddress) {\n return c.html(`\n

Your email address is missing in the URL.

If you tried to unsubscribe and are still getting emails, send me a note at pete@petemillspaugh.com (no hard feelings).

\n `);\n }\n\n await sqlite.execute({\n sql: `\n UPDATE subscribers \n SET subscribed_at = NULL \n WHERE email = ?\n `,\n args: [emailAddress],\n });\n\n // No need to await, just notifying myself\n email({\n subject: `${emailAddress} unsubscribed from petemillspaugh.com`,\n text: `It's ok 😢`,\n });\n\n return c.html(`\n

You've successfully unsubscribed. No hard feelings.

Take care, Pete

\n `);\n});\n\nexport default app.fetch;","label",[139],"7825e684-627f-11f0-9fec-0224a6c84d84","README.md","79908d6e-2772-11f0-b46e-569c3dd06744",113,["D",1752696006448],8,"# Email subscriptions\n\nHandles email subscription signup, verification, and sending.\n\n## Steps\n\n1. Run [`init.ts`](./sqlite/init.ts) to create SQLite tables for subscribers, newsletters, and logs (to record sent newsletters)\n2. Update [`main.ts`](./main.ts) for your use case (e.g. confirmation link, `email` args, form fields, etc.)\n3. Add an HTML form to your frontend that calls `/send-verification`, or just use `/` to return a simple HTML form\n4. Add a confirmation page to your frontend that calls `/confirm-verification`\n5. When you're ready to send email, create a template and individual newsletters\n\n## Frontend form\n\nYou should have a form that hits the `/send-verification` API endpoint on submit. **Remember to adjust the endpoint URL to that of your fork**, otherwise you'll be signing people up for my garden! As a simple alternative, you could use the `/` handler of this Val, which returns a simple HTML form. Here's a simple example using React:\n\n```tsx\nconst EmailSignupForm = () => {\n const [name, setName] = useState(\"\");\n const [email, setEmail] = useState(\"\");\n\n async function handleSubmit(e) {\n e.preventDefault();\n setName(\"\");\n setEmail(\"\");\n\n const formData = new FormData();\n formData.append(\"name\", name);\n formData.append(\"email\", email);\n\n await fetch(\"https://garden.val.run/send-verification\", {\n method: \"POST\",\n body: formData,\n });\n }\n\n return (\n

\n First name\n setName(e.target.value)}\n type=\"text\"\n required={true}\n />\n Email\n setEmail(e.target.value)}\n type=\"email\"\n required={true}\n />\n \n \n );\n};\n```\n\nYou can see a full example on petemillspaugh.com: [signup in the footer](https://www.petemillspaugh.com/) and [code on github](https://github.com/pmillspaugh/petemillspaugh.com/blob/main/src/components/EmailSignup/EmailSignup.tsx).\n\nYou can add/remove input fields as you wish, of course (e.g. maybe you don't need a name, or maybe you want a how'd-you-hear-about-us field). Just adjust the SQL and frontend implementation accordingly.\n\n## Frontend confirmation page\n\nCreate a confirmation page that accepts an email and token as query params and calls the `/confirm-verification` endpoint. Simple example using React (and Next.js /page directory):\n\n```tsx\nconst EmailConfirmationPage = () => {\n const router = useRouter();\n const { email, token } = router.query;\n const [isConfirmed, setIsConfirmed] = useState(false);\n\n useEffect(() => {\n async function confirmEmail() {\n if (!email || !token) return;\n\n const response = await fetch(`https://garden.val.run/confirm-verification?email=${email}&token=${token}`, {\n method: \"PUT\",\n });\n const { confirmed } = await response.json();\n if (confirmed) setIsConfirmed(true);\n }\n\n confirmEmail();\n }, [email, token]);\n\n if (!isConfirmed) return null;\n\n return (\n

You’re all set!

\n );\n};\n```\n\nFull example is [here](https://www.petemillspaugh.com/email-confirmation) and code is [here](https://github.com/pmillspaugh/petemillspaugh.com/blob/main/src/components/EmailConfirmation/EmailConfirmation.tsx).\n\nAs an alternative, you could make `/confirm-verification` a GET route and have your email confirmation link sent by the first route be `https://garden.val.run/confirm-verification?email=${email}&token=${token}` (swapping in your namespace). That would be marginally faster, probably, but you'd still need some way to convey confirmation to the user (e.g. add some \"You're all set\" message to the return). Plus, the route writes to the `subscribers` table, so a PUT feels more appropriate.\n\n## Notes\n\nSending emails to people other than yourself on Val Town is a paid feature—if you want to stay on the free plan, you could go with a package like [nodemailer](https://www.npmjs.com/package/nodemailer) or [@sendgrid/mail](https://www.npmjs.com/package/@sendgrid/mail), or an API like [Resend](https://resend.com).",[150],"c6739bfe-627c-11f0-bda3-0224a6c84d84","sqlite","c4693db4-627c-11f0-a86c-0224a6c84d84",100,["D",1752694849332],"directory",[158],"7dac099c-6277-11f0-9fc4-0224a6c84d84","jsx","7b9a23e6-6277-11f0-b3a7-0224a6c84d84",81,["D",1752692579741],[165],"pulls",0,"branches","forks","envVars",{"_178":66,"_180":171},"connections",{"_178":171,"_179":171},"count","unfilledCount","emptyCount",{"_45":164,"_33":165,"_31":166,"_140":-5,"_43":44,"_42":167,"_142":62,"_40":254,"_13":66,"_35":162,"_37":-5,"_24":25,"_147":-5,"_193":255,"_27":256},{"_45":249,"_33":248,"_31":243,"_140":166,"_43":44,"_42":250,"_142":62,"_40":251,"_13":66,"_35":162,"_37":-5,"_24":25,"_147":-5,"_193":252,"_27":253},{"_45":240,"_33":241,"_31":242,"_140":243,"_43":44,"_42":244,"_142":25,"_40":245,"_13":66,"_35":36,"_37":113,"_24":25,"_147":-5,"_193":246,"_27":247},{"_45":232,"_33":233,"_31":234,"_140":166,"_43":44,"_42":235,"_142":25,"_40":236,"_13":212,"_35":36,"_37":237,"_24":25,"_147":-5,"_193":238,"_27":239},{"_45":228,"_33":34,"_31":32,"_140":166,"_43":44,"_42":14,"_142":25,"_40":229,"_13":212,"_35":36,"_37":39,"_24":25,"_147":-5,"_193":230,"_27":231},{"_45":219,"_33":220,"_31":221,"_140":166,"_43":44,"_42":222,"_142":25,"_40":223,"_13":224,"_35":36,"_37":225,"_24":25,"_147":-5,"_193":226,"_27":227},{"_45":157,"_33":158,"_31":159,"_140":-5,"_43":44,"_42":160,"_142":62,"_40":216,"_13":66,"_35":162,"_37":-5,"_24":25,"_147":-5,"_193":217,"_27":218},{"_45":207,"_33":208,"_31":209,"_140":159,"_43":44,"_42":210,"_142":25,"_40":211,"_13":212,"_35":36,"_37":213,"_24":25,"_147":-5,"_193":214,"_27":215},{"_45":199,"_33":200,"_31":201,"_140":159,"_43":44,"_42":202,"_142":25,"_40":203,"_13":154,"_35":36,"_37":204,"_24":25,"_147":-5,"_193":205,"_27":206},{"_45":149,"_33":150,"_31":151,"_140":-5,"_43":44,"_42":152,"_142":25,"_40":196,"_13":154,"_35":20,"_37":155,"_24":25,"_147":-5,"_193":197,"_27":198},{"_45":138,"_33":139,"_31":60,"_140":-5,"_43":44,"_42":141,"_142":25,"_40":192,"_13":144,"_35":145,"_37":146,"_24":25,"_147":47,"_193":194,"_27":195},["D",1752696577222],"children",[],[139],["D",1752696006448],[],[150],"1eb1c664-6283-11f0-b6c3-0224a6c84d84","read.ts","dee07514-6280-11f0-b268-0224a6c84d84",131,["D",1752697574356],"import { sqlite } from \"https://esm.town/v/std/sqlite?v=4\";\n\nconsole.log(await sqlite.execute(`SELECT * FROM subscribers;`));\nconsole.log(await sqlite.execute(`SELECT * FROM newsletters;`));\nconsole.log(await sqlite.execute(`SELECT * FROM email_logs;`));",[],[158,200],"77520b36-627d-11f0-b9d1-0224a6c84d84","init.ts","e36b61e2-627c-11f0-9cf2-0224a6c84d84",106,["D",1752695146067],4,"import { sqlite } from \"https://esm.town/v/std/sqlite?v=4\";\n\nawait sqlite.execute(`\n CREATE TABLE IF NOT EXISTS subscribers (\n id INTEGER PRIMARY KEY,\n name TEXT NOT NULL,\n email TEXT NOT NULL UNIQUE,\n verified BOOLEAN DEFAULT 0,\n verification_token TEXT UNIQUE,\n subscribed_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP\n );\n`);\n\nawait sqlite.execute(`\n CREATE TABLE IF NOT EXISTS newsletters (\n id INTEGER PRIMARY KEY,\n subject TEXT NOT NULL UNIQUE,\n web_url TEXT NOT NULL UNIQUE,\n target_send_date TIMESTAMP NOT NULL UNIQUE\n );\n`);\n\nawait sqlite.execute(`\n CREATE TABLE IF NOT EXISTS email_logs (\n id INTEGER PRIMARY KEY,\n subscriber_id INTEGER NOT NULL,\n newsletter_id INTEGER NOT NULL,\n sent_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,\n FOREIGN KEY (subscriber_id) REFERENCES subscribers (id) ON DELETE CASCADE,\n FOREIGN KEY (newsletter_id) REFERENCES newsletters (id) ON DELETE CASCADE\n );\n`);",[],[158,208],["D",1752694849332],[188,189],[158],"70f5e4ea-627a-11f0-a989-0224a6c84d84","signup.tsx","7ff41442-6277-11f0-9fc4-0224a6c84d84",93,["D",1752693846906],3,"/** @jsxImportSource npm:hono@3/jsx */\n\nexport default function Signup() {\n return (\n \n \n

Sign up for clippings from Pete's garden (petemillspaugh.com)

\n \n \n \n );\n}",[],[165,220],"e2a4ed44-6283-11f0-84ea-0224a6c84d84",["D",1752697903107],[],[165,34],"375d50d4-6279-11f0-b40a-0224a6c84d84","confirm.tsx","c5223480-6278-11f0-b684-0224a6c84d84",89,["D",1752693320782],"/** @jsxImportSource npm:hono@3/jsx */\n\ninterface ConfirmProps {\n email: string;\n token: string;\n}\n\nexport default function Confirm({ email, token }: ConfirmProps) {\n const confirmationLink = `https://petemillspaugh.com/email-confirmation?email=${email}&token=${token}`;\n\n return (\n

\n Click here to confirm your subscription. And if you have a minute, reply to this\n email to introduce yourself and lmk why you signed up!\n

\n );\n}",[],[165,233],"41ac333e-6283-11f0-8da0-0224a6c84d84","january2024.tsx","3d177856-6283-11f0-a631-0224a6c84d84","376b7498-6283-11f0-b966-0224a6c84d84",135,["D",1752697633044],[],[165,248,241],"clippings","3a8b3f8c-6283-11f0-90fb-0224a6c84d84",133,["D",1752697621085],[183],[165,248],["D",1752692579741],[182,184,185,186],[165],["D",1746203306756],["D",1789504321592],{"_103":102,"_111":107},{"_103":102,"_104":105,"_106":107,"_18":58,"_108":109,"_110":25},{"_13":92,"_33":93,"_45":44,"_94":46,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":47,"_101":102},"ctx",{"_85":-5,"_131":295,"_296":297,"_298":299,"_300":25,"_301":25,"_302":25,"_303":62,"_304":-5,"_305":-7,"_306":-7,"_307":171,"_308":25,"_309":25,"_310":-5,"_311":25,"_312":25,"_313":25,"_314":-5},"ENV",{"_266":267,"_268":269,"_270":93,"_271":272,"_273":274,"_275":276,"_277":278,"_279":280,"_281":282,"_283":284,"_285":286,"_287":288,"_289":290,"_291":292,"_293":294},"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 · v136