[{"_1":2,"_205":-5,"_206":-5},"loaderData",{"_3":4,"_96":97,"_204":-5},"root",{"_5":6,"_33":34,"_65":66},"ctx",{"_7":8,"_19":20,"_21":-5,"_22":23,"_24":25,"_26":27,"_28":27,"_29":27,"_30":31,"_32":27},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5},"sessionClaims","sessionId","sessionStatus","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","environmentVariableKeys",[],"user","preferencesKeybindings","default","preferencesTheme","light","preferencesFixers",false,"preferencesCopilot","preferencesSelectionAi","notificationCount",0,"flagDenols","ENV",{"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56,"_57":58,"_59":60,"_61":62,"_63":64},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","acf190a52b88465a0fd96bee079519fffb66c99f","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","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","API_URL","https://api.val.town","WORKER_FINGERPRINT","fd7e47ba602df66e0f857b45e802b861","clerkState",{"_67":68},"__internal_clerk_state",{"_69":70,"_71":44,"_72":73,"_74":73,"_75":27,"_76":73,"_77":73,"_78":73,"_79":73,"_80":73,"_81":73,"_82":73,"_83":73,"_84":85,"_94":27,"_95":27},"__clerk_ssr_state",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__signInForceRedirectUrl","__signUpForceRedirectUrl","__signInFallbackRedirectUrl","__signUpFallbackRedirectUrl","__clerk_debug",{"_86":27,"_87":73,"_88":89,"_90":73,"_91":44,"_92":27,"_93":73},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","routes/embed.$handle.$name",{"_98":99,"_121":-7},"val",{"_100":101,"_102":103,"_104":105,"_106":-5,"_107":108,"_109":110,"_111":112,"_113":114,"_115":27,"_116":114,"_117":118,"_119":120,"_121":122,"_123":27,"_124":31,"_125":31,"_126":31,"_127":128,"_129":31,"_130":31,"_131":-5,"_21":132,"_137":-5,"_138":139,"_140":-7,"_141":142,"_143":144,"_145":146},"name","subscribeToNewsletter","author","e078a2b9-321c-4a81-a817-7364313fba51","valNameId","32cb348c-f87b-11ee-b4e9-cab58f78796a","isOwned","privacy","public","readme","# Add an email entry option to your static website/blog. Easy peasy. 🚀\n\n![newsletter.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/a021f2f2-920a-4825-f38b-3f529edbe700/public)\n\nPoV: You just hacked together a portfolio website or launched a blog as a static website. *Some people who visit might be interested in hearing more from you.* ❤️\nBut you don't want to get lost building your backend, API, DB or fancy apps like SubstandardStack or MailMachineGun for people to sign up to your newsletter. 😩\n\n**All you want is a simple input box on your website - when someone types their `email`, `username` or `social link` in and submits it, you want to be notified.**\n\n> _psst...do you want another one that uses the DB instead of email so you can look up all entries at once? Let me know and I'll get cooking!_\n\n## Quickstart\nCall the val URL with data in the query param `userContact` . That's it!\n```javascript\n// Format\n`https://?userContact=`\n\n// Examples\n`https://dvsj-subscribeToNewsletter.web.val.run?userContact=dav.is@zohomail.in`\n`https://dvsj-subscribeToNewsletter.web.val.run?userContact=CatalanCabbage`\n```\n\n## Bonus\n### Have extra data apart from email? \nPass any encoded data in the queryParam `userData`, will be included in the email. It's optional.\n```javascript\n// Format\n`https://?userContact=&userData=`\n\n//Examples\n`https://dvsj-subscribeToNewsletter.web.val.run?userContact=dav.is@zohomail.in&userData={\"time\": \"2/2/1969\", \"twitter\": \"https://twitter.com/dvsj_in\"}`\n\n// Note: All values should be URL encoded. Example:\nlet userData = {\"time\": \"2/2/1969\", \"twitter\": \"https://twitter.com/dvsj_in\"}\nlet encodedUserData = encodeURIComponent(userData) //This should go in the query param\n```\n\n### Want bot protection?\nAdd a simple question to your website, like `\"okay, so what's one minus one?\"`. \nIn the val, set `isBotProtectionOn = true` and `botProtectionAnswer=\"0\"`. \nWhen you call the val, include the encoded user's answer to the bot question as `botProtection` query param. \nAnswer will be compared with `botProtectionAnswer`; if the answer is wrong, the request is rejected.\n\n```javascript\n// Format\n`https://?userContact=&userData=&botProtection=`\n\n//Examples\n`https://dvsj-subscribeToNewsletter.web.val.run?userContact=dav.is@zohomail.in&botProtection=123`\n```\n\n## Add it to your website\nWant to add it to your site but get a headstart coding it? Use this ChatGPT prompt to get code for your website!\n```\nI'm building a simple form submission component. It should a submit button and these 2 input boxes: \n1. \"userContact\" to get the user's email (mandatory)\n2. \"userData\" to get a custom message from the user (optional)\n\nOn clicking the submit button: \n1. Both input values should be encoded using \"encodeURIComponent\" \n2. A GET URL should be built in this format with query params. Include userData query param only if input is not null or empty.\n`https://dvsj-subscribeToNewsletter.web.val.run?userContact=&userData=`\n3. The GET URL should be called and result printed in the console.\n\nI'm using React, so make it a react component.\n```","valType","http","currentVersion","ba060a68-f893-11ee-8393-cab58f78796a","legacyPrivate","id","code","import { email } from \"https://esm.town/v/std/email?v=11\";\n\n// You can turn this on if needed. Check the readme!\nconst isBotProtectionOn = false;\nconst botProtectionAnswer = \"0\";\n\nexport default async function(req: Request): Promise {\n // Get the data from URL's query params\n const url = new URL(req.url);\n let botProtectionInput = url.searchParams.get(\"botProtection\");\n let userContact = url.searchParams.get(\"userContact\");\n let userData = url.searchParams.get(\"userData\");\n\n // Check if query params are valid\n const areInputsValid = validateInputs(botProtectionInput, userContact);\n if (!areInputsValid.isValid) {\n return Response.json({\n success: false,\n msg: areInputsValid.errorMsg,\n });\n }\n\n // And send email!\n await sendEmail(userContact, userData);\n return Response.json({ ok: true });\n}\n\nasync function sendEmail(userContact, userData) {\n userContact = decodeURIComponent(userContact);\n // Email body should have userData part only if it's present in query params\n let userDataMsg = \"\";\n if (userData != null) {\n userData = decodeURIComponent(userData);\n userDataMsg = `User data was: ${userData} \\n`;\n }\n\n // Yay!\n const subject = `You've got a new subscriber ${userContact}! 🎉`;\n const text = `User with contact ${userContact} has signed up to your newsletter. \\n ${userDataMsg} Let's goo! 🥂`;\n await email({ subject, text });\n}\n\nfunction validateInputs(botProtectionInput, userContact) {\n let isValid = true;\n let errorMsg = \"\";\n\n // Validate bot protection input only if it's turned on\n if (isBotProtectionOn) {\n botProtectionInput = decodeURIComponent(botProtectionInput);\n if (botProtectionInput == null || botProtectionInput != botProtectionAnswer) {\n isValid = false;\n errorMsg += \"botProtection failed, expected *** but answer was \" + botProtectionInput + \". Bad bot! \";\n }\n }\n\n // userContact is mandatory\n if (userContact == null || userContact.trim() == \"\") {\n isValid = false;\n errorMsg +=\n \"userContact is missing. It should be a queryParam in the URL, like https://?userContact= where user_contact is email, username, social link etc. Eg: https://?userContact=dav.is@zohomail.in\";\n }\n\n return { isValid, errorMsg };\n}","createdAt",["D",1712902385989],"version",14,"currentUserHasLiked","likeCount","forkCount","referenceCount","dependencyCount",1,"commentCount","prCount","mergedPr",{"_133":134,"_135":136},"handle","dvsj","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yZVlHT1Z3YUg5bkhlaHlkYlhZbnZod3J1RVUifQ","forkedVal","fileId","3e3606ce-27ac-11f0-9edc-569c3dd06744","interval","slug","dvsj/subscribeToNewsletter","description","Add an email entry option to your static website/blog. Easy peasy. 🚀 PoV: You just hacked together a portfolio website or launched a blog as a static website. Some people who visit might be interested in hearing more from you. ❤️\nBut you don't want to get lost building your backend, API, DB or fancy apps like SubstandardStack or MailMachineGun for people to sign up to your newsletter. 😩 All you want is a simple input box on your website - when someone types their email , username or social link in and submits it, you want to be notified. psst...do you want another one that uses the DB instead of email so you can look up all entries at once? Let me know and I'll get cooking! Quickstart Call the val URL with data in the query param userContact . That's it! // Format\n`https://?userContact=`\n\n// Examples\n`https://dvsj-subscribeToNewsletter.web.val.run?userContact=dav.is@zohomail.in`\n`https://dvsj-subscribeToNewsletter.web.val.run?userContact=CatalanCabbage` Bonus Have extra data apart from email? Pass any encoded data in the queryParam userData , will be included in the email. It's optional. // Format\n`https://?userContact=&userData=`\n\n//Examples\n`https://dvsj-subscribeToNewsletter.web.val.run?userContact=dav.is@zohomail.in&userData={\"time\": \"2/2/1969\", \"twitter\": \"https://twitter.com/dvsj_in\"}`\n\n// Note: All values should be URL encoded. Example:\nlet userData = {\"time\": \"2/2/1969\", \"twitter\": \"https://twitter.com/dvsj_in\"}\nlet encodedUserData = encodeURIComponent(userData) //This should go in the query param Want bot protection? Add a simple question to your website, like \"okay, so what's one minus one?\" . In the val, set isBotProtectionOn = true and botProtectionAnswer=\"0\" . When you call the val, include the encoded user's answer to the bot question as botProtection query param. Answer will be compared with botProtectionAnswer ; if the answer is wrong, the request is rejected. // Format\n`https://?userContact=&userData=&botProtection=`\n\n//Examples\n`https://dvsj-subscribeToNewsletter.web.val.run?userContact=dav.is@zohomail.in&botProtection=123` Add it to your website Want to add it to your site but get a headstart coding it? Use this ChatGPT prompt to get code for your website! I'm building a simple form submission component. It should a submit button and these 2 input boxes: \n1. \"userContact\" to get the user's email (mandatory)\n2. \"userData\" to get a custom message from the user (optional)\n\nOn clicking the submit button: \n1. Both input values should be encoded using \"encodeURIComponent\" \n2. A GET URL should be built in this format with query params. Include userData query param only if input is not null or empty.\n`https://dvsj-subscribeToNewsletter.web.val.run?userContact=&userData=`\n3. The GET URL should be called and result printed in the console.\n\nI'm using React, so make it a react component.","versions",[147,150,154,158,162,166,170,174,178,182,186,190,194,198,201],{"_121":122,"_148":-5,"_119":149,"_116":114},"prId",["D",1712902385989],{"_121":151,"_148":-5,"_119":152,"_116":153},13,["D",1712899542487],"1b2a009e-f88d-11ee-9780-cab58f78796a",{"_121":155,"_148":-5,"_119":156,"_116":157},12,["D",1712899506676],"05d1afd0-f88d-11ee-aad1-cab58f78796a",{"_121":159,"_148":-5,"_119":160,"_116":161},11,["D",1712899490653],"fc44c5ce-f88c-11ee-9780-cab58f78796a",{"_121":163,"_148":-5,"_119":164,"_116":165},10,["D",1712898103519],"c1790bb0-f889-11ee-8c4d-cab58f78796a",{"_121":167,"_148":-5,"_119":168,"_116":169},9,["D",1712898044968],"9e92d20c-f889-11ee-8168-cab58f78796a",{"_121":171,"_148":-5,"_119":172,"_116":173},8,["D",1712897818949],"17db1102-f889-11ee-b7f7-cab58f78796a",{"_121":175,"_148":-5,"_119":176,"_116":177},7,["D",1712897818923],"17d71570-f889-11ee-b7f7-cab58f78796a",{"_121":179,"_148":-5,"_119":180,"_116":181},6,["D",1712897599282],"94ec9284-f888-11ee-a145-cab58f78796a",{"_121":183,"_148":-5,"_119":184,"_116":185},5,["D",1712897574841],"865b0b10-f888-11ee-a145-cab58f78796a",{"_121":187,"_148":-5,"_119":188,"_116":189},4,["D",1712897332795],"f615c284-f887-11ee-ac44-cab58f78796a",{"_121":191,"_148":-5,"_119":192,"_116":193},3,["D",1712895692222],"243a34aa-f884-11ee-b774-cab58f78796a",{"_121":195,"_148":-5,"_119":196,"_116":197},2,["D",1712895481128],"a667d582-f883-11ee-9d3a-cab58f78796a",{"_121":128,"_148":-5,"_119":199,"_116":200},["D",1712892023512],"998177c2-f87b-11ee-836e-cab58f78796a",{"_121":31,"_148":-5,"_119":202,"_116":203},["D",1712891851198],"32cc8cc4-f87b-11ee-b4e9-cab58f78796a","routes/embed","actionData","errors"]