From 0ce7b28d7176f176cec7ed1f671420508ded3f43 Mon Sep 17 00:00:00 2001 From: Trevor Smith Date: Wed, 12 May 2021 13:46:37 -0500 Subject: [PATCH 1/5] Creates New Seo Component w/ useStaticQuery. --- src/components/seo/newSeo.js | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/components/seo/newSeo.js diff --git a/src/components/seo/newSeo.js b/src/components/seo/newSeo.js new file mode 100644 index 0000000..e69de29 From 029dfbfdc543928b5e5b344595d8555a0482616d Mon Sep 17 00:00:00 2001 From: Trevor Smith Date: Wed, 12 May 2021 17:26:22 -0500 Subject: [PATCH 2/5] Adds Social Media Functionality to New Seo Component. --- src/components/layout/layout.js | 4 +- src/components/seo/newSeo.js | 128 ++++++++++++++++++++++++++++++++ 2 files changed, 130 insertions(+), 2 deletions(-) diff --git a/src/components/layout/layout.js b/src/components/layout/layout.js index 4d33fd0..365e693 100644 --- a/src/components/layout/layout.js +++ b/src/components/layout/layout.js @@ -2,11 +2,11 @@ import React from "react" import { MDXProvider } from "@mdx-js/react" import Navbar from "../navbar/navbar" import Footer from "../footer/footer" -import Seo from "../seo/seo" +import Seo from "../seo/newSeo" import Callout from "../callout/callout" import Tableau from "../tableau/tableau" -const shortcodes = { Callout, Tableau }; +const shortcodes = { Callout, Tableau } export default function Layout({ children }) { return ( diff --git a/src/components/seo/newSeo.js b/src/components/seo/newSeo.js index e69de29..52898b6 100644 --- a/src/components/seo/newSeo.js +++ b/src/components/seo/newSeo.js @@ -0,0 +1,128 @@ +import React from "react" +import Helmet from "react-helmet" +import { useStaticQuery, graphql } from "gatsby" +import PropTypes from "prop-types" + +function SEO({ description, lang, meta, image: metaImage, title, pathname }) { + const { site } = useStaticQuery( + graphql` + query { + site { + siteMetadata { + title + description + author + keywords + siteUrl + } + } + } + ` + ) + const metaDescription = description || site.siteMetadata.description + const image = + metaImage && metaImage.src + ? `${site.siteMetadata.siteUrl}${metaImage.src}` + : null + const canonical = pathname ? `${site.siteMetadata.siteUrl}${pathname}` : null + return ( + + ) +} + +SEO.defaultProps = { + lang: `en`, + meta: [], + description: ``, +} + +SEO.propTypes = { + description: PropTypes.string, + lang: PropTypes.string, + meta: PropTypes.arrayOf(PropTypes.object), + title: PropTypes.string.isRequired, + image: PropTypes.shape({ + src: PropTypes.string.isRequired, + height: PropTypes.number.isRequired, + width: PropTypes.number.isRequired, + }), + pathname: PropTypes.string, +} + +export default SEO From c4296a74b9c806c11add8a09d7e0c24a4c55faee Mon Sep 17 00:00:00 2001 From: Trevor Smith Date: Wed, 12 May 2021 18:03:54 -0500 Subject: [PATCH 3/5] Site Metadata Renders On Build. --- src/components/seo/newSeo.js | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/src/components/seo/newSeo.js b/src/components/seo/newSeo.js index 52898b6..778f033 100644 --- a/src/components/seo/newSeo.js +++ b/src/components/seo/newSeo.js @@ -11,14 +11,16 @@ function SEO({ description, lang, meta, image: metaImage, title, pathname }) { siteMetadata { title description - author - keywords + author { + name + } siteUrl } } } ` ) + console.log(site.siteMetadata.author[0].name) const metaDescription = description || site.siteMetadata.description const image = metaImage && metaImage.src @@ -47,10 +49,10 @@ function SEO({ description, lang, meta, image: metaImage, title, pathname }) { name: `description`, content: metaDescription, }, - { - name: "keywords", - content: site.siteMetadata.keywords.join(","), - }, + // { + // name: "keywords", + // content: site.siteMetadata.keywords.join(","), + // }, { property: `og:title`, content: title, @@ -65,7 +67,7 @@ function SEO({ description, lang, meta, image: metaImage, title, pathname }) { }, { name: `twitter:creator`, - content: site.siteMetadata.author, + content: `${site.siteMetadata.author[0].name} ${site.siteMetadata.author[1].name}`, }, { name: `twitter:title`, From 0583c4aeeb0a052bc67bc9d33c9840e616d40eb1 Mon Sep 17 00:00:00 2001 From: Trevor Smith Date: Wed, 12 May 2021 18:10:38 -0500 Subject: [PATCH 4/5] Replaces Old Seo Component w/ Refactored One. Everything appears to be working when I view the site meta data. We will need to deploy the site with this new Seo component in order to run a test on it. --- src/components/layout/layout.js | 2 +- src/components/seo/newSeo.js | 130 -------------------- src/components/seo/seo.js | 210 ++++++++++++++++++-------------- 3 files changed, 119 insertions(+), 223 deletions(-) delete mode 100644 src/components/seo/newSeo.js diff --git a/src/components/layout/layout.js b/src/components/layout/layout.js index 365e693..e79e29c 100644 --- a/src/components/layout/layout.js +++ b/src/components/layout/layout.js @@ -2,7 +2,7 @@ import React from "react" import { MDXProvider } from "@mdx-js/react" import Navbar from "../navbar/navbar" import Footer from "../footer/footer" -import Seo from "../seo/newSeo" +import Seo from "../seo/seo" import Callout from "../callout/callout" import Tableau from "../tableau/tableau" diff --git a/src/components/seo/newSeo.js b/src/components/seo/newSeo.js deleted file mode 100644 index 778f033..0000000 --- a/src/components/seo/newSeo.js +++ /dev/null @@ -1,130 +0,0 @@ -import React from "react" -import Helmet from "react-helmet" -import { useStaticQuery, graphql } from "gatsby" -import PropTypes from "prop-types" - -function SEO({ description, lang, meta, image: metaImage, title, pathname }) { - const { site } = useStaticQuery( - graphql` - query { - site { - siteMetadata { - title - description - author { - name - } - siteUrl - } - } - } - ` - ) - console.log(site.siteMetadata.author[0].name) - const metaDescription = description || site.siteMetadata.description - const image = - metaImage && metaImage.src - ? `${site.siteMetadata.siteUrl}${metaImage.src}` - : null - const canonical = pathname ? `${site.siteMetadata.siteUrl}${pathname}` : null - return ( - - ) -} - -SEO.defaultProps = { - lang: `en`, - meta: [], - description: ``, -} - -SEO.propTypes = { - description: PropTypes.string, - lang: PropTypes.string, - meta: PropTypes.arrayOf(PropTypes.object), - title: PropTypes.string.isRequired, - image: PropTypes.shape({ - src: PropTypes.string.isRequired, - height: PropTypes.number.isRequired, - width: PropTypes.number.isRequired, - }), - pathname: PropTypes.string, -} - -export default SEO diff --git a/src/components/seo/seo.js b/src/components/seo/seo.js index 32b1369..151bf9d 100644 --- a/src/components/seo/seo.js +++ b/src/components/seo/seo.js @@ -1,103 +1,129 @@ import React from "react" -import PropTypes from "prop-types" -import { Helmet } from "react-helmet" -import { useLocation } from "@reach/router" +import Helmet from "react-helmet" import { useStaticQuery, graphql } from "gatsby" -import faviconSvg from "../../assets/svg/greenlightFavicon.svg" -import faviconIco from "../../assets/ico/greenlight.ico" -import maskIcon from "../../assets/svg/greenlightMaskIcon.svg" - -// Implementation reference available at: https://www.gatsbyjs.com/docs/add-seo-component/ - -const SEO = ({ title, description, image, article, siteLanguage }) => { - const { pathname } = useLocation(); - const { site } = useStaticQuery(query); - - // destructure the data from the query - const { - defaultTitle, - defaultDescription, - siteUrl, - defaultImage, - defaultLanguage, - } = site.siteMetadata; - - // Aliasing the properties comes in handy here to avoid name collisions. - const seo = { - title: title || defaultTitle, - description: description || defaultDescription, - image: `${siteUrl}${image || defaultImage}`, - url: `${siteUrl}${pathname}`, - lang: siteLanguage || defaultLanguage, - }; +import PropTypes from "prop-types" - // Adds meta tags for SEO and to generate previews for social media sharing. - // Checks if the props were used. If not, the default values are applied. +function SEO({ description, lang, meta, image: metaImage, title, pathname }) { + const { site } = useStaticQuery( + graphql` + query { + site { + siteMetadata { + title + description + author { + name + } + siteUrl + } + } + } + ` + ) + const metaDescription = description || site.siteMetadata.description + const image = + metaImage && metaImage.src + ? `${site.siteMetadata.siteUrl}${metaImage.src}` + : null + const canonical = pathname ? `${site.siteMetadata.siteUrl}${pathname}` : null return ( - - - {/* the favicon file has a static color, replace this value in the file itself */} - - {/* svg files need an alternative ico file in case client browser lacks support */} - - {/* change the color of the mask-icon for hover effect on Safari pinned tabs */} - - - - - - {/* Insert schema.org (facebook) and twitter data conditionally */} - {seo.url && } - {(article ? true : null) && } - {seo.title && } - {seo.description && ()} - {seo.image && } - - {/* {twitterUsername && ()} */} - {seo.title && } - {seo.description && ()} - {seo.image && } - {seo.title} - + ) } -export default SEO +SEO.defaultProps = { + lang: `en`, + meta: [], + description: ``, +} -// propTypes ensure we get all the data needed in the component -// helps as a guide while destructuring or using the props. SEO.propTypes = { - title: PropTypes.string, description: PropTypes.string, - image: PropTypes.string, - article: PropTypes.bool, - siteLanguage: PropTypes.string, - url: PropTypes.string, -}; - -// SEO component is also in other files, e.g. post-template file, -// the component also accepts sensible defaults in the SEO.defaultProps section. -// This way the information in siteMetadata (gatsby-config.js) gets used every time unless you define the property explicitly. -SEO.defaultProps = { - title: null, - description: null, - image: null, - article: false, - siteLanguage: 'en', - url: null, -}; + lang: PropTypes.string, + meta: PropTypes.arrayOf(PropTypes.object), + title: PropTypes.string.isRequired, + image: PropTypes.shape({ + src: PropTypes.string.isRequired, + height: PropTypes.number.isRequired, + width: PropTypes.number.isRequired, + }), + pathname: PropTypes.string, +} -// Query data found in gatsby-config.js (change the siteUrl value once starter is deployed in production) -const query = graphql` - query SEO { - site { - siteMetadata { - defaultTitle: title - defaultDescription: description - siteUrl: siteUrl - defaultImage: image - defaultLanguage: siteLanguage - } - } - } -`; +export default SEO From 17a7fc4e52a8e3e161e9e356e8c26aa6490aa247 Mon Sep 17 00:00:00 2001 From: Stephen Price Date: Wed, 12 May 2021 20:19:48 -0500 Subject: [PATCH 5/5] replaced broken viz URL for new one --- content/blog/production-report/production-report.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/blog/production-report/production-report.mdx b/content/blog/production-report/production-report.mdx index 8a44cfc..6638a3a 100644 --- a/content/blog/production-report/production-report.mdx +++ b/content/blog/production-report/production-report.mdx @@ -7,7 +7,7 @@ description: "A sample report for an oil and gas use case" Production continues to decline in the `Nor B` and `Onyx Alpha` mature fields. Tertiary recovery has been able to sustain productivity on both of these fields, maintaining production above the contractual threshold set with the government.