{"size": 1798, "ext": "js", "max_stars_repo_path": "src/templates/post.js", "max_stars_repo_name": "guoshencheng/Blog", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/templates/post.js", "max_issues_repo_name": "guoshencheng/Blog", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/templates/post.js", "max_forks_repo_name": "guoshencheng/Blog", "max_forks_repo_forks_event_min_datetime": "2020-06-12T03:04:28.000Z", "max_forks_repo_forks_event_max_datetime": "2020-06-12T03:04:28.000Z"}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": 1, "avg_line_length": 27.2424242424, "max_line_length": 79, "alphanum_fraction": 0.5400444939}
import React from 'react';
import Link from 'gatsby-link';
import { graphql } from 'gatsby';
import './post.less';
import { DiscussionEmbed } from "disqus-react";
import Layout from '../components/layout';
require("prismjs/themes/prism-tomorrow.css")

export default class Post extends React.Component {
  render() {
    const { data } = this.props;
    const post = data.markdownRemark;
    const { tag } = post.frontmatter;
    const excerpt = post.excerpt;
    const tags = tag ? tag.split(',') : '';
    const disqusShortname = "guoshencheng";
    const disqusConfig = {
      identifier: post.id,
      title: post.frontmatter.title,
    };
    return (
      <Layout
        title={post.frontmatter.title}
        keywords={tag}
        description={excerpt}
        showHeader
      >
        <div className="post-container">
          <div className="post-title">
            {post.frontmatter.title}
          </div>
          <div className="extra-info">
            <span className="post-date">
              {post.frontmatter.date} 
            </span>
            <span className="post-tag">
              {
                tags.map(t => (
                  <Link key={t} to={`/posts/${t}`}>{t}</Link>
                ))
              }
            </span>
          </div>
          <div className="markdown-body">
            <div dangerouslySetInnerHTML={{ __html: post.html }} />
          </div>
          <DiscussionEmbed shortname={disqusShortname} config={disqusConfig} />
        </div>
      </Layout>
    );
  }
}

export const query = graphql`
  query BlogPostQuery($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      frontmatter {
        title
        date(formatString: "DD MMMM, YYYY")
        tag
      }
      excerpt
    }
  }
`;