feat: finish first draft of newsletter

.eslintrc.cjs

@@ -17,14 +17,20 @@ const config = {
         '@typescript-eslint/no-unsafe-call': 'off',
         '@typescript-eslint/no-unsafe-member-access': 'off',
         '@typescript-eslint/no-unsafe-assignment': 'off',
-      }
+      },
     },
   ],
   parser: '@typescript-eslint/parser',
   parserOptions: {
     project: path.join(__dirname, 'tsconfig.json'),
   },
-  plugins: ['turbo', '@typescript-eslint', 'simple-import-sort', 'unused-imports'],
+  ignorePatterns: ['**/*.md'],
+  plugins: [
+    'turbo',
+    '@typescript-eslint',
+    'simple-import-sort',
+    'unused-imports',
+  ],
   extends: ['next/core-web-vitals', 'plugin:@typescript-eslint/recommended'],
   rules: {
     '@typescript-eslint/consistent-type-imports': [

app/admin/newsletters/new/page.tsx

@@ -42,7 +42,9 @@ export default function CreateNewsletterPage() {
     await resend.sendEmail({
       subject: data.subject,
       from: emailConfig.from,
-      to: Array.from(subscriberEmails),
+      to: 'hi@cali.so',
+      reply_to: emailConfig.from,
+      bcc: Array.from(subscriberEmails),
       react: NewslettersTemplate({
         subject: data.subject,
         body: data.body,

emails/NewslettersTemplate.tsx

@@ -8,27 +8,22 @@ const NewslettersTemplate = (props: {
   subject?: string | null
   body?: string | null
 }) => {
-  const {
-    subject = '测试主题',
-    body = `## 最近的一些更新与变化
-  ![](https://zolplay.com/api/og?title=Some+Recent+Changes)
-  `,
-  } = props
+  const { subject = '测试主题', body = `## 测试内容` } = props
 
   return (
     <Layout previewText={subject ?? ''}>
       <Heading>{subject}</Heading>
 
       {body && (
-        <Section className="max-w-[465px] px-2 text-[14px] leading-[16px] text-zinc-700">
+        <Section className="max-w-[465px] px-2 text-[14px] leading-loose text-zinc-700">
           <ReactMarkdown
             components={{
               img: ({ src, alt }) => {
                 return (
                   <img
                     src={src}
                     alt={alt}
-                    className="mx-auto my-0 max-w-[420px]"
+                    className="mx-auto my-0 max-w-[465px]"
                   />
                 )
               },

emails/newsletters/1.md

@@ -0,0 +1,49 @@
+![](https://cdn.sanity.io/images/i81ys0da/production/ee84300bf0230336bf5fc329f0f2534463b445d8-1200x675.png)
+
+我的网站距离正式上线开始已经一个月了，现在回想起来也是伤感，因为当时刚好是皓哥离世的时候。
+
+在过去的一个月里，我发布了新文章，直播给官网添加了新功能，还录制了新的教程。
+
+**这是我第一次写「动态更新 Newsletter」，希望大家能喜欢。**
+
+## ✍️ 发布了 3 篇新文章
+
+[![](https://cdn.sanity.io/images/i81ys0da/production/bd497a82afbf1a4d0eae482beb17bffacb1f4790-1200x675.png)](<(https://cali.so/blog/how-to-add-rss-to-your-nextjs-app-router)>)
+
+[**如何给你的 Next.js（App 路由）应用添加 RSS**](https://cali.so/blog/how-to-add-rss-to-your-nextjs-app-router)
+
+[![](https://cdn.sanity.io/images/i81ys0da/production/7e6111470723702fe423e44f4f4caf11385d2b40-1200x675.png)](https://cali.so/blog/do-buttons-need-pointer-cursors)
+
+[**按钮真的需要手指光标吗？**](https://cali.so/blog/do-buttons-need-pointer-cursors)
+
+[![](https://cdn.sanity.io/images/i81ys0da/production/6002548934a138a02c94322d191477ad65c6e100-1200x675.png)](https://cali.so/blog/how-to-protect-your-site-with-upstash)
+
+[**如何用 Upstash 为网站保驾护航**](https://cali.so/blog/how-to-protect-your-site-with-upstash)
+
+## 🎯 官网新功能
+
+1. 我给文章页面添加了登录+评论功能，欢迎体验：
+   ![](https://cdn.sanity.io/images/i81ys0da/production/c44c09d67703239221c7829e8e31e9deba59df8f-1064x1182.png)
+   ![](https://cdn.sanity.io/images/i81ys0da/production/97192749ae1912822328a5edac0dac67b3af7107-1190x1372.png)
+   我在实现评论的时候不太希望跟大多数评论一样，在文章底部的评论区往往缺少了跟文章本身内容上下文关联的属性。
+2. 我给官网添加了一个[「留言墙」](https://cali.so/guestbook)页面：
+   ![](https://cdn.sanity.io/images/i81ys0da/production/4d5e762b06af97f8d996a6ba95069a1b83c7aa03-1582x1256.png)
+   实现的时候其实是重用了评论的 UI 和交互，感觉也还不错，就是有点纠结要不要做回复功能。。。
+
+3. 最后就是这篇 Newsletter 本身也是一个刚刚实现的新功能啦，我用 md 文件撰写然后在后台点击发送也是非常方便的，感兴趣的小伙伴可以前往查看源代码：[https://github.com/CaliCastle/cali.so](https://github.com/CaliCastle/cali.so)
+
+## 🎬 新教程
+
+[![](https://i.ytimg.com/an_webp/og9r2lFhCm0/mqdefault_6s.webp?du=3000&sqp=CPaxsKQG&rs=AOn4CLCTtXFQB8sI90ZxFESzXvkLOlJp6Q)](https://www.youtube.com/watch?v=og9r2lFhCm0)
+
+[**【如何做好用又好看的下拉列表】Radix UI + Framer Motion + TailwindCSS**](https://www.youtube.com/watch?v=og9r2lFhCm0)
+
+[![](https://i.ytimg.com/an_webp/VJRqzTyZVbo/mqdefault_6s.webp?du=3000&sqp=CJjbsKQG&rs=AOn4CLBYLn51rrLRnNVqhsFqZlxfVnVA5Q)](https://www.youtube.com/watch?v=VJRqzTyZVbo)
+
+[**【Cali 前端动效魔法学院】Ep.01 - 动画的核心 + Ep.02 - 高雅的通知动画**](https://www.youtube.com/watch?v=VJRqzTyZVbo)
+
+---
+
+本次动态更新内容就差不多这些了，感谢每位支持我并且订阅的朋友 🙏。
+
+> P.S. 我还没来得及把「取消订阅」的功能给做了，如果你以后不想收到我的动态更新月刊的话，欢迎直接发 email 给我我手动帮你取消 🙇。

package.json

@@ -76,6 +76,7 @@
     "resend": "^0.15.1",
     "rss": "^1.2.2",
     "sanity": "^3.12.0",
+    "sanity-plugin-media": "^2.0.5",
     "valtio": "^1.10.5",
     "zod": "^3.21.4"
   },