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: '[email protected]',
+ 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"
  },