feat: add newsletters render page

app/(main)/newsletters/[id]/page.tsx

@@ -0,0 +1,69 @@
+import { eq } from 'drizzle-orm'
+import { type Metadata } from 'next'
+import { notFound } from 'next/navigation'
+import { ReactMarkdown } from 'react-markdown/lib/react-markdown'
+
+import { Container } from '~/components/ui/Container'
+import { db } from '~/db'
+import { newsletters } from '~/db/schema'
+
+async function getNewsletter(id: string) {
+ const [newsletter] = await db
+ .select()
+ .from(newsletters)
+ .where(eq(newsletters.id, parseInt(id)))
+
+ if (!newsletter || !newsletter.body) {
+ notFound()
+ }
+
+ return newsletter
+}
+
+export async function generateMetadata({ params }: { params: { id: string } }) {
+ const newsletter = await getNewsletter(params.id)
+
+ const imageUrlRegex = /!\[[^\]]*\]\((.*?)\)/
+ const match = newsletter.body?.match(imageUrlRegex)
+ let imageUrl: string | undefined = undefined
+
+ if (match) {
+ imageUrl = match[1]
+ }
+
+ return {
+ title: newsletter.subject,
+ openGraph: {
+ images: imageUrl,
+ title: newsletter.subject ?? '',
+ type: 'article',
+ },
+ twitter: {
+ card: 'summary_large_image',
+ title: newsletter.subject ?? '',
+ images: imageUrl,
+ },
+ } satisfies Metadata
+}
+
+export default async function NewsletterRenderPage({
+ params,
+}: {
+ params: { id: string }
+}) {
+ const newsletter = await getNewsletter(params.id)
+
+ if (!newsletter.body) {
+ return null
+ }
+
+ return (
+ <Container className="mt-16">
+ <article className="prose mx-auto max-w-[500px] dark:prose-invert">
+ <ReactMarkdown>{newsletter.body}</ReactMarkdown>
+ </article>
+ </Container>
+ )
+}
+
+export const revalidate = 3600

emails/newsletters/1.md

@@ -1,5 +1,7 @@
 ![](https://cdn.sanity.io/images/i81ys0da/production/ee84300bf0230336bf5fc329f0f2534463b445d8-1200x675.png)
 
+[在浏览器中查看此 Newsletter](https://cali.so/newsletters/1)
+
 我的网站距离正式上线开始已经一个月了，现在回想起来也是伤感，因为当时刚好是皓哥离世的时候。
 
 在过去的一个月里，我发布了新文章，直播给官网添加了新功能，还录制了新的教程。