chore(SLB-497): cleanup duplicated code

AmazeeLabs · Jan 22, 2025 · 56fbbd0 · 56fbbd0
1 parent 4372f8d
commit 56fbbd0
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 49 deletions.
diff --git a/apps/website/src/templates/home.tsx b/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;
 }

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