← back to build-pages
commit page: diff +/- syntax highlighting (green add, red remove, muted file headers) + smoke
d1c2c50ad4412e6b0252bfedba985a4f2bf5e8f1 · 2026-05-13 14:29:09 -0700 · SteveStudio2
Files touched
M public/css/site.cssM server.jsM test/smoke.js
Diff
commit d1c2c50ad4412e6b0252bfedba985a4f2bf5e8f1
Author: SteveStudio2 <stevestudio2@SteveStacStudio.lan>
Date: Wed May 13 14:29:09 2026 -0700
commit page: diff +/- syntax highlighting (green add, red remove, muted file headers) + smoke
---
public/css/site.css | 8 ++++++++
server.js | 15 ++++++++++++++-
test/smoke.js | 1 +
3 files changed, 23 insertions(+), 1 deletion(-)
diff --git a/public/css/site.css b/public/css/site.css
index 61ff906..4ca73f5 100644
--- a/public/css/site.css
+++ b/public/css/site.css
@@ -110,6 +110,14 @@ h2 { font-size: 20px; font-weight: 700; margin: 36px 0 14px; letter-spacing: -0.
.bp-body { margin: 20px 0; }
.bp-body pre { background: var(--code-bg); white-space: pre-wrap; }
.bp-diff { font-size: 12px; max-height: 70vh; overflow: auto; }
+.bp-d-add { color: #1f7a30; background: rgba(31,122,48,0.08); display: block; }
+.bp-d-rm { color: #b14747; background: rgba(177,71,71,0.08); display: block; }
+.bp-d-h { color: var(--muted); font-weight: 600; display: block; }
+.bp-d-h2 { color: var(--link); display: block; }
+@media (prefers-color-scheme: dark) {
+ .bp-d-add { color: #5cd278; background: rgba(92,210,120,0.12); }
+ .bp-d-rm { color: #ff7373; background: rgba(255,115,115,0.12); }
+}
.bp-source { font-size: 12px; max-height: 80vh; overflow: auto; white-space: pre; }
@media (max-width: 640px) {
.bp-commits li { grid-template-columns: 1fr; gap: 2px; }
diff --git a/server.js b/server.js
index ee62227..ae6d0f0 100644
--- a/server.js
+++ b/server.js
@@ -162,6 +162,19 @@ function esc(s) {
return String(s).replace(/[&<>"']/g, c => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c]));
}
+// Wrap each line of an escaped diff with a class based on its first char so
+// CSS can color +/- lines distinctively. `+++/---/@@` are file/hunk headers,
+// not change lines. Operates on already-escaped output to avoid double-escape.
+function highlightDiff(escDiff) {
+ return escDiff.split('\n').map(line => {
+ if (line.startsWith('+++') || line.startsWith('---')) return `<span class="bp-d-h">${line}</span>`;
+ if (line.startsWith('@@')) return `<span class="bp-d-h2">${line}</span>`;
+ if (line.startsWith('+')) return `<span class="bp-d-add">${line}</span>`;
+ if (line.startsWith('-')) return `<span class="bp-d-rm">${line}</span>`;
+ return line;
+ }).join('\n');
+}
+
function shell(title, body, headExtra = '', meta = {}) {
const canonical = meta.canonical || 'https://projects.agentabrams.com/';
const desc = meta.desc || 'Live build journals for every project — every commit, every line of design rationale, searchable.';
@@ -495,7 +508,7 @@ app.get('/p/:slug/c/:hash', async (req, res, next) => {
<h2>Files touched</h2>
<ul class="bp-files">${c.files.map(f => `<li><code>${esc(f)}</code></li>`).join('')}</ul>
<h2>Diff</h2>
- <pre class="bp-diff">${esc(c.diff)}</pre>
+ <pre class="bp-diff">${highlightDiff(esc(c.diff))}</pre>
`, {
canonical: `https://projects.agentabrams.com/p/${req.params.slug}/c/${req.params.hash}`,
desc: `${c.subject} — commit in ${p.name}`,
diff --git a/test/smoke.js b/test/smoke.js
index e3767fb..1873fc3 100644
--- a/test/smoke.js
+++ b/test/smoke.js
@@ -123,6 +123,7 @@ function check(name, cond, hint = '') {
r = await fetch(`/p/butlr/c/${h}`);
check('commit: 200', r.status === 200);
check('commit: BreadcrumbList', /"@type":"BreadcrumbList"/.test(r.body));
+ check('commit: diff +/- highlighting', /bp-d-add|bp-d-rm/.test(r.body));
}
// 6c. perf budget — warm render of /p/butlr (cache warmed by the calls above)
← f727cc7 smoke: /healthz <50ms perf budget (regression guard for a no
·
back to build-pages
·
api/recent: fleet-wide most-recent commits, date-sorted + 3 86268fd →