111 lines
2.4 KiB
TypeScript
111 lines
2.4 KiB
TypeScript
import { cache } from 'react';
|
|
|
|
import type { Metadata } from 'next';
|
|
|
|
import { notFound } from 'next/navigation';
|
|
|
|
import { createCmsClient } from '@kit/cms';
|
|
|
|
import { withI18n } from '~/lib/i18n/with-i18n';
|
|
|
|
import { ChangelogDetail } from '../_components/changelog-detail';
|
|
|
|
interface ChangelogEntryPageProps {
|
|
params: Promise<{ slug: string }>;
|
|
}
|
|
|
|
const getChangelogData = cache(changelogEntryLoader);
|
|
|
|
async function changelogEntryLoader(slug: string) {
|
|
const client = await createCmsClient();
|
|
|
|
const [entry, allEntries] = await Promise.all([
|
|
client.getContentItemBySlug({ slug, collection: 'changelog' }),
|
|
client.getContentItems({
|
|
collection: 'changelog',
|
|
sortBy: 'publishedAt',
|
|
sortDirection: 'desc',
|
|
content: false,
|
|
}),
|
|
]);
|
|
|
|
if (!entry) {
|
|
return null;
|
|
}
|
|
|
|
// Find previous and next entries in the timeline
|
|
const currentIndex = allEntries.items.findIndex((item) => item.slug === slug);
|
|
const newerEntry =
|
|
currentIndex > 0 ? allEntries.items[currentIndex - 1] : null;
|
|
const olderEntry =
|
|
currentIndex < allEntries.items.length - 1
|
|
? allEntries.items[currentIndex + 1]
|
|
: null;
|
|
|
|
return {
|
|
entry,
|
|
previousEntry: olderEntry,
|
|
nextEntry: newerEntry,
|
|
};
|
|
}
|
|
|
|
export async function generateMetadata({
|
|
params,
|
|
}: ChangelogEntryPageProps): Promise<Metadata> {
|
|
const slug = (await params).slug;
|
|
const data = await getChangelogData(slug);
|
|
|
|
if (!data) {
|
|
notFound();
|
|
}
|
|
|
|
const { title, publishedAt, description, image } = data.entry;
|
|
|
|
return Promise.resolve({
|
|
title,
|
|
description,
|
|
openGraph: {
|
|
title,
|
|
description,
|
|
type: 'article',
|
|
publishedTime: publishedAt,
|
|
url: data.entry.url,
|
|
images: image
|
|
? [
|
|
{
|
|
url: image,
|
|
},
|
|
]
|
|
: [],
|
|
},
|
|
twitter: {
|
|
card: 'summary_large_image',
|
|
title,
|
|
description,
|
|
images: image ? [image] : [],
|
|
},
|
|
});
|
|
}
|
|
|
|
async function ChangelogEntryPage({ params }: ChangelogEntryPageProps) {
|
|
const slug = (await params).slug;
|
|
const data = await getChangelogData(slug);
|
|
|
|
if (!data) {
|
|
notFound();
|
|
}
|
|
|
|
return (
|
|
<div className="container sm:max-w-none sm:p-0">
|
|
<ChangelogDetail
|
|
entry={data.entry}
|
|
content={data.entry.content}
|
|
previousEntry={data.previousEntry ?? null}
|
|
nextEntry={data.nextEntry ?? null}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default withI18n(ChangelogEntryPage);
|