Skip to content

chore: add new email tempalte #1543

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
qinluhe wants to merge 2 commits into
base: main
Choose a base branch
from
Open

chore: add new email tempalte #1543

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b86489e
chore: add new email tempalte
qinluhe Aug 5, 2025
1dbb036
chore: add padding
qinluhe Aug 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
227 changes: 227 additions & 0 deletions email_template/src/templates/notification_template_with_avatar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,227 @@
---
title: "{{ userName }} mentioned you in {{ contentName }}"
preheader: "{{ userName }} has mentioned you in {{ contentName }}. Click to view the notification."
bodyClass: "#EEEEFC"
---

<x-main>
<div style="display: none; max-height: 0px; overflow: hidden;">
{{ userName }} has mentioned you in {{ contentName }} on {{ timestamp }}
</div>

<table
width="100%"
border="0"
cellpadding="0"
cellspacing="0"
bgcolor="#EEEEFC"
style="
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 24px;
color: #000000;
"
>
<tr>
<td align="center" valign="top">
<table
width="600"
border="0"
cellpadding="0"
cellspacing="0"
bgcolor="#ffffff"
style="border-radius: 12px; padding: 32px; margin: 0 auto"
>
Comment on lines +29 to +36
Copy link

@sourcery-ai sourcery-ai bot Aug 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: The outer table uses a fixed width of 600px, which may not be mobile-friendly.

Consider using width: 100% with a max-width to enhance mobile compatibility and prevent rendering issues on smaller screens.

Suggested change
<table
width="600"
border="0"
cellpadding="0"
cellspacing="0"
bgcolor="#ffffff"
style="border-radius: 12px; padding: 32px; margin: 0 auto"
>
<table
width="100%"
border="0"
cellpadding="0"
cellspacing="0"
bgcolor="#ffffff"
style="border-radius: 12px; padding: 32px; margin: 0 auto; max-width: 600px;"
>

<tr>
<td align="center" style="padding-bottom: 24px">
<img
src="{{ cdnBaseUrl }}images/appflowy.png"
Copy link

@sourcery-ai sourcery-ai bot Aug 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: The avatar image is hardcoded and does not use a user-specific avatar.

Consider replacing the static image source with a dynamic variable like {{ userAvatarUrl }} to display the correct user's avatar.

Suggested change
src="{{ cdnBaseUrl }}images/appflowy.png"
src="{{ userAvatarUrl }}"

width="64"
height="64"
style="border: 0; display: block; margin: 0 auto; border-radius: 50%"
/>
</td>
</tr>

<tr>
<td align="center" style="padding-bottom: 8px">
<h2
style="
font-size: 26px;
font-weight: bold;
margin: 0;
color: #000000;
text-align: center;
"
>
<span style="text-decoration: underline;">{{ userName }}</span>
<span style="font-weight: normal;">has mentioned you in</span>
</h2>
<h2
style="
font-size: 26px;
font-weight: bold;
margin: 8px 0 0 0;
color: #000000;
text-align: center;
"
>
<span style="text-decoration: underline;">{{ contentName }}</span>
</h2>
</td>
</tr>

<tr>
<td align="center" style="padding-bottom: 24px">
<p style="font-size: 14px; color: #6f748c; margin: 0; text-align: center;">
{{ timestamp }}
</p>
<p style="font-size: 14px; color: #6f748c; margin: 4px 0 0 0; text-align: center;">
{{ contentPath }}
</p>
</td>
</tr>

<tr>
<td align="center" style="padding-bottom: 24px">
<table
border="0"
cellpadding="0"
cellspacing="0"
style="margin: 0 auto"
>
<tr>
<td
align="center"
bgcolor="#9327FF"
style="border-radius: 10px; padding: 16px 28px"
>
<a
href="{{ actionUrl }}"
style="
color: #ffffff;
font-weight: bold;
font-size: 18px;
text-decoration: none;
display: inline-block;
"
>Go to workspace</a
>
</td>
</tr>
</table>
</td>
</tr>

<tr>
<td align="center" style="padding-bottom: 24px">
<div
style="
border-top: 1px solid #dde2f1;
padding-top: 24px;
font-size: 14px;
color: #6f748c;
text-align: center;
"
>
Bring projects, knowledge, and teams together with the power of AI.
</div>
</td>
</tr>

<tr>
<td align="center">
<p style="margin: 0 0 15px 0; text-align: center;">
<a
href="https://discord.com/invite/aAGATKfwVn"
style="
text-decoration: none;
display: inline-block;
margin: 0 10px 0 0;
"
>
<img
src="{{ cdnBaseUrl }}images/discord.png"
width="20"
height="20"
alt="Discord"
style="border: 0"
/>
</a>
<a
href="https://github.com/AppFlowy-IO/AppFlowy"
style="
text-decoration: none;
display: inline-block;
margin: 0 10px 0 0;
"
>
<img
src="{{ cdnBaseUrl }}images/github.png"
width="20"
height="20"
alt="GitHub"
style="border: 0"
/>
</a>
<a
href="https://www.reddit.com/r/AppFlowy/"
style="
text-decoration: none;
display: inline-block;
margin: 0 10px 0 0;
"
>
<img
src="{{ cdnBaseUrl }}images/reddit.png"
width="20"
height="20"
alt="Reddit"
style="border: 0"
/>
</a>
<a
href="https://x.com/appflowy"
style="
text-decoration: none;
display: inline-block;
margin: 0 10px 0 0;
"
>
<img
src="{{ cdnBaseUrl }}images/twitter.png"
Comment on lines +186 to +194
Copy link

@sourcery-ai sourcery-ai bot Aug 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: The icon for X (formerly Twitter) uses a 'twitter.png' image.

Consider updating the icon to match X's current branding to avoid confusion.

Suggested implementation:

                  <img
                    src="{{ cdnBaseUrl }}images/x.png"
                    width="20"
                    height="20"


                    src="{{ cdnBaseUrl }}images/x.png"
                    width="20"
                    height="20"


                    height="20"
                    alt="X"

Make sure to add the new x.png icon to your CDN at the path images/x.png to ensure the image loads correctly.

width="20"
height="20"
alt="Twitter"
style="border: 0"
/>
</a>
<a
href="https://www.youtube.com/channel/UCMX3I1fNs-PFXD3Cq5G1LZg"
style="text-decoration: none; display: inline-block"
>
<img
src="{{ cdnBaseUrl }}images/youtube.png"
width="20"
height="20"
alt="Youtube"
style="border: 0"
/>
</a>
</p>

<p style="font-size: 14px; color: #6f748c; margin: 0 0 10px 0; text-align: center;">
Copyright © 2025, AppFlowy Inc.
</p>
<p style="font-size: 14px; color: #6f748c; margin: 0; text-align: center;">
Need Help?
<a href="mailto:support@appflowy.io" style="color: #6f748c"
>support@appflowy.io</a
>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</x-main>
Loading