Skip to content

perf(homepage): reduce artifact JSON escaping #73

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
VrianCao merged 1 commit into from
Apr 14, 2026
+20 −20
Merged

perf(homepage): reduce artifact JSON escaping #73

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 20 additions & 20 deletions apps/worker/src/snapshots/public-homepage.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,10 +130,10 @@ function buildUptimeStripSvg(
const x = index * (barWidth + gap);
const fill = uptimeFillFromMilli(strip.uptime_pct_milli[index]);
rects.push(
`<rect x="${x}" width="${barWidth}" height="${height}" rx="1" fill="${fill}"/>`,
`<rect x='${x}' width='${barWidth}' height='${height}' rx='1' fill='${fill}'/>`,
);
}
return `<svg class="usv" viewBox="0 0 ${width} ${height}" preserveAspectRatio="none" aria-hidden="true">${rects.join('')}</svg>`;
return `<svg class='usv' viewBox='0 0 ${width} ${height}' preserveAspectRatio='none' aria-hidden='true'>${rects.join('')}</svg>`;
}

function buildHeartbeatStripSvg(
Expand All @@ -156,10 +156,10 @@ function buildHeartbeatStripSvg(
);
const y = height - barHeight;
rects.push(
`<rect x="${x}" y="${y}" width="${barWidth}" height="${barHeight}" rx="1" fill="${heartbeatFillFromCode(strip.status_codes[index])}"/>`,
`<rect x='${x}' y='${y}' width='${barWidth}' height='${barHeight}' rx='1' fill='${heartbeatFillFromCode(strip.status_codes[index])}'/>`,
);
}
return `<svg class="usv" viewBox="0 0 ${width} ${height}" preserveAspectRatio="none" aria-hidden="true">${rects.join('')}</svg>`;
return `<svg class='usv' viewBox='0 0 ${width} ${height}' preserveAspectRatio='none' aria-hidden='true'>${rects.join('')}</svg>`;
}

function renderIncidentCard(
Expand All @@ -170,10 +170,10 @@ function renderIncidentCard(
incident.impact === 'major' || incident.impact === 'critical' ? 'down' : 'paused';

const parts: string[] = [
`<article class="card"><div class="row"><h4 class="mn">${escapeHtml(incident.title)}</h4><span class="sb sb-${impactVariant}">${escapeHtml(incident.impact)}</span></div><div class="ft">${formatTimestamp(incident.started_at)}</div>`,
`<article class='card'><div class='row'><h4 class='mn'>${escapeHtml(incident.title)}</h4><span class='sb sb-${impactVariant}'>${escapeHtml(incident.impact)}</span></div><div class='ft'>${formatTimestamp(incident.started_at)}</div>`,
];
if (incident.message) {
parts.push(`<p class="bt">${escapeHtml(incident.message)}</p>`);
parts.push(`<p class='bt'>${escapeHtml(incident.message)}</p>`);
}
parts.push('</article>');
return parts.join('');
Expand All @@ -194,13 +194,13 @@ function renderMaintenanceCard(
}

const parts: string[] = [
`<article class="card"><div><h4 class="mn">${escapeHtml(window.title)}</h4><div class="ft">${formatTimestamp(window.starts_at)} - ${formatTimestamp(window.ends_at)}</div></div>`,
`<article class='card'><div><h4 class='mn'>${escapeHtml(window.title)}</h4><div class='ft'>${formatTimestamp(window.starts_at)} - ${formatTimestamp(window.ends_at)}</div></div>`,
];
if (affected.length > 0) {
parts.push(`<div class="bt">Affected: ${affected.join(', ')}</div>`);
parts.push(`<div class='bt'>Affected: ${affected.join(', ')}</div>`);
}
if (window.message) {
parts.push(`<p class="bt">${escapeHtml(window.message)}</p>`);
parts.push(`<p class='bt'>${escapeHtml(window.message)}</p>`);
}
parts.push('</article>');
return parts.join('');
Expand Down Expand Up @@ -247,12 +247,12 @@ function renderPreload(
: 'Never checked';

monitorCardsParts.push(
`<article class="card"><div class="row"><div class="lhs"><span class="dot dot-${status}"></span><div class="ut"><div class="mn">${escapeHtml(monitor.name)}</div><div class="mt">${escapeHtml(monitor.type)}</div></div></div><div class="rhs"><span class="up">${escapeHtml(uptimePct)}</span><span class="sb sb-${status}">${statusLabel}</span></div></div><div><div class="lbl">Availability (30d)</div><div class="strip">${buildUptimeStripSvg(monitor.uptime_day_strip)}</div></div><div><div class="lbl">Recent checks</div><div class="strip">${buildHeartbeatStripSvg(monitor.heartbeat_strip)}</div></div><div class="ft">${lastCheckedLabel}</div></article>`,
`<article class='card'><div class='row'><div class='lhs'><span class='dot dot-${status}'></span><div class='ut'><div class='mn'>${escapeHtml(monitor.name)}</div><div class='mt'>${escapeHtml(monitor.type)}</div></div></div><div class='rhs'><span class='up'>${escapeHtml(uptimePct)}</span><span class='sb sb-${status}'>${statusLabel}</span></div></div><div><div class='lbl'>Availability (30d)</div><div class='strip'>${buildUptimeStripSvg(monitor.uptime_day_strip)}</div></div><div><div class='lbl'>Recent checks</div><div class='strip'>${buildHeartbeatStripSvg(monitor.heartbeat_strip)}</div></div><div class='ft'>${lastCheckedLabel}</div></article>`,
);
}

groupedMonitorsParts.push(
`<section class="sg"><div class="sgh"><h4 class="sgt">${escapeHtml(groupName)}</h4><span class="sgc">${groupMonitors.length}</span></div><div class="grid">${monitorCardsParts.join('')}</div></section>`,
`<section class='sg'><div class='sgh'><h4 class='sgt'>${escapeHtml(groupName)}</h4><span class='sgc'>${groupMonitors.length}</span></div><div class='grid'>${monitorCardsParts.join('')}</div></section>`,
);
}

Expand All @@ -274,7 +274,7 @@ function renderPreload(
}
}

maintenanceSection = `<section class="sec"><h3 class="sh">Scheduled Maintenance</h3>${activeCards.length > 0 ? `<div class="st">${activeCards.join('')}</div>` : ''}${upcomingCards.length > 0 ? `<div class="st">${upcomingCards.join('')}</div>` : ''}</section>`;
maintenanceSection = `<section class='sec'><h3 class='sh'>Scheduled Maintenance</h3>${activeCards.length > 0 ? `<div class='st'>${activeCards.join('')}</div>` : ''}${upcomingCards.length > 0 ? `<div class='st'>${upcomingCards.join('')}</div>` : ''}</section>`;
}

let incidentSection = '';
Expand All @@ -283,26 +283,26 @@ function renderPreload(
for (const incident of snapshot.active_incidents) {
incidentCards.push(renderIncidentCard(incident, formatTimestamp));
}
incidentSection = `<section class="sec"><h3 class="sh">Active Incidents</h3><div class="st">${incidentCards.join('')}</div></section>`;
incidentSection = `<section class='sec'><h3 class='sh'>Active Incidents</h3><div class='st'>${incidentCards.join('')}</div></section>`;
}

const incidentHistory = snapshot.resolved_incident_preview
? renderIncidentCard(snapshot.resolved_incident_preview, formatTimestamp)
: '<div class="card">No past incidents</div>';
: `<div class='card'>No past incidents</div>`;
const maintenanceHistory = snapshot.maintenance_history_preview
? monitorNames
? renderMaintenanceCard(snapshot.maintenance_history_preview, monitorNames, formatTimestamp)
: '<div class="card">No past maintenance</div>'
: '<div class="card">No past maintenance</div>';
: `<div class='card'>No past maintenance</div>`
: `<div class='card'>No past maintenance</div>`;
const descriptionHtml = siteDescription
? `<div class="ud">${escapeHtml(siteDescription)}</div>`
? `<div class='ud'>${escapeHtml(siteDescription)}</div>`
: '';
const hiddenMonitorMessage =
hiddenMonitorCount > 0
? `<div class="card ft">${hiddenMonitorCount} more services will appear after the app finishes loading.</div>`
? `<div class='card ft'>${hiddenMonitorCount} more services will appear after the app finishes loading.</div>`
: '';

return `<div class="hp"><header class="uh"><div class="uw uhw"><div class="ut"><div class="un">${escapeHtml(siteTitle)}</div>${descriptionHtml}</div><span class="sb sb-${overall}">${escapeHtml(overall)}</span></div></header><main class="uw um"><section class="bn"><div class="bt">${escapeHtml(bannerTitle)}</div><div class="bu">Updated: ${formatTimestamp(generatedAt)}</div></section>${maintenanceSection}${incidentSection}<section class="sec"><h3 class="sh">Services</h3>${groupedMonitorsParts.join('')}${hiddenMonitorMessage}</section><section class="sec ih"><div><h3 class="sh">Incident History</h3>${incidentHistory}</div><div><h3 class="sh">Maintenance History</h3>${maintenanceHistory}</div></section></main></div>`;
return `<div class='hp'><header class='uh'><div class='uw uhw'><div class='ut'><div class='un'>${escapeHtml(siteTitle)}</div>${descriptionHtml}</div><span class='sb sb-${overall}'>${escapeHtml(overall)}</span></div></header><main class='uw um'><section class='bn'><div class='bt'>${escapeHtml(bannerTitle)}</div><div class='bu'>Updated: ${formatTimestamp(generatedAt)}</div></section>${maintenanceSection}${incidentSection}<section class='sec'><h3 class='sh'>Services</h3>${groupedMonitorsParts.join('')}${hiddenMonitorMessage}</section><section class='sec ih'><div><h3 class='sh'>Incident History</h3>${incidentHistory}</div><div><h3 class='sh'>Maintenance History</h3>${maintenanceHistory}</div></section></main></div>`;
}

export function buildHomepageRenderArtifact(
Expand Down Expand Up @@ -337,7 +337,7 @@ export function buildHomepageRenderArtifact(

return {
generated_at: snapshot.generated_at,
preload_html: `<div id="uptimer-preload">${renderPreload(bootstrapSnapshot, allMonitorNames)}</div>`,
preload_html: `<div id='uptimer-preload'>${renderPreload(bootstrapSnapshot, allMonitorNames)}</div>`,
snapshot: bootstrapSnapshot,
meta_title: metaTitle,
meta_description: metaDescription,
Expand Down
Loading