feat(pdc-frontend): integrate open graph image into frontend

frameless · Oct 30, 2023 · 5da013b · 5da013b
1 parent b2f957f
commit 5da013b
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 0 deletions.
diff --git a/apps/pdc-frontend/src/app/[locale]/products/[slug]/page.tsx b/apps/pdc-frontend/src/app/[locale]/products/[slug]/page.tsx
@@ -65,6 +65,8 @@ export async function generateMetadata({ params }: any): Promise<Metadata> {
   const { product } = await getAllProducts(params?.locale, params?.slug);
   const title = product?.attributes?.metaTags?.title;
   const description = product?.attributes?.metaTags?.description;
+  const openGraphImage = product?.attributes?.metaTags?.ogImage?.data?.attributes?.url;
+
   return {
     title,
     description,
@@ -74,6 +76,7 @@ export async function generateMetadata({ params }: any): Promise<Metadata> {
     openGraph: {
       title: `${title} | ${t('website-setting.website-name')}`,
       description,
+      images: openGraphImage && getImageBaseUrl() && `${getImageBaseUrl()}${openGraphImage}`,
       locale: params?.locale,
       url: `${process.env.FRONTEND_PUBLIC_URL}/${params?.locale}/products/${params?.slug}`,
       siteName: t('website-setting.website-name') || 'Gemeente Utrecht',

diff --git a/apps/pdc-frontend/src/query/index.ts b/apps/pdc-frontend/src/query/index.ts
@@ -111,6 +111,13 @@ export const GET_PRODUCT_BY_SLUG_FETCH = gql(`
             title
             description
             keymatch
+            ogImage {
+            data {
+              attributes {
+                url
+               }
+             }
+           }
           }
           content
           sections {