feat: add react email

Ender-Wiggin2019 · Jun 1, 2023 · 9740a1e · 9740a1e
1 parent 233a492
commit 9740a1e
Show file tree

Hide file tree

Showing 9 changed files with 1,414 additions and 10 deletions.
diff --git a/.gitignore b/.gitignore
@@ -43,3 +43,5 @@ next-env.d.ts
 .turbo
 
 static/
+
+.react-email/
diff --git a/README.md b/README.md
@@ -13,6 +13,8 @@
 - [Framer Motion](https://www.framer.com/motion/)
 - [Radix UI](https://www.radix-ui.com/)
 - [Sanity](https://www.sanity.io/)
+- [React Email](https://react.email)
+- [Resend](https://resend.com/)
 
 ### 本地开发
 

diff --git a/emails/_components.ts b/emails/_components.ts
@@ -0,0 +1,14 @@
+export { Body } from '@react-email/body'
+export { Button } from '@react-email/button'
+export { Container } from '@react-email/container'
+export { Head } from '@react-email/head'
+export { Heading } from '@react-email/heading'
+export { Hr } from '@react-email/hr'
+export { Html } from '@react-email/html'
+export { Img } from '@react-email/img'
+export { Link } from '@react-email/link'
+export { Preview } from '@react-email/preview'
+export { Row } from '@react-email/row'
+export { Section } from '@react-email/section'
+export { Tailwind } from '@react-email/tailwind'
+export { Text } from '@react-email/text'
diff --git a/emails/confirm-subscription.tsx b/emails/confirm-subscription.tsx
@@ -0,0 +1,107 @@
+import * as React from 'react'
+
+import {
+ Body,
+ Button,
+ Container,
+ Head,
+ Heading,
+ Hr,
+ Html,
+ Img,
+ Link,
+ Preview,
+ Section,
+ Tailwind,
+ Text,
+} from './_components'
+
+const baseUrl =
+ process.env.VERCEL_ENV === 'production'
+ ? `https://cali.so`
+ : 'http://localhost:3000'
+const confirmLink = new URL('/confirm', baseUrl)
+
+const ConfirmSubscriptionEmail: React.FC<{
+ token?: string
+}> = ({ token = 'fake-token' }) => {
+ const previewText = `确认订阅 Cali 的动态吗？`
+ confirmLink.searchParams.set('token', token)
+ const link = confirmLink.toString()
+
+ return (
+ <Html>
+ <Head />
+ <Preview>{previewText}</Preview>
+ <Tailwind>
+ <Body className="mx-auto my-auto mt-[32px] bg-zinc-50 font-sans">
+ <Container className="mx-auto my-[40px] w-[465px] rounded-2xl border border-solid border-zinc-100 bg-white p-[20px]">
+ <Section className="mt-[24px]">
+ <Img
+ src={`${baseUrl}/subscription-email-header.jpg`}
+ width="234"
+ height="121"
+ alt="Cali"
+ className="mx-auto my-0"
+ />
+ </Section>
+ <Heading className="mx-0 my-[30px] p-0 text-center text-[24px] font-bold text-black">
+ 订阅 Cali 的动态
+ </Heading>
+ <Text className="text-[14px] leading-[24px] text-black">
+ Hello!
+ </Text>
+ <Text className="text-[14px] leading-[24px] text-black">
+ 为了认证此操作，请点击下面的按钮确认订阅 Cali 的动态噢，谢谢 🙏
+ </Text>
+ <Section className="mb-[32px] mt-[32px] text-center">
+ <Button
+ pX={20}
+ pY={12}
+ className="rounded-xl bg-zinc-900 text-center text-[12px] font-semibold text-white no-underline"
+ href={link}
+ >
+ 确认订阅
+ </Button>
+ </Section>
+ <Text className="text-[14px] leading-[24px] text-black">
+ 或者复制下面的链接到你的浏览器中进行访问：{' '}
+ <Link href={link} className="text-blue-600 no-underline">
+ {link}
+ </Link>
+ </Text>
+ <Hr className="mx-0 my-[26px] w-full border border-solid border-[#eaeaea]" />
+ <Text className="text-[12px] leading-[24px] text-[#666666]">
+ 如果不是你本人操作的可以无视本封邮件，如果你有任何疑问可以随时联系我。
+ </Text>
+ </Container>
+
+ <Container className="mx-auto mt-[32px] w-[465px]">
+ <Hr className="mx-0 my-[20px] h-px w-full bg-zinc-100" />
+ <Section>
+ <Img
+ src={`${baseUrl}/icon.png`}
+ width="24"
+ height="24"
+ alt="Cali"
+ className="mx-auto my-0"
+ />
+ <Text className="text-center">
+ <Link
+ href="https://cali.so"
+ className="text-zinc-700 underline"
+ >
+ <strong>Cali Castle</strong>
+ </Link>
+ <br />
+ 开发者、设计师、细节控、创始人
+ </Text>
+ </Section>
+ </Container>
+ </Body>
+ </Tailwind>
+ </Html>
+ )
+}
+
+export default ConfirmSubscriptionEmail
diff --git a/emails/index.tsx b/emails/index.tsx
@@ -0,0 +1,18 @@
+import { Button } from '@react-email/button'
+import { Html } from '@react-email/html'
+import * as React from 'react'
+
+export default function Email() {
+ return (
+ <Html>
+ <Button
+ pX={20}
+ pY={12}
+ href="https://example.com"
+ style={{ background: '#000', color: '#fff' }}
+ >
+ Click me
+ </Button>
+ </Html>
+ )
+}
diff --git a/env.mjs b/env.mjs
@@ -6,6 +6,7 @@ import { z } from 'zod'
 const server = z.object({
  NODE_ENV: z.enum(['development', 'test', 'production']),
  CONVERTKIT_API_KEY: z.string().min(1),
+ RESEND_API_KEY: z.string().min(1),
  VERCEL_ENV: z.enum(['development', 'preview', 'production']),
  UPSTASH_REDIS_REST_URL: z.string().min(1),
  UPSTASH_REDIS_REST_TOKEN: z.string().min(1),
@@ -27,6 +28,7 @@ const client = z.object({
 const processEnv = {
  NODE_ENV: process.env.NODE_ENV,
  CONVERTKIT_API_KEY: process.env.CONVERTKIT_API_KEY,
+ RESEND_API_KEY: process.env.RESEND_API_KEY,
  VERCEL_ENV: process.env.VERCEL_ENV,
  UPSTASH_REDIS_REST_URL: process.env.UPSTASH_REDIS_REST_URL,
  UPSTASH_REDIS_REST_TOKEN: process.env.UPSTASH_REDIS_REST_TOKEN,

diff --git a/package.json b/package.json
@@ -5,6 +5,7 @@
  "scripts": {
  "dev": "next dev",
  "dev:turbo": "next dev --turbo",
+ "dev:email": "email dev -p 3333",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
@@ -17,6 +18,21 @@
  "@radix-ui/react-hover-card": "^1.0.6",
  "@radix-ui/react-select": "^1.2.2",
  "@radix-ui/react-tooltip": "^1.0.6",
+ "@react-email/body": "^0.0.2",
+ "@react-email/button": "^0.0.8",
+ "@react-email/column": "^0.0.7",
+ "@react-email/container": "^0.0.8",
+ "@react-email/head": "^0.0.5",
+ "@react-email/heading": "^0.0.8",
+ "@react-email/hr": "^0.0.5",
+ "@react-email/html": "^0.0.4",
+ "@react-email/img": "^0.0.5",
+ "@react-email/link": "^0.0.5",
+ "@react-email/preview": "^0.0.6",
+ "@react-email/row": "^0.0.5",
+ "@react-email/section": "^0.0.9",
+ "@react-email/tailwind": "^0.0.8",
+ "@react-email/text": "^0.0.5",
  "@sanity/image-url": "^1.0.2",
  "@sanity/ui": "^1.3.3",
  "@sanity/vision": "^3.11.3",
@@ -36,12 +52,14 @@
  "next-themes": "^0.2.1",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
+ "react-email": "^1.9.3",
  "react-hook-form": "^7.43.9",
  "react-query": "^3.39.3",
  "react-rewards": "^2.0.4",
  "react-tweet": "^2.0.1",
  "react-wrap-balancer": "^0.5.0",
  "reading-time": "^1.5.0",
+ "resend": "^0.15.1",
  "rss": "^1.2.2",
  "sanity": "^3.11.3",
  "zod": "^3.21.4",