From 4372f8d37c1811f38db8ac39635cb4d8293779d4 Mon Sep 17 00:00:00 2001
From: Vasile Chindris <vasile.chindris@amazee.com>
Date: Wed, 22 Jan 2025 10:57:31 +0200
Subject: [PATCH 1/2] chore(SLB-497): add a token display for images

---
 ....entity_view_display.media.image.token.yml | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 apps/cms/config/sync/core.entity_view_display.media.image.token.yml

diff --git a/apps/cms/config/sync/core.entity_view_display.media.image.token.yml b/apps/cms/config/sync/core.entity_view_display.media.image.token.yml
new file mode 100644
index 000000000..7bf0411f4
--- /dev/null
+++ b/apps/cms/config/sync/core.entity_view_display.media.image.token.yml
@@ -0,0 +1,30 @@
+uuid: 2795db31-0d40-44e7-999f-097e6b6d224c
+langcode: en
+status: true
+dependencies:
+  config:
+    - core.entity_view_mode.media.token
+    - field.field.media.image.field_media_image
+    - media.type.image
+  module:
+    - image
+id: media.image.token
+targetEntityType: media
+bundle: image
+mode: token
+content:
+  field_media_image:
+    type: image_url
+    label: hidden
+    settings:
+      image_style: ''
+    third_party_settings: {  }
+    weight: 0
+    region: content
+hidden:
+  created: true
+  langcode: true
+  name: true
+  search_api_excerpt: true
+  thumbnail: true
+  uid: true

From 56fbbd0d387f9c1c9c4fdb0c07e099098364433e Mon Sep 17 00:00:00 2001
From: Vasile Chindris <vasile.chindris@amazee.com>
Date: Wed, 22 Jan 2025 13:46:33 +0200
Subject: [PATCH 2/2] chore(SLB-497): cleanup duplicated code

---
 apps/website/src/templates/home.tsx | 26 ++------------
 apps/website/src/templates/page.tsx | 28 ++-------------
 apps/website/src/utils/metatags.tsx | 54 +++++++++++++++++++++++++++++
 3 files changed, 59 insertions(+), 49 deletions(-)
 create mode 100644 apps/website/src/utils/metatags.tsx

diff --git a/apps/website/src/templates/home.tsx b/apps/website/src/templates/home.tsx
index 9b8ac0e25..60a4e5b31 100644
--- a/apps/website/src/templates/home.tsx
+++ b/apps/website/src/templates/home.tsx
@@ -5,6 +5,7 @@ import { HeadProps, PageProps } from 'gatsby';
 import React from 'react';
 
 import { useLocalized } from '../utils/locale';
+import { Metatags } from '../utils/metatags';
 
 export const query = graphql(HomePageQuery);
 
@@ -12,30 +13,7 @@ export function Head({ data }: HeadProps<typeof query>) {
   const page = useLocalized(data.websiteSettings?.homePage?.translations);
   return page ? (
     <>
-      <title>{page.title}</title>
-      {page.metaTags?.map((metaTag, index) => {
-        if (metaTag?.tag === 'meta') {
-          return (
-            <meta
-              key={`meta-${index}`}
-              name={metaTag.attributes?.name || metaTag.attributes?.property}
-              content={metaTag.attributes?.content}
-            />
-          );
-        } else if (metaTag?.tag === 'link') {
-          return (
-            <link
-              key={`link-${index}`}
-              rel={metaTag.attributes?.rel}
-              href={metaTag.attributes?.href}
-              type={
-                metaTag.attributes?.rel === 'image_src' ? 'image' : undefined
-              }
-            />
-          );
-        }
-        return null;
-      }) || null}
+      <Metatags metaTags={page.metaTags} defaultTitle={page.title} />
     </>
   ) : null;
 }
diff --git a/apps/website/src/templates/page.tsx b/apps/website/src/templates/page.tsx
index 4ebb17a08..9b8ec8793 100644
--- a/apps/website/src/templates/page.tsx
+++ b/apps/website/src/templates/page.tsx
@@ -8,36 +8,14 @@ import { Page } from '@custom/ui/routes/Page';
 import { HeadProps, PageProps } from 'gatsby';
 import React from 'react';
 
+import { Metatags } from '../utils/metatags';
+
 export const query = graphql(ViewPageQuery);
 
 export function Head({ data }: HeadProps<typeof query>) {
   return data.page ? (
     <>
-      <title>{data.page.title}</title>
-      {data.page.metaTags?.map((metaTag, index) => {
-        if (metaTag?.tag === 'meta') {
-          return (
-            <meta
-              key={`meta-${index}`}
-              name={metaTag.attributes?.name}
-              property={metaTag.attributes?.property}
-              content={metaTag.attributes?.content}
-            />
-          );
-        } else if (metaTag?.tag === 'link') {
-          return (
-            <link
-              key={`link-${index}`}
-              rel={metaTag.attributes?.rel}
-              href={metaTag.attributes?.href}
-              type={
-                metaTag.attributes?.rel === 'image_src' ? 'image' : undefined
-              }
-            />
-          );
-        }
-        return null;
-      }) || null}
+      <Metatags metaTags={data.page.metaTags} defaultTitle={data.page.title} />
     </>
   ) : null;
 }
diff --git a/apps/website/src/utils/metatags.tsx b/apps/website/src/utils/metatags.tsx
new file mode 100644
index 000000000..3d10d28b1
--- /dev/null
+++ b/apps/website/src/utils/metatags.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+
+type MetaTag = {
+  tag: string;
+  attributes: {
+    name?: string;
+    content?: string;
+    property?: string;
+    rel?: string;
+    href?: string;
+  };
+};
+
+export function Metatags({
+  metaTags,
+  defaultTitle,
+}: {
+  metaTags?: Array<MetaTag | undefined>;
+  defaultTitle?: string;
+}) {
+  let pageTitle = defaultTitle;
+  return (
+    <>
+      {metaTags?.map((metaTag, index) => {
+        if (metaTag?.tag === 'meta' && metaTag.attributes.name === 'title') {
+          pageTitle = metaTag.attributes.content;
+        }
+        if (metaTag?.tag === 'meta') {
+          return (
+            <meta
+              key={`meta-${index}`}
+              name={metaTag.attributes?.name}
+              property={metaTag.attributes?.property}
+              content={metaTag.attributes?.content}
+            />
+          );
+        } else if (metaTag?.tag === 'link') {
+          return (
+            <link
+              key={`link-${index}`}
+              rel={metaTag.attributes?.rel}
+              href={metaTag.attributes?.href}
+              type={
+                metaTag.attributes?.rel === 'image_src' ? 'image' : undefined
+              }
+            />
+          );
+        }
+        return null;
+      }) || null}
+      {pageTitle && <title>{pageTitle}</title>}
+    </>
+  );
+}