changelog releases versioning timeline updates feed changelog releases versions updates timeline feed changelog section with release notes versioned update feed with timeline
Changelog Feed
Fetch pattern JSON:
curl https://webspire.de/patterns/changelog/feed.json feed.html
<section class="ws-changelog bg-[var(--ws-changelog-bg)] py-20">
<div class="mx-auto max-w-3xl px-6">
<!-- Header -->
<div class="mb-12">
<p class="mb-2 text-sm font-semibold uppercase tracking-[0.2em] text-[var(--ws-changelog-accent)]">Changelog</p>
<h2 class="text-3xl font-bold tracking-tight text-[var(--ws-changelog-text)]">What's new</h2>
<p class="mt-3 text-base text-[var(--ws-changelog-text-soft)]">
Recent releases, improvements and fixes — updated regularly.
</p>
</div>
<!-- Feed -->
<ol class="relative space-y-10" aria-label="Changelog entries">
<!-- Entry 1 -->
<li class="relative border-l border-[var(--ws-changelog-border)] pl-8">
<div class="absolute -left-px top-0 h-full w-px bg-[var(--ws-changelog-border)]"></div>
<div class="absolute -left-2 top-1 h-4 w-4 rounded-full border-2 border-[var(--ws-changelog-accent)] bg-[var(--ws-changelog-bg)]"></div>
<div class="flex flex-wrap items-center gap-2">
<span class="inline-flex items-center rounded-full bg-[var(--ws-changelog-accent)] px-2.5 py-0.5 text-xs font-semibold text-white">v3.2.0</span>
<time class="text-xs text-[var(--ws-changelog-text-muted)]" datetime="2026-04-01">April 1, 2026</time>
<span class="inline-flex items-center rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-medium text-emerald-700">Major</span>
</div>
<h3 class="mt-3 text-lg font-semibold text-[var(--ws-changelog-text)]">Agent handoff & parallel tasks</h3>
<p class="mt-1.5 text-sm leading-relaxed text-[var(--ws-changelog-text-soft)]">
Agents can now autonomously hand off subtasks to specialized sub-agents and run them in parallel.
Task queues are visible in Mission Control with real-time status updates.
</p>
<ul class="mt-3 space-y-1.5 text-sm text-[var(--ws-changelog-text-muted)]">
<li class="flex items-center gap-2">
<svg class="h-3.5 w-3.5 shrink-0 text-[var(--ws-changelog-accent)]" fill="none" viewBox="0 0 14 14" aria-hidden="true"><path d="M2 7l3.5 3.5L12 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
Parallel task execution with shared context
</li>
<li class="flex items-center gap-2">
<svg class="h-3.5 w-3.5 shrink-0 text-[var(--ws-changelog-accent)]" fill="none" viewBox="0 0 14 14" aria-hidden="true"><path d="M2 7l3.5 3.5L12 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
Mission Control status panel in sidebar
</li>
<li class="flex items-center gap-2">
<svg class="h-3.5 w-3.5 shrink-0 text-[var(--ws-changelog-accent)]" fill="none" viewBox="0 0 14 14" aria-hidden="true"><path d="M2 7l3.5 3.5L12 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
Improved diff review UI for agent-generated changes
</li>
</ul>
</li>
<!-- Entry 2 -->
<li class="relative border-l border-[var(--ws-changelog-border)] pl-8">
<div class="absolute -left-2 top-1 h-4 w-4 rounded-full border-2 border-[var(--ws-changelog-border)] bg-[var(--ws-changelog-bg)]"></div>
<div class="flex flex-wrap items-center gap-2">
<span class="inline-flex items-center rounded-full border border-[var(--ws-changelog-border)] bg-[var(--ws-changelog-code-bg)] px-2.5 py-0.5 text-xs font-semibold text-[var(--ws-changelog-text)]">v3.1.2</span>
<time class="text-xs text-[var(--ws-changelog-text-muted)]" datetime="2026-03-18">March 18, 2026</time>
<span class="inline-flex items-center rounded-full bg-sky-100 px-2 py-0.5 text-xs font-medium text-sky-700">Improvement</span>
</div>
<h3 class="mt-3 text-lg font-semibold text-[var(--ws-changelog-text)]">Autocomplete latency reduced by 40%</h3>
<p class="mt-1.5 text-sm leading-relaxed text-[var(--ws-changelog-text-soft)]">
Tab completions now arrive faster thanks to speculative decoding and a new local cache layer.
Cold-start times on project open are also significantly improved.
</p>
<ul class="mt-3 space-y-1.5 text-sm text-[var(--ws-changelog-text-muted)]">
<li class="flex items-center gap-2">
<svg class="h-3.5 w-3.5 shrink-0 text-[var(--ws-changelog-accent)]" fill="none" viewBox="0 0 14 14" aria-hidden="true"><path d="M2 7l3.5 3.5L12 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
Speculative decoding for next-token prediction
</li>
<li class="flex items-center gap-2">
<svg class="h-3.5 w-3.5 shrink-0 text-[var(--ws-changelog-accent)]" fill="none" viewBox="0 0 14 14" aria-hidden="true"><path d="M2 7l3.5 3.5L12 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
Local embedding cache for open files
</li>
</ul>
</li>
<!-- Entry 3 -->
<li class="relative border-l border-[var(--ws-changelog-border)] pl-8">
<div class="absolute -left-2 top-1 h-4 w-4 rounded-full border-2 border-[var(--ws-changelog-border)] bg-[var(--ws-changelog-bg)]"></div>
<div class="flex flex-wrap items-center gap-2">
<span class="inline-flex items-center rounded-full border border-[var(--ws-changelog-border)] bg-[var(--ws-changelog-code-bg)] px-2.5 py-0.5 text-xs font-semibold text-[var(--ws-changelog-text)]">v3.1.0</span>
<time class="text-xs text-[var(--ws-changelog-text-muted)]" datetime="2026-02-28">February 28, 2026</time>
<span class="inline-flex items-center rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-700">Fix</span>
</div>
<h3 class="mt-3 text-lg font-semibold text-[var(--ws-changelog-text)]">Bug fixes & stability</h3>
<p class="mt-1.5 text-sm leading-relaxed text-[var(--ws-changelog-text-soft)]">
Resolved edge cases in the diff viewer, fixed memory leak in long-running sessions,
and patched a rendering issue in the inline suggestion overlay on Windows.
</p>
</li>
</ol>
<!-- View all link -->
<div class="mt-12 border-t border-[var(--ws-changelog-border)] pt-8">
<a href="#" class="inline-flex items-center gap-1.5 text-sm font-medium text-[var(--ws-changelog-accent)] hover:underline">
View full changelog
<svg class="h-4 w-4" fill="none" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
</a>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
changelogreleasesversioningtimelineupdatesfeed
Slots
| Name | Required | Description |
|---|---|---|
| version | Yes | Versionsnummer als Pill (z.B. v3.2.0). |
| date | Yes | Veröffentlichungsdatum mit ISO datetime-Attribut. |
| type-badge | No | Typ-Klassifizierung — Major, Improvement, Fix. |
| heading | Yes | Titel der Release-Änderung. |
| description | Yes | 1–2 Satz Beschreibung der Änderung. |
| feature-list | No | Optionale Aufzählung von Einzelpunkten mit Checkmark-Icon. |
Vertikale Changelog-Feed-Sektion mit Timeline-Linie links, Versions-Pill, ISO-Datum und optionalen Feature-Checkmarks. Einträge sind semantische <li> in einer <ol> — korrekt für Screenreader. Der aktuelle Eintrag hat einen gefüllten Dot-Indikator, ältere Einträge einen offenen.