remixed v0

This commit is contained in:
m5r
2022-05-14 12:22:06 +02:00
parent 9275d4499b
commit 98b89ae0f7
338 changed files with 22549 additions and 44628 deletions

View File

@ -0,0 +1,16 @@
<tr>
<td>
<table align="center" class="email-footer w-570 mx-auto text-center sm:w-full">
<tr>
<td align="center" class="content-cell p-45 text-base">
<p class="mt-6 mb-20 text-xs leading-24 text-center text-gray-postmark-light">
&copy; {{ page.year }} {{ page.company.product }}. All rights reserved.
</p>
<p class="mt-6 mb-20 text-xs leading-24 text-center text-gray-postmark-light">
{{ page.company.name }} {{{ page.company.address }}}
</p>
</td>
</tr>
</table>
</td>
</tr>

View File

@ -0,0 +1,15 @@
<tr>
<td align="center" class="email-masthead">
<a
href="https://remixtape.dev"
class="email-masthead_name text-base font-bold no-underline text-gray-postmark-light"
style="text-shadow: 0 1px 0 #ffffff"
>
<img
width="128px"
src="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📼</text></svg>"
alt="Your logo"
/>
</a>
</td>
</tr>

View File

@ -0,0 +1,32 @@
.button {
@apply inline-block text-white no-underline;
background-color: #3869d4;
border-top: 10px solid #3869d4;
border-right: 18px solid #3869d4;
border-bottom: 10px solid #3869d4;
border-left: 18px solid #3869d4;
border-radius: 3px;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16);
}
.button--green {
background-color: #22bc66;
border-top: 10px solid #22bc66;
border-right: 18px solid #22bc66;
border-bottom: 10px solid #22bc66;
border-left: 18px solid #22bc66;
}
.button--red {
background-color: #ff6136;
border-top: 10px solid #ff6136;
border-right: 18px solid #ff6136;
border-bottom: 10px solid #ff6136;
border-left: 18px solid #ff6136;
}
@screen sm {
.button {
@apply w-full text-center !important;
}
}

View File

@ -0,0 +1,65 @@
@import "buttons";
.purchase_heading {
border-bottom-width: 1px;
border-bottom-color: #eaeaec;
border-bottom-style: solid;
}
.purchase_heading p {
@apply text-xxs leading-24 m-0;
color: #85878e;
}
.purchase_footer {
@apply pt-16 text-base align-middle;
border-top-width: 1px;
border-top-color: #eaeaec;
border-top-style: solid;
}
.body-sub {
@apply mt-25 pt-25 border-t;
border-top-color: #eaeaec;
border-top-style: solid;
}
.discount {
@apply w-full p-24 bg-gray-postmark-lightest;
border: 2px dashed #cbcccf;
}
.email-masthead {
@apply py-24 text-base text-center;
}
@screen dark {
body,
.email-body,
.email-body_inner,
.email-content,
.email-wrapper,
.email-masthead,
.email-footer {
@apply bg-gray-postmark-darker text-white !important;
}
p,
ul,
ol,
blockquote,
h1,
h2,
h3 {
@apply text-white !important;
}
.attributes_content,
.discount {
@apply bg-gray-postmark-darkest !important;
}
.email-masthead_name {
text-shadow: none !important;
}
}

View File

@ -0,0 +1,10 @@
body {
@apply m-0 p-0 w-full;
word-break: break-word;
-webkit-font-smoothing: antialiased;
}
img {
border: 0;
@apply max-w-full leading-full align-middle;
}

View File

@ -0,0 +1,3 @@
.mso-leading-exactly {
mso-line-height-rule: exactly;
}

View File

@ -0,0 +1,75 @@
<!DOCTYPE {{{ page.doctype || 'html' }}}>
<html lang="{{ page.language || 'en' }}" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta charset="{{ page.charset || 'utf-8' }}" />
<meta name="x-apple-disable-message-reformatting" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no" />
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings xmlns:o="urn:schemas-microsoft-com:office:office">
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<style>
td,
th,
div,
p,
a,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Segoe UI", sans-serif;
mso-line-height-rule: exactly;
}
</style>
<![endif]-->
<if condition="page.title">
<title>{{{ page.title }}}</title>
</if>
<if condition="page.googleFonts">
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?{{{ page.googleFonts }}}&display=swap"
rel="stylesheet"
media="screen"
/>
</if>
<if condition="page.css">
<style>
{{{ page.css }}}
</style>
</if>
<block name="head"></block>
</head>
<body class="{{ page.bodyClass }}">
<if condition="page.preheader">
<div class="hidden">
{{{ page.preheader }}}&#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
&#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
&#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
&#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
&zwnj; &#160;&#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
&#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
&#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847;
&#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &#847; &zwnj;
&#160;&#847; &#847; &#847; &#847; &#847;
</div>
</if>
<div
role="article"
aria-roledescription="email"
aria-label="{{{ page.title || '' }}}"
lang="{{ page.language || 'en' }}"
>
<block name="template"></block>
</div>
</body>
</html>

View File

@ -0,0 +1,93 @@
---
bodyClass: bg-gray-postmark-lighter
---
<extends src="app/mailers/renderer/html/layouts/main.html">
<block name="template">
<table class="email-wrapper w-full bg-gray-postmark-lighter font-sans">
<tr>
<td align="center">
<table class="email-content w-full">
<component src="app/mailers/renderer/html/components/header.html"></component>
<tr>
<td class="email-body w-full">
<table align="center" class="email-body_inner w-570 bg-white mx-auto sm:w-full">
<tr>
<td class="px-45 py-24">
<div class="text-base">
<h1 class="mt-0 text-2xl font-bold text-left text-gray-postmark-darker">
Hi {{ name }},
</h1>
<p class="mt-6 mb-20 text-base leading-24 text-gray-postmark-dark">
You recently requested to reset your password for your
{{ page.company.product }} account. Use the button below to reset it.
<strong
>This password reset is only valid for the next 24
hours.</strong
>
</p>
<table align="center" class="w-full text-center my-30 mx-auto">
<tr>
<td align="center">
<table class="w-full">
<tr>
<td align="center" class="text-base">
<a
href="{{ action_url }}"
class="button button--green"
target="_blank"
>
Reset your password
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<p class="mt-6 mb-20 text-base leading-24 text-gray-postmark-dark">
If you did not request a password reset, you can safely ignore this
email.
</p>
<table class="body-sub">
<tr>
<td>
<p
class="
mt-6
mb-20
text-xs
leading-24
text-gray-postmark-dark
"
>
If you're having trouble with the button above, copy and
paste the URL below into your web browser.
</p>
<p
class="
mt-6
mb-20
text-xs
leading-24
text-gray-postmark-dark
"
>
{{ action_url }}
</p>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
<!--<component src="app/mailers/renderer/html/components/footer.html"></component>-->
</table>
</td>
</tr>
</table>
</block>
</extends>

View File

@ -0,0 +1,18 @@
/* Your custom CSS resets for email */
@import "app/mailers/renderer/html/custom/reset";
/* Tailwind components that are generated by plugins */
@import "tailwindcss/components";
/**
* @import here any custom components - classes that you'd want loaded
* before the Tailwind utilities, so that the utilities could still
* override them.
*/
@import "app/mailers/renderer/html/custom/postmark";
/* Tailwind utility classes */
@import "tailwindcss/utilities";
/* Your custom utility classes */
@import "app/mailers/renderer/html/custom/utilities";

View File

@ -0,0 +1,81 @@
---
bodyClass: bg-gray-postmark-lighter
---
<extends src="app/mailers/renderer/html/layouts/main.html">
<block name="template">
<table class="email-wrapper w-full bg-gray-postmark-lighter font-sans">
<tr>
<td align="center">
<table class="email-content w-full">
<component src="app/mailers/renderer/html/components/header.html"></component>
<tr>
<td class="email-body w-full">
<table align="center" class="email-body_inner w-570 bg-white mx-auto sm:w-full">
<tr>
<td class="px-45 py-24">
<div class="text-base">
<h1 class="mt-0 text-2xl font-bold text-left text-gray-postmark-darker">
Hi 👋,
</h1>
<p class="mt-6 mb-20 text-base leading-24 text-gray-postmark-dark">
{{ invitation_sender_name }} from {{ invitation_sender_organization_name }}
has invited you to join their organization.
Use the button below to set up your account and get started.
<strong>
This invitation is only valid for the next 7 days.
</strong>
</p>
<table align="center" class="w-full text-center my-30 mx-auto">
<tr>
<td align="center">
<table class="w-full">
<tr>
<td align="center" class="text-base">
<a
href="{{ action_url }}"
class="button button--green"
target="_blank"
>
Set up account
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<p class="mt-6 mb-20 text-base leading-24 text-gray-postmark-dark">
Welcome aboard,
<br />The {{ page.company.product }} Team
</p>
<table class="body-sub">
<tr>
<td>
<p
class="mt-6 mb-20 text-xs leading-24 text-gray-postmark-dark"
>
If you're having trouble with the button above, copy and
paste the URL below into your web browser.
</p>
<p
class="mt-6 mb-20 text-xs leading-24 text-gray-postmark-dark"
>
{{ action_url }}
</p>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
<!--<component src="app/mailers/renderer/html/components/footer.html"></component>-->
</table>
</td>
</tr>
</table>
</block>
</extends>

View File

@ -0,0 +1,219 @@
import fs from "fs";
import path from "path";
// @ts-ignore
import Maizzle from "@maizzle/framework";
export async function render(templateName: string, locals: Record<string, string> = {}) {
const { template, options } = getMaizzleParams(templateName, locals);
const { html } = await Maizzle.render(template, options);
return html;
}
function getMaizzleParams(templateName: string, locals: Record<string, string>) {
const template = fs
.readFileSync(path.resolve(process.cwd(), "./app/mailers/renderer/html/templates", `${templateName}.html`))
.toString();
const tailwindCss = fs
.readFileSync(path.resolve(process.cwd(), "./app/mailers/renderer/html/templates/tailwind.css"))
.toString();
const options = {
tailwind: {
css: tailwindCss,
config: {
mode: "jit",
theme: {
screens: {
sm: { max: "600px" },
dark: { raw: "(prefers-color-scheme: dark)" },
},
extend: {
colors: {
gray: {
"postmark-lightest": "#F4F4F7",
"postmark-lighter": "#F2F4F6",
"postmark-light": "#A8AAAF",
"postmark-dark": "#51545E",
"postmark-darker": "#333333",
"postmark-darkest": "#222222",
"postmark-meta": "#85878E",
},
blue: {
postmark: "#3869D4",
},
},
spacing: {
screen: "100vw",
full: "100%",
px: "1px",
0: "0",
2: "2px",
3: "3px",
4: "4px",
5: "5px",
6: "6px",
7: "7px",
8: "8px",
9: "9px",
10: "10px",
11: "11px",
12: "12px",
14: "14px",
16: "16px",
20: "20px",
21: "21px",
24: "24px",
25: "25px",
28: "28px",
30: "30px",
32: "32px",
35: "35px",
36: "36px",
40: "40px",
44: "44px",
45: "45px",
48: "48px",
52: "52px",
56: "56px",
60: "60px",
64: "64px",
72: "72px",
80: "80px",
96: "96px",
570: "570px",
600: "600px",
"1/2": "50%",
"1/3": "33.333333%",
"2/3": "66.666667%",
"1/4": "25%",
"2/4": "50%",
"3/4": "75%",
"1/5": "20%",
"2/5": "40%",
"3/5": "60%",
"4/5": "80%",
"1/6": "16.666667%",
"2/6": "33.333333%",
"3/6": "50%",
"4/6": "66.666667%",
"5/6": "83.333333%",
"1/12": "8.333333%",
"2/12": "16.666667%",
"3/12": "25%",
"4/12": "33.333333%",
"5/12": "41.666667%",
"6/12": "50%",
"7/12": "58.333333%",
"8/12": "66.666667%",
"9/12": "75%",
"10/12": "83.333333%",
"11/12": "91.666667%",
},
borderRadius: {
none: "0px",
sm: "2px",
DEFAULT: "4px",
md: "6px",
lg: "8px",
xl: "12px",
"2xl": "16px",
"3xl": "24px",
full: "9999px",
},
fontFamily: {
sans: ['"Nunito Sans"', "-apple-system", '"Segoe UI"', "sans-serif"],
serif: ["Constantia", "Georgia", "serif"],
mono: ["Menlo", "Consolas", "monospace"],
},
fontSize: {
0: "0",
xxs: "12px",
xs: "13px",
sm: "14px",
base: "16px",
lg: "18px",
xl: "20px",
"2xl": "24px",
"3xl": "30px",
"4xl": "36px",
"5xl": "48px",
"6xl": "60px",
"7xl": "72px",
"8xl": "96px",
"9xl": "128px",
},
inset: (theme: TailwindThemeHelper) => ({
...theme("spacing"),
}),
letterSpacing: (theme: TailwindThemeHelper) => ({
...theme("spacing"),
}),
lineHeight: (theme: TailwindThemeHelper) => ({
...theme("spacing"),
}),
maxHeight: (theme: TailwindThemeHelper) => ({
...theme("spacing"),
}),
maxWidth: (theme: TailwindThemeHelper) => ({
...theme("spacing"),
xs: "160px",
sm: "192px",
md: "224px",
lg: "256px",
xl: "288px",
"2xl": "336px",
"3xl": "384px",
"4xl": "448px",
"5xl": "512px",
"6xl": "576px",
"7xl": "640px",
}),
minHeight: (theme: TailwindThemeHelper) => ({
...theme("spacing"),
}),
minWidth: (theme: TailwindThemeHelper) => ({
...theme("spacing"),
}),
},
},
corePlugins: {
animation: false,
backgroundOpacity: false,
borderOpacity: false,
divideOpacity: false,
placeholderOpacity: false,
textOpacity: false,
},
},
},
maizzle: {
build: {
posthtml: {
expressions: {
locals,
},
},
},
company: {
name: "Capsule Corp.",
address: `<br>39 Robinson Rd, #11-01<br>Singapore 068911`,
product: "Remixtape",
sender: "Mokhtar",
mailto: "mokhtar@remixtape.dev",
},
googleFonts: "family=Nunito+Sans:wght@400;700",
year: () => new Date().getFullYear(),
inlineCSS: true,
prettify: true,
removeUnusedCSS: true,
},
};
return {
template,
options,
};
}
type TailwindThemeHelper = (str: string) => {};