feat: add newsletter signup in footer

app/(main)/Footer.tsx

@@ -10,6 +10,8 @@ import { env } from '~/env.mjs'
 import { prettifyNumber } from '~/lib/math'
 import { redis } from '~/lib/redis'
 
+import { Newsletter } from './Newsletter'
+
 function NavLink({
  href,
  children,
@@ -99,6 +101,9 @@ export function Footer() {
  <Container.Outer>
  <div className="border-t border-zinc-100 pb-16 pt-10 dark:border-zinc-700/40">
  <Container.Inner>
+ <div className="mx-auto mb-8 max-w-md">
+ <Newsletter />
+ </div>
  <div className="flex flex-col items-center justify-between gap-6 sm:flex-row">
  <p className="text-sm text-zinc-500/80 dark:text-zinc-400/80">
  &copy; {new Date().getFullYear()} Cali Castle. 网站已开源：

app/(main)/Newsletter.tsx

@@ -31,6 +31,7 @@ export function Newsletter() {
  resolver: zodResolver(newsletterFormSchema),
  })
  const [isSubscribed, setIsSubscribed] = React.useState(false)
+ const [subCount, setSubCount] = React.useState<string>()
  const { reward } = useReward('newsletter-rewards', 'emoji', {
  position: 'absolute',
  emoji: ['🤓', '😊', '🥳', '🤩', '🤪', '🤯', '🥰', '😎', '🤑', '🤗', '😇'],
@@ -68,6 +69,18 @@ export function Newsletter() {
  }
  }, [isSubscribed])
 
+ React.useEffect(() => {
+ async function getSubCount() {
+ const response = await fetch('/api/subscribers')
+ if (response.ok) {
+ const { count } = await response.json()
+ setSubCount(count as string)
+ }
+ }
+
+ void getSubCount()
+ }, [])
+
  return (
  <form
  className={clsxm(
@@ -81,8 +94,15 @@ export function Newsletter() {
  <TiltedSendIcon className="h-5 w-5 flex-none" />
  <span className="ml-2">动态更新</span>
  </h2>
- <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
- 获取我最新发布的内容通知，随时可以取消订阅。
+ <p className="mt-2 text-xs text-zinc-600 dark:text-zinc-400 md:text-sm">
+ <span>喜欢我的内容的话不妨订阅支持一下 🫶</span>
+ <br />
+ {subCount && (
+ <span>
+ 加入其他 <span className="font-medium">{subCount}</span> 位订阅者，
+ </span>
+ )}
+ <span>每月一封，随时可以取消订阅。</span>
  </p>
  <AnimatePresence mode="wait">
  {!isSubscribed ? (

app/api/subscribers/route.ts

@@ -0,0 +1,24 @@
+import { sql } from 'drizzle-orm'
+import { NextResponse } from 'next/server'
+
+import { db } from '~/db'
+
+export async function GET() {
+ const {
+ rows: [count],
+ } = await db.execute(
+ sql`SELECT 
+ (SELECT COUNT(*) FROM subscribers WHERE subscribed_at IS NOT NULL) as subscribers`
+ )
+
+ if (typeof count !== 'undefined' && 'subscribers' in count) {
+ return NextResponse.json({
+ count: count.subscribers,
+ })
+ }
+
+ return NextResponse.error()
+}
+
+export const runtime = 'edge'
+export const revalidate = 60

package.json

@@ -13,7 +13,7 @@
  "start": "next start"
  },
  "dependencies": {
- "@clerk/nextjs": "^4.21.1",
+ "@clerk/nextjs": "^4.21.3",
  "@headlessui/react": "^1.7.15",
  "@hookform/resolvers": "^3.1.1",
  "@mdx-js/loader": "^2.3.0",
@@ -41,9 +41,9 @@
  "@sanity/code-input": "^4.1.1",
  "@sanity/image-url": "^1.0.2",
  "@sanity/ui": "^1.6.0",
- "@sanity/vision": "^3.12.0",
+ "@sanity/vision": "^3.12.1",
  "@splinetool/react-spline": "^2.2.6",
- "@tremor/react": "^3.1.0",
+ "@tremor/react": "^3.2.1",
  "@upstash/ratelimit": "^0.4.3",
  "@upstash/redis": "^1.21.0",
  "@vercel/analytics": "^1.0.1",
@@ -52,30 +52,30 @@
  "@zolplay/utils": "^1.3.4",
  "cheerio": "1.0.0-rc.12",
  "dayjs": "^1.11.8",
- "dotenv": "^16.1.4",
+ "dotenv": "^16.3.0",
  "drizzle-orm": "^0.26.5",
  "edge-cors": "^0.2.1",
  "framer-motion": "^10.12.16",
  "hashids": "^2.3.0",
- "next": "^13.4.5",
+ "next": "^13.4.6",
  "next-sanity": "^4.3.3",
  "next-themes": "^0.2.1",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
- "react-email": "^1.9.3",
+ "react-email": "^1.9.4",
  "react-hook-form": "^7.44.3",
  "react-markdown": "^8.0.7",
  "react-query": "^3.39.3",
  "react-rewards": "^2.0.4",
  "react-syntax-highlighter": "^15.5.0",
  "react-textarea-autosize": "^8.4.1",
  "react-tweet": "^2.0.1",
- "react-wrap-balancer": "^0.5.0",
+ "react-wrap-balancer": "^1.0.0",
  "reading-time": "^1.5.0",
  "remark-gfm": "^3.0.1",
- "resend": "^0.15.1",
+ "resend": "^0.15.3",
  "rss": "^1.2.2",
- "sanity": "^3.12.0",
+ "sanity": "^3.12.1",
  "sanity-plugin-media": "^2.0.5",
  "valtio": "^1.10.5",
  "zod": "^3.21.4"
@@ -94,8 +94,8 @@
  "@typescript-eslint/parser": "^5.59.11",
  "autoprefixer": "^10.4.14",
  "drizzle-kit": "^0.18.1",
- "eslint": "^8.42.0",
- "eslint-config-next": "^13.4.5",
+ "eslint": "^8.43.0",
+ "eslint-config-next": "^13.4.6",
  "eslint-config-turbo": "^1.10.3",
  "eslint-plugin-prettier": "^4.2.1",
  "eslint-plugin-simple-import-sort": "^10.0.0",