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. { - 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