✨ feat: Final revise of the newsletter

tomy0000000 · tomy0000000 · commit 7f5c090700cb · 2025-07-10T23:56:57.000-07:00
diff --git a/README.md b/README.md
@@ -10,4 +10,4 @@
 - 🏠 Hosting: [GitHub Pages](https://pages.github.com/)
 - 💬 Comments: Self-hosted [Remark42](https://remark42.com/)
 - 📈 Analytics: Self-hosted [Plausible Analytics](https://plausible.io/)
-- 📨 Newsletter: [Mailchimp](https://mailchimp.com/)
+- 📨 Newsletter: [Resend](https://resend.com/)
diff --git a/emails/newsletter.tsx b/emails/newsletter.tsx
@@ -14,7 +14,7 @@ import {
 } from "@react-email/components"
 import React from "react"
 
-interface NewsletterProps {
+export interface NewsletterProps {
   title: string
   subtitle: string
   summary: string
@@ -46,8 +46,8 @@ export default function Newsletter(props: Readonly<NewsletterProps>) {
     <Html>
       <Head />
       <Preview>
-        {props.title}
         {props.subtitle}
+        {"\n"}
         {props.summary}
       </Preview>
       <Tailwind>
@@ -76,6 +76,13 @@ export default function Newsletter(props: Readonly<NewsletterProps>) {
                 >
                   {props.title}
                 </Heading>
+                <Heading
+                  as="h2"
+                  className="text-[18px] font-semibold leading-[28px]"
+                  style={grayText}
+                >
+                  {props.subtitle}
+                </Heading>
                 <Text className="text-[16px] leading-[24px]">
                   {props.summary}
                 </Text>
@@ -123,6 +130,7 @@ const body = { background: baseBackground }
 const container = { background: containerBackground, color: foreground }
 const purpleText = { color: purple }
 const pinkText = { color: pink }
+const grayText = { color: gray }
 const redText = { color: red }
 const purpleButton = { background: purple, color: foreground }
 const footer = { color: gray }
diff --git a/emails/sendEmail.tsx b/emails/sendEmail.tsx
@@ -1,36 +1,139 @@
 import { Temporal } from "@js-temporal/polyfill"
 import { Resend } from "resend"
-import Newsletter from "./newsletter"
+import Newsletter, { NewsletterProps } from "./newsletter"
 import * as React from "react"
+import * as fs from "fs"
+import * as path from "path"
+import matter from "gray-matter"
 
-const resend = new Resend(process.env.RESEND_API_KEY)
-const sender = "Tomy Hsieh <newsletter@tomy.me>"
+const SENDER = "Tomy Hsieh <newsletter@tomy.me>"
+const JSON_INDEX = "public/zh-tw/index.json"
+const POST_SECTION = "寫作"
+const POST_DIR = "content/posts"
+const POST_MARKDOWN = "index.zh-tw.md"
 
-const title = "2025 年 5 月報報"
-const subtitle = "The moment that defines the ones who do."
-const summary =
-  "發現寫部落格有一個有趣現象：這個月沒什麼大事，會因為沒有題材，所以不好寫。但反過來，太多行程，太多東西可以寫，也會很頭疼。另一方面，太多事要做的時候，要抽出時間和心情來寫，其實也不是一件容易的事。"
-const postUrl = "https://blog.tomy.me/zh-tw/posts/2025-may-dump/"
-const imageUrl =
-  "https://blog.tomy.me/zh-tw/posts/2025-may-dump/cmu-commencement-with-taiwanese_hu_8681a2eabc9f99f8.webp"
-const imageAlt =
-  "一排畢業生在現代建築外牆前排隊合照，穿著學士袍與紅黃飾帶，氣氛歡樂。"
+async function main() {
+  // Get the latest blog post
+  const rootDir = path.dirname(__dirname)
+  const post = getLatestPost(rootDir)
+  console.info("Sending post", post)
 
-async function sendEmail() {
+  // Create Resend client
+  const RESEND_API_KEY = process.env.RESEND_API_KEY
+  if (!RESEND_API_KEY) {
+    throw new Error("RESEND_API_KEY not defined")
+  }
+  const resend = new Resend(RESEND_API_KEY)
+
+  // Send a preview email
+  await sendEmail(post, resend, SENDER, "Tomy Hsieh <tomy0000000@gmail.com>")
+
+  // Schedule official email
+  const RESEND_AUDIENCE_ID = process.env.RESEND_AUDIENCE_ID
+  if (!RESEND_AUDIENCE_ID) {
+    throw new Error("RESEND_AUDIENCE_ID not defined")
+  }
+  await sendEmailToAudience(post, resend, SENDER, RESEND_AUDIENCE_ID as string)
+}
+
+function getLatestPost(rootPath: string): NewsletterProps {
+  // Read index from json
+  const indexPath = path.join(rootPath, JSON_INDEX)
+  const indexJson = JSON.parse(fs.readFileSync(indexPath, "utf-8"))
+
+  // Find the latest post slug
+  const latestPost = indexJson.find(
+    (item: { section: string }) => item.section === POST_SECTION
+  )
+  if (!latestPost) {
+    throw new Error(`No post found in section ${POST_SECTION}`)
+  }
+  const BLOG_HOST = process.env.BLOG_HOST
+  if (!BLOG_HOST) {
+    throw new Error("BLOG_HOST not defined")
+  }
+  const permalink = new URL(latestPost.permalink, BLOG_HOST)
+  const slug = permalink.pathname.split("/").filter(Boolean).pop()
+  if (!slug) {
+    throw new Error("Could not extract slug from permalink")
+  }
+
+  // Parse post markdown
+  const markdownPath = path.join(rootPath, POST_DIR, slug, POST_MARKDOWN)
+  const fileContent = fs.readFileSync(markdownPath, "utf-8")
+  const { data, content } = matter(fileContent)
+  const summary = content.slice(
+    content.indexOf("\n") + 1,
+    content.indexOf("\n", content.indexOf("\n") + 1)
+  )
+
+  return {
+    title: data.title,
+    subtitle: data.description,
+    summary,
+    postUrl: permalink.toString(),
+    imageUrl: buildImageURL(slug, data.feature).toString(),
+    imageAlt: data.featureAlt,
+  }
+}
+
+function buildImageURL(postSlug: string, imageSlug: string): URL {
+  const baseUrl = process.env.IMG_HOST
+  if (!baseUrl) {
+    throw new Error("IMG_HOST not defined")
+  }
+  return new URL(`${postSlug}/${imageSlug}`, baseUrl)
+}
+
+async function sendEmail(
+  post: NewsletterProps,
+  resend: Resend,
+  sender: string,
+  testingEmail: string
+) {
+  const createResponse = await resend.emails.send({
+    from: sender,
+    to: testingEmail,
+    subject: `Tomy's Blog - ${post.title}`,
+    react: (
+      <Newsletter
+        title={post.title}
+        subtitle={post.subtitle}
+        summary={post.summary}
+        postUrl={post.postUrl}
+        imageUrl={post.imageUrl}
+        imageAlt={post.imageAlt}
+      />
+    ),
+  })
+  if (createResponse.error !== null || createResponse.data === null) {
+    console.error(`Failed to send email: ${createResponse.error?.message}`)
+    return
+  }
+  const sendId = createResponse.data.id
+  console.log(`Preview Email sent: ${sendId}`)
+}
+
+async function sendEmailToAudience(
+  post: NewsletterProps,
+  resend: Resend,
+  sender: string,
+  audienceId: string
+) {
   // Create broadcast
   const createResponse = await resend.broadcasts.create({
-    name: title,
-    audienceId: process.env.RESEND_AUDIENCE_ID ?? "",
+    name: post.title,
+    audienceId,
     from: sender,
-    subject: `Tomy's Blog - ${title}`,
+    subject: `Tomy's Blog - ${post.title}`,
     react: (
       <Newsletter
-        title={title}
-        subtitle={subtitle}
-        summary={summary}
-        postUrl={postUrl}
-        imageUrl={imageUrl}
-        imageAlt={imageAlt}
+        title={post.title}
+        subtitle={post.subtitle}
+        summary={post.summary}
+        postUrl={post.postUrl}
+        imageUrl={post.imageUrl}
+        imageAlt={post.imageAlt}
       />
     ),
   })
@@ -61,4 +164,4 @@ async function sendEmail() {
   console.log(`Send is scheduled at ${localSendTime.toString()}: ${sendId}`)
 }
 
-sendEmail()
+main()
diff --git a/package.json b/package.json
@@ -32,6 +32,7 @@
   "dependencies": {
     "@js-temporal/polyfill": "^0.5.1",
     "@react-email/components": "^0.0.42",
+    "gray-matter": "^4.0.3",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-email": "^4.0.16",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
