gatsby-theme-try-ghost/src/components/common/HeaderIndex.js

A Gatsby theme for building flaring fast blogs from headless Ghost CMS.

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

import { SiteNav, HeaderBackground } from '.'
import useOptions from '../../utils/use-options'
import { useLang, get } from '../../utils/use-lang'

const HeaderIndex = ({ data, overlay }) => {
    const { basePath } = useOptions()
    const text = get(useLang())
    const site = data.allGhostSettings.edges[0].node
    const siteLogo = site.logoSharp && site.logoSharp.publicURL || site.logo
    const coverImg = site.coverImageSharp && site.coverImageSharp.publicURL || site.cover_image
    const title = text(`SITE_TITLE`, site.title)

    return (
        <header className="site-home-header">
            <HeaderBackground fluidImg={site.coverImageSharp} srcImg={coverImg}>
                <div className="inner">
                    <SiteNav className="site-nav" overlay={overlay}/>
                    <div className="site-header-content">
                        <h1 className="site-title">
                            {siteLogo ? (
                                <Link to={basePath}>
                                    <img className="site-logo" src={siteLogo} alt={title} />
                                </Link>
                            ) : (
                                title
                            )}
                        </h1>
                        <h2 className="site-description">{site.description}</h2>
                    </div>
                </div>
            </HeaderBackground>
        </header>
    )
}

HeaderIndex.propTypes = {
    data: PropTypes.shape({
        allGhostSettings: PropTypes.object.isRequired,
    }).isRequired,
    overlay: PropTypes.object.isRequired,
}

const HeaderIndexQuery = props => (
    <StaticQuery
        query={graphql`
            query GhostSettingsForHeader {
                allGhostSettings {
                    edges {
                        node {
                            ...GhostSettingsFields
                        }
                    }
                }
            }
        `}
        render={data => <HeaderIndex data={data} {...props} />}
    />
)

export default HeaderIndexQuery