[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_206":207,"_208":209},"routes/_app.x.$handle.$name",{"_103":102,"_34":48,"_112":93,"_28":113,"_13":14,"_114":-5,"_11":115,"_116":117,"_118":119,"_120":121,"_122":123,"_20":-5,"_124":-5,"_125":-5,"_126":27,"_127":128,"_129":25,"_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",{"_46":47,"_34":48,"_41":49,"_50":-5,"_51":27,"_52":53,"_54":53,"_55":56,"_57":58,"_18":59,"_60":61,"_62":25,"_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":27},"version",89,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":27,"_28":29,"_30":31},"file",{"_32":33,"_34":35,"_36":37,"_38":40,"_41":42,"_43":14,"_44":45,"_24":27},"previous",{"_32":33,"_34":35,"_36":37,"_38":39},"deleted",true,"deletedHere",false,"path","jsx/confirm.tsx","latestPath","jsx/Confirm.tsx","fileId","c5223480-6278-11f0-b684-0224a6c84d84","name","confirm.tsx","fileType","script","content","/** @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'd like, reply to this email to\n introduce yourself and lmk why you signed up!\n

\n );\n}","/** @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}","createdAt",["D",1752693320782],"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=1789588606&sig=c165a0d71e2789488264d82100bc732859cb6a6c6300835119a026c4809873fd","6906d0a1-0165-46b9-8717-60dfd935316a","pinnedFileId","7990876a-2772-11f0-b46e-569c3dd06744","pinPreview","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":59,"_108":109,"_110":27},"branch",{"_13":92,"_34":93,"_46":45,"_94":47,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":48,"_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=1789588606&sig=a8b75372c080bd5037d9cf6da4f666a6746057dc65a706a42d262bec2a4f85f5","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_46":47,"_34":48,"_41":201,"_50":-5,"_51":27,"_52":53,"_54":53,"_55":56,"_57":58,"_18":59,"_60":61,"_62":25,"_63":-5,"_64":-5,"_65":66,"_67":68,"_69":70,"_71":72,"_73":202,"_75":66,"_76":77,"_78":77,"_79":80,"_81":80,"_82":80,"_83":77,"_84":77,"_85":203,"_87":204,"_89":205,"_91":27},"tree",[172,175,176],"files",[172,173,174,175,176],"counts",{"_162":152,"_163":66,"_164":66,"_165":166,"_167":168},"contents",[134,135,136],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_46":155,"_34":156,"_32":157,"_139":-5,"_44":45,"_43":158,"_141":25,"_41":159,"_13":66,"_36":160,"_38":-5,"_24":27,"_146":-5,"_28":161},{"_46":148,"_34":149,"_32":150,"_139":-5,"_44":45,"_43":66,"_141":27,"_41":151,"_13":152,"_36":20,"_38":153,"_24":27,"_146":-5,"_28":154},{"_46":137,"_34":138,"_32":61,"_139":-5,"_44":45,"_43":140,"_141":27,"_41":142,"_13":143,"_36":144,"_38":145,"_24":27,"_146":48,"_28":147},"2a8143b8-6277-11f0-9b1d-0224a6c84d84","main.ts","parentId",79,"latest",["D",1752692440192],78,"http","import { fetchVerificationEmailHtml } from \"https://esm.town/v/petermillspaugh/fetchVerificationEmailHtml\";\nimport { refreshVerificationToken } from \"https://esm.town/v/petermillspaugh/refreshVerificationToken\";\nimport { sendVerificationEmail } from \"https://esm.town/v/petermillspaugh/sendVerificationEmail\";\nimport { upsertEmailSubscriber } from \"https://esm.town/v/petermillspaugh/upsertEmailSubscriber\";\nimport { email as sendEmail } from \"https://esm.town/v/std/email?v=11\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite?v=4\";\nimport { Hono } from \"npm:hono\";\n\nexport async function emailSubscription(req: Request) {\n const app = new Hono();\n\n app.post(\"/send-verification\", async c => {\n const formData = await c.req.formData();\n const name = formData.get(\"name\");\n const email = formData.get(\"email\");\n\n if (typeof name !== \"string\" || typeof email !== \"string\") {\n return Response.json({ message: \"Unexpected missing value for name or email.\" });\n }\n\n const token = crypto.randomUUID();\n await upsertEmailSubscriber({ name, email, token });\n\n // Lack of await is intentional: send optimistic success response, then send email and notify myself async\n sendVerificationEmail({ emailAddress: email, html: fetchVerificationEmailHtml({ email, token }) });\n\n return Response.json({ success: true, message: \"Sent verification email.\" });\n });\n\n app.put(\"/confirm-verification\", async c => {\n const email = c.req.query(\"email\");\n const token = c.req.query(\"token\");\n\n const { newToken, didRefresh } = await refreshVerificationToken({ email, token });\n if (didRefresh) {\n // Lack of await is intentional: send optimistic success response, then send email and notify myself async\n sendVerificationEmail({\n emailAddress: email,\n html: fetchVerificationEmailHtml({ email, token: newToken, reVerifying: true }),\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: [email],\n });\n\n // No need to await: just emailing myself a notification\n sendEmail({\n subject: `${email} verified for petemillspaugh.com subscription`,\n text: `Verification complete for ${email}'s subscription to petemillspaugh.com`,\n });\n\n return Response.json({ confirmed: true, message: \"Verified email address.\" });\n });\n\n app.get(\"/\", async c => {\n return c.html(`\n \n \n Sign up for petemillspaugh.com\n \n \n

Sign up for clippings from Pete's garden

\n \n \n \n `)\n });\n\n return app.fetch(req);\n}","label",[138],"79908cd8-2772-11f0-b46e-569c3dd06744","README.md","79908d6e-2772-11f0-b46e-569c3dd06744",["D",1700239799740],0,"# Val Town email subscriptions 📧\n\nHandles email subscription signup+verification and sending.\n\n## Steps\n\n1. Fork and run the sibling Vals to set up SQLite tables: [createSubscribers](https://www.val.town/v/petermillspaugh/createSubscribers), [createNewsletters](https://www.val.town/v/petermillspaugh/createNewsletters), [createEmailLogs](https://www.val.town/v/petermillspaugh/createEmailLogs)\n2. Fork this Val and update for your use case (e.g. confirmation link, `sendEmail` 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 on the frontend that calls `/confirm-verification`\n5. Fork sibling Vals to [get verification email markup](https://www.val.town/v/petermillspaugh/fetchVerificationEmailHtml), [send verification emails](https://www.val.town/v/petermillspaugh/sendVerificationEmail), [create a list of newsletters](https://www.val.town/v/petermillspaugh/newsletters), [create a newsletter template](https://www.val.town/v/petermillspaugh/generateNewsletterJsx), [create an individual newsletter](https://www.val.town/v/petermillspaugh/january2024), [send test emails](https://www.val.town/v/petermillspaugh/sendTestEmailNewsletter), [send emails](https://www.val.town/v/petermillspaugh/sendEmailNewsletter), and [handle unsubscribe](https://www.val.town/v/petermillspaugh/unsubscribeFromNewsletter)\n6. Optionally, fork cousin Vals to [view subscribers](https://www.val.town/v/petermillspaugh/getSubscribers), [email yourself daily subscriber count](https://www.val.town/v/petermillspaugh/dailySubscriptionStats), [email yourself a reminder to write your next newsletter](https://www.val.town/v/petermillspaugh/sendNewsletterReminder), and [send test emails](https://www.val.town/v/petermillspaugh/sendTestEmailNewsletter)\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** (or else you'll be signing people up for my website!). 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://petermillspaugh-emailSubscription.web.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://petermillspaugh-emailSubscription.web.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://petermillspaugh-emailSubscription.web.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\n- Sending emails to people other than yourself on Val Town is a paid feature—if you want to stay on the free plan, you can go with a package like [nodemailer](https://www.npmjs.com/package/nodemailer) or [@sendgrid/mail](https://www.npmjs.com/package/@sendgrid/mail)\n\nMigrated from folder: EmailSubscriptions/emailSubscription",[149],"7dac099c-6277-11f0-9fc4-0224a6c84d84","jsx","7b9a23e6-6277-11f0-b3a7-0224a6c84d84",81,["D",1752692579741],"directory",[156],"pulls","branches","forks","envVars",{"_169":66,"_171":152},"connections",{"_169":152,"_170":152},"count","unfilledCount","emptyCount",{"_46":155,"_34":156,"_32":157,"_139":-5,"_44":45,"_43":158,"_141":25,"_41":198,"_13":66,"_36":160,"_38":-5,"_24":27,"_146":-5,"_178":199,"_28":200},{"_46":193,"_34":35,"_32":33,"_139":157,"_44":45,"_43":14,"_141":27,"_41":194,"_13":195,"_36":37,"_38":40,"_24":27,"_146":-5,"_178":196,"_28":197},{"_46":184,"_34":185,"_32":186,"_139":157,"_44":45,"_43":187,"_141":27,"_41":188,"_13":189,"_36":37,"_38":190,"_24":27,"_146":-5,"_178":191,"_28":192},{"_46":148,"_34":149,"_32":150,"_139":-5,"_44":45,"_43":66,"_141":27,"_41":181,"_13":152,"_36":20,"_38":153,"_24":27,"_146":-5,"_178":182,"_28":183},{"_46":137,"_34":138,"_32":61,"_139":-5,"_44":45,"_43":140,"_141":27,"_41":177,"_13":143,"_36":144,"_38":145,"_24":27,"_146":48,"_178":179,"_28":180},["D",1752692440192],"children",[],[138],["D",1700239799740],[],[149],"ca8da388-6277-11f0-82ef-0224a6c84d84","signup.tsx","7ff41442-6277-11f0-9fc4-0224a6c84d84",84,["D",1752692708731],2,"/** @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}",[],[156,185],"375d50d4-6279-11f0-b40a-0224a6c84d84",["D",1752693320782],4,[],[156,35],["D",1752692579741],[173,174],[156],["D",1746203306756],["D",1789504321592],{"_103":102,"_111":107},{"_103":102,"_104":105,"_106":107,"_18":59,"_108":109,"_110":27},{"_13":92,"_34":93,"_46":45,"_94":47,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":48,"_101":102},"ctx",{"_85":-5,"_131":239,"_240":241,"_242":243,"_244":27,"_245":27,"_246":27,"_247":25,"_248":-5,"_249":-7,"_250":-7,"_251":152,"_252":27,"_253":27,"_254":-5,"_255":27,"_256":27,"_257":27,"_258":-5},"ENV",{"_210":211,"_212":213,"_214":93,"_215":216,"_217":218,"_219":220,"_221":222,"_223":224,"_225":226,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236,"_237":238},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","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 · v89