feat(animation-sources): improve discovery and sharing

app/[locale]/animation-sources/[slug]/page.tsx

@@ -40,23 +40,36 @@ export async function generateMetadata({
   }
 
   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 },
+    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: source.coverImage,
-          width: 720,
-          height: 720,
+          url: socialImageUrl,
+          type: "image/gif",
+          width: 480,
+          height: 480,
           alt: source.title,
         },
       ],
@@ -65,7 +78,13 @@ export async function generateMetadata({
       card: "summary_large_image",
       title: source.title,
       description: source.excerpt,
-      images: [source.coverImage],
+      creator: "@poyrazavsever",
+      images: [
+        {
+          url: socialImageUrl,
+          alt: source.title,
+        },
+      ],
     },
   };
 }

app/[locale]/animation-sources/page.tsx

@@ -3,6 +3,9 @@ import { getTranslations } from "next-intl/server";
 import { AnimationSourcesContent } from "@/components/animation-sources-content";
 import { listAnimationSources } from "@/data/animation-sources";
 
+const SITE_URL =
+  process.env.NEXT_PUBLIC_SITE_URL || "https://poyrazavsever.com";
+
 type AnimationSourcesPageProps = {
   params: Promise<{ locale: string }>;
 };
@@ -11,13 +14,49 @@ export async function generateMetadata({
   params,
 }: AnimationSourcesPageProps): Promise<Metadata> {
   const { locale } = await params;
-  const t = await getTranslations({ locale, namespace: "AnimationSources" });
+  const [t, sources] = await Promise.all([
+    getTranslations({ locale, namespace: "AnimationSources" }),
+    listAnimationSources(locale),
+  ]);
+  const localizedPath = locale === "en" ? "/en/animation-sources" : "/animation-sources";
+  const url = `${SITE_URL}${localizedPath}`;
+  const socialImagePath = sources[0]?.coverImage ?? "/logo/logo.png";
+  const socialImageUrl = new URL(socialImagePath, SITE_URL).toString();
+  const isGif = socialImagePath.toLowerCase().endsWith(".gif");
 
   return {
     title: t("title"),
     description: t("description"),
     alternates: {
-      canonical: "/animation-sources",
+      canonical: url,
+      languages: {
+        "tr-TR": `${SITE_URL}/animation-sources`,
+        "en-US": `${SITE_URL}/en/animation-sources`,
+      },
+    },
+    openGraph: {
+      title: t("title"),
+      description: t("description"),
+      url,
+      siteName: "Poyraz Avsever",
+      type: "website",
+      locale: locale === "en" ? "en_US" : "tr_TR",
+      images: [
+        {
+          url: socialImageUrl,
+          type: isGif ? "image/gif" : "image/png",
+          width: isGif ? 480 : 1200,
+          height: isGif ? 480 : 1200,
+          alt: t("title"),
+        },
+      ],
+    },
+    twitter: {
+      card: "summary_large_image",
+      title: t("title"),
+      description: t("description"),
+      creator: "@poyrazavsever",
+      images: [{ url: socialImageUrl, alt: t("title") }],
     },
   };
 }

app/[locale]/layout.tsx

@@ -8,6 +8,7 @@ import "../globals.css";
 import { AppShell } from "@/components/app-shell";
 import { GoogleAnalytics } from "@/components/google-analytics";
 import { PoyrazBottomRightFollower } from "@/components/poyraz-bottom-right-follower";
+import { listAnimationSources } from "@/data/animation-sources";
 
 export async function generateMetadata({
   params,
@@ -108,14 +109,26 @@ export default async function LocaleLayout({
   }
 
   // Provide messages for NextIntlClientProvider
-  const messages = await getMessages();
+  const [messages, animationSources] = await Promise.all([
+    getMessages(),
+    listAnimationSources(locale),
+  ]);
+  const animationSourceSearchItems = animationSources.map((source) => ({
+    slug: source.slug,
+    title: source.title,
+    excerpt: source.excerpt,
+    platform: source.platform,
+    tools: source.tools,
+  }));
 
   return (
     <html lang={locale}>
       <body className="min-h-dvh bg-background text-foreground antialiased">
         <NextIntlClientProvider messages={messages}>
           <GoogleAnalytics />
-          <AppShell>{children}</AppShell>
+          <AppShell animationSources={animationSourceSearchItems}>
+            {children}
+          </AppShell>
           <PoyrazBottomRightFollower />
         </NextIntlClientProvider>
       </body>