@wervt/nuxt 0.2.14 → 0.2.16

package/dist/runtime/email/components.js

@@ -0,0 +1,602 @@
+import { defineComponent, h, inject } from "vue";
+//#region src/runtime/email/components.ts
+/** The template's subject, handed to renderEmail() while rendering. */
+const SUBJECT_KEY = Symbol("wervt-email-subject");
+const emailTheme = {
+	page: "#fafafa",
+	card: "#ffffff",
+	border: "#e5e5e5",
+	rule: "#d4d4d4",
+	text: "#262626",
+	highlighted: "#0a0a0a",
+	muted: "#666666",
+	dimmed: "#8f8f8f",
+	accent: "#2f5bff",
+	accentSoft: "#eef2ff",
+	accentBorder: "#d6defe",
+	band: "#0a0b0f",
+	bandText: "#d4d7de",
+	bandDimmed: "#6b7080",
+	button: "#2f5bff",
+	buttonText: "#ffffff",
+	codeBackground: "#f6f8ff",
+	radius: "8px",
+	font: "Poppins, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
+	mono: "'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+	/** Where the logo images live. PNG, because Gmail and Outlook don't show SVG. */
+	assets: "https://wervt.app/email",
+	site: "https://wervt.app",
+	docs: "https://wervt.app/getting-started/introduction"
+};
+const t = emailTheme;
+const darkStyles = `
+:root { color-scheme: light dark; supported-color-schemes: light dark; }
+@media (prefers-color-scheme: dark) {
+  .wv-page { background: #0a0a0a !important; }
+  .wv-card { background: #111113 !important; }
+  .wv-foot { background: #0a0a0a !important; }
+  .wv-frame { border-color: #262626 !important; }
+  .wv-line { background: #262626 !important; }
+  .wv-mark { background: #6b6b6b !important; }
+  .wv-sep { color: #404040 !important; }
+  .wv-text { color: #e5e5e5 !important; }
+  .wv-strong { color: #fafafa !important; }
+  .wv-muted { color: #a1a1a1 !important; }
+  .wv-accent { color: #7c9bff !important; }
+  .wv-code { background: #151a2e !important; border-color: #26304f !important; color: #fafafa !important; }
+}
+[data-ogsc] .wv-text { color: #e5e5e5 !important; }
+[data-ogsc] .wv-strong { color: #fafafa !important; }
+[data-ogsc] .wv-muted { color: #a1a1a1 !important; }
+@media only screen and (max-width: 480px) {
+  .wv-pad { padding-left: 24px !important; padding-right: 24px !important; }
+  .wv-hero { font-size: 22px !important; line-height: 30px !important; }
+  .wv-codetext { font-size: 28px !important; letter-spacing: 6px !important; }
+}
+`;
+/**
+* The whole email: document, preheader, header with the logo, body and footer. Put it at the
+* root of every template.
+*
+* ```vue
+* <WervtEmail subject="Your code" app="kontor"> … </WervtEmail>
+* ```
+*/
+const WervtEmail = defineComponent({
+	name: "WervtEmail",
+	props: {
+		/** The email's subject line. */
+		subject: {
+			type: String,
+			required: true
+		},
+		/** The app that sends the mail, shown in the header and the footer. */
+		app: {
+			type: String,
+			default: "wervt"
+		},
+		/** The preview line inboxes show after the subject. */
+		preview: {
+			type: String,
+			default: ""
+		},
+		/** Replaces the footer's "Sent by <app> via wervt" line. */
+		footer: {
+			type: String,
+			default: ""
+		},
+		/** Why the recipient got this mail, shown small in the footer. */
+		reason: {
+			type: String,
+			default: ""
+		}
+	},
+	setup(props, { slots }) {
+		inject(SUBJECT_KEY, void 0)?.(props.subject);
+		return () => h("html", { lang: "en" }, [h("head", [
+			h("meta", { charset: "utf-8" }),
+			h("meta", {
+				name: "viewport",
+				content: "width=device-width, initial-scale=1"
+			}),
+			h("meta", {
+				name: "color-scheme",
+				content: "light dark"
+			}),
+			h("meta", {
+				name: "supported-color-schemes",
+				content: "light dark"
+			}),
+			h("title", props.subject),
+			h("link", {
+				rel: "stylesheet",
+				href: "https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap"
+			}),
+			h("style", { innerHTML: darkStyles })
+		]), h("body", {
+			class: "wv-page",
+			style: {
+				margin: 0,
+				padding: 0,
+				background: t.page
+			}
+		}, [props.preview ? h("div", {
+			class: "wervt-preheader",
+			style: {
+				display: "none",
+				overflow: "hidden",
+				maxHeight: 0,
+				maxWidth: 0,
+				opacity: 0,
+				lineHeight: "1px",
+				fontSize: "1px",
+				color: t.page
+			}
+		}, props.preview) : null, table({
+			width: "100%",
+			class: "wv-page",
+			style: { background: t.page }
+		}, [h("tr", [h("td", {
+			align: "center",
+			style: { padding: "0 12px" }
+		}, table({
+			width: "100%",
+			style: { maxWidth: "600px" }
+		}, [
+			stub(),
+			rule(true, none, {
+				color: t.band,
+				image: `url('${t.assets}/header.png') right top / 600px 100px no-repeat`
+			}),
+			framed(header(props.app), { padding: 0 }),
+			framed(accentLine(), { padding: 0 }),
+			framed(slots.default?.(), {
+				class: "wv-card wv-pad",
+				background: t.card,
+				padding: "36px 40px 20px",
+				fontFamily: t.font,
+				color: t.text
+			}),
+			rule(true, {
+				color: t.card,
+				class: "wv-card"
+			}, {
+				color: t.page,
+				class: "wv-foot"
+			}),
+			framed(footer(props), {
+				class: "wv-foot wv-pad",
+				background: t.page,
+				padding: "24px 40px 28px"
+			}),
+			rule(false, {
+				color: t.page,
+				class: "wv-foot"
+			}, none),
+			stub()
+		]))])])])]);
+	}
+});
+/** The dark band on top: the lockup over the dot grid, the sending app on the right. */
+function header(app) {
+	return table({
+		width: "100%",
+		bgcolor: t.band,
+		background: `${t.assets}/header.png`,
+		style: { background: `${t.band} url('${t.assets}/header.png') right -4px / 600px 100px no-repeat` }
+	}, [h("tr", [h("td", {
+		class: "wv-pad wervt-skip-text",
+		style: {
+			padding: "30px 40px",
+			verticalAlign: "middle"
+		}
+	}, h("a", {
+		href: t.site,
+		style: {
+			textDecoration: "none",
+			color: "#fafafa"
+		}
+	}, h("img", {
+		src: `${t.assets}/lockup-on-dark.png`,
+		width: 116,
+		height: 32,
+		alt: "wervt",
+		style: {
+			display: "block",
+			width: "116px",
+			height: "32px",
+			border: 0,
+			outline: "none",
+			fontFamily: t.font,
+			fontSize: "24px",
+			lineHeight: "32px",
+			fontWeight: 600,
+			letterSpacing: "-0.5px",
+			color: "#fafafa"
+		}
+	}))), app === "wervt" ? null : h("td", {
+		class: "wv-pad wervt-skip-text",
+		align: "right",
+		style: {
+			padding: "30px 40px",
+			verticalAlign: "middle"
+		}
+	}, table({ align: "right" }, [h("tr", [h("td", { style: {
+		border: "1px solid #2a2e38",
+		borderRadius: "999px",
+		background: "#12141b",
+		padding: "5px 12px",
+		fontFamily: t.mono,
+		fontSize: "12px",
+		lineHeight: "16px",
+		color: t.bandText,
+		whiteSpace: "nowrap"
+	} }, [h("span", { style: { color: "#5885ff" } }, "●"), `\u00A0\u00A0${app}`])])]))])]);
+}
+/** The landing page's headline gradient, as a hairline under the header. */
+function accentLine() {
+	return table({ width: "100%" }, [h("tr", [h("td", {
+		height: 2,
+		bgcolor: t.accent,
+		style: {
+			height: "2px",
+			fontSize: 0,
+			lineHeight: 0,
+			background: `${t.accent} linear-gradient(90deg, #60a5fa, ${t.accent} 45%, #a78bfa)`
+		}
+	})])]);
+}
+function footer(props) {
+	const sentBy = props.footer || (props.app === "wervt" ? "Sent by wervt" : `Sent by ${props.app} via wervt`);
+	const small = {
+		fontFamily: t.font,
+		fontSize: "12px",
+		lineHeight: "18px"
+	};
+	const link = {
+		color: t.muted,
+		textDecoration: "none"
+	};
+	return table({ width: "100%" }, [h("tr", [h("td", {
+		width: 40,
+		style: {
+			width: "40px",
+			verticalAlign: "top",
+			paddingTop: "2px"
+		}
+	}, h("img", {
+		src: `${t.assets}/mark-tile.png`,
+		width: 28,
+		height: 28,
+		alt: "",
+		style: {
+			display: "block",
+			width: "28px",
+			height: "28px",
+			border: 0,
+			borderRadius: "7px"
+		}
+	})), h("td", { style: { verticalAlign: "top" } }, [
+		h("p", {
+			class: "wv-strong",
+			style: {
+				...small,
+				margin: 0,
+				fontSize: "13px",
+				fontWeight: 500,
+				color: t.highlighted
+			}
+		}, sentBy),
+		props.reason ? h("p", {
+			class: "wv-muted",
+			style: {
+				...small,
+				margin: "4px 0 0",
+				color: t.muted
+			}
+		}, props.reason) : null,
+		h("p", {
+			class: "wv-muted",
+			style: {
+				...small,
+				margin: "10px 0 0",
+				fontFamily: t.mono,
+				fontSize: "11px",
+				color: t.dimmed
+			}
+		}, [
+			h("a", {
+				href: t.site,
+				class: "wv-muted",
+				style: link
+			}, "wervt.app"),
+			separator(),
+			h("a", {
+				href: t.docs,
+				class: "wv-muted",
+				style: link
+			}, "Docs")
+		])
+	])])]);
+}
+function separator() {
+	return h("span", {
+		class: "wv-sep",
+		style: { color: t.rule }
+	}, "\xA0\xA0/\xA0\xA0");
+}
+/** A row inside the frame: the hairlines run down both sides, like the landing page's sections. */
+function framed(children, style) {
+	const { class: className, ...rest } = style;
+	return h("tr", [h("td", { style: { padding: "0 4px" } }, table({ width: "100%" }, [h("tr", [h("td", {
+		class: ["wv-frame", className],
+		style: {
+			borderLeft: `1px solid ${t.border}`,
+			borderRight: `1px solid ${t.border}`,
+			...rest
+		}
+	}, children)])]))]);
+}
+/** The frame's sides fading out above and below, so it reads as part of a larger sheet. */
+function stub() {
+	return framed(h("div", { style: {
+		height: "28px",
+		lineHeight: "28px",
+		fontSize: 0
+	} }, "\xA0"), { padding: 0 });
+}
+const none = { color: "transparent" };
+/**
+* A horizontal rule across the frame, drawn as a 9px-high grid so the "+" marks can sit where it
+* crosses the sides. `above` and `below` paint the frame's inside around the line, so the
+* sections it separates start right at the line instead of 4px off.
+*/
+function rule(crosshairs, above, below) {
+	const mark = {
+		color: t.dimmed,
+		class: "wv-mark"
+	};
+	const line = {
+		color: t.border,
+		class: "wv-line"
+	};
+	const side = crosshairs ? mark : line;
+	const cell = (fill, width, height, colspan) => h("td", {
+		width,
+		height,
+		colspan,
+		bgcolor: fill === none ? void 0 : fill.color,
+		class: fill.class,
+		style: {
+			width: width === void 0 ? void 0 : `${width}px`,
+			height: `${height}px`,
+			fontSize: 0,
+			lineHeight: 0,
+			background: fill.image ? `${fill.color} ${fill.image}` : fill.color
+		}
+	});
+	const row = (fill, height) => h("tr", [
+		cell(none, 4, height),
+		cell(side, 1, height),
+		cell(fill, void 0, height, 3),
+		cell(side, 1, height),
+		cell(none, 4, height)
+	]);
+	const arm = crosshairs ? mark : line;
+	const crossing = h("tr", [
+		cell(crosshairs ? mark : none, 4, 1),
+		cell(side, 1, 1),
+		cell(arm, 4, 1),
+		cell(line, void 0, 1),
+		cell(arm, 4, 1),
+		cell(side, 1, 1),
+		cell(crosshairs ? mark : none, 4, 1)
+	]);
+	return h("tr", [h("td", table({ width: "100%" }, [
+		row(above, 4),
+		crossing,
+		row(below, 4)
+	]))]);
+}
+const EmailHeading = defineComponent({
+	name: "EmailHeading",
+	props: { 
+	/** A short label above the heading, in the landing page's mono eyebrow style. */
+eyebrow: {
+		type: String,
+		default: ""
+	} },
+	setup(props, { slots }) {
+		return () => [props.eyebrow ? h("p", {
+			class: "wv-accent",
+			style: {
+				margin: "0 0 10px",
+				fontFamily: t.mono,
+				fontSize: "12px",
+				lineHeight: "16px",
+				letterSpacing: "0.5px",
+				textTransform: "uppercase",
+				color: t.accent
+			}
+		}, props.eyebrow) : null, h("h1", {
+			class: "wv-strong wv-hero",
+			style: {
+				margin: "0 0 16px",
+				fontFamily: t.font,
+				fontSize: "26px",
+				lineHeight: "34px",
+				fontWeight: 600,
+				letterSpacing: "-0.6px",
+				color: t.highlighted
+			}
+		}, slots.default?.())];
+	}
+});
+const EmailText = defineComponent({
+	name: "EmailText",
+	setup(_, { slots }) {
+		return () => h("p", {
+			class: "wv-text",
+			style: {
+				margin: "0 0 16px",
+				fontFamily: t.font,
+				fontSize: "15px",
+				lineHeight: "24px",
+				color: t.text
+			}
+		}, slots.default?.());
+	}
+});
+/** Secondary text: hints, "ignore this if …". */
+const EmailMuted = defineComponent({
+	name: "EmailMuted",
+	setup(_, { slots }) {
+		return () => h("p", {
+			class: "wv-muted",
+			style: {
+				margin: "0 0 16px",
+				fontFamily: t.font,
+				fontSize: "13px",
+				lineHeight: "20px",
+				color: t.muted
+			}
+		}, slots.default?.());
+	}
+});
+const EmailLink = defineComponent({
+	name: "EmailLink",
+	props: { href: {
+		type: String,
+		required: true
+	} },
+	setup(props, { slots }) {
+		return () => h("a", {
+			href: props.href,
+			class: "wv-accent",
+			style: {
+				color: t.accent,
+				textDecoration: "underline"
+			}
+		}, slots.default?.() ?? props.href);
+	}
+});
+/** A call to action. Bulletproof: a table cell carries the background, so Outlook shows it too. */
+const EmailButton = defineComponent({
+	name: "EmailButton",
+	props: {
+		href: {
+			type: String,
+			required: true
+		},
+		/** `primary` is the landing page's blue; `neutral` the dashboard's black. */
+		color: {
+			type: String,
+			default: "primary"
+		}
+	},
+	setup(props, { slots }) {
+		return () => {
+			const background = props.color === "neutral" ? "#171717" : t.button;
+			return table({ style: { margin: "8px 0 24px" } }, [h("tr", [h("td", {
+				bgcolor: background,
+				style: {
+					background,
+					borderRadius: t.radius
+				}
+			}, h("a", {
+				href: props.href,
+				style: {
+					display: "inline-block",
+					padding: "12px 22px",
+					border: `1px solid ${background}`,
+					fontFamily: t.font,
+					fontSize: "14px",
+					fontWeight: 500,
+					lineHeight: "20px",
+					color: t.buttonText,
+					textDecoration: "none",
+					borderRadius: t.radius
+				}
+			}, [slots.default?.(), h("span", { class: "wervt-skip-text" }, "\xA0\xA0→")]))])]);
+		};
+	}
+});
+/** A one-time code, large and spaced so it reads (and copies) easily. */
+const EmailCode = defineComponent({
+	name: "EmailCode",
+	props: {
+		code: {
+			type: String,
+			required: true
+		},
+		/** A small line under the code, e.g. when it expires. */
+		caption: {
+			type: String,
+			default: ""
+		}
+	},
+	setup(props) {
+		return () => table({
+			width: "100%",
+			style: { margin: "8px 0 24px" }
+		}, [h("tr", [h("td", {
+			align: "center",
+			bgcolor: t.codeBackground,
+			class: "wv-code",
+			style: {
+				background: t.codeBackground,
+				border: `1px solid ${t.accentBorder}`,
+				borderRadius: "10px",
+				padding: props.caption ? "22px 16px 16px" : "22px 16px"
+			}
+		}, [h("div", {
+			class: "wv-strong wv-codetext",
+			style: {
+				fontFamily: t.mono,
+				fontSize: "36px",
+				lineHeight: "44px",
+				fontWeight: 600,
+				letterSpacing: "10px",
+				paddingLeft: "10px",
+				color: t.highlighted
+			}
+		}, props.code), props.caption ? h("div", {
+			class: "wv-muted",
+			style: {
+				marginTop: "8px",
+				fontFamily: t.mono,
+				fontSize: "12px",
+				lineHeight: "16px",
+				color: t.muted
+			}
+		}, props.caption) : null])])]);
+	}
+});
+const EmailDivider = defineComponent({
+	name: "EmailDivider",
+	setup() {
+		return () => h("hr", {
+			class: "wv-frame",
+			style: {
+				border: "none",
+				borderTop: `1px solid ${t.border}`,
+				margin: "24px 0"
+			}
+		});
+	}
+});
+function table(attrs, children) {
+	return h("table", {
+		role: "presentation",
+		cellpadding: 0,
+		cellspacing: 0,
+		border: 0,
+		...attrs,
+		style: {
+			borderCollapse: "collapse",
+			...attrs.style
+		}
+	}, children);
+}
+//#endregion
+export { EmailButton, EmailCode, EmailDivider, EmailHeading, EmailLink, EmailMuted, EmailText, SUBJECT_KEY, WervtEmail, emailTheme };

package/dist/runtime/email/index.d.ts

@@ -0,0 +1,3 @@
+import { EmailButton, EmailCode, EmailDivider, EmailHeading, EmailLink, EmailMuted, EmailText, WervtEmail, emailTheme } from "./components.js";
+import { EmailProps, RenderedEmail, renderEmail } from "./render.js";
+export { EmailButton, EmailCode, EmailDivider, EmailHeading, EmailLink, EmailMuted, type EmailProps, EmailText, type RenderedEmail, WervtEmail, emailTheme, renderEmail };

package/dist/runtime/email/index.js

@@ -0,0 +1,3 @@
+import { EmailButton, EmailCode, EmailDivider, EmailHeading, EmailLink, EmailMuted, EmailText, WervtEmail, emailTheme } from "./components.js";
+import { renderEmail } from "./render.js";
+export { EmailButton, EmailCode, EmailDivider, EmailHeading, EmailLink, EmailMuted, EmailText, WervtEmail, emailTheme, renderEmail };

package/dist/runtime/email/render.d.ts

@@ -0,0 +1,17 @@
+import { Component } from "vue";
+//#region src/runtime/email/render.d.ts
+export interface RenderedEmail {
+  subject: string;
+  html: string;
+  text: string;
+}
+/** The props a component declares, so templates are called with the right data. */
+export type EmailProps<T> = T extends (new () => {
+  $props: infer P;
+}) ? Omit<P, `on${string}`> : never;
+/**
+ * Renders an email template (a component with `<WervtEmail>` at its root) to HTML, a plain-text
+ * part and its subject.
+ */
+export declare function renderEmail<T extends Component>(template: T, props?: EmailProps<T>): Promise<RenderedEmail>;
+//#endregion

package/dist/runtime/email/render.js

@@ -0,0 +1,68 @@
+import { SUBJECT_KEY } from "./components.js";
+import { createSSRApp } from "vue";
+import { convert } from "html-to-text";
+import { renderToString } from "vue/server-renderer";
+//#region src/runtime/email/render.ts
+const DOCTYPE = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">";
+/**
+* Renders an email template (a component with `<WervtEmail>` at its root) to HTML, a plain-text
+* part and its subject.
+*/
+async function renderEmail(template, props) {
+	let subject = "";
+	const app = createSSRApp(template, props);
+	app.provide(SUBJECT_KEY, (value) => subject = value);
+	const body = (await renderToString(app)).replace(/<!--[\s\S]*?-->/g, "");
+	if (!subject) throw new Error("Email templates need <WervtEmail subject=\"…\"> at their root");
+	const html = `${DOCTYPE}${body}`;
+	return {
+		subject,
+		html,
+		text: toText(html)
+	};
+}
+function toText(html) {
+	return convert(html, {
+		wordwrap: 78,
+		selectors: [
+			{
+				selector: ".wervt-preheader",
+				format: "skip"
+			},
+			{
+				selector: ".wervt-skip-text",
+				format: "skip"
+			},
+			{
+				selector: "title",
+				format: "skip"
+			},
+			{
+				selector: "img",
+				format: "skip"
+			},
+			{
+				selector: "h1",
+				options: { uppercase: false }
+			},
+			{
+				selector: "a",
+				options: { hideLinkHrefIfSameAsText: true }
+			},
+			{
+				selector: "table",
+				format: "block"
+			},
+			{
+				selector: "tr",
+				format: "block"
+			},
+			{
+				selector: "td",
+				format: "block"
+			}
+		]
+	}).trim();
+}
+//#endregion
+export { renderEmail };

package/dist/runtime/server/email-preview.d.ts

@@ -0,0 +1,4 @@
+//#region src/runtime/server/email-preview.d.ts
+declare const _default: import("nuxt/server").EventHandler<Promise<Response>>;
+//#endregion
+export { _default as default };