Merge pull request #400 from AmazeeLabs/SLB-497-og-image-fixes

SLB-497: add a token display for images

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

apps/website/src/templates/home.tsx

@@ -5,37 +5,15 @@ import { HeadProps, PageProps } from 'gatsby';
 import React from 'react';
 
 import { useLocalized } from '../utils/locale';
+import { Metatags } from '../utils/metatags';
 
 export const query = graphql(HomePageQuery);
 
 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;
 }

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;
 }

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>}
+    </>
+  );
+}