変更履歴
プロジェクトのリリース情報を表示します。
インストール
タイムラインコンポーネントをインストールします。インストールすると、@fumadocs/changelog が依存関係に追加されます：
npx @fumadocs/cli@latest add changelog使い方
Home Layout の配下にページを作成します。エントリーを1ページ分取得して ChangelogTimeline でレンダリングし、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;ソース
GitHub Releases
githubReleases() は、リポジトリで公開されているリリースを1ページ分返します。さらに古いリリースがある場合は、nextPage も返されます。
- バージョンは、
fumadocs-ui@16.17.0のようなリリース名、またはそのタグから読み取られます。 - プレリリースのエントリーには
prereleaseプロパティがあります。 - GitHub では、認証なしのリクエストは1時間あたり60回までに制限されています。
tokenを渡したうえで、ページをキャッシュしてください。 - GitHub で一覧取得できるのは最初の1000件のリリースまでです(トークンを使用した場合は10000件まで)。それ以降のページにはエントリーが含まれません。
プロパティ
型
カスタムエントリー
エントリーはプレーンなオブジェクトです。任意のソースから作成できます。
プロパティ
型
たとえば、MDX ファイルのコレクションから作成できます。body を渡せば、コンテンツを独自にレンダリングできます。
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?
最終更新日
General Translation
Ferry Health
assistant-ui
Inkeep