feat: switch newsletter from Loops to Brevo

.astro/types.d.ts

@@ -1,2 +1,3 @@
 /// <reference types="astro/client" />
-/// <reference path="content.d.ts" />
+/// <reference path="content.d.ts" />
+/// <reference path="env.d.ts" />

.env.template

@@ -0,0 +1,2 @@
+BREVO_API_KEY=<insert here>
+BREVO_LIST_ID=3

.github/workflows/ci.yaml

@@ -5,13 +5,15 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: ./.github/actions/prepare
+      - run: cp .env.template .env
       - run: pnpm build
   lint:
     name: Lint
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
       - uses: ./.github/actions/prepare
+      - run: pnpm astro sync
       - run: pnpm lint
   lint_knip:
     name: Lint Knip
@@ -47,6 +49,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: ./.github/actions/prepare
+      - run: pnpm astro sync
       - run: pnpm tsc
 
 name: CI

.gitignore

@@ -1,4 +1,5 @@
 .astro
+.env
 .vercel
 /dist
 /node_modules

README.md

@@ -20,6 +20,11 @@ pnpm i
 pnpm dev
 ```
 
+### Environment Variables
+
+To get the newsletter API running, copy `.env.template` to an `.env` file and fill in the Brevo API key value from our password manager.
+This is not necessary unless you want to work on the newsletter API.
+
 ## Contributors
 
 <!-- spellchecker: disable -->

astro.config.ts

@@ -1,11 +1,17 @@
 import vercel from "@astrojs/vercel";
 import { konamiEmojiBlast } from "@konami-emoji-blast/astro";
-import { defineConfig } from "astro/config";
+import { defineConfig, envField } from "astro/config";
 
 export default defineConfig({
 	adapter: vercel({
 		webAnalytics: { enabled: true },
 	}),
+	env: {
+		schema: {
+			BREVO_API_KEY: envField.string({ access: "secret", context: "server" }),
+			BREVO_LIST_ID: envField.number({ access: "public", context: "server" }),
+		},
+	},
 	image: {
 		layout: "constrained",
 		responsiveStyles: true,

cspell.json

@@ -16,6 +16,7 @@
 	"words": [
 		"astropub",
 		"bootcamps",
+		"brevo",
 		"d'œuvres",
 		"devries",
 		"dimitri",

eslint.config.ts

@@ -63,6 +63,7 @@ export default defineConfig(
 			},
 		},
 		rules: {
+			"n/no-missing-import": "off",
 			"n/no-unpublished-import": "off",
 
 			// Stylistic concerns that don't interfere with Prettier

package.json

@@ -42,7 +42,8 @@
 		"sharp": "^0.34.5",
 		"temporal-polyfill": "^0.3.0",
 		"uqr": "^0.1.2",
-		"wifi-share-link": "^0.1.2"
+		"wifi-share-link": "^0.1.2",
+		"zod": "^4.3.6"
 	},
 	"devDependencies": {
 		"@eslint-community/eslint-plugin-eslint-comments": "^4.6.0",

src/components/Newsletter.astro

@@ -32,11 +32,7 @@ import Heading from "./Heading.astro";
 			Sign up to receive announcements and important SquiggleConf info.
 		</Heading>
 
-		<form
-			action="https://app.loops.so/api/newsletter-form/clwpkthom0067d11n8jbrxb3b"
-			id="newsletter-form"
-			method="POST"
-		>
+		<form action="/api/newsletter" id="newsletter-form" method="POST">
 			<label class="email-label" for="email">Email Address</label>
 			<input
 				class="email-input"
@@ -103,10 +99,9 @@ import Heading from "./Heading.astro";
 				"Content-Type": "application/x-www-form-urlencoded",
 			},
 		})
-			.then((response) => [response.ok, response.json(), response] as const)
+			.then((response) => [response.ok, response.text(), response] as const)
 			.then(([ok, dataPromise, response]) => {
 				dataPromise.then((data) => {
-					console.log({ data });
 					if (ok) {
 						setMessage("Thanks for signing up!", "happy");
 						form.reset();

src/pages/api/newsletter.ts

@@ -0,0 +1,52 @@
+import { APIRoute } from "astro";
+import { BREVO_API_KEY, BREVO_LIST_ID } from "astro:env/server";
+import { z } from "zod";
+
+const bodySchema = z.object({
+	email: z.email(),
+});
+
+export const POST: APIRoute = async ({ request }) => {
+	const formData = Object.fromEntries(await request.formData());
+	const body = bodySchema.safeParse(formData);
+	if (body.error) {
+		return new Response("Invalid body", {
+			status: 400,
+			statusText: body.error.message,
+		});
+	}
+
+	const { email } = body.data;
+
+	try {
+		const response = await fetch("https://api.brevo.com/v3/contacts", {
+			body: JSON.stringify({
+				email,
+				listIds: [BREVO_LIST_ID],
+			}),
+			headers: {
+				"api-key": BREVO_API_KEY,
+				"Content-Type": "application/json",
+			},
+			method: "POST",
+		});
+
+		console.log(response);
+
+		return response.ok || isBrevoDuplicateIdentifier(await response.json())
+			? new Response("Thanks for signing up!", { status: 200 })
+			: new Response("Error", { status: 400 });
+	} catch (error) {
+		console.error(error);
+		return new Response("Error", { status: 400 });
+	}
+};
+
+function isBrevoDuplicateIdentifier(json: unknown) {
+	return (
+		typeof json === "object" &&
+		!!json &&
+		"code" in json &&
+		json.code === "duplicate_parameter"
+	);
+}

tsconfig.json

@@ -17,5 +17,5 @@
 		"strict": true,
 		"target": "ESNext"
 	},
-	"include": ["api", "src"]
+	"include": ["src"]
 }