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

Co-authored-by: Cursor <cursoragent@cursor.com>

app/[locale]/city/[slug]/page.tsx

@@ -3,6 +3,7 @@
 import { use, useEffect, useMemo, useState } from "react";
 import { Link } from "@/i18n/navigation";
 import Footer from "@/app/components/Footer";
+import NewsletterSubscribe from "@/app/components/NewsletterSubscribe";
 import { apiFetch } from "@/app/lib/api-client";
 
 interface CityGuide {
@@ -377,6 +378,8 @@ export default function CityGuidePage({ params }: { params: Promise<{ slug: stri
               </ul>
             </section>
 
+            <NewsletterSubscribe locale="zh" citySlug={slug} list="city" className="mb-6" />
+
             <div className="flex flex-col sm:flex-row gap-3">
               <Link
                 href="/join"

app/[locale]/meetups/page.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useMemo, useState, type ReactNode } from "react";
 import { Link, useLocale, useTranslation } from "@/i18n/navigation";
+import NewsletterSubscribe from "@/app/components/NewsletterSubscribe";
 import { apiFetch } from "@/app/lib/api-client";
 import {
   buildMeetupChatUrl,
@@ -707,6 +708,16 @@ function MeetupDetailModal({ meetup, locale, viewer, onClose }: { meetup: Meetup
                   {canJoin && (
                     <p className="mt-2 text-xs text-emerald-700 dark:text-emerald-300">{c.chatHint}</p>
                   )}
+                  {meetup.replayUrl ? (
+                    <a
+                      href={meetup.replayUrl}
+                      target="_blank"
+                      rel="noreferrer"
+                      className="mt-3 inline-flex text-sm font-semibold text-emerald-700 underline dark:text-emerald-300"
+                    >
+                      {locale === "zh" ? "观看活动回放" : "Watch replay"}
+                    </a>
+                  ) : null}
                   {embedOpen && canJoin && (
                     <iframe
                       title={`MiroTalk ${meetup.city}`}
@@ -903,6 +914,8 @@ export default function MeetupsPage() {
           </div>
         </div>
 
+        <NewsletterSubscribe locale={locale} list="meetup" className="mb-6" />
+
         <p className="mb-6 text-sm text-gray-500 dark:text-gray-400">
           {c.countPrefix}
           <span className="mx-1 font-semibold text-gray-700 dark:text-gray-300">{displayedMeetups.length}</span>

app/[locale]/settings/notifications/page.tsx

@@ -15,7 +15,7 @@ interface PreferenceRecord {
 }
 
 const DEFAULT_PREFERENCES: PreferenceRecord = {
-  channels: { in_app: true, email: false, wechat: false },
+  channels: { in_app: true, push: false, email: false, wechat: false },
   categories: {
     system: true,
     meetup: true,
@@ -33,6 +33,7 @@ const DEFAULT_PREFERENCES: PreferenceRecord = {
 
 const CHANNELS = [
   ["in_app", "站内消息", "始终建议开启，所有业务通知都会进入消息中心。"],
+  ["push", "手机推送 (ntfy)", "通过 ntfy 推送到手机；开启后请用下方订阅链接在 ntfy App 中订阅。"],
   ["email", "邮件摘要", "适合离线时收到每日/每周汇总。"],
   ["wechat", "微信提醒", "后续可接企业微信、公众号或机器人。"],
 ];
@@ -50,11 +51,15 @@ const CATEGORIES = [
 export default function NotificationSettingsPage() {
   const [prefs, setPrefs] = useState<PreferenceRecord>(DEFAULT_PREFERENCES);
   const [saved, setSaved] = useState("");
+  const [pushSubscribeUrl, setPushSubscribeUrl] = useState("");
 
   useEffect(() => {
     apiFetch<{ record: PreferenceRecord }>("/api/notifications/preferences")
       .then((data) => setPrefs({ ...DEFAULT_PREFERENCES, ...(data.record || {}) }))
       .catch(() => setPrefs(DEFAULT_PREFERENCES));
+    apiFetch<{ subscribeUrl?: string }>("/api/notifications/push-config")
+      .then((data) => setPushSubscribeUrl(data.subscribeUrl || ""))
+      .catch(() => setPushSubscribeUrl(""));
   }, []);
 
   const save = async () => {
@@ -110,6 +115,22 @@ export default function NotificationSettingsPage() {
                   </label>
                 ))}
               </div>
+              {prefs.channels.push && pushSubscribeUrl ? (
+                <div className="mt-4 rounded-2xl border border-violet-200 bg-violet-50/80 p-4 dark:border-violet-900/50 dark:bg-violet-950/30">
+                  <p className="text-sm font-semibold text-violet-900 dark:text-violet-200">ntfy 订阅链接</p>
+                  <p className="mt-1 text-xs text-violet-800/80 dark:text-violet-300/80">
+                    在 ntfy 手机 App 中添加此主题，或浏览器打开订阅。
+                  </p>
+                  <a
+                    href={pushSubscribeUrl}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="mt-2 block break-all text-sm font-medium text-violet-700 underline dark:text-violet-300"
+                  >
+                    {pushSubscribeUrl}
+                  </a>
+                </div>
+              ) : null}
             </div>
 
             <div className="rounded-2xl bg-white p-5 shadow-sm ring-1 ring-gray-100 dark:bg-gray-900 dark:ring-gray-800">

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>
+  );
+}

app/lib/listmonk.ts

@@ -0,0 +1,6 @@
+export const DEFAULT_LISTMONK_URL = "https://listmonk.nomadro.cn";
+export const LISTMONK_PROVIDER_LABEL = "Listmonk";
+
+export function getListmonkUrl(): string {
+  return (process.env.NEXT_PUBLIC_LISTMONK_URL || DEFAULT_LISTMONK_URL).replace(/\/$/, "");
+}

app/lib/meetups.ts

@@ -39,6 +39,7 @@ export interface MeetupSession {
   displayName: string;
   videoUrl: string;
   chatUrl: string;
+  replayUrl?: string;
   loungeChannel: string;
   mirotalkRoom: string;
   meetingProvider: string;

app/lib/ntfy.ts

@@ -0,0 +1,5 @@
+export const DEFAULT_NTFY_URL = "https://ntfy.nomadro.cn";
+
+export function getNtfyBaseUrl(): string {
+  return (process.env.NEXT_PUBLIC_NTFY_URL || DEFAULT_NTFY_URL).replace(/\/$/, "");
+}