Merge pull request #208 from varya/preview-hidden-image

feat: hidden image for preview

src/components/Seo/Seo.js

@@ -4,6 +4,16 @@ import PropTypes from "prop-types";
 import config from "@content/meta/config";
 import Helmet from "react-helmet";
 
+const getImageUrl = ({ data, cover }) => {
+  const pageCover = ((data || {}).frontmatter || {}).cover;
+  const image =
+    pageCover && pageCover.childImageSharp
+      ? pageCover.childImageSharp.gatsbyImageData
+      : cover || config.siteImage;
+
+  return config.siteUrl + image;
+};
+
 const Seo = ({ data, title, description, keywords, cover, location }) => {
   const pageTitle = ((data || {}).frontmatter || {}).title;
   const dataDescription =
@@ -27,11 +37,7 @@ const Seo = ({ data, title, description, keywords, cover, location }) => {
     fullTitle = title;
   }
 
-  const image = pageCover && pageCover.childImageSharp
-    ? pageCover.childImageSharp.gatsbyImageData
-    : cover || config.siteImage;
-
-  const imageUrl = config.siteUrl + image;
+  const imageUrl = getImageUrl({ data, cover });
   const url = config.siteUrl + "/" + config.pathPrefix + pageSlug;
 
   const pageKeywords = keywords || config.defaultKeywords;
@@ -90,3 +96,16 @@ Seo.propTypes = {
 };
 
 export default Seo;
+
+export const SeoImage = ({ data, cover }) => {
+  const imageUrl = getImageUrl({ data, cover });
+  return (
+    <img
+      src={imageUrl}
+      width="0"
+      height="0"
+      alt="Preview image"
+      aria-hidden="true"
+    />
+  );
+};

src/components/Seo/index.js

@@ -1 +1 @@
-export { default } from "./Seo";
+export { default, SeoImage } from "./Seo";

src/components/index.js

@@ -22,6 +22,7 @@ export { default as PrevNextNav } from "./PrevNextNav";
 export { default as ProjectRoles } from "./ProjectRoles";
 export { default as Section } from "./Section";
 export { default as Seo } from "./Seo";
+export { SeoImage } from "./Seo";
 export { default as SocialLinks } from "./SocialLinks";
 export { default as Step } from "./Step";
 export { default as Timetable } from "./Timetable";

src/templates/Page.js

@@ -4,13 +4,14 @@ import PropTypes from "prop-types";
 import { Box } from "grommet";
 import { Hero } from "@components";
 import { Layout } from "@components";
-import { Seo } from "@components";
+import { Seo, SeoImage } from "@components";
 
 export const Page = (props) => {
   const { children, hero, seo, location } = props;
   const { props: heroProps, content } = { ...hero };
   return (
     <Layout location={location}>
+      <SeoImage {...seo} />
       {seo && <Seo {...seo} location={location} defer={false} />}
       {hero && (
         <Hero align="center" justify="between" {...heroProps}>