text: import React from "react"
  import PropTypes from "prop-types"
  import { Helmet } from "react-helmet"
  import { useStaticQuery, graphql } from "gatsby"
  
  function SEO({ description, lang, image, meta, keywords, title, pathname }) {
    const { site } = useStaticQuery(
      graphql`
        query {
          site {
            siteMetadata {
              author
              description
              image
              keywords
              siteUrl
              title
              social {
                twitter
              }
              socialLinks {
                twitter
                github
              }
            }
          }
        }
      `
    )
    const current_URL = site.siteMetadata.siteUrl
    const metaDescription = description || site.siteMetadata.description
    const metaImage = image && image.src ? `${current_URL}${image.src}` : null
    const canonical = pathname ? `${site.siteMetadata.siteUrl}${pathname}` : null
  
    return (
      <Helmet
        htmlAttributes={{
          lang,
        }}
        title={title}
        titleTemplate={`%s | ${site.siteMetadata.title}`}
        link={ canonical ? [{rel: "canonical",href: canonical,},]: []}
        meta={[{name: `description`,content: metaDescription,},
               {property: `og:title`,content: title,},
               {property: `og:description`,content: metaDescription,},
               {property: `og:type`,content: `website`,},
               {name: `twitter:card`,content: `summary_large_image`,},
               {name: `twitter:url`,content: `${site.siteMetadata.siteUrl}`,},
               {name: `twitter:title`,content: title,},
               {name: `twitter:description`,content: metaDescription,},
               {name: `twitter:image`,content: metaImage,},
               {name: `twitter:creator`,content: `${site.siteMetadata.social.twitter}`,},
               {name: `twitter:site`,content: `${site.siteMetadata.social.twitter}`,},
               {name: `twitter:image:alt`,content: metaDescription,},]
          .concat(metaImage ? [{property: `og:image`,content: metaImage,},
                               {property: `og:image:alt`,content: title,},
                               {property: "og:image:width",content: image.width,},
                               {property: "og:image:height",content: image.height,},
                               {name: `twitter:card`,content: `summary_large_image`,},
                              ]
                           :  [{name: `twitter:card`,content: `summary`,},])
          .concat(keywords.length > 0 ? {name: `keywords`,content: keywords.join(`, `),}: [])
          .concat(meta)}
      >
      </Helmet>
    )
  }
  
  SEO.defaultProps = {
    lang: `en`,
    meta: [],
    description: ``,
    keywords: [],
    pathname: ``,
  }
  
  SEO.propTypes = {
    description: PropTypes.string,
    lang: PropTypes.string,
    image: PropTypes.shape({
      src: PropTypes.string.isRequired,
      height: PropTypes.number.isRequired,
      width: PropTypes.number.isRequired,
    }),
    keywords: PropTypes.arrayOf(PropTypes.string),
    meta: PropTypes.arrayOf(PropTypes.object),
    title: PropTypes.string.isRequired,
    pathname: PropTypes.string,
  }
  
  export default SEO
  