coptic compass rebrand extension og layer

Author: KyroHub

src/app/(site)/[locale]/entry/[id]/page.tsx

@@ -19,10 +19,10 @@ import {
   getDictionaryPath,
   getEntryPath,
   getLocalizedHomePath,
-  getOpenGraphLocale,
 } from "@/lib/locale";
 import { getTranslation } from "@/lib/i18n";
-import { buildPageTitle, siteConfig } from "@/lib/site";
+import { createPageSocialMetadata, createSocialImage } from "@/lib/metadata";
+import { siteConfig } from "@/lib/site";
 import { resolvePublicLocale } from "@/lib/publicLocaleRouting";
 import {
   createBreadcrumbStructuredData,
@@ -61,6 +61,12 @@ export async function generateMetadata({
   const description = buildEntryDescription(entry, locale);
   const path = getEntryPath(entry.id, locale);
   const imageUrl = buildEntryOpenGraphImageUrl(entry.id, locale);
+  const image = createSocialImage(
+    imageUrl,
+    locale === "nl"
+      ? `${headword} | ${siteConfig.brandName} woordenboeklemma`
+      : `${headword} | ${siteConfig.brandName} dictionary entry`,
+  );
 
   return {
     metadataBase: new URL(siteConfig.liveUrl),
@@ -70,25 +76,13 @@ export async function generateMetadata({
       canonical: path,
       languages: createLanguageAlternates(`/entry/${entry.id}`),
     },
-    openGraph: {
-      title: buildPageTitle(title),
+    ...createPageSocialMetadata({
+      title,
       description,
-      url: `${siteConfig.liveUrl}${path}`,
-      locale: getOpenGraphLocale(locale),
-      images: [
-        {
-          url: imageUrl,
-          width: 1200,
-          height: 630,
-          alt: title,
-        },
-      ],
-    },
-    twitter: {
-      title: buildPageTitle(title),
-      description,
-      images: [imageUrl],
-    },
+      path,
+      locale,
+      images: [image],
+    }),
   };
 }
 

src/app/(site)/[locale]/grammar/[slug]/page.tsx

@@ -8,16 +8,17 @@ import {
   getPublishedGrammarLessonBundleBySlug,
   listPublishedGrammarLessons,
 } from "@/features/grammar/lib/grammarDataset";
+import { buildLessonOpenGraphImageUrl } from "@/features/grammar/lib/lessonOpenGraph";
 import { getGrammarLessonPath } from "@/features/grammar/lib/grammarPaths";
 import {
   createLanguageAlternates,
   getGrammarPath,
   getLocalizedHomePath,
-  getOpenGraphLocale,
 } from "@/lib/locale";
 import { getTranslation } from "@/lib/i18n";
+import { createPageSocialMetadata, createSocialImage } from "@/lib/metadata";
 import { resolvePublicLocale } from "@/lib/publicLocaleRouting";
-import { buildPageTitle, siteConfig } from "@/lib/site";
+import { siteConfig } from "@/lib/site";
 import {
   createBreadcrumbStructuredData,
   createGrammarLessonStructuredData,
@@ -58,6 +59,14 @@ export async function generateMetadata({
   const title = buildGrammarLessonSeoTitle(lessonBundle.lesson, locale);
   const description = buildGrammarLessonSeoDescription(lessonBundle, locale);
   const path = getGrammarLessonPath(lessonBundle.lesson.slug, locale);
+  const imageUrl = buildLessonOpenGraphImageUrl(
+    lessonBundle.lesson.slug,
+    locale,
+  );
+  const image = createSocialImage(
+    imageUrl,
+    `${lessonBundle.lesson.title[locale]} | ${siteConfig.brandName} Grammar`,
+  );
 
   return {
     metadataBase: new URL(siteConfig.liveUrl),
@@ -69,16 +78,13 @@ export async function generateMetadata({
         `/grammar/${lessonBundle.lesson.slug}`,
       ),
     },
-    openGraph: {
-      title: buildPageTitle(title),
+    ...createPageSocialMetadata({
+      title,
       description,
-      url: `${siteConfig.liveUrl}${path}`,
-      locale: getOpenGraphLocale(locale),
-    },
-    twitter: {
-      title: buildPageTitle(title),
-      description,
-    },
+      path,
+      locale,
+      images: [image],
+    }),
   };
 }
 

src/app/(site)/[locale]/publications/[id]/page.tsx

@@ -10,15 +10,16 @@ import {
   getRelatedPublications,
   publications,
 } from "@/features/publications/lib/publications";
+import { buildPublicationOpenGraphImageUrl } from "@/features/publications/lib/publicationOpenGraph";
 import { listPublishedGrammarLessonsForPublication } from "@/features/grammar/lib/grammarContentGraph";
 import { getTranslation } from "@/lib/i18n";
 import {
   createLanguageAlternates,
   getLocalizedHomePath,
-  getOpenGraphLocale,
   getPublicationsPath,
 } from "@/lib/locale";
-import { buildPageTitle, siteConfig } from "@/lib/site";
+import { createPageSocialMetadata, createSocialImage } from "@/lib/metadata";
+import { siteConfig } from "@/lib/site";
 import { resolvePublicLocale } from "@/lib/publicLocaleRouting";
 import {
   createBreadcrumbStructuredData,
@@ -56,9 +57,11 @@ export async function generateMetadata({
   const title = buildPublicationTitle(publication);
   const description = buildPublicationDescription(publication, locale);
   const path = getPublicationPath(publication.id, locale);
-  const imageUrl = publication.image
-    ? `${siteConfig.liveUrl}${publication.image}`
-    : undefined;
+  const imageUrl = buildPublicationOpenGraphImageUrl(publication.id, locale);
+  const image = createSocialImage(
+    imageUrl,
+    `${title} | ${siteConfig.brandName} Publications`,
+  );
   const shouldIndex = publication.status === "published";
 
   return {
@@ -75,27 +78,13 @@ export async function generateMetadata({
       canonical: path,
       languages: createLanguageAlternates(`/publications/${publication.id}`),
     },
-    openGraph: {
-      title: buildPageTitle(title),
-      description,
-      url: `${siteConfig.liveUrl}${path}`,
-      locale: getOpenGraphLocale(locale),
-      ...(imageUrl
-        ? {
-            images: [
-              {
-                url: imageUrl,
-                alt: title,
-              },
-            ],
-          }
-        : {}),
-    },
-    twitter: {
-      title: buildPageTitle(title),
+    ...createPageSocialMetadata({
+      title,
       description,
-      ...(imageUrl ? { images: [imageUrl] } : {}),
-    },
+      path,
+      locale,
+      images: [image],
+    }),
   };
 }