Expose browser-safe email preview rendering
This commit is contained in:
1 parent
1f90e01e6e
commit
e019ac34c8
4 files changed
+98
-26
No files matched your search
@@ -55,31 +55,8 @@ export interface EmailRenderBundle {
|
||||
assets: string[];
|
||||
}
|
||||
|
||||
export const emailKind = defineDocumentKind({
|
||||
kind: "email",
|
||||
version: 1,
|
||||
metadata: object({
|
||||
subject: string({ min: 1, max: 998 }),
|
||||
preheader: string({ max: 500, default: "" }),
|
||||
lang: string({ max: 35, default: "en" }),
|
||||
}) as never,
|
||||
rootTypes: ["layout.email-document"],
|
||||
blocks: emailCoreBlocks,
|
||||
variables: { recipientName: "string", unsubscribeUrl: "string", organizationAddress: "string" },
|
||||
breakpoints: { compact: 480 },
|
||||
capabilities: ["email-html", "plain-text", "amp-email", "mjml"],
|
||||
targets: ["emailHtml", "plainText", "ampEmail", "mjml"],
|
||||
limits: { ...DEFAULT_LIMITS, maxOutputBytes: 2_000_000 },
|
||||
urlSchemes: ["https", "mailto"],
|
||||
});
|
||||
|
||||
const head = (document: BlockDocument, body: string, direction: "ltr" | "rtl") => {
|
||||
const props = document.root.props as Record<string, unknown>;
|
||||
const textColor = escapeHtml(props.textColor ?? "#111827");
|
||||
const linkColor = escapeHtml(props.linkColor ?? "#2563eb");
|
||||
const fontFamily = escapeHtml(props.fontFamily ?? "Arial, sans-serif");
|
||||
return `<!doctype html><html lang="${escapeHtml(document.meta.lang)}" dir="${direction}"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="x-apple-disable-message-reformatting"><meta name="color-scheme" content="light dark"><title>${escapeHtml(document.meta.subject)}</title><style>a{color:${linkColor}}@media only screen and (max-width:480px){.wrn-email{width:100%!important}.wrn-columns{display:block!important}.wrn-column{display:block!important;width:100%!important}}</style></head><body style="margin:0;padding:0;color:${textColor};font-family:${fontFamily};">${document.meta.preheader ? `<div style="display:none;max-height:0;overflow:hidden;opacity:0;">${escapeHtml(document.meta.preheader)}</div>` : ""}${body}</body></html>`;
|
||||
};
|
||||
export { emailKind } from "./browser.ts";
|
||||
import { emailKind, emailHtmlHead as head } from "./browser.ts";
|
||||
const ampHead = (document: BlockDocument, body: string, direction: "ltr" | "rtl") => {
|
||||
const layoutCss = (node: BlockDocument["root"]): string => ampLayoutCss(node, String(document.root.props.linkColor ?? "#2563eb")) + Object.values(node.slots).flat().map(layoutCss).join("");
|
||||
const props = document.root.props as Record<string, unknown>;
|
||||
|
||||
Reference in new issue
Block a user