src/templates/Interview.js

import React, { Component } from 'react'
import { graphql } from 'gatsby'
import Layout from 'src/components/Layout'
import LayoutHelmet from 'src/components/LayoutHelmet'
import Footer from 'src/components/Footer'
import Cover from 'src/components/Cover'
import Interview from 'src/components/Interview'
import Subscribe from 'src/components/Subscribe'
import PageHelmet from 'src/components/PageHelmet'
import withLocale from 'src/components/withLocale'

class InterviewTemplate extends Component {
  render() {
    const {
      data: { interview, subscribe },
      locale,
      changeLocale,
    } = this.props

    return (
      <Layout locale={locale}>
        <LayoutHelmet locale={locale} />
        <PageHelmet
          title={interview.title}
          image={interview.image.url}
          description={interview.description}
          locale={locale}
        />
        <Cover
          locale={locale}
          image={interview.image}
          description={interview.description}
          title={interview.title}
          podcast={interview.podcast}
          slug={interview.slug}
          changeLocale={changeLocale}
        />
        <Interview interview={interview} locale={locale} />
        <Subscribe locale={locale} subscribe={subscribe} />
        <Footer locale={locale} />
      </Layout>
    )
  }
}

export const query = graphql`
  query InterviewTemplate($id: String!, $locale: String!) {
    interview: datoCmsInterview(id: { eq: $id }, locale: { eq: $locale }) {
      title
      description
      author
      photographer
      publishDate
      podcast {
        podcastTitle
        podcastGuest
        podcastCover {
          id
          fluid(maxWidth: 660, imgixParams: { fm: "jpg", auto: "compress, format" }) {
            ...GatsbyDatoCmsFluid
          }
        }
        duration
        podcast {
          url
        }
      }
      image {
        url
        fluid(maxWidth: 2560, imgixParams: { fm: "jpg", auto: "compress, format" }) {
          ...GatsbyDatoCmsFluid
        }
      }
      summary {
        title
        description
      }
      bodyNode {
        childMarkdownRemark {
          html
        }
      }
      slug
    }
    subscribe: file(relativePath: { eq: "subscribe-illustration.jpeg" }) {
      childImageSharp {
        fluid(maxWidth: 1440) {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`

export default withLocale(InterviewTemplate)