feat: group changelog entries by date into unified cards
This commit is contained in:
parent
2ad39b12ac
commit
cb413e2cf9
2 changed files with 93 additions and 19 deletions
|
|
@ -161,14 +161,62 @@
|
|||
margin-left: auto;
|
||||
}
|
||||
|
||||
.changelog-entry-title {
|
||||
/* ─── Grouped Date Header ────────────────────────────── */
|
||||
.changelog-date-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.changelog-date-header .changelog-date {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.1rem;
|
||||
font-size: 1rem;
|
||||
color: var(--status-green);
|
||||
letter-spacing: 2px;
|
||||
font-weight: 700;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.changelog-version-range {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* ─── Sub-entry within date group ────────────────────── */
|
||||
.changelog-sub-entry {
|
||||
padding: 0.6rem 0;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.changelog-sub-entry:last-child {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.changelog-sub-entry .changelog-entry-header {
|
||||
margin-bottom: 0.4rem;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.changelog-sub-entry .changelog-entry-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: 0.95rem;
|
||||
color: var(--text-primary);
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 0.75rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.changelog-sub-entry .changelog-changes {
|
||||
margin-top: 0.3rem;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
/* ─── Change List ────────────────────────────────────── */
|
||||
.changelog-changes {
|
||||
list-style: none;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
/* ═══════════════════════════════════════════════════════
|
||||
CHANGELOG — Mission Update Log Controller
|
||||
Groups entries by date into unified cards
|
||||
═══════════════════════════════════════════════════════ */
|
||||
(function () {
|
||||
'use strict';
|
||||
|
|
@ -26,6 +27,17 @@
|
|||
const totalChanges = entries.reduce((sum, e) => sum + (e.changes ? e.changes.length : 0), 0);
|
||||
const latestVersion = entries.length > 0 ? entries[0].version : '0.0.0';
|
||||
|
||||
// Group entries by date
|
||||
const grouped = [];
|
||||
const dateMap = {};
|
||||
for (const entry of entries) {
|
||||
if (!dateMap[entry.date]) {
|
||||
dateMap[entry.date] = { date: entry.date, entries: [] };
|
||||
grouped.push(dateMap[entry.date]);
|
||||
}
|
||||
dateMap[entry.date].entries.push(entry);
|
||||
}
|
||||
|
||||
let html = '';
|
||||
|
||||
// Header
|
||||
|
|
@ -38,31 +50,45 @@
|
|||
html += `<span class="changelog-stat">TOTAL CHANGES: <span class="changelog-stat-value">${totalChanges}</span></span>`;
|
||||
html += `</div></div>`;
|
||||
|
||||
// Timeline
|
||||
// Timeline — grouped by date
|
||||
html += `<div class="changelog-timeline">`;
|
||||
|
||||
for (const entry of entries) {
|
||||
const badge = entry.category || 'update';
|
||||
for (const group of grouped) {
|
||||
// Version range for this date
|
||||
const versions = group.entries.map(e => e.version);
|
||||
const versionRange = versions.length > 1
|
||||
? `v${esc(versions[versions.length - 1])} — v${esc(versions[0])}`
|
||||
: `v${esc(versions[0])}`;
|
||||
|
||||
html += `<div class="changelog-entry">`;
|
||||
html += `<div class="changelog-entry-card">`;
|
||||
|
||||
// Header row
|
||||
html += `<div class="changelog-entry-header">`;
|
||||
html += `<span class="changelog-version">v${esc(entry.version)}</span>`;
|
||||
html += `<span class="changelog-badge ${esc(badge)}">${esc(badge)}</span>`;
|
||||
html += `<span class="changelog-date">${formatDate(entry.date)}</span>`;
|
||||
// Date header
|
||||
html += `<div class="changelog-date-header">`;
|
||||
html += `<span class="changelog-date">${formatDate(group.date)}</span>`;
|
||||
html += `<span class="changelog-version-range">${versionRange}</span>`;
|
||||
html += `</div>`;
|
||||
|
||||
// Title
|
||||
html += `<div class="changelog-entry-title">${esc(entry.title)}</div>`;
|
||||
// Each sub-entry within this date
|
||||
for (const entry of group.entries) {
|
||||
const badge = entry.category || 'update';
|
||||
|
||||
// Changes
|
||||
if (entry.changes && entry.changes.length > 0) {
|
||||
html += `<ul class="changelog-changes">`;
|
||||
for (const change of entry.changes) {
|
||||
html += `<li>${esc(change)}</li>`;
|
||||
html += `<div class="changelog-sub-entry">`;
|
||||
html += `<div class="changelog-entry-header">`;
|
||||
html += `<span class="changelog-version">v${esc(entry.version)}</span>`;
|
||||
html += `<span class="changelog-badge ${esc(badge)}">${esc(badge)}</span>`;
|
||||
html += `<span class="changelog-entry-title">${esc(entry.title)}</span>`;
|
||||
html += `</div>`;
|
||||
|
||||
if (entry.changes && entry.changes.length > 0) {
|
||||
html += `<ul class="changelog-changes">`;
|
||||
for (const change of entry.changes) {
|
||||
html += `<li>${esc(change)}</li>`;
|
||||
}
|
||||
html += `</ul>`;
|
||||
}
|
||||
html += `</ul>`;
|
||||
|
||||
html += `</div>`;
|
||||
}
|
||||
|
||||
html += `</div></div>`;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue