feat: new email template for mx-core

Signed-off-by: Innei <[email protected]>
mx-space · Jun 6, 2023 · 7125cd7 · 7125cd7
1 parent 3b872eb
commit 7125cd7
Show file tree

Hide file tree

Showing 18 changed files with 469 additions and 95 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+out/
+.react-email
diff --git a/.react-email/emails/vercel-invite-user.tsx b/.react-email/emails/vercel-invite-user.tsx
diff --git a/.react-email/public/static/notion-logo.png b/.react-email/public/static/notion-logo.png
diff --git a/.react-email/public/static/plaid-logo.png b/.react-email/public/static/plaid-logo.png
diff --git a/.react-email/public/static/plaid.png b/.react-email/public/static/plaid.png
diff --git a/.react-email/public/static/stripe-logo.png b/.react-email/public/static/stripe-logo.png
diff --git a/.react-email/public/static/vercel-arrow.png b/.react-email/public/static/vercel-arrow.png
diff --git a/.react-email/public/static/vercel-logo.png b/.react-email/public/static/vercel-logo.png
diff --git a/.react-email/public/static/vercel-team.png b/.react-email/public/static/vercel-team.png
diff --git a/.react-email/public/static/vercel-user.png b/.react-email/public/static/vercel-user.png
diff --git a/data/comment.ts b/data/comment.ts
@@ -0,0 +1,59 @@
+import dayjs from 'dayjs'
+export interface CommentModelRenderProps {
+  author: string
+  avatar: string
+  mail: string
+  text: string
+  ip?: string | undefined
+  agent: string
+  created: string
+  isWhispers: boolean
+  location?: string | undefined
+  url: string
+}
+const defaultCommentModelForRenderProps: CommentModelRenderProps = {
+  author: 'Commentor' as string,
+  avatar:
+    'https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/976.jpg' as string,
+  mail: '[email protected]' as string,
+  text: `Tenetur ipsam quis illo eos pariatur. Minima rerum accusantium. Nesciunt facere illo reprehenderit qui voluptatem omnis temporibus consequatur similique. Et quidem vero aperiam iure cumque perspiciatis. Vitae occaecati quam non. Placeat officia iste voluptatibus magnam neque accusamus magni alias at.
+  Nobis quia enim error molestiae praesentium molestias. Itaque harum cupiditate itaque ea necessitatibus deleniti. Excepturi nihil voluptas vel vitae asperiores eveniet illum. Soluta veritatis quasi commodi. Enim laudantium quaerat recusandae nulla placeat.
+  Ad recusandae et sint impedit at esse illo exercitationem. Odit repellat non. Quisquam asperiores eveniet dolore. Magni iste modi at delectus. Pariatur consequuntur officia ab libero. Beatae voluptatum quia impedit deleniti ipsam eaque iure.` as string,
+  ip: '0.0.0.0' as string | undefined,
+  agent:
+    'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36' as string,
+  created: new Date().toISOString(),
+  isWhispers: false,
+  location: '' as string | undefined,
+  url: 'https://blog.commentor.com' as string,
+}
+
+const defaultPostModelForRenderProps = {
+  title: '匆匆',
+  id: 'd7e0ed429da8ae90988c37da',
+  text: '燕子去了，有再来的时候；杨柳枯了，有再青的时候；桃花谢了，有再开的时候。但是，聪明的，你告诉我，我们的日子为什么一去不复返呢？——是有人偷了他们罢：那是谁？又藏在何处呢？是他们自己逃走了罢：如今（现在 [2] ）又到了哪里呢？',
+  created: new Date().toISOString(),
+  modified: new Date().toISOString(),
+}
+
+export const baseRenderProps = Object.freeze({
+  author: defaultCommentModelForRenderProps.author,
+  link: 'https://innei.ren/note/122#comments-37ccbeec9c15bb0ddc51ca7d' as string,
+
+  mail: defaultCommentModelForRenderProps.mail,
+  text: defaultCommentModelForRenderProps.text,
+  title: '文章的标题' as string,
+  time: dayjs().format('YYYY/MM/DD'),
+  master: 'Innei' as string,
+
+  ip: defaultCommentModelForRenderProps.ip,
+
+  aggregate: {
+    post: defaultPostModelForRenderProps,
+    commentor: defaultCommentModelForRenderProps,
+    owner: {
+      username: 'innei',
+      avatar: 'https://avatars.githubusercontent.com/u/41265413?v=4',
+    },
+  },
+})
diff --git a/emails/guest-notification-comment.tsx b/emails/guest-notification-comment.tsx
@@ -0,0 +1,92 @@
+import {
+  Body,
+  Button,
+  Container,
+  Head,
+  Heading,
+  Hr,
+  Html,
+  Img,
+  Preview,
+  Section,
+  Tailwind,
+  Text,
+} from '@react-email/components'
+import { get } from 'lodash-es'
+import * as React from 'react'
+import { baseRenderProps } from '../data/comment'
+
+const getEjsValue = (key: string) =>
+  process.env.NODE_ENV !== 'development'
+    ? `<%= ${key} %>`
+    : get(baseRenderProps, key)
+export const GuestReceivedEmailTemplate = () => {
+  const previewText = `${getEjsValue('master')} 在「${getEjsValue(
+    'title',
+  )}」给你回复啦！ ${getEjsValue('master')} 回复说： ${getEjsValue('text')}`
+  return (
+    <Html>
+      <Head />
+      <Preview>{previewText}</Preview>
+      <Tailwind>
+        <Body className="bg-white my-auto mx-auto font-sans">
+          <Container className="border border-solid shadow-md rounded my-[40px] mx-auto p-[20px] w-[550px] border-sky-500 relative overflow-hidden">
+            <Section className="absolute inset-0 pointer-events-none">
+              <Img
+                src="https://fastly.jsdelivr.net/gh/mx-space/docs-images@master/images/chichi-1.jpeg"
+                className="object-contain max-w-full opacity-20 blur-lg"
+                style={{
+                  maskImage: `linear-gradient(to bottom, rgba(0, 0, 0, 1.0) 0%, transparent 100%)`,
+                  WebkitMaskImage: `linear-gradient(to bottom, rgba(0, 0, 0, 1.0) 0%, transparent 100%)`,
+                }}
+              />
+            </Section>
+            <Section className="mt-[32px]">
+              <Img
+                src={getEjsValue('aggregate.owner.avatar')}
+                className="my-0 mx-auto rounded-xl h-12 w-12"
+              />
+            </Section>
+            <Heading className="text-black text-[18px] font-normal text-center p-0 my-[30px] mx-0">
+              您在 『<strong>{getEjsValue('title')}</strong>』
+              的评论有了新的回复呐~
+            </Heading>
+            <Text className="text-black text-[14px] leading-[24px]">
+              <strong>{getEjsValue('master')}</strong> 给您的回复：
+            </Text>
+            <Section className="bg-gray-100 rounded-xl px-4">
+              <Text className="text-[#333] text-[12px] leading-[24px]">
+                {getEjsValue('text')}
+              </Text>
+            </Section>
+            <Section className="text-center mt-[32px] mb-[32px]">
+              <Button
+                pX={20}
+                pY={12}
+                href={getEjsValue('link')}
+                className="bg-sky-500 rounded text-white text-[12px] font-semibold no-underline text-center"
+              >
+                查看完整内容
+              </Button>
+            </Section>
+            <Hr className="border border-solid border-[#eaeaea] my-[26px] mx-0 w-full" />
+            <Section>
+              <Text className="text-gray-500 text-[12px] leading-[24px]">
+                萤火虫消失之后，那光的轨迹仍久久地印在我的脑际。那微弱浅淡的光点，仿佛迷失方向的魂灵，在漆黑厚重的夜幕中彷徨。——《挪威的森林》村上春树
+              </Text>
+            </Section>
+
+            <Section className="mt-4">
+              <Text className="text-center text-[10px] text-gray-400">
+                本邮件为系统自动发送，请勿直接回复~ <br />©
+                {`<%= new Date().getFullYear() %> Copyright <%= master %>`}
+              </Text>
+            </Section>
+          </Container>
+        </Body>
+      </Tailwind>
+    </Html>
+  )
+}
+
+export default GuestReceivedEmailTemplate
diff --git a/emails/owner-notification-comment.tsx b/emails/owner-notification-comment.tsx
@@ -0,0 +1,109 @@
+import {
+  Body,
+  Button,
+  Container,
+  Head,
+  Heading,
+  Hr,
+  Html,
+  Img,
+  Preview,
+  Section,
+  Tailwind,
+  Text,
+} from '@react-email/components'
+import { get } from 'lodash-es'
+import * as React from 'react'
+import { baseRenderProps } from '../data/comment'
+
+const getEjsValue = (key: string) =>
+  process.env.NODE_ENV !== 'development'
+    ? `<%= ${key} %>`
+    : get(baseRenderProps, key)
+export const OwnerReceivedEmailTemplate = () => {
+  const previewText = `${getEjsValue('author')} 在《${getEjsValue(
+    'title',
+  )}》说：${getEjsValue('text')}`
+  // const commentorAvatar = getEjsValue('aggregate.comment.avatar')
+  return (
+    <Html>
+      <Head />
+      <Preview>{previewText}</Preview>
+      <Tailwind>
+        <Body className="bg-white my-auto mx-auto font-sans">
+          <Container className="border border-solid shadow-md rounded my-[40px] mx-auto p-[20px] w-[550px] border-sky-500 relative overflow-hidden">
+            <Section className="absolute inset-0 pointer-events-none">
+              <Img
+                src="https://fastly.jsdelivr.net/gh/mx-space/docs-images@master/images/chichi-1.jpeg"
+                className="object-contain max-w-full opacity-20 blur-lg"
+                style={{
+                  maskImage: `linear-gradient(to bottom, rgba(0, 0, 0, 1.0) 0%, transparent 100%)`,
+                  WebkitMaskImage: `linear-gradient(to bottom, rgba(0, 0, 0, 1.0) 0%, transparent 100%)`,
+                }}
+              />
+            </Section>
+            <Section className="mt-[32px]">
+              <Img
+                // src={getEjsValue('aggregate.owner.avatar')}
+                src="https://mx-space.js.org/logo.png"
+                className="my-0 mx-auto rounded-xl h-12 w-12"
+              />
+            </Section>
+            <Heading className="text-black text-[18px] font-normal text-center p-0 my-[30px] mx-0">
+              『<strong>{getEjsValue('title')}</strong>』 的评论收到了回复
+            </Heading>
+            <Text className="text-black text-[14px] leading-[24px]">
+              <strong>{getEjsValue('author')}</strong> 的回复：
+            </Text>
+            <Section className="bg-gray-100 rounded-xl px-4">
+              <Text className="text-[#333] text-[12px] leading-[24px]">
+                {getEjsValue('text')}
+              </Text>
+            </Section>
+
+            <Text className="text-black text-[14px] leading-[24px]">
+              其他信息：
+            </Text>
+            <Section className="bg-gray-100 rounded-xl px-4">
+              <Text className="text-[#333] text-[12px] leading-[24px]">
+                IP: {getEjsValue('ip')}
+                <br />
+                Mail:{getEjsValue('aggregate.commentor.mail')}
+                <br />
+                Agent: {getEjsValue('aggregate.commentor.agent')}
+                <br />
+                HomePage: {getEjsValue('aggregate.commentor.url')}
+              </Text>
+            </Section>
+
+            <Section className="text-center mt-[32px] mb-[32px]">
+              <Button
+                pX={20}
+                pY={12}
+                href={getEjsValue('link')}
+                className="bg-sky-500 rounded text-white text-[12px] font-semibold no-underline text-center"
+              >
+                查看完整内容
+              </Button>
+            </Section>
+            <Hr className="border border-solid border-[#eaeaea] my-[26px] mx-0 w-full" />
+            <Section>
+              <Text className="text-gray-500 text-[12px] leading-[24px]">
+                萤火虫消失之后，那光的轨迹仍久久地印在我的脑际。那微弱浅淡的光点，仿佛迷失方向的魂灵，在漆黑厚重的夜幕中彷徨。——《挪威的森林》村上春树
+              </Text>
+            </Section>
+
+            <Section className="mt-4">
+              <Text className="text-center text-[10px] text-gray-400">
+                本邮件为系统自动发送，请勿直接回复~ <br />©
+                {`<%= new Date().getFullYear() %> Copyright <%= master %>`}
+              </Text>
+            </Section>
+          </Container>
+        </Body>
+      </Tailwind>
+    </Html>
+  )
+}
+
+export default OwnerReceivedEmailTemplate
diff --git a/emails/subscribe.tsx b/emails/subscribe.tsx
@@ -0,0 +1,119 @@
+import {
+  Body,
+  Button,
+  Container,
+  Head,
+  Heading,
+  Hr,
+  Html,
+  Img,
+  Link,
+  Preview,
+  Section,
+  Tailwind,
+  Text,
+} from '@react-email/components'
+import { get } from 'lodash-es'
+import React from 'react'
+
+const defaultPostProps = {
+  text: '年纪在四十以上，二十以下的，恐怕就不易在前两派里有个地位了。他们的车破，又不敢“拉晚儿”，所以只能早早的出车，希望能从清晨转到午后三四点钟，拉出“车份儿”和自己的嚼谷①。他们的车破，跑得慢，所以得多走路，少要钱。到瓜市，果市，菜市，去拉货物，都是他们；钱少，可是无须快跑呢。',
+  title: '骆驼祥子',
+}
+
+export const defaultSubscribeForRenderProps = {
+  ...defaultPostProps,
+
+  author: '',
+  detail_link: '#detail_link',
+  unsubscribe_link: '#unsubscribe_link',
+  master: '',
+
+  aggregate: {
+    owner: {
+      username: 'innei',
+      name: 'innei',
+      avatar: 'https://avatars.githubusercontent.com/u/41265413?v=4',
+    },
+    subscriber: {
+      email: '[email protected]',
+    },
+    post: {
+      ...defaultPostProps,
+      id: 'cdab54a19f3f03f7f5159df7',
+      created: '2023-06-04T15:02:09.179Z',
+    },
+  },
+}
+
+const getEjsValue = (key: string) =>
+  process.env.NODE_ENV !== 'development'
+    ? `<%= ${key} %>`
+    : get(defaultSubscribeForRenderProps, key)
+
+export default () => (
+  <Html>
+    <Head />
+    <Preview>
+      你关注的 @{getEjsValue('aggregate.owner')} 有新的内容发布啦。
+      {`<%= aggregate.post.text.slice(0, 20) %>`}
+    </Preview>
+    <Tailwind>
+      <Body className="bg-white my-auto mx-auto font-sans">
+        <Container className="rounded-md border-rose-400 shadow-md my-[40px] mx-auto p-[20px] w-[550px] relative overflow-hidden">
+          <Section className="absolute inset-0 pointer-events-none">
+            <Img
+              src="https://fastly.jsdelivr.net/gh/mx-space/docs-images@master/images/chichi-1.jpeg"
+              className="object-contain max-w-full opacity-20 blur-lg"
+              style={{
+                maskImage: `linear-gradient(to bottom, rgba(0, 0, 0, 1.0) 0%, transparent 100%)`,
+                WebkitMaskImage: `linear-gradient(to bottom, rgba(0, 0, 0, 1.0) 0%, transparent 100%)`,
+              }}
+            />
+          </Section>
+          <Section className="mt-[32px]">
+            <Img
+              src={getEjsValue('aggregate.owner.avatar')}
+              className="my-0 mx-auto rounded-xl h-12 w-12"
+            />
+          </Section>
+
+          <Text>
+            你关注的 @{getEjsValue('aggregate.owner.name')} 刚刚发布了：
+          </Text>
+
+          <Heading className="text-[20px] text-center">
+            {getEjsValue('title')}
+          </Heading>
+          <Text>{getEjsValue('text')}</Text>
+
+          <Section className="text-center mt-[32px] mb-[32px] relative">
+            <Button
+              pX={20}
+              pY={12}
+              href={getEjsValue('detail_link')}
+              className="bg-rose-400 rounded text-white text-[12px] font-semibold no-underline text-center"
+            >
+              查看完整内容
+            </Button>
+
+            <Link
+              className="text-gray-400 float-right text-[12px] translate-y-3"
+              href={getEjsValue('unsubscribe_link')}
+            >
+              退订
+            </Link>
+          </Section>
+
+          <Hr />
+          <Section className="mt-4">
+            <Text className="text-center text-[10px] text-gray-400">
+              本邮件为系统自动发送，请勿直接回复~ <br />©
+              {`<%= new Date().getFullYear() %> Copyright <%= aggregate.owner.name %>`}
+            </Text>
+          </Section>
+        </Container>
+      </Body>
+    </Tailwind>
+  </Html>
+)