Skip to Content
Fumadocs

Changelog

Show the releases of your project.

Installation

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

npx @fumadocs/cli@latest add changelog

Usage

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 { unstable_notFound } from 'waku/router/server';
import { githubReleases } from '@fumadocs/changelog/github';
import { ChangelogPagination, ChangelogTimeline } from '@/components/changelog';

export default async function Page({ page: param = '1' }: { page?: string }) {
  const page = Number(param);
  const { entries, nextPage } = await githubReleases({
    owner: 'fuma-nama',
    repo: 'fumadocs',
    token: process.env.GITHUB_TOKEN,
    page,
  });
  if (entries.length === 0) unstable_notFound();

  return (
    <div className="mx-auto flex w-full max-w-[900px] flex-col gap-10 px-4 py-12">
      <ChangelogTimeline entries={entries} />
      <ChangelogPagination
        newer={page > 1 ? `/changelog/${page - 1}` : undefined}
        older={nextPage ? `/changelog/${nextPage}` : undefined}
      />
    </div>
  );
}

export const getConfig = async () => ({ render: 'dynamic' }) as const;

Sources

GitHub Releases

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.

Prop

Type

Custom Entries

Entries are plain objects. Create them from any source:

Prop

Type

For example, a collection of MDX files. Pass body to render the content yourself:

src/pages/(home)/changelog/index.tsx
import { changelogSource } from '@/lib/source';
import { getMDXComponents } from '@/components/mdx';
import { ChangelogTimeline, type ChangelogTimelineEntry } from '@/components/changelog';

export default function Page() {
  const entries: ChangelogTimelineEntry[] = changelogSource.getPages().map((page) => {
    const MDX = page.data.body;

    return {
      id: page.url,
      title: page.data.title,
      date: new Date(page.data.date),
      body: <MDX components={getMDXComponents()} />,
    };
  });

  return (
    <div className="mx-auto w-full max-w-[900px] px-4 py-12">
      <ChangelogTimeline entries={entries} />
    </div>
  );
}

export const getConfig = async () => ({ render: 'static' }) as const;

How is this guide?

Last updated on

On this page

InstallationUsageSourcesGitHub ReleasesCustom Entries
Sponsors
General TranslationGeneral TranslationFerry HealthFerry Healthassistant-uiassistant-uiInkeepInkeep