fix: replace hardcoded #7161FF with {{brandAccent}} in digest email template #5
2 changed files with 76 additions and 2 deletions
|
|
@ -5,7 +5,7 @@
|
|||
<mj-style inline="inline">
|
||||
.header { font-family: Inter, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; }
|
||||
.subheader { font-family: Inter, Helvetica, Arial, sans-serif; font-size: 15px; color: #64748b; line-height: 1.5; }
|
||||
.event-item { margin-bottom: 20px; border-left: 3px solid #7161FF; padding-left: 12px; }
|
||||
.event-item { margin-bottom: 20px; border-left: 3px solid {{brandAccent}}; padding-left: 12px; }
|
||||
.event-meta { margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
|
||||
.event-meta-left { display: flex; align-items: center; }
|
||||
.event-author { font-family: Inter, Helvetica, Arial, sans-serif; font-weight: 600; margin-right: 4px; color: #1e293b; }
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
.event-stats { margin-top: 8px; color: #64748b; font-size: 13px; }
|
||||
.stat-item { display: inline-flex; align-items: center; margin-right: 12px; }
|
||||
.footer { font-family: Inter, Helvetica, Arial, sans-serif; color: #94a3b8; font-size: 12px; line-height: 1.5; }
|
||||
.footer a { color: #7161FF; text-decoration: underline; }
|
||||
.footer a { color: {{brandAccent}}; text-decoration: underline; }
|
||||
.logo { max-width: 48px; max-height: 48px; }
|
||||
a { text-decoration: none; }
|
||||
</mj-style>
|
||||
|
|
|
|||
74
test/digest-template.test.js
Normal file
74
test/digest-template.test.js
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
#!/usr/bin/env node
|
||||
// FAILING test: digest.mjml hardcodes #7161FF instead of using {{brandAccent}}
|
||||
//
|
||||
// The bug: in src/emails/digest.mjml line 8 and line 22, the CSS for
|
||||
// .event-item border-left and .footer a color hardcode #7161FF even though
|
||||
// {{brandAccent}} is passed into the template by mailer.ts and used
|
||||
// elsewhere (lines 15, 34). When BRAND_ACCENT is customized, the event-item
|
||||
// border and footer links stay the default purple.
|
||||
//
|
||||
// The fix: replace both hardcoded #7161FF values with {{brandAccent}}.
|
||||
|
||||
import { readFileSync } from 'fs';
|
||||
import { fileURLToPath } from 'url';
|
||||
import { dirname, join } from 'path';
|
||||
|
||||
const __dirname = dirname(fileURLToPath(import.meta.url));
|
||||
const templatePath = join(__dirname, '..', 'src', 'emails', 'digest.mjml');
|
||||
|
||||
let passed = 0;
|
||||
let failed = 0;
|
||||
|
||||
function assert(label, ok, detail) {
|
||||
if (ok) {
|
||||
console.log(` ✓ ${label}`);
|
||||
passed++;
|
||||
} else {
|
||||
console.log(` ✗ ${label} — ${detail || ''}`);
|
||||
failed++;
|
||||
}
|
||||
}
|
||||
|
||||
// Read the MJML template
|
||||
const source = readFileSync(templatePath, 'utf8');
|
||||
const lines = source.split('\n');
|
||||
|
||||
console.log('1. No hardcoded #7161FF in .event-item or .footer a CSS');
|
||||
|
||||
// Check .event-item border-left doesn't have #7161FF
|
||||
const eventItemLineIdx = lines.findIndex(l => l.includes('.event-item'));
|
||||
const hasEventItemHardcoded = lines.some(l => l.includes('.event-item') && l.includes('#7161FF'));
|
||||
assert(
|
||||
'.event-item border-left does NOT hardcode #7161FF',
|
||||
!hasEventItemHardcoded,
|
||||
hasEventItemHardcoded ? `Line ${eventItemLineIdx + 1} still has #7161FF: "${lines[eventItemLineIdx].trim()}"` : ''
|
||||
);
|
||||
|
||||
// Check .footer a color doesn't have #7161FF
|
||||
const footerAIdx = lines.findIndex(l => l.includes('.footer a'));
|
||||
const hasFooterHardcoded = lines.some(l => l.includes('.footer a') && l.includes('#7161FF'));
|
||||
assert(
|
||||
'.footer a color does NOT hardcode #7161FF',
|
||||
!hasFooterHardcoded,
|
||||
hasFooterHardcoded ? `Line ${footerAIdx + 1} still has #7161FF: "${lines[footerAIdx].trim()}"` : ''
|
||||
);
|
||||
|
||||
// Check .event-item border-left uses {{brandAccent}}
|
||||
const eventItemLine = lines[eventItemLineIdx];
|
||||
assert(
|
||||
'.event-item border-left uses {{brandAccent}}',
|
||||
eventItemLine && eventItemLine.includes('{{brandAccent}}'),
|
||||
eventItemLine ? `Line ${eventItemLineIdx + 1}: "${eventItemLine.trim()}"` : '.event-item line not found'
|
||||
);
|
||||
|
||||
// Check .footer a color uses {{brandAccent}}
|
||||
const footerALine = lines[footerAIdx];
|
||||
assert(
|
||||
'.footer a color uses {{brandAccent}}',
|
||||
footerALine && footerALine.includes('{{brandAccent}}'),
|
||||
footerALine ? `Line ${footerAIdx + 1}: "${footerALine.trim()}"` : '.footer a line not found'
|
||||
);
|
||||
|
||||
console.log('');
|
||||
console.log(`Results: ${passed} passed, ${failed} failed`);
|
||||
process.exit(failed > 0 ? 1 : 0);
|
||||
Loading…
Reference in a new issue