spaCy/website/src/components/seo.js

import React from 'react'
import PropTypes from 'prop-types'
import Helmet from 'react-helmet'
import { StaticQuery, graphql } from 'gatsby'

import socialImageDefault from '../images/social_default.jpg'
import socialImageApi from '../images/social_api.jpg'
import socialImageUniverse from '../images/social_universe.jpg'
import socialImageNightly from '../images/social_nightly.jpg'

function getPageTitle(title, sitename, slogan, sectionTitle, nightly) {
    if (sectionTitle && title) {
        return `${title} · ${sitename} ${sectionTitle}${nightly ? ' (nightly)' : ''}`
    }
    if (title) {
        return `${title} · ${sitename}`
    }
    return `${sitename} · ${slogan}`
}

function getImage(section, nightly) {
    if (nightly) return socialImageNightly
    if (section === 'api') return socialImageApi
    if (section === 'universe') return socialImageUniverse
    return socialImageDefault
}

export default function SEO({
    description,
    lang = 'en',
    title,
    section,
    sectionTitle,
    bodyClass,
    nightly,
}) {
    return (
        <StaticQuery
            query={query}
            render={data => {
                const siteMetadata = data.site.siteMetadata
                const metaDescription = description || siteMetadata.description
                const pageTitle = getPageTitle(
                    title,
                    siteMetadata.title,
                    siteMetadata.slogan,
                    sectionTitle,
                    nightly
                )
                const socialImage = siteMetadata.siteUrl + getImage(section, nightly)
                const meta = [
                    {
                        name: 'description',
                        content: metaDescription,
                    },
                    {
                        property: 'og:title',
                        content: pageTitle,
                    },
                    {
                        property: 'og:description',
                        content: metaDescription,
                    },
                    {
                        property: 'og:type',
                        content: `website`,
                    },
                    {
                        property: 'og:site_name',
                        content: title,
                    },
                    {
                        property: 'og:image',
                        content: socialImage,
                    },
                    {
                        name: 'twitter:card',
                        content: 'summary_large_image',
                    },
                    {
                        name: 'twitter:image',
                        content: socialImage,
                    },
                    {
                        name: 'twitter:creator',
                        content: `@${siteMetadata.social.twitter}`,
                    },
                    {
                        name: 'twitter:site',
                        content: `@${siteMetadata.social.twitter}`,
                    },
                    {
                        name: 'twitter:title',
                        content: pageTitle,
                    },
                    {
                        name: 'twitter:description',
                        content: metaDescription,
                    },
                    {
                        name: 'docsearch:language',
                        content: lang,
                    },
                ]

                return (
                    <Helmet
                        defer={false}
                        htmlAttributes={{ lang }}
                        bodyAttributes={{ class: bodyClass }}
                        title={pageTitle}
                        meta={meta}
                    />
                )
            }}
        />
    )
}

SEO.propTypes = {
    description: PropTypes.string,
    lang: PropTypes.string,
    meta: PropTypes.array,
    keywords: PropTypes.arrayOf(PropTypes.string),
    title: PropTypes.string,
    section: PropTypes.string,
    bodyClass: PropTypes.string,
}

const query = graphql`
    query DefaultSEOQuery {
        site {
            siteMetadata {
                title
                description
                slogan
                siteUrl
                social {
                    twitter
                }
            }
        }
    }
`