コンテンツへスキップ
Fumadocs

変更履歴

プロジェクトのリリース情報を表示します。

インストール

タイムラインコンポーネントをインストールします。インストールすると、@fumadocs/changelog が依存関係に追加されます:

npx @fumadocs/cli@latest add changelog

使い方

Home Layout の配下にページを作成します。エントリーを1ページ分取得して ChangelogTimeline でレンダリングし、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';

// リクエストごとにレンダリングします(アダプターが必要です)
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>

ソース

GitHub Releases

githubReleases() は、リポジトリで公開されているリリースを1ページ分返します。さらに古いリリースがある場合は、nextPage も返されます。

  • バージョンは、fumadocs-ui@16.17.0 のようなリリース名、またはそのタグから読み取られます。
  • プレリリースのエントリーには prerelease プロパティがあります。
  • GitHub では、認証なしのリクエストは1時間あたり60回までに制限されています。token を渡したうえで、ページをキャッシュしてください。
  • GitHub で一覧取得できるのは最初の1000件のリリースまでです(トークンを使用した場合は10000件まで)。それ以降のページにはエントリーが含まれません。

プロパティ

型

カスタムエントリー

エントリーはプレーンなオブジェクトです。任意のソースから作成できます。

プロパティ

型

エントリーは props としてページから React アイランドへ渡されるため、コンテンツは body に React ノードとして記述するのではなく、content に Markdown として記述してください。

How is this guide?

最終更新日