// The probe's alert as quarry's email card (internal/markup/emaildoc.go is
// the original; this is the same design, hand-carried, because the probe
// runs on Cloudflare and must not depend on the forge it watches). An
// application email: the Q logo, an image the forge serves, and the word
// QUARRY as styled text. The forge may be the thing that is down, so the
// logo may not load; the word is text and always does.
const HOME = "https://zeitforge.app";
const FONT = "'IBM Plex Sans',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif";
const FONT_WM = "'Iosevka Fixed','Iosevka','Arial Narrow','Roboto Condensed','Helvetica Neue Condensed',sans-serif";
const MONO = "'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace";
export function esc(s) {
return String(s).replace(/[&<>"']/g, (c) => ({ "&": "&", "<": "<", ">": ">", '"': """, "'": "'" })[c]);
}
// Image addresses carry their content hash, which Gmail's image proxy needs
// to see change when an image does. The probe cannot ask the forge, so the
// hashes are text here; the forge's tests fail when they fall behind.
const LOGO = `${HOME}/apple-touch-icon.png?v=93c15942`;
const BADGE = `${HOME}/badge.png?v=8fab438c`;
const BADGE_SM = `${HOME}/badge-sm.png?v=0a386eb9`;
// wordmark is QUARRY as text for every client, and the badge image for
// Gmail only (it recolours text without saying so, and never images).
// Whichever is hidden is display:none, so a screen reader hears one.
function wordmark(size, w, h, badge) {
const hidden = "display:none;max-height:0;overflow:hidden;mso-hide:all;";
return `<span class="q-word q-wm-t" style="font-family:${FONT_WM};font-size:${size}px;line-height:${size}px;font-weight:600;text-transform:uppercase;letter-spacing:0;color:#282828;">QUARRY</span>` +
`<img class="q-wm-b" src="${badge}" alt="QUARRY" width="${w}" height="${h}" style="${hidden}width:${w}px;height:${h}px;border:0;border-radius:${Math.round(h * 6 / 28)}px;">`;
}
// rows: [label, value] pairs shown as a small table; open: {label, url}.
export function probeCard({ subject, context, rows, open, why }) {
const facts = rows
.map(
([k, v], i) =>
`<tr><td class="q-muted" style="padding:5px 16px 5px 0;font-size:13px;color:#665c54;">${esc(k)}</td>` +
`<td style="padding:5px 0;font-family:${MONO};font-size:13px;">${esc(v)}</td></tr>`,
)
.join("");
return `<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/iosevka/600.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;600;700&family=IBM+Plex+Mono&display=swap">
<title>${esc(subject)}</title>
<style>
@media (prefers-color-scheme: dark) {
.q-page { background:#141617 !important; }
.q-card { background:#1d2021 !important; border-color:#504945 !important; }
.q-text, .q-text td, .q-text p { color:#f0ece4 !important; }
.q-muted { color:#bdb6ab !important; }
.q-rule { border-color:#504945 !important; }
.q-a { color:#d99058 !important; }
.q-word { color:#f0ece4 !important; }
.q-btn { background:#d99058 !important; color:#1d2021 !important; }
}
[data-ogsc] .q-word { color:#f0ece4 !important; }
/* Gmail only: the badge, which reads in both its modes, in place of the Q logo and the text. */
u + .body .q-lgtd, u + .body .q-wm-t { display:none !important; }
u + .body .q-wm-b { display:block !important; max-height:none !important; overflow:visible !important; }
</style>
</head>
<body class="body" style="margin:0;padding:0;">
<table role="presentation" class="q-page" width="100%" cellpadding="0" cellspacing="0" style="background:#f4f4f4;padding:24px 12px;">
<tr><td align="center">
<table role="presentation" class="q-card" width="100%" cellpadding="0" cellspacing="0" style="max-width:600px;background:#fffcf5;border:1px solid #d5c4a1;border-radius:10px;">
<tr><td class="q-rule" style="padding:18px 24px 14px;border-bottom:1px solid #e6dcc0;font-family:${FONT};">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0"><tr>
<td><table role="presentation" cellpadding="0" cellspacing="0"><tr>
<td class="q-lgtd" style="vertical-align:middle;padding-right:8px;line-height:0;font-size:0;"><img src="${LOGO}" alt="" width="28" height="28" style="display:block;width:28px;height:28px;border:0;border-radius:6px;"></td>
<td style="vertical-align:middle;line-height:0;font-size:0;">${wordmark(36, 92, 28, BADGE)}</td>
</tr></table></td>
<td align="right" class="q-muted" style="font-size:12px;color:#665c54;">probe</td>
</tr></table>
</td></tr>
<tr><td style="padding:18px 24px 4px;font-family:${FONT};">
<div class="q-text" style="font-size:15px;color:#282828;">${context}</div>
</td></tr>
<tr><td class="q-text" style="padding:12px 24px 8px;font-family:${FONT};font-size:15px;line-height:1.55;color:#282828;">
<table role="presentation" cellpadding="0" cellspacing="0" style="margin:0 0 12px;">${facts}</table>
</td></tr>
<tr><td style="padding:6px 24px 22px;font-family:${FONT};">
<a class="q-btn" href="${esc(open.url)}" style="display:inline-block;background:#a04412;color:#fffcf5;text-decoration:none;font-weight:600;font-size:14px;padding:9px 16px;border-radius:6px;">${esc(open.label)}</a>
</td></tr>
<tr><td class="q-rule q-muted" style="padding:14px 24px 18px;border-top:1px solid #e6dcc0;font-family:${FONT};font-size:12px;line-height:1.5;color:#665c54;">
${esc(why)}
<table role="presentation" cellpadding="0" cellspacing="0" style="margin-top:8px;"><tr>
<td class="q-lgtd" style="vertical-align:middle;padding-right:6px;line-height:0;font-size:0;"><img src="${LOGO}" alt="" width="16" height="16" style="display:block;width:16px;height:16px;border:0;border-radius:4px;"></td>
<td style="vertical-align:middle;padding-right:5px;line-height:0;font-size:0;">${wordmark(18, 59, 18, BADGE_SM)}</td>
<td class="q-muted" style="vertical-align:middle;font-size:12px;line-height:1.5;color:#665c54;">· <a class="q-a" href="${HOME}" style="color:#a04412;">zeitforge.app</a></td>
</tr></table>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html>
`;
}