text: import React from "react"
  import Helmet from "react-helmet"
  import { graphql } from "gatsby"
  import get from "lodash/get"
  import Container from "react-bootstrap/Container"
  import Row from "react-bootstrap/Row"
  import Col from "react-bootstrap/Col"
  import Layout from "../components/layout"
  
  class BlogPostTemplate extends React.Component {
    render() {
      const post = this.props.data.markdownRemark
      const siteTitle = get(this.props, "data.site.siteMetadata.title")
      const siteDescription = post.excerpt
  
      return (
        <Layout location={this.props.location}>
          <Helmet
            htmlAttributes={{ lang: "fa" }}
            meta={[{ name: "description", content: siteDescription }]}
            title={`${post.frontmatter.title} | ${siteTitle}`}
          />
          <Container className="post">
            <Row>
              <Col>
                <h4 className="post-title text-center text-primary">
                  {post.frontmatter.title}
                </h4>
              </Col>
            </Row>
            <Row>
              <Col md={{ span: 8, offset: 2 }}>
                <div
                  className="post-md"
                  dangerouslySetInnerHTML={{ __html: post.html }}
                />
              </Col>
            </Row>
          </Container>
        </Layout>
      )
    }
  }
  
  export default BlogPostTemplate
  
  export const pageQuery = graphql`
    query BlogPostBySlug($slug: String!) {
      site {
        siteMetadata {
          title
          author
        }
      }
      markdownRemark(fields: { slug: { eq: $slug } }) {
        id
        excerpt
        html
        frontmatter {
          title
          date(formatString: "MMMM DD, YYYY")
        }
      }
    }
  `
  