{"size": 1092, "ext": "js", "max_stars_repo_path": "src/templates/blog-post.js", "max_stars_repo_name": "darq37/gatsby-panda-blog", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/templates/blog-post.js", "max_issues_repo_name": "darq37/gatsby-panda-blog", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/templates/blog-post.js", "max_forks_repo_name": "darq37/gatsby-panda-blog", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 21.0, "max_line_length": 63, "alphanum_fraction": 0.5531135531}
import React from "react"
import { DiscussionEmbed } from "disqus-react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"
import { css } from "@emotion/core"

export default ({ data }) => {
  const post = data.mongodbPandaBasePosts
  const disqusConfig = {
    shortname: "PandaWebDev",
    config: { identifier: post.id },
  }

  return (
    <Layout>
      <SEO title={post.title} description={post.description} />
      <div
        css={css`
          margin: 0 auto;
          max-width: 700px;
          text-align: center;
        `}
      >
        <h1>{post.title}</h1>
        <div
          dangerouslySetInnerHTML={{
            __html: post.content.childMarkdownRemark.html,
          }}
        />
      </div>
      <DiscussionEmbed {...disqusConfig} />
    </Layout>
  )
}

export const query = graphql`
  query($id: String!) {
    mongodbPandaBasePosts(id: { eq: $id }) {
      content {
        childMarkdownRemark {
          html
        }
      }
      date
      id
      title
      description
    }
  }
`
