feat: support invitation html absolute path
This commit is contained in:
Kilu
parent
d193cfc55a
commit
f38e76db5a
|
|
@ -42,17 +42,17 @@
|
|||
 ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏  ͏
|
||||
</div>
|
||||
<div role="article" aria-roledescription="email" aria-label="Confirm to join the workspace" lang="en">
|
||||
<div class="sm-px-4 sm-py-12" style="background-color: #faf5ff; padding: 96px 48px">
|
||||
<div class="sm-px-4 sm-py-12" style="background-color: #faf5ff; padding: 96px 48px; color: #000">
|
||||
<table align="center" cellpadding="0" cellspacing="0" role="none">
|
||||
<tr>
|
||||
<td style="width: 552px; max-width: 100%">
|
||||
<div style="height: 48px; width: 100%; text-align: center">
|
||||
<img width="48px" height="48px" style="max-width: 100%; vertical-align: middle; line-height: 1; overflow: hidden; border-radius: 9999px" alt="">
|
||||
<div style="width: 100%; text-align: center">
|
||||
<img src="{{ .UserIconURL }}" width="48px" height="48px" alt="{{ .UserName }}" style="max-width: 100%; vertical-align: middle; line-height: 1; overflow: hidden; border-radius: 9999px; object-fit: cover">
|
||||
</div>
|
||||
<p style="width: 100%; white-space: normal; overflow-wrap: break-word; text-align: center; font-size: 24px">
|
||||
<span style="font-size: 30px; font-weight: 700">undefined</span>
|
||||
<span style="font-size: 30px; font-weight: 700">{{ .UserName }}</span>
|
||||
<span>invited to Join</span>
|
||||
<span style="font-size: 30px; font-weight: 700;">undefined</span>
|
||||
<span style="font-size: 30px; font-weight: 700;">{{ .WorkspaceName }}</span>
|
||||
<span>on AppFlowy</span>
|
||||
</p>
|
||||
<div role="separator" style="background-color: #cbd5e1; height: 1px; line-height: 1px; margin: 24px 20%">‍</div>
|
||||
|
|
@ -64,8 +64,8 @@
|
|||
<td style="width: 75%">
|
||||
</td>
|
||||
<td style="width: 25%">
|
||||
<div style="margin-right: 8px; height: 60px; width: 60px; overflow: hidden; border-radius: 16px; border-width: 2px; border-color: #000; background-color: #fff">
|
||||
<img width="100%" height="100%" style="max-width: 100%; vertical-align: middle; line-height: 1;" alt="">
|
||||
<div style="margin-right: 8px; height: 60px; width: 60px; overflow: hidden; border-radius: 16px; background-color: #fff; border: 2px solid black">
|
||||
<img src="{{ .WorkspaceIconURL }}" width="100%" height="100%" alt="{{ .WorkspaceName }}" style="max-width: 100%; vertical-align: middle; line-height: 1; overflow: hidden; object-fit: cover;">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -73,14 +73,14 @@
|
|||
</td>
|
||||
<td style="width: 58.333333%">
|
||||
<div style="margin-bottom: 8px; font-weight: 700">
|
||||
undefined
|
||||
{{ .WorkspaceName }}
|
||||
</div>
|
||||
<div style="font-size: 14px; color: #64748b"> undefined members</div>
|
||||
<div style="font-size: 14px; color: #64748b"> {{ .WorkspaceMembersCount }} members</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div style="text-align: center;">
|
||||
<a class="hover-opacity-90" style="margin-top: 32px; margin-bottom: 32px; display: inline-block; height: 34px; width: 60%; cursor: pointer; border-radius: 16px; padding: 16px 24px; color: #f8fafc; text-decoration: none; background-color: #9327ff; font-size: 20px; font-weight: 400; line-height: 34px">
|
||||
<a href="{{ .AcceptUrl }}" class="hover-opacity-90" style="margin-top: 32px; margin-bottom: 32px; display: inline-block; height: 34px; width: 60%; cursor: pointer; border-radius: 16px; padding: 16px 24px; color: #f8fafc; text-decoration: none; background-color: #9327ff; font-size: 20px; font-weight: 400; line-height: 34px">
|
||||
<!--[if mso]>
|
||||
<i style="mso-font-width: 150%; mso-text-raise: 30px" hidden> </i>
|
||||
<![endif]-->
|
||||
|
|
@ -110,7 +110,7 @@
|
|||
<td style="padding-left: 24px; padding-right: 24px; text-align: center; font-size: 12px; color: #475569">
|
||||
<p style="margin: 0 0 16px; cursor: pointer; text-transform: uppercase">
|
||||
<a href="https://appflowy.io">
|
||||
<img src="images/appflowy-logo.svg" width="150px" style="max-width: 100%; vertical-align: middle; line-height: 1;" alt="">
|
||||
<img src="https://raw.githubusercontent.com/AppFlowy-IO/AppFlowy-Cloud/main/assets/mailer_templates/build_production/images/appflowy-logo.svg" width="150px" style="max-width: 100%; vertical-align: middle; line-height: 1;" alt="">
|
||||
</a>
|
||||
</p>
|
||||
<p style="margin: 0; font-size: 14px;">
|
||||
|
|
@ -126,7 +126,7 @@
|
|||
<i style="mso-font-width: 150%; mso-text-raise: 30px;" hidden> </i>
|
||||
<![endif]-->
|
||||
<span style="mso-text-raise: 16px">
|
||||
<img src="images/appstore-badge.svg" width="16px" alt="Download on the App Store" style="max-width: 100%; vertical-align: middle; line-height: 1; position: absolute; top: 12px">
|
||||
<img src="https://raw.githubusercontent.com/AppFlowy-IO/AppFlowy-Cloud/main/assets/mailer_templates/build_production/images/appstore-badge.svg" width="16px" alt="Download on the App Store" style="max-width: 100%; vertical-align: middle; line-height: 1; position: absolute; top: 12px">
|
||||
<span style="margin-left: 24px; font-size: 14px">Test Flight</span>
|
||||
</span>
|
||||
<!--[if mso]>
|
||||
|
|
@ -142,7 +142,7 @@
|
|||
<i style="mso-font-width: 150%; mso-text-raise: 30px;" hidden> </i>
|
||||
<![endif]-->
|
||||
<span style="mso-text-raise: 16px">
|
||||
<img src="images/google-play-badge.svg" width="16px" alt="Get it on Google Play" style="max-width: 100%; vertical-align: middle; line-height: 1; position: absolute; top: 16px">
|
||||
<img src="https://raw.githubusercontent.com/AppFlowy-IO/AppFlowy-Cloud/main/assets/mailer_templates/build_production/images/google-play-badge.svg" width="16px" alt="Get it on Google Play" style="max-width: 100%; vertical-align: middle; line-height: 1; position: absolute; top: 16px">
|
||||
<span style="margin-left: 24px; font-size: 14px;">Google Play</span>
|
||||
</span>
|
||||
<!--[if mso]>
|
||||
|
|
@ -155,19 +155,19 @@
|
|||
</table>
|
||||
<p style="cursor: default">
|
||||
<a href="https://twitter.com/appflowy" style="margin-right: 16px; color: #4338ca; text-decoration: none">
|
||||
<img src="images/twitter.svg" width="20" alt="Maizzle" style="max-width: 100%; vertical-align: middle; line-height: 1;">
|
||||
<img src="https://raw.githubusercontent.com/AppFlowy-IO/AppFlowy-Cloud/main/assets/mailer_templates/build_production/images/twitter.svg" width="20" alt="Maizzle" style="max-width: 100%; vertical-align: middle; line-height: 1;">
|
||||
</a>
|
||||
<a href="https://www.reddit.com/r/AppFlowy" style="margin-right: 16px; color: #4338ca; text-decoration: none;">
|
||||
<img src="images/reddit.svg" width="20" alt="Maizzle" style="max-width: 100%; vertical-align: middle; line-height: 1;">
|
||||
<img src="https://raw.githubusercontent.com/AppFlowy-IO/AppFlowy-Cloud/main/assets/mailer_templates/build_production/images/reddit.svg" width="20" alt="Maizzle" style="max-width: 100%; vertical-align: middle; line-height: 1;">
|
||||
</a>
|
||||
<a href="https://github.com/AppFlowy-IO/AppFlowy" style="margin-right: 16px; color: #4338ca; text-decoration: none;">
|
||||
<img src="images/github.svg" width="20" alt="Maizzle" style="max-width: 100%; vertical-align: middle; line-height: 1;">
|
||||
<img src="https://raw.githubusercontent.com/AppFlowy-IO/AppFlowy-Cloud/main/assets/mailer_templates/build_production/images/github.svg" width="20" alt="Maizzle" style="max-width: 100%; vertical-align: middle; line-height: 1;">
|
||||
</a>
|
||||
<a href="https://discord.gg/9Q2xaN37tV" style="margin-right: 16px; color: #4338ca; text-decoration: none;">
|
||||
<img src="images/discord.svg" width="20" alt="Maizzle" style="max-width: 100%; vertical-align: middle; line-height: 1;">
|
||||
<img src="https://raw.githubusercontent.com/AppFlowy-IO/AppFlowy-Cloud/main/assets/mailer_templates/build_production/images/discord.svg" width="20" alt="Maizzle" style="max-width: 100%; vertical-align: middle; line-height: 1;">
|
||||
</a>
|
||||
<a href="https://forum.appflowy.io/" style="color: #4338ca; text-decoration: none;">
|
||||
<img src="images/forum.svg" width="20" alt="Maizzle" style="max-width: 100%; vertical-align: middle; line-height: 1;">
|
||||
<img src="https://raw.githubusercontent.com/AppFlowy-IO/AppFlowy-Cloud/main/assets/mailer_templates/build_production/images/forum.svg" width="20" alt="Maizzle" style="max-width: 100%; vertical-align: middle; line-height: 1;">
|
||||
</a>
|
||||
</p>
|
||||
<p style="font-size: 12px; line-height: 18px;">
|
||||
|
|
|
|||
|
|
@ -24,4 +24,13 @@ module.exports = {
|
|||
},
|
||||
},
|
||||
},
|
||||
locals: {
|
||||
cdnBaseUrl: '',
|
||||
userIconUrl: "https://cdn-icons-png.flaticon.com/512/1077/1077012.png",
|
||||
userName: "John Doe",
|
||||
acceptUrl: "https://appflowy.io",
|
||||
workspaceName: "AppFlowy",
|
||||
workspaceMembersCount: "100",
|
||||
workspaceIconURL: "https://cdn-icons-png.flaticon.com/512/1078/1078013.png",
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,15 @@ module.exports = {
|
|||
},
|
||||
},
|
||||
},
|
||||
locals: {
|
||||
cdnBaseUrl: 'https://raw.githubusercontent.com/AppFlowy-IO/AppFlowy-Cloud/main/assets/mailer_templates/build_production/',
|
||||
userIconUrl: "{{ .UserIconURL }}",
|
||||
userName: "{{ .UserName }}",
|
||||
acceptUrl: "{{ .AcceptUrl }}",
|
||||
workspaceName: "{{ .WorkspaceName }}",
|
||||
workspaceMembersCount: "{{ .WorkspaceMembersCount }}",
|
||||
workspaceIconURL: "{{ .WorkspaceIconURL }}",
|
||||
},
|
||||
inlineCSS: true,
|
||||
removeUnusedCSS: true,
|
||||
shorthandCSS: true,
|
||||
|
|
|
|||
|
|
@ -5,18 +5,18 @@ bodyClass: bg-purple-50
|
|||
---
|
||||
|
||||
<x-main>
|
||||
<div class="bg-purple-50 sm:px-4 px-12 sm:py-12 py-24">
|
||||
<div class="bg-purple-50 sm:px-4 px-12 sm:py-12 py-24 text-black">
|
||||
<table align="center">
|
||||
<tr>
|
||||
<td class="w-[552px] max-w-full">
|
||||
<div class="w-full text-center w-12 h-12">
|
||||
<img src="{{ .UserIconURL }}" class="rounded-full overflow-hidden" width="48px" height="48px"
|
||||
alt="{{ .UserName }}">
|
||||
<div class="w-full text-center">
|
||||
<img src="{{ userIconUrl }}" class="rounded-full overflow-hidden object-cover" width="48px" height="48px"
|
||||
alt="{{ userName }}">
|
||||
</div>
|
||||
<p class="w-full text-center break-words whitespace-normal text-2xl">
|
||||
<span class="text-3xl font-bold">{{ .UserName }}</span>
|
||||
<span class="text-3xl font-bold">{{ userName }}</span>
|
||||
<span class="mx-2=1">invited to Join</span>
|
||||
<span class="text-3xl font-bold">{{ .WorkspaceName }}</span>
|
||||
<span class="text-3xl font-bold">{{ workspaceName }}</span>
|
||||
<span class="mx-2=1">on AppFlowy</span>
|
||||
</p>
|
||||
<x-divider space-x="20%"/>
|
||||
|
|
@ -28,10 +28,13 @@ bodyClass: bg-purple-50
|
|||
<td class="w-9/12">
|
||||
</td>
|
||||
<td class="w-3/12">
|
||||
<div class="rounded-2xl mr-2 w-[60px] h-[60px] bg-white border-2 border-black overflow-hidden">
|
||||
<img src="{{ .UserIconURL }}"
|
||||
<div
|
||||
style="border: 2px solid black;"
|
||||
class="rounded-2xl mr-2 w-[60px] h-[60px] bg-white overflow-hidden">
|
||||
<img src="{{ workspaceIconURL }}"
|
||||
class="overflow-hidden object-cover"
|
||||
width="100%" height="100%"
|
||||
alt="{{ .UserName }}">
|
||||
alt="{{ workspaceName }}">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
|
@ -40,15 +43,15 @@ bodyClass: bg-purple-50
|
|||
</td>
|
||||
<td class="w-7/12">
|
||||
<div class="font-bold mb-2">
|
||||
{{ .WorkspaceName }}
|
||||
{{ workspaceName }}
|
||||
</div>
|
||||
<div class="text-sm text-slate-500"> {{ .WorkspaceMembersCount }} members</div>
|
||||
<div class="text-sm text-slate-500"> {{ workspaceMembersCount }} members</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<x-button align="center"
|
||||
class="hover:opacity-90 cursor-pointer h-[34px] !text-xl !leading-[34px] !bg-[#9327ff] !font-normal w-[60%] my-8 rounded-2xl"
|
||||
href="{{ .AcceptUrl }}">
|
||||
href="{{ acceptUrl }}">
|
||||
Join workspace
|
||||
</x-button>
|
||||
<p class="m-0 leading-4.5 text-sm text-slate-500 text-center">
|
||||
|
|
@ -71,7 +74,7 @@ bodyClass: bg-purple-50
|
|||
<td class="text-center text-slate-600 text-xs px-6">
|
||||
<p class="m-0 mb-4 uppercase cursor-pointer">
|
||||
<a href="https://appflowy.io">
|
||||
<img src="images/appflowy-logo.svg" width="150px">
|
||||
<img src="{{ cdnBaseUrl }}images/appflowy-logo.svg" width="150px">
|
||||
</a>
|
||||
</p>
|
||||
<p class="m-0 text-sm">
|
||||
|
|
@ -86,7 +89,7 @@ bodyClass: bg-purple-50
|
|||
class="hover:opacity-90 mr-2 relative !bg-[#9327ff] !font-normal rounded-2xl"
|
||||
href="https://testflight.apple.com/join/6CexvkDz">
|
||||
|
||||
<img class="absolute top-3" src="images/appstore-badge.svg" width="16px"
|
||||
<img class="absolute top-3" src="{{ cdnBaseUrl }}images/appstore-badge.svg" width="16px"
|
||||
alt="Download on the App Store">
|
||||
<span class="text-sm ml-6">Test Flight</span>
|
||||
</x-button>
|
||||
|
|
@ -95,7 +98,7 @@ bodyClass: bg-purple-50
|
|||
<x-button align="left" class="hover:opacity-90 ml-2 relative !bg-[#9327ff] !font-normal rounded-2xl"
|
||||
href="https://play.google.com/store/apps/details?id=io.appflowy.appflowy">
|
||||
|
||||
<img class="absolute top-4" src="images/google-play-badge.svg" width="16px"
|
||||
<img class="absolute top-4" src="{{ cdnBaseUrl }}images/google-play-badge.svg" width="16px"
|
||||
alt="Get it on Google Play">
|
||||
<span class="text-sm ml-6">Google Play</span>
|
||||
</x-button>
|
||||
|
|
@ -107,23 +110,23 @@ bodyClass: bg-purple-50
|
|||
<p class="cursor-default">
|
||||
<a href="https://twitter.com/appflowy"
|
||||
class="text-indigo-700 [text-decoration:none] mr-4">
|
||||
<img src="images/twitter.svg" width="20" alt="Maizzle">
|
||||
<img src="{{ cdnBaseUrl }}images/twitter.svg" width="20" alt="Maizzle">
|
||||
</a>
|
||||
<a href="https://www.reddit.com/r/AppFlowy"
|
||||
class="text-indigo-700 [text-decoration:none] mr-4">
|
||||
<img src="images/reddit.svg" width="20" alt="Maizzle">
|
||||
<img src="{{ cdnBaseUrl }}images/reddit.svg" width="20" alt="Maizzle">
|
||||
</a>
|
||||
<a href="https://github.com/AppFlowy-IO/AppFlowy"
|
||||
class="text-indigo-700 [text-decoration:none] mr-4">
|
||||
<img src="images/github.svg" width="20" alt="Maizzle">
|
||||
<img src="{{ cdnBaseUrl }}images/github.svg" width="20" alt="Maizzle">
|
||||
</a>
|
||||
<a href="https://discord.gg/9Q2xaN37tV"
|
||||
class="text-indigo-700 [text-decoration:none] mr-4">
|
||||
<img src="images/discord.svg" width="20" alt="Maizzle">
|
||||
<img src="{{ cdnBaseUrl }}images/discord.svg" width="20" alt="Maizzle">
|
||||
</a>
|
||||
<a href="https://forum.appflowy.io/"
|
||||
class="text-indigo-700 [text-decoration:none]">
|
||||
<img src="images/forum.svg" width="20" alt="Maizzle">
|
||||
<img src="{{ cdnBaseUrl }}images/forum.svg" width="20" alt="Maizzle">
|
||||
</a>
|
||||
</p>
|
||||
<p class="text-xs leading-4.5">
|
||||
|
|
|
|||
Loading…
Reference in New Issue