ChangelogFeed

A release notes feed with type filters, expandable entries (with an optional picture or code snippet), a month bar that tracks the scroll position, and an inline subscribe control.

When to use

• A public or in-app changelog where readers skim titles and open only what they care about.
• When releases mix new features, improvements and fixes and readers want to filter by type.
• Not for a single announcement; use CtaSection (banner) or AnnouncementBar.
• Not for an activity log of user actions; use a list or NotificationCenter.

Usage

import { ChangelogFeed } from "@/components/iris/blocks/changelog-feed/changelog-feed";

h(ChangelogFeed, {
  title: "Changelog",
  subtitle: "CapyDB 1.6 shipped on 14 Oct 2026",
  months: [{ key: "2026-10", label: "October 2026", short: "Oct" }],
  entries: [
    {
      id: "pitr",
      month: "2026-10",
      date: "14 Oct",
      iso: "2026-10-14",
      version: "1.6.0",
      kind: "new",
      title: "Point-in-time restore on Ship",
      summary: "Restore a Ship project to any minute in the last 7 days.",
      details: ["The project shows Restoring until it accepts connections again."],
      media: { type: "code", file: ".env", code: 'DATABASE_URL="postgres://app:****@shop.capydb.example:6432/shop"' },
    },
  ],
  endNote: "That is everything since CapyDB 1.3.",
});

Props

Prop	Type	Default	Description
entries	ChangelogEntry[]	14 sample CapyDB entries	Newest first. { id, month, date, iso, version, kind: "new" | "improved" | "fixed", title, summary, details: string[], media? }. month must match a months[].key.
months	ChangelogMonth[]	Sep to Jun 2026	{ key, label, short }, newest first; drives the month bar and group headings.
title	string	"Changelog"	Heading.
subtitle	string	sample line	One line under the title, such as the latest release.
endNote	string	sample line	Closing line at the end of the list.
defaultOpen	string[]	newest entry	Entry ids open on first render.
className	string	none	Extra class on the section.

media is either { type: "photo", src, alt, caption, width?, height? } (pass width/height when src is a URL; the frame is 16:10, cropped to cover) or { type: "code", file, code } (with a copy button).

Notes

• The default entries are a sample CapyDB changelog whose pictures are one flat inline SVG; pass your own entries.
• The list scrolls inside the card; the month bar label rolls to the month at the top and its pills jump to a month (smooth scroll, or instant under reduced motion).
• Filter chips are toggle buttons with aria-pressed; the visible count is announced in a polite live region. Entries are disclosure buttons with aria-expanded and aria-controls.
• The Subscribe pill morphs into an email field and then a confirmation; Escape cancels. It is a UI demo only and has no callback prop, so wire a real subscription by forking the block.
• Reduced motion removes the blur, travel and rolling numbers; panels open without animation.