text: /**
   * SEO component that queries for data with
   *  Gatsby's useStaticQuery React hook
   *
   * See: https://www.gatsbyjs.org/docs/use-static-query/
   */
  
  import React from 'react';
  import PropTypes from 'prop-types';
  import Helmet from 'react-helmet';
  import { Location } from '@reach/router';
  import { useStaticQuery, graphql } from 'gatsby';
  
  const SEO = ({
    description,
    imageUrl,
    lang,
    meta,
    ogType,
    keywords,
    title,
  }) => {
    const { site } = useStaticQuery(
      graphql`
        query {
          site {
            siteMetadata {
              title
              description
              author {
                name
              }
            }
          }
        }
      `
    );
  
    const metaDescription = description || site.siteMetadata.description;
  
    const ogImage = imageUrl
      ? {
          property: `og:image`,
          content: imageUrl,
        }
      : null;
    const ogImageUrl = imageUrl
      ? {
          property: `og:image:url`,
          content: imageUrl,
        }
      : null;
  
    return (
      <Location>
        {({ location }) => (
          <Helmet
            htmlAttributes={{
              lang,
            }}
            title={title}
            titleTemplate={`%s | ${site.siteMetadata.title}`}
            meta={[
              {
                name: `description`,
                content: metaDescription,
              },
              {
                property: `og:title`,
                content: title,
              },
              {
                property: `og:description`,
                content: metaDescription,
              },
              {
                property: `og:type`,
                content: ogType || `website`,
              },
              {
                name: `twitter:card`,
                content: `summary`,
              },
              {
                name: `twitter:creator`,
                content: site.siteMetadata.author.name,
              },
              {
                name: `twitter:title`,
                content: title,
              },
              {
                name: `twitter:description`,
                content: metaDescription,
              },
            ]
              .concat(
                keywords.length > 0
                  ? {
                      name: `keywords`,
                      content: keywords.join(`, `),
                    }
                  : []
              )
              .concat(
                location
                  ? {
                      name: 'og:url',
                      content: location.href,
                    }
                  : []
              )
              .concat(ogImage || [])
              .concat(ogImageUrl || [])
              .concat(meta)}
          />
        )}
      </Location>
    );
  };
  
  SEO.defaultProps = {
    lang: `en`,
    meta: [],
    keywords: [],
    description: ``,
  };
  
  SEO.propTypes = {
    description: PropTypes.string,
    imageUrl: PropTypes.string,
    lang: PropTypes.string,
    ogType: PropTypes.string,
    meta: PropTypes.arrayOf(PropTypes.object),
    keywords: PropTypes.arrayOf(PropTypes.string),
    title: PropTypes.string.isRequired,
  };
  
  export default SEO;
  