Create social share twitter card. Bug fix large summary card image. #54…

…. (#88) Co-authored-by: Fran McDade <[email protected]>
galaxyproject · Jul 7, 2021 · 28e0da2 · 28e0da2
1 parent fdb8be9
commit 28e0da2
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 32 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -21,7 +21,7 @@ module.exports = {
     title: "JXTX Foundation",
     titleTemplate: "%s · James P. Taylor Foundation for Open Science.",
     twitterUsername: "@jxtxFoundation",
-    url: "https://jxtxfoundation.org/",
+    url: "https://jxtxfoundation.org",
   },
   plugins: [
     "gatsby-plugin-image",

diff --git a/gatsby-node.js b/gatsby-node.js
@@ -107,6 +107,7 @@ exports.createSchemaCustomization = ({ actions }) => {
         image: File @fileByRelativePath
         images: [File] @fileByRelativePath
         links: [String]
+        slug: String
         title: String
     }
   `);

diff --git a/src/components/document-metadata/document-metadata.js b/src/components/document-metadata/document-metadata.js
@@ -6,75 +6,78 @@
  */
 
 // Core dependencies
-import { useLocation } from "@reach/router";
 import React from "react";
 import Helmet from "react-helmet";
 
 // App dependencies
 import { SeoStaticQuery } from "../../hooks/seo-query";
 
 function DocumentMetadata(props) {
-  const { frontmatter } = props || {},
+  const { frontmatter, slug } = props || {},
     { description, image, title } = frontmatter || {},
     { childImageSharp } = image || {},
     { resize } = childImageSharp || {},
     { src } = resize || {};
-  const { origin, href } = useLocation();
   const { siteMetadata } = SeoStaticQuery(),
     {
       description: siteDescription,
       image: siteImage,
       title: siteTitle,
       twitterUsername,
+      url: siteURL,
     } = siteMetadata || {};
+  const seoImg = `${siteURL}${src || siteImage}`;
+  const seoURL = slug ? `${siteURL}${slug}` : siteURL;
   const seo = {
     description: description || siteDescription,
-    image: `${origin}${src || siteImage}`,
+    image: seoImg,
     title: title || siteTitle,
     twitterUsername: twitterUsername,
-    url: href,
+    url: seoURL,
   };
 
   return (
     <Helmet>
       <title>{seo.title}</title>
       <html lang="en" />
       {/*<meta name="robots" content="noindex" />*/}
-      <meta content={seo.description} key="description" name="description" />
-      {seo.image && <meta content={seo.image} key="image" name="image" />}
-      <meta content={seo.url} key="og:url" property="og:url" />
-      <meta
-        content={"JXTX Foundation"}
-        key="og:site_name"
-        property="og:site_name"
-      />
-      <meta content="website" key="og:type" property="og:type" />
-      <meta content={seo.title} key="og:title" property="og:title" />
+      <meta name="description" content={seo.description} key="description" />
+      <meta property="og:type" content="website" key="og:type" />
+      <meta property="og:title" content={seo.title} key="og:title" />
       <meta
+        property="og:description"
         content={seo.description}
         key="og:description"
-        property="og:description"
+      />
+      <meta property="og:url" content={seo.url} key="og:url" />
+      <meta
+        property="og:site_name"
+        content={"JXTX Foundation"}
+        key="og:site_name"
       />
       {seo.image && (
-        <meta content={seo.image} key="og:image" property="og:image" />
+        <meta property="og:image" content={seo.image} key="og:image" />
       )}
+      <meta property="og:image:width" content="1000" key="og:image:width" />
+      <meta property="og:image:height" content="500" key="og:image:height" />
       <meta
+        name="twitter:card"
         content={"summary_large_image"}
         key="twitter:card"
-        name="twitter:card"
       />
+      <meta name="twitter:title" content={seo.title} key="twitter:title" />
       <meta
-        content={seo.twitterUsername}
-        key="twitter:site"
-        name="twitter:site"
-      />
-      <meta content={seo.title} key="twitter:title" name="twitter:title" />
-      <meta
+        name="twitter:description"
         content={seo.description}
         key="twitter:description"
-        name="twitter:description"
       />
-      <meta content={seo.image} key="twitter:image" name="twitter:image" />
+      <meta name="twitter:image" content={seo.image} key="twitter:image" />
+      <meta
+        name="twitter:site"
+        content={seo.twitterUsername}
+        key="twitter:site"
+      />
+      {seo.image && <meta name="image" content={seo.image} key="image" />}
     </Helmet>
   );
 }

diff --git a/src/components/layout/layout.js b/src/components/layout/layout.js
@@ -21,11 +21,11 @@ import "../../styles/vars.module.css";
 import "../../styles/viewport-units.module.css";
 
 function Layout(props) {
-  const { children, frontmatter, headerMinor } = props;
+  const { children, frontmatter, headerMinor, slug } = props;
 
   return (
     <>
-      <DocumentMetadata frontmatter={frontmatter} />
+      <DocumentMetadata frontmatter={frontmatter} slug={slug} />
       <div className={compStyles.site}>
         <Header headerMinor={headerMinor} />
         {children}

diff --git a/src/templates/article.js b/src/templates/article.js
@@ -17,10 +17,11 @@ import Layout from "../components/layout/layout";
 
 export default function Article({ data }) {
   const post = data.mdx,
-    { body: content, frontmatter } = post || {};
+    { body: content, fields, frontmatter } = post || {},
+    { slug } = fields;
 
   return (
-    <Layout frontmatter={frontmatter} headerMinor>
+    <Layout frontmatter={frontmatter} headerMinor slug={slug}>
       <ArticleMain>
         <ArticleContent content={content} frontmatter={frontmatter} />
       </ArticleMain>
@@ -32,6 +33,9 @@ export const query = graphql`
   query ($slug: String!) {
     mdx(fields: { slug: { eq: $slug } }) {
       body
+      fields {
+        slug
+      }
       frontmatter {
         description
         fullWidth
@@ -50,7 +54,6 @@ export const query = graphql`
         links
         title
       }
-      slug
     }
   }
 `;