From 7a311311a3905c9e617f81965837c9d1fec36840 Mon Sep 17 00:00:00 2001 From: Fran McDade Date: Wed, 7 Jul 2021 11:30:37 +1000 Subject: [PATCH] Create social share twitter card. Bug fix large summary card image. #54. --- gatsby-config.js | 2 +- gatsby-node.js | 1 + .../document-metadata/document-metadata.js | 55 ++++++++++--------- src/components/layout/layout.js | 4 +- src/templates/article.js | 9 ++- 5 files changed, 39 insertions(+), 32 deletions(-) diff --git a/gatsby-config.js b/gatsby-config.js index 13a1438..26d46ff 100644 --- 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 index eca12ae..0fa8c67 100644 --- 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 index 6f8f681..4c94f63 100644 --- a/src/components/document-metadata/document-metadata.js +++ b/src/components/document-metadata/document-metadata.js @@ -6,7 +6,6 @@ */ // Core dependencies -import { useLocation } from "@reach/router"; import React from "react"; import Helmet from "react-helmet"; @@ -14,25 +13,27 @@ import Helmet from "react-helmet"; 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 ( @@ -40,41 +41,43 @@ function DocumentMetadata(props) { {seo.title} {/**/} - - {seo.image && } - - - - + + + + + {seo.image && ( - + )} + + + - - - + + + {seo.image && } ); } diff --git a/src/components/layout/layout.js b/src/components/layout/layout.js index 38d0876..b419570 100644 --- 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 ( <> - +
{children} diff --git a/src/templates/article.js b/src/templates/article.js index 21aad86..e6cada6 100644 --- 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 ( - + @@ -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 } } `;