Add email subscribe form to blog posts via Resend (#98)

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: kixelated

.github/workflows/notify-new-post.yml

@@ -0,0 +1,42 @@
+name: notify-new-post
+
+on:
+  push:
+    branches: ["main"]
+    paths: ["src/pages/blog/**/*.mdx"]
+
+permissions:
+  contents: read
+
+jobs:
+  notify:
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 2
+
+      - uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: 1.3.4
+
+      - name: Find newly added blog posts
+        id: detect
+        env:
+          BEFORE_SHA: ${{ github.event.before }}
+          AFTER_SHA: ${{ github.sha }}
+        run: |
+          git diff --name-only --diff-filter=A "$BEFORE_SHA" "$AFTER_SHA" -- 'src/pages/blog/**/*.mdx' > new_posts.txt
+          if [ ! -s new_posts.txt ]; then
+            echo "skip=true" >> "$GITHUB_OUTPUT"
+          fi
+          cat new_posts.txt
+
+      - name: Send broadcast(s)
+        if: steps.detect.outputs.skip != 'true'
+        env:
+          RESEND_API_KEY: ${{ secrets.RESEND_API_KEY }}
+          RESEND_SEGMENT_ID: ${{ secrets.RESEND_SEGMENT_ID }}
+        run: bun scripts/notify-subscribers.ts

scripts/notify-subscribers.ts

@@ -0,0 +1,117 @@
+#!/usr/bin/env bun
+// Sends a Resend broadcast for each newly added blog post listed in new_posts.txt
+// (paths relative to repo root, one per line). Invoked by the GitHub Action
+// .github/workflows/notify-new-post.yml on push to main.
+
+import { readFileSync } from "node:fs";
+import { basename } from "node:path";
+
+const SITE = "https://moq.dev";
+const FROM = "Media over QUIC <blog@moq.dev>";
+
+const apiKey = requireEnv("RESEND_API_KEY");
+const segmentId = requireEnv("RESEND_SEGMENT_ID");
+
+const newPostsList = readFileSync("new_posts.txt", "utf8").trim();
+if (!newPostsList) {
+	console.log("No new posts. Exiting.");
+	process.exit(0);
+}
+
+const paths = newPostsList.split("\n").filter(Boolean);
+console.log(`Found ${paths.length} new post(s): ${paths.join(", ")}`);
+
+for (const path of paths) {
+	const rawSlug = basename(path, ".mdx");
+	const slug = encodeURIComponent(rawSlug);
+	const fm = parseFrontmatter(readFileSync(path, "utf8"));
+	const title = fm.title ?? rawSlug;
+	const description = fm.description ?? "";
+	const url = `${SITE}/blog/${slug}`;
+
+	console.log(`Creating broadcast for "${title}" → ${url}`);
+
+	const create = await fetch("https://api.resend.com/broadcasts", {
+		signal: AbortSignal.timeout(15000),
+		method: "POST",
+		headers: {
+			Authorization: `Bearer ${apiKey}`,
+			"Content-Type": "application/json",
+		},
+		body: JSON.stringify({
+			segment_id: segmentId,
+			from: FROM,
+			subject: title,
+			html: renderHtml({ title, description, url }),
+		}),
+	});
+
+	if (!create.ok) {
+		const err = await create.text();
+		throw new Error(`Resend broadcast create failed (${create.status}): ${err}`);
+	}
+
+	const { id } = (await create.json()) as { id: string };
+
+	const send = await fetch(`https://api.resend.com/broadcasts/${id}/send`, {
+		signal: AbortSignal.timeout(15000),
+		method: "POST",
+		headers: { Authorization: `Bearer ${apiKey}` },
+	});
+
+	if (!send.ok) {
+		const err = await send.text();
+		throw new Error(`Resend broadcast send failed (${send.status}): ${err}`);
+	}
+
+	console.log(`✓ Sent broadcast ${id} for "${title}"`);
+}
+
+function requireEnv(name: string): string {
+	const v = process.env[name];
+	if (!v) throw new Error(`Missing env var: ${name}`);
+	return v;
+}
+
+function parseFrontmatter(source: string): Record<string, string> {
+	const match = source.match(/^---\r?\n([\s\S]*?)\r?\n---/);
+	if (!match) return {};
+	const out: Record<string, string> = {};
+	for (const line of match[1].split(/\r?\n/)) {
+		const m = line.match(/^([A-Za-z_][\w-]*):\s*(.*)$/);
+		if (m) out[m[1]] = m[2].trim().replace(/^["']|["']$/g, "");
+	}
+	return out;
+}
+
+function renderHtml({ title, description, url }: { title: string; description: string; url: string }): string {
+	const safeTitle = escapeHtml(title);
+	const safeDescription = escapeHtml(description);
+	const safeUrl = escapeHtml(url);
+	return `<!doctype html>
+<html><body style="font-family: -apple-system, system-ui, sans-serif; line-height: 1.5; color: #1f2937;">
+  <h1 style="margin: 0 0 16px;">${safeTitle}</h1>
+  ${safeDescription ? `<p style="font-size: 16px; color: #4b5563;">${safeDescription}</p>` : ""}
+  <p style="margin: 24px 0;">
+    <a href="${safeUrl}" style="display: inline-block; background: #2563eb; color: #fff; text-decoration: none; padding: 10px 20px; border-radius: 6px;">Read it on moq.dev →</a>
+  </p>
+  <p style="font-size: 13px; color: #6b7280;">Or open it directly: <a href="${safeUrl}">${safeUrl}</a></p>
+</body></html>`;
+}
+
+function escapeHtml(s: string): string {
+	return s.replace(/[&<>"']/g, (c) => {
+		switch (c) {
+			case "&":
+				return "&amp;";
+			case "<":
+				return "&lt;";
+			case ">":
+				return "&gt;";
+			case '"':
+				return "&quot;";
+			default:
+				return "&#39;";
+		}
+	});
+}

src/components/subscribe.astro

@@ -0,0 +1,23 @@
+---
+import Subscribe from "@/components/subscribe.tsx";
+---
+
+<aside class="not-prose mt-12 border-t border-slate-700 pt-8">
+	<h3 class="mb-4 text-xl font-semibold text-slate-100">Subscribe for new stuff</h3>
+	<Subscribe client:load />
+	<div class="mt-4 flex items-center gap-2 text-sm text-slate-400">
+		<span>or</span>
+		<a
+			href="/rss.xml"
+			class="inline-flex items-center gap-1.5 text-slate-300 hover:text-white"
+			title="RSS Feed"
+		>
+			<svg width="18" height="18" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="RSS Feed">
+				<circle cx="6" cy="26" r="2" fill="currentColor" />
+				<path d="M6 16 A10 10 0 0 1 16 26" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+				<path d="M6 8 A18 18 0 0 1 24 26" fill="none" stroke="#00C02D" stroke-width="2" stroke-linecap="round" />
+			</svg>
+			<span class="font-medium">RSS Feed</span>
+		</a>
+	</div>
+</aside>

src/components/subscribe.tsx

@@ -0,0 +1,62 @@
+import { createSignal } from "solid-js";
+
+type State = "idle" | "submitting" | "success" | "error";
+
+export default function Subscribe() {
+	const [email, setEmail] = createSignal("");
+	const [state, setState] = createSignal<State>("idle");
+	const [error, setError] = createSignal("");
+
+	const handleSubmit = async (e: SubmitEvent) => {
+		e.preventDefault();
+		setState("submitting");
+		setError("");
+
+		try {
+			const res = await fetch("/api/subscribe", {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ email: email() }),
+			});
+
+			if (res.ok) {
+				setState("success");
+			} else {
+				const body = (await res.json().catch(() => ({}))) as { error?: string };
+				setError(body.error ?? "Something went wrong. Try again?");
+				setState("error");
+			}
+		} catch {
+			setError("Couldn't reach the server. Try again?");
+			setState("error");
+		}
+	};
+
+	return (
+		<>
+			{state() === "success" ? (
+				<p class="text-sm text-green-400">Thanks! You'll get an email when a new post goes up.</p>
+			) : (
+				<form onSubmit={handleSubmit} class="flex flex-col gap-2 sm:flex-row">
+					<input
+						type="email"
+						required
+						placeholder="you@example.com"
+						value={email()}
+						onInput={(e) => setEmail(e.currentTarget.value)}
+						disabled={state() === "submitting"}
+						class="flex-1 rounded border border-slate-700 bg-slate-800 px-3 py-2 text-slate-100 placeholder-slate-500 focus:border-blue-500 focus:outline-none"
+					/>
+					<button
+						type="submit"
+						disabled={state() === "submitting"}
+						class="rounded bg-blue-600 px-4 py-2 font-medium text-white hover:bg-blue-500 disabled:bg-slate-700"
+					>
+						{state() === "submitting" ? "Subscribing…" : "Subscribe"}
+					</button>
+				</form>
+			)}
+			{state() === "error" && <p class="mt-2 text-sm text-red-400">{error()}</p>}
+		</>
+	);
+}

src/layouts/global.astro

@@ -3,6 +3,7 @@ import "./global.css";
 // Imported after global.css so the theme's .hljs-* color rules land later in
 // the cascade and beat the prose plugin's .markdown :where(pre code) { color: inherit }.
 import "highlight.js/styles/atom-one-dark.css";
+import Subscribe from "@/components/subscribe.astro";
 
 // NOTE: This is magically used as the type for Astro.props
 interface Props {
@@ -95,6 +96,7 @@ const ogImage = new URL(frontmatter?.cover ?? "/layout/icon.png", siteUrl).toStr
 					)
 				}
 				<slot />
+				{frontmatter?.date && <Subscribe />}
 			</article>
 		</div>
 	</body>

worker/index.ts

@@ -0,0 +1,78 @@
+// Cloudflare Worker entry. Static asset requests fall through to the ASSETS
+// binding (Workers-with-Static-Assets). Only /api/* is handled here.
+
+interface Env {
+	ASSETS: { fetch: (request: Request) => Promise<Response> };
+	RESEND_API_KEY: string;
+	RESEND_SEGMENT_ID: string;
+}
+
+const EMAIL_RE = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;
+
+export default {
+	async fetch(request: Request, env: Env): Promise<Response> {
+		const url = new URL(request.url);
+
+		if (url.pathname === "/api/subscribe") {
+			if (request.method !== "POST") {
+				return new Response("Method Not Allowed", { status: 405 });
+			}
+			return handleSubscribe(request, env);
+		}
+
+		return env.ASSETS.fetch(request);
+	},
+};
+
+async function handleSubscribe(request: Request, env: Env): Promise<Response> {
+	let email: unknown;
+	try {
+		const body = (await request.json()) as { email?: unknown };
+		email = body.email;
+	} catch {
+		return json({ error: "invalid body" }, 400);
+	}
+
+	if (typeof email !== "string" || !EMAIL_RE.test(email)) {
+		return json({ error: "invalid email" }, 400);
+	}
+
+	let res: Response;
+	try {
+		res = await fetch("https://api.resend.com/contacts", {
+			method: "POST",
+			headers: {
+				Authorization: `Bearer ${env.RESEND_API_KEY}`,
+				"Content-Type": "application/json",
+			},
+			body: JSON.stringify({
+				email,
+				unsubscribed: false,
+				segments: [env.RESEND_SEGMENT_ID],
+			}),
+		});
+	} catch (err) {
+		console.error(`Resend POST /contacts → fetch threw: ${err}`);
+		return json({ error: "subscribe failed" }, 502);
+	}
+
+	// Treat any non-5xx as success so we don't leak whether an address is
+	// already on the list (Resend returns 4xx for duplicates). Log 4xx for
+	// debugging since a misconfigured segment ID would silently break sends.
+	// Only log status + request id, not the body (which may contain the email).
+	if (!res.ok) {
+		console.error(`Resend POST /contacts → ${res.status} (request-id: ${res.headers.get("x-request-id") ?? "n/a"})`);
+	}
+	if (res.status >= 500) {
+		return json({ error: "subscribe failed" }, 502);
+	}
+
+	return json({ ok: true }, 200);
+}
+
+function json(body: unknown, status: number): Response {
+	return new Response(JSON.stringify(body), {
+		status,
+		headers: { "Content-Type": "application/json" },
+	});
+}

wrangler.jsonc

@@ -7,17 +7,20 @@
 	"compatibility_date": "2025-08-13",
 	"account_id": "dd618f5dbd5da77b8296f1613c301f5c",
 
+	"main": "worker/index.ts",
+
 	"assets": {
 		"directory": "./dist",
-		"not_found_handling": "404-page"
+		"not_found_handling": "404-page",
+		"binding": "ASSETS"
 	},
 
 	// Environment-specific configurations
 	"env": {
 		"staging": {
 			"name": "moq-dev-staging",
 			"route": {
-				"pattern": "new.moq.dev",
+				"pattern": "moq.wtf",
 				"custom_domain": true
 			}
 		},