Changelog

import { createFileRoute, notFound } from '@tanstack/react-router';
import { createServerFn } from '@tanstack/react-start';
import { HomeLayout } from 'fumadocs-ui/layouts/home';
import { githubReleases } from '@fumadocs/changelog/github';
import { baseOptions } from '@/lib/layout.shared';
import { ChangelogPagination, ChangelogTimeline } from '@/components/changelog';

const getReleases = createServerFn({ method: 'GET' })
  .validator((page: number) => page)
  .handler(async ({ data: page }) => {
    const releases = await githubReleases({
      owner: 'fuma-nama',
      repo: 'fumadocs',
      token: process.env.GITHUB_TOKEN,
      page,
    });
    if (releases.entries.length === 0) throw notFound();

    return releases;
  });

export const Route = createFileRoute('/changelog/{-$page}')({
  loader: async ({ params }) => {
    const page = Number(params.page ?? 1);
    return { page, ...(await getReleases({ data: page })) };
  },
  component: Page,
});

function Page() {
  const { page, entries, nextPage } = Route.useLoaderData();

  return (
    <HomeLayout {...baseOptions()}>
      <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>
    </HomeLayout>
  );
}