fix: socialImage code doesnt properly use publicURL

src/templates/PageTemplate/PageTemplate.tsx

@@ -25,7 +25,7 @@ const PageTemplate: React.FC<Props> = ({ data }: Props) => {
     <Layout
       title={`${title} - ${siteTitle}`}
       description={metaDescription}
-      socialImage={socialImage}
+      socialImage={socialImage?.publicURL}
     >
       <Sidebar />
       <Page title={title}>
@@ -44,7 +44,9 @@ export const query = graphql`
         title
         date
         description
-        socialImage
+        socialImage {
+          publicURL
+        }
       }
     }
   }

src/templates/PostTemplate/PostTemplate.tsx

@@ -23,7 +23,7 @@ const PostTemplate: React.FC<Props> = ({ data }: Props) => {
     <Layout
       title={`${title} - ${siteTitle}`}
       description={metaDescription}
-      socialImage={socialImage}
+      socialImage={socialImage?.publicURL}
     >
       <Post post={data.markdownRemark} />
     </Layout>
@@ -47,7 +47,9 @@ export const query = graphql`
         description
         tags
         title
-        socialImage
+        socialImage {
+          publicURL
+        }
         disqusId
       }
     }

src/types/frontmatter.ts

@@ -5,7 +5,7 @@ interface Frontmatter {
   template: string;
   description?: string;
   tags?: Array<string>;
-  socialImage?: string;
+  socialImage?: { publicURL: string };
   disqusId?: string;
 }