Add ntfy push and Listmonk newsletter with lightweight Docker deploy tooling.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-08 02:24:55 -05:00
parent 47b1ae8514
commit 22a960799c
24 changed files with 846 additions and 3 deletions
--- a/app/components/NewsletterSubscribe.tsx
+++ b/app/components/NewsletterSubscribe.tsx
@@ -0,0 +1,97 @@
+"use client";
+
+import { useState } from "react";
+import { apiFetch } from "@/app/lib/api-client";
+
+interface NewsletterSubscribeProps {
+  locale: string;
+  citySlug?: string;
+  list?: "city" | "meetup" | "general";
+  className?: string;
+}
+
+const copy = {
+  zh: {
+    title: "订阅城市与活动通讯",
+    hint: "通过 Listmonk 接收新活动、城市更新（可随时退订）",
+    email: "邮箱地址",
+    name: "称呼（可选）",
+    submit: "订阅",
+    success: "订阅成功，请查收确认邮件",
+    error: "订阅失败，请稍后再试",
+  },
+  en: {
+    title: "Subscribe to city & event updates",
+    hint: "Get meetup and city news via Listmonk (unsubscribe anytime)",
+    email: "Email",
+    name: "Name (optional)",
+    submit: "Subscribe",
+    success: "Subscribed — check your inbox to confirm",
+    error: "Subscription failed, please try again",
+  },
+};
+
+export default function NewsletterSubscribe({
+  locale,
+  citySlug = "",
+  list = "general",
+  className = "",
+}: NewsletterSubscribeProps) {
+  const c = locale === "zh" ? copy.zh : copy.en;
+  const [email, setEmail] = useState("");
+  const [name, setName] = useState("");
+  const [status, setStatus] = useState<"idle" | "loading" | "success" | "error">("idle");
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!email.trim()) return;
+    setStatus("loading");
+    try {
+      await apiFetch("/api/newsletter/subscribe", {
+        method: "POST",
+        body: JSON.stringify({ email, name, citySlug, list }),
+      });
+      setStatus("success");
+      setEmail("");
+      setName("");
+    } catch {
+      setStatus("error");
+    }
+  }
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className={`rounded-2xl border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-800 dark:bg-gray-900 ${className}`}
+    >
+      <p className="text-sm font-semibold text-gray-900 dark:text-gray-100">{c.title}</p>
+      <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">{c.hint}</p>
+      <div className="mt-4 grid gap-3 sm:grid-cols-[1fr_1fr_auto]">
+        <input
+          type="email"
+          required
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          placeholder={c.email}
+          className="rounded-xl border border-gray-200 px-4 py-2.5 text-sm dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
+        />
+        <input
+          type="text"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          placeholder={c.name}
+          className="rounded-xl border border-gray-200 px-4 py-2.5 text-sm dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100"
+        />
+        <button
+          type="submit"
+          disabled={status === "loading"}
+          className="rounded-xl bg-[#ff4d4f] px-5 py-2.5 text-sm font-semibold text-white hover:bg-[#ff7a45] disabled:opacity-60"
+        >
+          {c.submit}
+        </button>
+      </div>
+      {status === "success" ? <p className="mt-3 text-sm text-emerald-600 dark:text-emerald-400">{c.success}</p> : null}
+      {status === "error" ? <p className="mt-3 text-sm text-red-600 dark:text-red-400">{c.error}</p> : null}
+    </form>
+  );
+}