116 lines
3.0 KiB
TypeScript
116 lines
3.0 KiB
TypeScript
import type { Metadata } from "next";
|
||
import { notFound } from "next/navigation";
|
||
import { AnimationSourceDetailContent } from "@/components/animation-source-detail-content";
|
||
import { ArticleJsonLd } from "@/components/json-ld";
|
||
import {
|
||
getAnimationSourceBySlug,
|
||
listAnimationSources,
|
||
} from "@/data/animation-sources";
|
||
|
||
const SITE_URL =
|
||
process.env.NEXT_PUBLIC_SITE_URL || "https://poyrazavsever.com";
|
||
|
||
type AnimationSourceDetailPageProps = {
|
||
params: Promise<{ locale: string; slug: string }>;
|
||
};
|
||
|
||
function getLocalizedPath(locale: string, slug: string) {
|
||
const localePrefix = locale === "tr" ? "" : `/${locale}`;
|
||
return `${localePrefix}/animation-sources/${slug}`;
|
||
}
|
||
|
||
export async function generateStaticParams() {
|
||
const sources = await listAnimationSources();
|
||
return sources.map((source) => ({
|
||
locale: source.lang,
|
||
slug: source.slug,
|
||
}));
|
||
}
|
||
|
||
export const dynamicParams = false;
|
||
|
||
export async function generateMetadata({
|
||
params,
|
||
}: AnimationSourceDetailPageProps): Promise<Metadata> {
|
||
const { locale, slug } = await params;
|
||
const source = await getAnimationSourceBySlug(slug, locale);
|
||
|
||
if (!source) {
|
||
return { title: locale === "en" ? "Source not found" : "Kaynak bulunamadı" };
|
||
}
|
||
|
||
const url = `${SITE_URL}${getLocalizedPath(locale, source.slug)}`;
|
||
const socialImageUrl = new URL(source.coverImage, SITE_URL).toString();
|
||
const turkishUrl = `${SITE_URL}${getLocalizedPath("tr", source.slug)}`;
|
||
const englishUrl = `${SITE_URL}${getLocalizedPath("en", source.slug)}`;
|
||
|
||
return {
|
||
title: source.title,
|
||
description: source.excerpt,
|
||
alternates: {
|
||
canonical: url,
|
||
languages: {
|
||
"tr-TR": turkishUrl,
|
||
"en-US": englishUrl,
|
||
},
|
||
},
|
||
openGraph: {
|
||
title: source.title,
|
||
description: source.excerpt,
|
||
url,
|
||
siteName: "Poyraz Avsever",
|
||
type: "article",
|
||
locale: locale === "en" ? "en_US" : "tr_TR",
|
||
alternateLocale: locale === "en" ? ["tr_TR"] : ["en_US"],
|
||
publishedTime: source.date,
|
||
authors: [source.author],
|
||
images: [
|
||
{
|
||
url: socialImageUrl,
|
||
type: "image/gif",
|
||
width: 480,
|
||
height: 480,
|
||
alt: source.title,
|
||
},
|
||
],
|
||
},
|
||
twitter: {
|
||
card: "summary_large_image",
|
||
title: source.title,
|
||
description: source.excerpt,
|
||
creator: "@poyrazavsever",
|
||
images: [
|
||
{
|
||
url: socialImageUrl,
|
||
alt: source.title,
|
||
},
|
||
],
|
||
},
|
||
};
|
||
}
|
||
|
||
export default async function AnimationSourceDetailPage({
|
||
params,
|
||
}: AnimationSourceDetailPageProps) {
|
||
const { locale, slug } = await params;
|
||
const source = await getAnimationSourceBySlug(slug, locale);
|
||
|
||
if (!source) notFound();
|
||
|
||
const url = `${SITE_URL}${getLocalizedPath(locale, source.slug)}`;
|
||
|
||
return (
|
||
<>
|
||
<ArticleJsonLd
|
||
title={source.title}
|
||
description={source.excerpt}
|
||
url={url}
|
||
image={source.coverImage}
|
||
datePublished={source.date}
|
||
authorName={source.author}
|
||
/>
|
||
<AnimationSourceDetailContent source={source} />
|
||
</>
|
||
);
|
||
}
|