224 lines
12 KiB
JavaScript
224 lines
12 KiB
JavaScript
import mjml2html from 'mjml'
|
|
|
|
function getPath(data, path) {
|
|
return String(path || '').split('.').filter(Boolean).reduce((value, key) => value?.[key], data)
|
|
}
|
|
|
|
export function escapeHtml(value) {
|
|
return String(value ?? '')
|
|
.replaceAll('&', '&')
|
|
.replaceAll('<', '<')
|
|
.replaceAll('>', '>')
|
|
.replaceAll('"', '"')
|
|
.replaceAll("'", ''')
|
|
}
|
|
|
|
export function interpolate(input, data) {
|
|
return String(input ?? '').replace(/{{\s*([\w.[\]-]+)\s*}}/g, (_, path) => {
|
|
const normalized = path.replace(/\[(\d+)\]/g, '.$1')
|
|
const value = getPath(data, normalized)
|
|
return value == null ? '' : String(value)
|
|
})
|
|
}
|
|
|
|
function safeUrl(input, data) {
|
|
const url = interpolate(input, data).trim()
|
|
return /^(https?:|mailto:)/i.test(url) ? url : '#'
|
|
}
|
|
|
|
function safeHex(value, fallback) {
|
|
const color = String(value || '').trim()
|
|
return /^#[0-9a-f]{3}([0-9a-f]{3})?$/i.test(color) ? color : fallback
|
|
}
|
|
|
|
function safeNumber(value, fallback, min, max) {
|
|
const number = Number(value)
|
|
if (!Number.isFinite(number)) return fallback
|
|
return Math.min(max, Math.max(min, number))
|
|
}
|
|
|
|
function safeAlign(value) {
|
|
return ['left', 'center', 'right'].includes(value) ? value : 'left'
|
|
}
|
|
|
|
function safeFont(value) {
|
|
const font = String(value || '')
|
|
const allowed = ['Arial', 'Helvetica', 'Verdana', 'Georgia', 'Times New Roman', 'system-ui']
|
|
return allowed.includes(font) ? font : 'Arial'
|
|
}
|
|
|
|
function themeOf(template) {
|
|
const theme = template?.theme || {}
|
|
return {
|
|
backgroundColor: safeHex(theme.backgroundColor, '#f8fafc'),
|
|
surfaceColor: safeHex(theme.surfaceColor, '#ffffff'),
|
|
textColor: safeHex(theme.textColor, '#172033'),
|
|
mutedColor: safeHex(theme.mutedColor, '#64748b'),
|
|
accentColor: safeHex(theme.accentColor, '#111827'),
|
|
buttonTextColor: safeHex(theme.buttonTextColor, '#ffffff'),
|
|
borderColor: safeHex(theme.borderColor, '#dbe2ea'),
|
|
borderRadius: safeNumber(theme.borderRadius, 12, 0, 32),
|
|
pagePadding: safeNumber(theme.pagePadding, 18, 0, 40),
|
|
fontFamily: safeFont(theme.fontFamily),
|
|
pageBackgroundImage: safeUrl(theme.pageBackgroundImage, {}),
|
|
borderImage: safeUrl(theme.borderImage, {})
|
|
}
|
|
}
|
|
|
|
function safeFit(value) {
|
|
return ['contain', 'cover', 'fill'].includes(value) ? value : 'contain'
|
|
}
|
|
|
|
function safeVariant(block) {
|
|
const explicit = String(block?.props?.variant || '').toLowerCase()
|
|
if (['logo', 'hero', 'image'].includes(explicit)) return explicit
|
|
const marker = `${block?.id || ''} ${block?.props?.alt || ''}`.toLowerCase()
|
|
if (marker.includes('logo') || marker.includes('mark')) return 'logo'
|
|
if (marker.includes('hero') || marker.includes('banner')) return 'hero'
|
|
return 'image'
|
|
}
|
|
|
|
function reportBlockStyle(block, theme) {
|
|
const style = block?.style || {}
|
|
const breakBefore = style.pageBreakBefore === true ? 'page' : 'auto'
|
|
const breakAfter = style.pageBreakAfter === true ? 'page' : (style.keepWithNext === true ? 'avoid-page' : 'auto')
|
|
const breakInside = style.allowPageBreak === true ? 'auto' : 'avoid-page'
|
|
const rules = [
|
|
`background:${safeHex(style.backgroundColor, 'transparent')}`,
|
|
`color:${safeHex(style.textColor, theme.textColor)}`,
|
|
`border-color:${safeHex(style.borderColor, theme.borderColor)}`,
|
|
`border-width:${safeNumber(style.borderWidth, 0, 0, 8)}px`,
|
|
'border-style:solid',
|
|
`border-radius:${safeNumber(style.borderRadius, theme.borderRadius, 0, 32)}px`,
|
|
`padding:${safeNumber(style.padding, 0, 0, 48)}px`,
|
|
`text-align:${safeAlign(style.align)}`,
|
|
`break-before:${breakBefore}`,
|
|
`break-after:${breakAfter}`,
|
|
`break-inside:${breakInside}`,
|
|
`page-break-inside:${breakInside === 'avoid-page' ? 'avoid' : 'auto'}`
|
|
]
|
|
return rules.join(';')
|
|
}
|
|
|
|
function imageStyle(block, theme) {
|
|
const style = block?.style || {}
|
|
const variant = safeVariant(block)
|
|
const defaults = variant === 'logo'
|
|
? { maxWidth: 110, maxHeight: 72, fit: 'contain' }
|
|
: variant === 'hero'
|
|
? { maxWidth: 999, maxHeight: 260, fit: 'cover' }
|
|
: { maxWidth: 999, maxHeight: 340, fit: 'contain' }
|
|
|
|
const maxWidth = safeNumber(style.maxWidth ?? block?.props?.maxWidth, defaults.maxWidth, 24, 999)
|
|
const maxHeight = safeNumber(style.maxHeight ?? block?.props?.maxHeight, defaults.maxHeight, 24, 900)
|
|
const width = style.width ?? block?.props?.width
|
|
const widthRule = width == null || width === '' ? 'width:auto' : `width:${safeNumber(width, maxWidth, 24, 999)}px`
|
|
const fit = safeFit(style.fit ?? block?.props?.fit ?? defaults.fit)
|
|
const radius = safeNumber(style.borderRadius, theme.borderRadius, 0, 32)
|
|
|
|
return [
|
|
widthRule,
|
|
`max-width:min(100%,${maxWidth}px)`,
|
|
`max-height:${maxHeight}px`,
|
|
`object-fit:${fit}`,
|
|
`border-radius:${radius}px`,
|
|
'display:inline-block'
|
|
].join(';')
|
|
}
|
|
|
|
function wrapReportBlock(block, theme, html) {
|
|
const variant = block?.type === 'image' ? ` image-${safeVariant(block)}` : ''
|
|
return `<div class="block${variant}" style="${reportBlockStyle(block, theme)}">${html}</div>`
|
|
}
|
|
|
|
function renderTable(block, data) {
|
|
const rows = getPath(data, block.props?.rowsPath) || []
|
|
const columns = Array.isArray(block.props?.columns) ? block.props.columns : []
|
|
if (!Array.isArray(rows)) return ''
|
|
return `<div class="table-wrap"><table><thead><tr>${columns.map(c => `<th>${escapeHtml(c.label)}</th>`).join('')}</tr></thead><tbody>${rows.map(row => `<tr>${columns.map(c => `<td>${escapeHtml(getPath(row, c.key))}</td>`).join('')}</tr>`).join('')}</tbody></table></div>`
|
|
}
|
|
|
|
function blockHtml(block, data, theme) {
|
|
const p = block.props || {}
|
|
let html = ''
|
|
switch (block.type) {
|
|
case 'heading':
|
|
html = `<h2>${escapeHtml(interpolate(p.text, data))}</h2>`
|
|
break
|
|
case 'text':
|
|
html = `<p>${escapeHtml(interpolate(p.text, data))}</p>`
|
|
break
|
|
case 'kpi':
|
|
html = `<div class="kpi"><span>${escapeHtml(interpolate(p.label, data))}</span><strong>${escapeHtml(interpolate(p.value, data))}</strong></div>`
|
|
break
|
|
case 'button':
|
|
html = `<p><a class="button" href="${escapeHtml(safeUrl(p.url, data))}">${escapeHtml(interpolate(p.text, data))}</a></p>`
|
|
break
|
|
case 'image':
|
|
html = `<img class="image" style="${imageStyle(block, theme)}" src="${escapeHtml(safeUrl(p.url, data))}" alt="${escapeHtml(interpolate(p.alt, data))}" />`
|
|
break
|
|
case 'divider':
|
|
html = '<hr />'
|
|
break
|
|
case 'table':
|
|
html = renderTable(block, data)
|
|
break
|
|
default:
|
|
return ''
|
|
}
|
|
return wrapReportBlock(block, theme, html)
|
|
}
|
|
|
|
export function renderReportHtml(template, data = {}) {
|
|
const blocks = template?.blocks || []
|
|
const theme = themeOf(template)
|
|
const backgroundImage = theme.pageBackgroundImage === '#' ? 'none' : `url("${escapeHtml(theme.pageBackgroundImage)}")`
|
|
const borderImage = theme.borderImage === '#' ? 'none' : `url("${escapeHtml(theme.borderImage)}") 30 stretch`
|
|
|
|
return `<!doctype html>
|
|
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<style>
|
|
@page{size:A4;margin:12mm}*{box-sizing:border-box}html,body{min-height:100%}body{font:${15}px/1.45 ${theme.fontFamily},sans-serif;color:${theme.textColor};margin:0;background:${theme.backgroundColor};background-image:${backgroundImage};background-size:cover;background-position:center;background-repeat:repeat-y;-webkit-print-color-adjust:exact;print-color-adjust:exact}.document{min-height:calc(297mm - 24mm);background:${theme.surfaceColor};padding:${theme.pagePadding}px;border:${theme.borderImage === '#' ? 0 : 10}px solid transparent;border-image:${borderImage};border-radius:${theme.borderRadius}px}.block{margin:0 0 10px;break-inside:avoid-page;page-break-inside:avoid}.block:last-child{margin-bottom:0}.image-logo{margin-bottom:6px}.image-hero{margin-top:2px;margin-bottom:10px}h2{font-size:23px;line-height:1.2;margin:0;color:inherit}p{margin:0}.kpi{border:1px solid ${theme.borderColor};border-radius:${theme.borderRadius}px;padding:12px 14px;display:flex;justify-content:space-between;gap:16px;background:${theme.surfaceColor}}.kpi span{color:${theme.mutedColor}}.kpi strong{font-size:18px}.button{display:inline-block;background:${theme.accentColor};color:${theme.buttonTextColor};text-decoration:none;padding:10px 16px;border-radius:${theme.borderRadius}px}.image{height:auto;vertical-align:middle}hr{border:0;border-top:1px solid ${theme.borderColor};margin:10px 0}.table-wrap{overflow:hidden;border:1px solid ${theme.borderColor};border-radius:${theme.borderRadius}px;break-inside:avoid-page;page-break-inside:avoid}table{border-collapse:collapse;width:100%;font-size:13px}thead{display:table-header-group}tr{break-inside:avoid-page;page-break-inside:avoid}th,td{padding:8px 10px;text-align:left;border-bottom:1px solid ${theme.borderColor}}th{background:${theme.backgroundColor}}
|
|
</style></head><body><main class="document">${blocks.map(block => blockHtml(block, data, theme)).join('\n')}</main></body></html>`
|
|
}
|
|
|
|
function emailBlock(block, data, theme) {
|
|
const p = block.props || {}
|
|
const style = block.style || {}
|
|
const padding = `${safeNumber(style.padding, 0, 0, 48)}px`
|
|
const align = safeAlign(style.align)
|
|
const color = safeHex(style.textColor, theme.textColor)
|
|
const backgroundColor = safeHex(style.backgroundColor, theme.surfaceColor)
|
|
const borderColor = safeHex(style.borderColor, theme.borderColor)
|
|
const borderWidth = safeNumber(style.borderWidth, 0, 0, 8)
|
|
const radius = safeNumber(style.borderRadius, theme.borderRadius, 0, 32)
|
|
const common = `padding="${padding}" align="${align}" color="${color}"`
|
|
|
|
switch (block.type) {
|
|
case 'heading':
|
|
return `<mj-text ${common} font-size="24px" font-weight="700" container-background-color="${backgroundColor}">${escapeHtml(interpolate(p.text, data))}</mj-text>`
|
|
case 'text':
|
|
return `<mj-text ${common} container-background-color="${backgroundColor}">${escapeHtml(interpolate(p.text, data))}</mj-text>`
|
|
case 'kpi':
|
|
return `<mj-text padding="${padding}" color="${theme.mutedColor}" container-background-color="${backgroundColor}">${escapeHtml(interpolate(p.label, data))}</mj-text><mj-text padding="0 ${padding} ${padding}" color="${color}" font-size="22px" font-weight="700" container-background-color="${backgroundColor}">${escapeHtml(interpolate(p.value, data))}</mj-text>`
|
|
case 'button':
|
|
return `<mj-button background-color="${safeHex(style.backgroundColor, theme.accentColor)}" color="${safeHex(style.textColor, theme.buttonTextColor)}" border-radius="${radius}px" href="${escapeHtml(safeUrl(p.url, data))}">${escapeHtml(interpolate(p.text, data))}</mj-button>`
|
|
case 'image':
|
|
return `<mj-image padding="${padding}" border="${borderWidth}px solid ${borderColor}" border-radius="${radius}px" src="${escapeHtml(safeUrl(p.url, data))}" alt="${escapeHtml(interpolate(p.alt, data))}" />`
|
|
case 'divider':
|
|
return `<mj-divider border-color="${borderColor}" border-width="${Math.max(1, borderWidth)}px" />`
|
|
default:
|
|
return '<mj-text color="#64748b">This block is available in report output only.</mj-text>'
|
|
}
|
|
}
|
|
|
|
export function renderEmailHtml(template, data = {}) {
|
|
const theme = themeOf(template)
|
|
const body = (template?.blocks || []).map(block => emailBlock(block, data, theme)).join('\n')
|
|
const backgroundUrl = theme.pageBackgroundImage === '#' ? '' : ` background-url="${escapeHtml(theme.pageBackgroundImage)}" background-size="cover" background-repeat="no-repeat"`
|
|
const mjml = `<mjml><mj-head><mj-attributes><mj-all font-family="${theme.fontFamily}, sans-serif" /><mj-text font-size="15px" line-height="1.5" color="${theme.textColor}" /></mj-attributes></mj-head><mj-body background-color="${theme.backgroundColor}"><mj-section background-color="${theme.surfaceColor}" padding="${theme.pagePadding}px"${backgroundUrl}><mj-column>${body}</mj-column></mj-section></mj-body></mjml>`
|
|
const result = mjml2html(mjml, { validationLevel: 'soft' })
|
|
if (result.errors?.length) console.warn('MJML warnings', result.errors)
|
|
return result.html
|
|
}
|