jae/jaeswift-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: changelog entries auto-collapsed by default, click to expand

Browse source
This commit is contained in:
jae 2026-04-17 17:55:24 +00:00
parent 46d999ea99
commit cffadb2298
2 changed files with 68 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
css/changelog.css
View file

@ -165,10 +165,17 @@
.changelog-date-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding-bottom: 0.75rem;
margin-bottom: 0.75rem;
margin-bottom: 0;
border-bottom: 1px solid var(--border);
cursor: pointer;
user-select: none;
transition: all 0.2s ease;
}
.changelog-date-header:hover {
border-bottom-color: var(--status-green-dim);
}
.changelog-date-header .changelog-date {
@ -187,6 +194,50 @@
letter-spacing: 1px;
}
.changelog-date-summary {
font-family: var(--font-mono);
font-size: 0.7rem;
color: var(--text-muted);
letter-spacing: 1px;
margin-left: auto;
}
/* ─── Toggle Arrow ───────────────────────────────────── */
.changelog-toggle-arrow {
font-size: 0.65rem;
color: var(--status-green);
transition: transform 0.3s ease;
display: inline-block;
width: 0.8rem;
flex-shrink: 0;
}
.changelog-entry:not(.collapsed) .changelog-toggle-arrow {
transform: rotate(90deg);
}
/* ─── Collapsible Content ────────────────────────────── */
.changelog-content {
max-height: 2000px;
overflow: hidden;
transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.3s ease;
opacity: 1;
margin-top: 0.75rem;
}
.changelog-entry.collapsed .changelog-content {
max-height: 0;
opacity: 0;
margin-top: 0;
}
.changelog-entry.collapsed .changelog-date-header {
border-bottom-color: transparent;
margin-bottom: 0;
padding-bottom: 0;
}
/* ─── Sub-entry within date group ────────────────────── */
.changelog-sub-entry {
padding: 0.6rem 0;

19
js/changelog.js
View file

@ -60,22 +60,32 @@
// Timeline — grouped by date
html += `<div class="changelog-timeline">`;
for (const group of grouped) {
for (let gi = 0; gi < grouped.length; gi++) {
const group = grouped[gi];
// 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">`;
// Count total changes for this date group
const dateChanges = group.entries.reduce((sum, e) => sum + (e.changes ? e.changes.length : 0), 0);
const entryCount = group.entries.length;
html += `<div class="changelog-entry collapsed" data-group="${gi}">`;
html += `<div class="changelog-entry-card">`;
// Date header
html += `<div class="changelog-date-header">`;
// Date header (clickable)
html += `<div class="changelog-date-header" onclick="this.closest('.changelog-entry').classList.toggle('collapsed')">`;
html += `<span class="changelog-toggle-arrow">▶</span>`;
html += `<span class="changelog-date">${formatDate(group.date)}</span>`;
html += `<span class="changelog-version-range">${versionRange}</span>`;
html += `<span class="changelog-date-summary">${entryCount} update${entryCount > 1 ? 's' : ''} · ${dateChanges} change${dateChanges > 1 ? 's' : ''}</span>`;
html += `</div>`;
// Collapsible content
html += `<div class="changelog-content">`;
// Each sub-entry within this date
for (const entry of group.entries) {
const badge = entry.category || 'update';
@ -98,6 +108,7 @@
html += `</div>`;
}
html += `</div>`; // .changelog-content
html += `</div></div>`;
}