Skip to content

Commit 42f1acb

Browse files
doguabarisdoguabaris
committed
refactor: improve HTML report layout and branding
Why: The report layout did not surface published status or UAL clearly, article links were missing, and the page lacked consistent GWALN branding. Typography and colors also needed alignment with the updated brand style. What: - Restructure the header with GWALN logo and clearer topic title - Show published status and UAL more prominently - Restore Wikipedia and Grokipedia source links - Split logo rendering from note info rendering - Add favicon support and auto-copy assets during report generation - Load Lufga font from CDN and apply updated color palette
1 parent cbdaf00 commit 42f1acb

5 files changed

Lines changed: 70 additions & 19 deletions

File tree

‎src/lib/html-renderer.ts‎

Lines changed: 33 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -189,7 +189,7 @@ export const renderBiasPanel = (analysis: StructuredAnalysisReport): string => {
189189
.slice(0, 6)
190190
.map(
191191
([term, count]) =>
192-
`<span style="background: #CCF381; border: 1px solid #CCF381; color: #4831D4; padding: 0.25rem 0.5rem; border-radius: 999px; font-size: 0.65rem; font-weight: 600; display: inline-block; margin: 0.25rem;">${escapeHtml(term)} <span style="background: #4831D4; color: white; padding: 0.125rem 0.375rem; border-radius: 999px; font-size: 0.6rem; font-weight: 600; margin-left: 0.25rem;">${count}</span></span>`,
192+
`<span style="background: #00EB5E; border: 1px solid #00EB5E; color: #221C46; padding: 0.25rem 0.5rem; border-radius: 999px; font-size: 0.65rem; font-weight: 600; display: inline-block; margin: 0.25rem;">${escapeHtml(term)} <span style="background: #221C46; color: white; padding: 0.125rem 0.375rem; border-radius: 999px; font-size: 0.6rem; font-weight: 600; margin-left: 0.25rem;">${count}</span></span>`,
193193
)
194194
.join('');
195195
};
@@ -198,15 +198,15 @@ export const renderBiasPanel = (analysis: StructuredAnalysisReport): string => {
198198
const wikiTerms = listLoadedTerms(metrics.loaded_terms_wiki);
199199

200200
return `<div style="background: white; border: 1px solid #e9ecef; border-radius: 8px; padding: 1rem;">
201-
<div style="font-size: 0.75rem; font-weight: 600; color: #4831D4; margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; padding-bottom: 0.375rem; border-bottom: 2px solid #CCF381;">Bias Metrics</div>
201+
<div style="font-size: 0.75rem; font-weight: 600; color: #221C46; margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; padding-bottom: 0.375rem; border-bottom: 2px solid #00EB5E;">Bias Metrics</div>
202202
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 0.75rem;">
203203
<div style="background: #f8f9fa; border: 1px solid #e9ecef; padding: 0.75rem; border-radius: 6px; text-align: center;">
204204
<p style="font-size: 0.65rem; color: #6c757d; margin-bottom: 0.375rem; text-transform: uppercase; letter-spacing: 0.05em;">Subjectivity</p>
205-
<strong style="display: block; font-size: 1.25rem; color: #4831D4;">${metrics.subjectivity_delta.toFixed(3)}</strong>
205+
<strong style="display: block; font-size: 1.25rem; color: #221C46;">${metrics.subjectivity_delta.toFixed(3)}</strong>
206206
</div>
207207
<div style="background: #f8f9fa; border: 1px solid #e9ecef; padding: 0.75rem; border-radius: 6px; text-align: center;">
208208
<p style="font-size: 0.65rem; color: #6c757d; margin-bottom: 0.375rem; text-transform: uppercase; letter-spacing: 0.05em;">Polarity</p>
209-
<strong style="display: block; font-size: 1.25rem; color: #4831D4;">${metrics.polarity_delta.toFixed(3)}</strong>
209+
<strong style="display: block; font-size: 1.25rem; color: #221C46;">${metrics.polarity_delta.toFixed(3)}</strong>
210210
</div>
211211
</div>
212212
${grokTerms ? `<div style="margin-bottom: 0.5rem;"><p style="font-size: 0.65rem; color: #6c757d; margin-bottom: 0.375rem; text-transform: uppercase; letter-spacing: 0.05em;">Grokipedia Terms</p><div>${grokTerms}</div></div>` : ''}
@@ -341,7 +341,7 @@ export const renderSimilarSentencesModal = (analysis: StructuredAnalysisReport):
341341
</div>`;
342342
};
343343

344-
export const renderNoteInfo = (notePayload: {
344+
export const renderNoteInfoLogo = (notePayload: {
345345
entry: { status?: string; file: string; ual?: string | null } | null;
346346
note: Record<string, unknown> | null;
347347
}): string => {
@@ -350,8 +350,32 @@ export const renderNoteInfo = (notePayload: {
350350
if (!entry || !note || entry.status !== 'published') {
351351
return '';
352352
}
353-
return `<div style="background: #CCF381; color: #4831D4; padding: 0.5rem 0.75rem; border-radius: 6px; font-size: 0.7rem; font-weight: 600; margin-bottom: 0.5rem; display: inline-block;">
354-
Community Note: ${escapeHtml(entry.status ?? 'draft')} ${entry.ual ? `| UAL: ${escapeHtml(entry.ual)}` : ''}
353+
return `<div style="margin-bottom: 0.5rem;">
354+
<img src="gwaln-logo.svg" alt="GWALN" style="height: 32px; width: auto;" />
355+
</div>`;
356+
};
357+
358+
export const renderNoteInfo = (
359+
notePayload: {
360+
entry: { status?: string; file: string; ual?: string | null } | null;
361+
note: Record<string, unknown> | null;
362+
},
363+
wikiUrl: string,
364+
grokUrl: string,
365+
): string => {
366+
const entry = notePayload?.entry;
367+
const note = notePayload?.note;
368+
if (!entry || !note || entry.status !== 'published') {
369+
return '';
370+
}
371+
return `<div style="display: flex; align-items: center; gap: 1rem; margin-top: 0.5rem; flex-wrap: wrap;">
372+
<div style="background: #00EB5E; color: #221C46; padding: 0.5rem 0.75rem; border-radius: 6px; font-size: 0.7rem; font-weight: 600;">
373+
Published | UAL: ${entry.ual ? escapeHtml(entry.ual) : 'N/A'}
374+
</div>
375+
<div style="display: flex; gap: 1rem;">
376+
<a href="${escapeHtml(wikiUrl)}" target="_blank" rel="noopener" style="color: #221C46; text-decoration: none; font-size: 0.75rem; font-weight: 600; transition: opacity 0.2s;">Wikipedia →</a>
377+
<a href="${escapeHtml(grokUrl)}" target="_blank" rel="noopener" style="color: #221C46; text-decoration: none; font-size: 0.75rem; font-weight: 600; transition: opacity 0.2s;">Grokipedia →</a>
378+
</div>
355379
</div>`;
356380
};
357381

@@ -496,7 +520,8 @@ export const renderHtmlReport = (
496520
'topic.urls.grokipedia': escapeHtml(topic.urls.grokipedia),
497521
statsCards,
498522
versionBox: versionWithDiff,
499-
noteInfo: renderNoteInfo(notePayload),
523+
noteInfoLogo: renderNoteInfoLogo(notePayload),
524+
noteInfo: renderNoteInfo(notePayload, topic.urls.wikipedia, topic.urls.grokipedia),
500525
missingSentences: renderList(
501526
`Missing Sentences (${summary.missing_sentence_count} from Wikipedia)`,
502527
comparison.sentences.missing,

‎src/templates/favicon.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src/templates/gwaln-logo.svg‎

Lines changed: 8 additions & 0 deletions
Loading

‎src/templates/report.html‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,17 @@
44
<meta charset="utf-8"/>
55
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
66
<title>GWALN Analysis | {{topic.title}}</title>
7+
<link rel="icon" type="image/svg+xml" href="favicon.svg">
78

89
<link rel="preconnect" href="https://fonts.googleapis.com">
910
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
1011
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
1112
rel="stylesheet">
1213

14+
<style>
15+
@import url('https://fonts.cdnfonts.com/css/lufga');
16+
</style>
17+
1318
<style>
1419
:root {
1520
--color-bg: #ffffff;
@@ -18,11 +23,11 @@
1823
--color-text: #212529;
1924
--color-text-muted: #6c757d;
2025
--color-text-dim: #adb5bd;
21-
--color-green: #CCF381;
22-
--color-purple: #4831D4;
26+
--color-green: #00EB5E;
27+
--color-purple: #221C46;
2328
--color-danger: #dc3545;
2429
--color-warning: #ffc107;
25-
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
30+
--font-sans: 'Lufga', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
2631
--font-mono: 'JetBrains Mono', monospace;
2732
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
2833
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
@@ -242,8 +247,8 @@
242247
}
243248

244249
.diff-button {
245-
background: #4831D4;
246-
color: #CCF381;
250+
background: #221C46;
251+
color: #00EB5E;
247252
border: none;
248253
padding: 0.7rem 0.6rem;
249254
border-radius: 6px;
@@ -654,16 +659,12 @@
654659
<div class="header-left">
655660
<div class="header-left-content">
656661
<div class="topic-info">
657-
{{noteInfo}}
662+
{{noteInfoLogo}}
658663
<div class="topic-id">#{{topic.id}}</div>
659664
<h1>{{topic.title}}</h1>
660665

661666
<p class="headline">{{summary.headline_html}}</p>
662-
663-
<div class="urls">
664-
<a href="{{topic.urls.wikipedia}}" target="_blank" rel="noopener">Wikipedia</a>
665-
<a href="{{topic.urls.grokipedia}}" target="_blank" rel="noopener">Grokipedia</a>
666-
</div>
667+
{{noteInfo}}
667668
</div>
668669
{{versionBox}}
669670
</div>

‎src/workflows/show-workflow.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,20 @@ export const writeHtmlAnalysisReport = (topicId: string, html: string): string =
5757
paths.ensureDir(paths.ANALYSIS_DIR);
5858
const target = path.join(paths.ANALYSIS_DIR, `${topicId}-report.html`);
5959
fs.writeFileSync(target, html, 'utf8');
60+
61+
const templateDir = path.join(__dirname, '../templates');
62+
const logoSource = path.join(templateDir, 'gwaln-logo.svg');
63+
const faviconSource = path.join(templateDir, 'favicon.svg');
64+
const logoTarget = path.join(paths.ANALYSIS_DIR, 'gwaln-logo.svg');
65+
const faviconTarget = path.join(paths.ANALYSIS_DIR, 'favicon.svg');
66+
67+
if (fs.existsSync(logoSource)) {
68+
fs.copyFileSync(logoSource, logoTarget);
69+
}
70+
if (fs.existsSync(faviconSource)) {
71+
fs.copyFileSync(faviconSource, faviconTarget);
72+
}
73+
6074
return target;
6175
};
6276

0 commit comments

Comments
 (0)