content: import React from 'react'
  import Helmet from 'react-helmet'
  import UserInfo from '../components/UserInfo/UserInfo'
  import Disqus from '../components/Disqus/Disqus'
  import PostTags from '../components/PostTags/PostTags'
  import SocialLinks from '../components/SocialLinks/SocialLinks'
  import SEO from '../components/SEO/SEO'
  import config from '../../data/SiteConfig'
  import { rhythm, scale } from '../utils/typography'
  import Link from 'gatsby-link'
  import { Container } from 'react-responsive-grid'
  import Footer from '../components/Footer/Footer'
  import Header from '../components/Header/Header'
  
  import moment from 'moment'
  import ReadNext from '../components/ReadNext/ReadNext'
  import Bio from '../components/Bio/Bio'
  
  import '../css/prism-one-dark.css'
  import './post.css'
  
  export default class PostTemplate extends React.Component {
    render() {
      const { slug } = this.props.pathContext
      const postNode = this.props.data.markdownRemark
      const post = postNode.frontmatter
      let containerStyles = {
        maxWidth: rhythm(27),
        padding: `${rhythm(1.5)} ${rhythm(1.3)}`,
        paddingTop: rhythm(4),
        paddingTop: '9rem',
        background: 'white',
        // marginTop: '11rem',
        boxShadow: '0 20px 20px rgba(0,0,0,.08)'
      }
      if (!post.id) {
        post.id = slug
      }
      if (!post.id) {
        post.category_id = config.postDefaultCategoryID
      }
      return (
        <div>
          <Helmet>
            <title>{`${post.title} | ${config.siteTitle}`}</title>
          </Helmet>
          <SEO postPath={slug} postNode={postNode} postSEO />
          <div>
            <Header />
            <Container
              style={{
                ...containerStyles,
                position: 'relative'
              }}>
              <div
                className="post-bg"
                style={{
                  position: 'absolute',
                  left: 0,
                  right: 0,
                  top: 0,
                  bottom: 0,
                  backgroundColor: 'white',
                  zIndex: -1
                }}
              />
              <h1 style={{ marginTop: 0 }}>{post.title}</h1>
              {this.renderDate(postNode)}
              <div dangerouslySetInnerHTML={{ __html: postNode.html }} />
              <hr
                style={{
                  marginTop: rhythm(1),
                  marginBottom: rhythm(2)
                }}
              />
              <div className="post-meta">
                {/* <PostTags tags={post.tags} /> */}
                <SocialLinks postPath={slug} postNode={postNode} />
              </div>
              <hr
                style={{
                  marginBottom: rhythm(2.5),
                  marginTop: rhythm(1)
                }}
              />
              {/* <UserInfo config={config} /> */}
              {/* <ReadNext post={post} pages={route.pages} /> */}
              <Bio />
              <Disqus postNode={postNode} />
            </Container>
            <Footer />
          </div>
        </div>
      )
    }
  
    renderDate(post) {
      return post.frontmatter.date ? (
        <p className="time-infos">
          <span className="date-posted">
            {moment(post.date).format('MMMM DD, YYYY')}
          </span>
          <span className="date-posted-sep">•</span>
          <span className="date-posted">{post.timeToRead} min read</span>
        </p>
      ) : null
    }
  }
  
  /* eslint no-undef: "off"*/
  export const pageQuery = graphql`
    query BlogPostBySlug($slug: String!) {
      markdownRemark(fields: { slug: { eq: $slug } }) {
        html
        timeToRead
        excerpt
        frontmatter {
          title
          date
          category
          tags
        }
        fields {
          slug
        }
      }
    }
  `
  