Changelog

InstallationCopy Anchor Link

Install the timeline component. It adds @fumadocs/changelog to your dependencies:

npx @fumadocs/cli@latest add changelog

UsageCopy Anchor Link

Create a page under your Home Layout. Fetch a page of entries, render them with ChangelogTimeline, and link to the other pages with ChangelogPagination:

---
import { getSecret } from 'astro:env/server';
import { githubReleases } from '@fumadocs/changelog/github';
import Layout from '@/layouts/Layout.astro';
import { Changelog } from '@/components/changelog-page';

// render per request, needs an adapter
export const prerender = false;

const page = Number(Astro.params.page ?? 1);
const { entries, nextPage } = await githubReleases({
  owner: 'fuma-nama',
  repo: 'fumadocs',
  token: getSecret('GITHUB_TOKEN'),
  page,
});
if (entries.length === 0) return Astro.rewrite('/404');
---

<Layout title="Changelog">
  <Changelog
    client:load
    pathname={Astro.url.pathname}
    params={Astro.params}
    entries={entries}
    newer={page > 1 ? `/changelog/${page - 1}` : undefined}
    older={nextPage ? `/changelog/${nextPage}` : undefined}
  />
</Layout>

SourcesCopy Anchor Link

GitHub ReleasesCopy Anchor Link

githubReleases() returns a page of the published releases of a repository, with nextPage when there are older releases.

• Versions are read from the release names like fumadocs-ui@16.17.0, or their tags.
• Entries have a prerelease property for pre-releases.
• GitHub limits unauthenticated requests to 60 per hour. Pass a token and cache the page.
• GitHub lists the first 1000 releases, or 10000 with a token. Later pages have no entries.

Custom EntriesCopy Anchor Link

Entries are plain objects. Create them from any source:

Entries go from the page to the React island as props, so write their content as Markdown in content, rather than as React nodes in body.