Skip to content

Commit

Permalink
feat: add comment email template to foramted date with date-fns (#45)
Browse files Browse the repository at this point in the history
  • Loading branch information
@alstn113
alstn113 committed Mar 10, 2023
1 parent 3cd9380 commit 5b7e7a9
Show file tree
Hide file tree
Showing 3 changed files with 126 additions and 93 deletions.
1 change: 1 addition & 0 deletions packages/server/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@
"class-transformer": "^0.5.1",
"class-validator": "^0.14.0",
"cookie-parser": "^1.4.6",
"date-fns": "^2.29.3",
"helmet": "^6.0.1",
"nanoid": "3.3.4",
"passport": "^0.6.0",
Expand Down
216 changes: 123 additions & 93 deletions packages/server/src/providers/aws/ses/ses.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import { Injectable } from '@nestjs/common';
import { ConfigService } from '@nestjs/config';
import { SESClient, SendEmailCommand } from '@aws-sdk/client-ses';
import * as sanitizeHtml from 'sanitize-html';
import { format } from 'date-fns';

@Injectable()
export class SESService {
private readonly sesClient: SESClient;
Expand Down Expand Up @@ -36,6 +38,10 @@ export class SESService {
Data: subject,
},
Body: {
Html: {
Charset: 'UTF-8',
Data: body,
},
Text: {
Charset: 'UTF-8',
Data: sanitizeHtml(body, { allowedTags: [] }),
Expand All @@ -59,101 +65,125 @@ export class SESService {
const commentUserLink = `https://wap-dev.store/user/${commentUsername}`;

return `
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body
style="
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333;
"
>
<table
cellpadding="0"
cellspacing="0"
border="0"
width="100%"
bgcolor="#f9f9f9"
>
<tr>
<td align="center">
<table
cellpadding="0"
cellspacing="0"
border="0"
width="600"
style="max-width: 600px"
>
<tr>
<td
align="center"
style="background-color: #ffab37; padding: 40px; color: #fff"
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body
style="
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333;
"
>
<table
cellpadding="0"
cellspacing="0"
border="0"
width="100%"
bgcolor="#f9f9f9"
>
<tr>
<td align="center">
<table
cellpadding="0"
cellspacing="0"
border="0"
width="600"
style="max-width: 600px"
>
<a
href="https://wap-dev.store"
style="text-decoration: none; color: #fff"
><h1 style="margin: 0; font-size: 36px">Emotions</h1></a
>
<p style="margin: 20px 0 0; font-size: 18px">
새로운 댓글이 달렸습니다.
</p>
</td>
</tr>
<tr>
<td style="background-color: #fff; padding: 40px">
<a href="${postLink}" style="text-decoration: none">
<h2 style="margin: 0; font-size: 24px; color: #ffab37">
${postTitle}
</h2>
</a>
<div style="display: flex; align-items: center; gap: 10px">
<div>
<a href="${commentUserLink}">
<img
style="
height: 64px;
width: 64px;
display: block;
border-radius: 32px;
"
src="${profileImage}"
/>
</a>
</div>
<div>
<p style="margin-top: 20px; font-size: 16px; color: #666">
${commentUsername}
<tr>
<td
align="center"
style="background-color: #ffab37; padding: 40px; color: #fff"
>
<a
href="https://wap-dev.store"
style="text-decoration: none; color: #fff"
><h1 style="margin: 0; font-size: 36px">Emotions</h1></a
>
<p style="margin: 20px 0 0; font-size: 18px">
새로운 댓글이 달렸습니다.
</p>
<p style="font-size: 16px; color: #666">${commentText}</p>
</div>
</div>
</td>
</tr>
<tr>
<td style="background-color: #ffab37; padding: 40px; color: #fff">
<a
href="https://github.com/neko113/Emotions"
style="text-decoration: none; color: #fff"
>
<p style="margin: 0; font-size: 14px">
@neko113 // Follow 및 Star는 개발자에게 큰 힘이 됩니다.
</p>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
</td>
</tr>
<tr>
<td style="background-color: #fff; padding: 40px">
<a href="${postLink}" style="text-decoration: none">
<h2 style="margin: 0; font-size: 24px; color: #ffab37">
${postTitle}
</h2>
</a>
<div style="display: flex; align-items: center; gap: 10px">
<div>
<a href="${commentUserLink}">
<img
style="
height: 64px;
width: 64px;
display: block;
border-radius: 32px;
"
src="${profileImage}"
/>
</a>
</div>
<div>
<div
style="
display: flex;
gap: 10px;
align-items: center;
justify-content: center;
"
>
<div
style="margin-top: 10px; font-size: 16px; color: #666; font-weight: 900"
>
${commentUsername}
</div>
<div
style="
margin-top: 10px;
font-size: 12px;
color: #adb5bd;
"
>
${format(
new Date(),
'yyyy.MM.dd HH:mm:ss',
)} </div>
</div>
<div style="font-size: 16px; color: #666">
${commentText}
</div>
</div>
</div>
</td>
</tr>
<tr>
<td style="background-color: #ffab37; padding: 40px; color: #fff">
<a
href="https://github.com/neko113/Emotions"
style="text-decoration: none; color: #fff"
>
<p style="margin: 0; font-size: 14px">
@neko113 // Follow 및 Star는 개발자에게 큰 힘이 됩니다.
</p>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
`;
}
}
Expand Down
2 changes: 2 additions & 0 deletions pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 5b7e7a9

Please sign in to comment.