Added open graph on scan and gallery pages

TODO.md

@@ -8,7 +8,6 @@
 - Automatically generate different sizes of images
 - Handle relationship in RichText Content
 - On most pages (collectibles + pages), there is a gap in the breakpoints where no thumbnail is displayed.
-- Add duration on audio/video preview cards
 - Add proper localization for formatFilesize, formatInches, formatMillimeters, formatPounds, and formatGrams
 
 ## Mid term

src/pages/[locale]/collectibles/[slug]/gallery/[index].astro

@@ -3,6 +3,7 @@ import AppEmptyLayout from "components/AppLayout/AppEmptyLayout.astro";
 import Lightbox from "components/Lightbox.astro";
 import { getI18n } from "src/i18n/i18n";
 import { payload } from "src/shared/payload/payload-sdk";
+import { formatInlineTitle, formatRichTextToString } from "src/utils/format";
 import { fetchOr404 } from "src/utils/responses";
 
 const slug = Astro.params.slug!;
@@ -53,7 +54,13 @@ const tagsAndAttributes = [
 
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
-<AppEmptyLayout parentPages={parentPages}>
+<AppEmptyLayout
+  openGraph={{
+    thumbnail: image,
+    description: description ? formatRichTextToString(description) : undefined,
+    title: formatInlineTitle({ pretitle, title, subtitle }),
+  }}
+  parentPages={parentPages}>
   <Lightbox
     image={image}
     pretitle={pretitle}

src/pages/[locale]/collectibles/[slug]/gallery/index.astro

@@ -4,23 +4,30 @@ import AppLayoutTitle from "components/AppLayout/components/AppLayoutTitle.astro
 import RichText from "components/RichText/RichText.astro";
 import { getI18n } from "src/i18n/i18n";
 import { payload } from "src/shared/payload/payload-sdk";
+import { formatInlineTitle, formatRichTextToString } from "src/utils/format";
 import { fetchOr404 } from "src/utils/responses";
 
 const slug = Astro.params.slug!;
-const { getLocalizedMatch, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
+const { getLocalizedMatch, getLocalizedUrl, t } = await getI18n(Astro.locals.currentLocale);
 
 const gallery = await fetchOr404(() => payload.getCollectibleGallery(slug));
 if (gallery instanceof Response) {
   return gallery;
 }
 
-const { translations, parentPages, images } = gallery;
+const { translations, parentPages, images, thumbnail } = gallery;
 const translation = getLocalizedMatch(translations);
 ---
 
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
-<AppEmptyLayout parentPages={parentPages}>
+<AppEmptyLayout
+  openGraph={{
+    title: `${formatInlineTitle(translation)} (${t("collectibles.gallery")})`,
+    description: translation.description && formatRichTextToString(translation.description),
+    thumbnail,
+  }}
+  parentPages={parentPages}>
   <AppLayoutTitle
     title={translation.title}
     pretitle={translation.pretitle}

src/pages/[locale]/collectibles/[slug]/scans/[index].astro

@@ -3,23 +3,33 @@ import AppEmptyLayout from "components/AppLayout/AppEmptyLayout.astro";
 import Lightbox from "components/Lightbox.astro";
 import { getI18n } from "src/i18n/i18n";
 import { payload } from "src/shared/payload/payload-sdk";
+import { formatInlineTitle, formatRichTextToString } from "src/utils/format";
 import { fetchOr404 } from "src/utils/responses";
 
 const slug = Astro.params.slug!;
 const index = Astro.params.index!;
-const { formatScanIndexShort, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
+const { formatScanIndexShort, getLocalizedMatch, getLocalizedUrl } = await getI18n(
+  Astro.locals.currentLocale
+);
 
 const scanPage = await fetchOr404(() => payload.getCollectibleScanPage(slug, index));
 if (scanPage instanceof Response) {
   return scanPage;
 }
 
-const { parentPages, previousIndex, nextIndex, image } = scanPage;
+const { parentPages, previousIndex, nextIndex, image, translations } = scanPage;
+const translation = getLocalizedMatch(translations);
 ---
 
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
-<AppEmptyLayout parentPages={parentPages}>
+<AppEmptyLayout
+  openGraph={{
+    title: `${formatInlineTitle(translation)} (${index})`,
+    description: translation.description && formatRichTextToString(translation.description),
+    thumbnail: image,
+  }}
+  parentPages={parentPages}>
   <Lightbox
     image={image}
     title={formatScanIndexShort(index)}

src/pages/[locale]/collectibles/[slug]/scans/index.astro

@@ -7,6 +7,7 @@ import { getI18n } from "src/i18n/i18n";
 import { payload } from "src/shared/payload/payload-sdk";
 import { fetchOr404 } from "src/utils/responses";
 import ScanPreview from "./_components/ScanPreview.astro";
+import { formatInlineTitle, formatRichTextToString } from "src/utils/format";
 
 const slug = Astro.params.slug!;
 const { getLocalizedMatch, t } = await getI18n(Astro.locals.currentLocale);
@@ -16,7 +17,7 @@ if (scans instanceof Response) {
   return scans;
 }
 
-const { translations, credits, cover, pages, dustjacket, obi, parentPages } = scans;
+const { translations, credits, cover, pages, dustjacket, obi, parentPages, thumbnail } = scans;
 
 const translation = getLocalizedMatch(translations);
 
@@ -38,7 +39,13 @@ const hasOutsideObi = obi ? Object.keys(obi).some((value) => !value.includes("in
 
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
-<AppEmptyLayout parentPages={parentPages}>
+<AppEmptyLayout
+  openGraph={{
+    title: `${formatInlineTitle(translation)} (${t("collectibles.scans")})`,
+    description: translation.description && formatRichTextToString(translation.description),
+    thumbnail,
+  }}
+  parentPages={parentPages}>
   <AppLayoutTitle
     title={translation.title}
     pretitle={translation.pretitle}

src/shared/payload/payload-sdk.ts

@@ -1637,6 +1637,7 @@ export type EndpointCollectibleGalleryImage = {
     pretitle?: string;
     title: string;
     subtitle?: string;
+    description?: RichTextContent;
   }[];
   image: EndpointImage;
   previousIndex?: string;
@@ -1652,6 +1653,7 @@ export type EndpointCollectibleScanPage = {
     pretitle?: string;
     title: string;
     subtitle?: string;
+    description?: RichTextContent;
   }[];
   image: EndpointScanImage;
   previousIndex?: string;