shellphone.app/app/mailers/renderer/renderer.server.ts

220 lines
5.0 KiB
TypeScript
Raw Normal View History

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
2022-05-14 10:22:06 +00:00
.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: {
2022-05-14 10:22:06 +00:00
name: "Capsule Corp.",
2021-10-30 12:31:22 +00:00
address: `<br>39 Robinson Rd, #11-01<br>Singapore 068911`,
2022-05-14 10:22:06 +00:00
product: "Remixtape",
2021-10-30 12:31:22 +00:00
sender: "Mokhtar",
2022-05-14 10:22:06 +00:00
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) => {};