{"size": 2585, "ext": "js", "max_stars_repo_path": "src/templates/blog-post.js", "max_stars_repo_name": "mattdvhope/g", "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": "mattdvhope/g", "max_issues_repo_issues_event_min_datetime": "2021-01-06T10:58:29.000Z", "max_issues_repo_issues_event_max_datetime": "2021-01-06T10:58:29.000Z", "max_forks_repo_path": "src/templates/blog-post.js", "max_forks_repo_name": "mattdvhope/g", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 1, "max_forks_count": null, "avg_line_length": 23.0803571429, "max_line_length": 69, "alphanum_fraction": 0.4901353965}
import React, { Component } from "react";
import { Link, graphql } from "gatsby";
import Layout from "../components/layout";
import SEO from "../components/seo";
// import Share from "../components/share";
import YoutubeHolder from "./YoutubeHolder"
import YoutubeHolderPrompts from "./YoutubeHolderPrompts"
// import FacebookPageBox from "../components/FacebookPageBox"

export default class blogPost extends Component {

  constructor(props) {
    super();
    this.state = { 
      data: props.data.contentfulBlogs,
    };
  }

  YT(data) {
    if (data.promptsForResponse) {
      return (<YoutubeHolderPrompts data={data} />)
    } else {
      return (<YoutubeHolder data={data} />)
    }
  }

  render() {
    const data = this.state.data;
    const siteurl = this.props.data.contentfulHomePage.siteUrl + "/";
    const socialConfigss = {
      site: {
        siteMetadata: { siteurl }
      },
      title: data.title,
      slug: data.slug
    };
    return (
      <Layout>
        <SEO
          title={data.title}
          videoCover={data.featureImage.fluid.src}
          keywords={[
            `สายสัมพันธ์ ความสุข`,
            `Frontend Developer`,
            `Developer`,
            `${data.title}`
          ]}
        />
        <div className="site-container blog-post">
          <div className="container">
            {this.YT(data)}
            <hr/>
            <div style={{ margin: `auto`, width: `90%` }} >
              <Link
                to="/videos"
                style={{ color: `#8f7228`, fontSize: `170%` }}
              >📽️ ดูวิดีโอเพิ่มเติม 📺</Link>
            </div>
            <hr/>
        {/* <hr/>
            <FacebookPageBox/>
            <br/>
            <hr/>
            <Share
              socialConfig={{
                config: {
                  url: `${siteurl}${socialConfigss.slug}`,
                  title: `${socialConfigss.title}`
                }
              }}
            />  */}
          </div>
        </div>
      </Layout>
    );
  }
}

export const pageQuery = graphql`
  query BlogPostQuery($slug: String!) {
    contentfulBlogs(slug: {eq: $slug}) {
      id
      slug
      title
      ctaFirst
      youtubeUrl
      description {
        childMarkdownRemark {
          html
        }
      }
      featureImage {
        fluid {
          src
        }
      }
      promptsForResponse {
        promptSlug
        promptContent {
          childMarkdownRemark {
            html
          }
        }
        buttonInvitation
      }
    }
    contentfulHomePage {
      siteUrl
    }
  }
`;
