Added support for gatsby-plugin-image (#5)

* Added support for gatsby-plugin-image * Imports existing IGatsbyImageData type from gatsby-plugin-image * Gets source for twitterImage separately
ashhitch · May 14, 2021 · f0cbc6a · f0cbc6a
1 parent fb6ad03
commit f0cbc6a
Show file tree

Hide file tree

Showing 4 changed files with 296 additions and 11 deletions.
diff --git a/package.json b/package.json
@@ -84,6 +84,7 @@
         "typescript": "3.7.3"
     },
     "dependencies": {
-        "@types/react-helmet": "^6.1.0"
+        "@types/react-helmet": "^6.1.0",
+        "gatsby-plugin-image": "^1.5.0"
     }
 }
diff --git a/src/Seo.tsx b/src/Seo.tsx
@@ -1,5 +1,6 @@
 import React, { FC, useContext } from 'react';
 import { Helmet } from 'react-helmet';
+import { getSrc } from 'gatsby-plugin-image';
 
 import SEOContext from './SeoContext';
 
@@ -92,6 +93,9 @@ const SEO: FC<SeoProps> = ({ post = {}, meta = [], title, postSchema }) => {
 
     const getReadingTime = time => (time === 1 ? '1 minute' : `${time} minutes`);
 
+    const ogImage = getSrc(seo?.opengraphImage?.localFile);
+    const twitterImage = getSrc(seo?.twitterImage?.localFile);
+
     return (
         <Helmet
             htmlAttributes={{
@@ -129,7 +133,7 @@ const SEO: FC<SeoProps> = ({ post = {}, meta = [], title, postSchema }) => {
                 },
                 {
                     property: 'og:image',
-                    content: seo?.opengraphImage?.sourceUrl || social?.facebook?.defaultImage?.mediaItemUrl,
+                    content: ogImage || seo?.opengraphImage?.sourceUrl || social?.facebook?.defaultImage?.mediaItemUrl,
                 },
                 {
                     property: 'og:image:alt',
@@ -153,7 +157,7 @@ const SEO: FC<SeoProps> = ({ post = {}, meta = [], title, postSchema }) => {
                 },
                 {
                     name: 'twitter:image',
-                    content: seo?.twitterImage?.sourceUrl,
+                    content: twitterImage || seo?.twitterImage?.sourceUrl,
                 },
                 {
                     name: 'twitter:image:alt',

diff --git a/src/SeoContext.tsx b/src/SeoContext.tsx
@@ -1,4 +1,5 @@
 import { createContext } from 'react';
+import { IGatsbyImageData } from 'gatsby-plugin-image';
 
 interface IPost {
     title: string;
@@ -23,9 +24,9 @@ interface IFixed {
     width: number;
     height: number;
 }
-
 interface IChildImageSharp {
-    fixed: IFixed;
+    fixed?: IFixed;
+    gatsbyImageData?: IGatsbyImageData;
 }
 
 interface ILocalFile {