fix(digest): replace hardcoded #7161FF with {{brandAccent}}
Lines 8 and 22 of digest.mjml hardcoded #7161FF for the event-item
border-left and footer link color, while mailer.ts already passes
brandAccent into the template (used at lines 15 and 34). When
BRAND_ACCENT is customized, the border and footer links stayed the
default purple.
Drive both from {{brandAccent}} so they respect the customization.
Fixes bead mailship-hu5
This commit is contained in:
parent
d5f54845b6
commit
97eaf8ab36
2 changed files with 76 additions and 2 deletions
|
|
@ -5,7 +5,7 @@
|
||||||
<mj-style inline="inline">
|
<mj-style inline="inline">
|
||||||
.header { font-family: Inter, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; }
|
.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; }
|
.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 { margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
|
||||||
.event-meta-left { display: flex; 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; }
|
.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; }
|
.event-stats { margin-top: 8px; color: #64748b; font-size: 13px; }
|
||||||
.stat-item { display: inline-flex; align-items: center; margin-right: 12px; }
|
.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 { 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; }
|
.logo { max-width: 48px; max-height: 48px; }
|
||||||
a { text-decoration: none; }
|
a { text-decoration: none; }
|
||||||
</mj-style>
|
</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