Gatsby

blog-post.js

import React from 'react'
import PropTypes from 'prop-types'
import { kebabCase } from 'lodash'
import Helmet from 'react-helmet'
import { graphql, Link } from 'gatsby'
import tachyons from 'tachyons-components'
import Layout from '../components/Layout'
import Content, {HTMLContent} from '../components/Content'
import SEO from '../components/Seo'

const ArticleContainer = tachyons('article')`
ph3 ph0-ns pv4-ns
`
const TitleWrapper = tachyons('div')`
wrap tc pb5
`
const ArticleTitle = tachyons('h1')`
f3 f2-ns fw6 tc db pt5 pt6-ns mt0 mb2 lh-title
`
const ContentContainer = tachyons('div')`
wrap mw12
`

export default class BlogPostTemplate extends React.Component {
  render() {
    const post = this.props.data.markdownRemark
    const content = post.html
    const frontmatter = post.frontmatter
    const tags = frontmatter.tags
    const title = frontmatter.title
    const description = frontmatter.description
    const date = frontmatter.date
    const contentComponent = HTMLContent
    const PostContent = contentComponent || Content
  
    return(
      <Layout
      contentComponent={HTMLContent}
      >
        <ArticleContainer>
          <Helmet
            titleTemplate="%s"
            bodyAttributes={{
                class: 'blog'
            }}
          >
            <title>{`${title} · Ajmal Afif`} </title>
            <meta name="description" content={`${description}`} />
          </Helmet>
          <SEO
            title={`${title} · Ajmal Afif`}
            node={content}
            desc={description}
            article>
            <meta name="description" content={description} />
            <meta name="twitter:title" content={`${title} · Ajmal Afif`} />
            <meta name="twitter:description" content={description} />
            <meta property="og:title" content={`${title} · Ajmal Afif`} />
            <meta property="og:description" content={description} />
          </SEO>
          <TitleWrapper>
            <ArticleTitle>
              {title}
            </ArticleTitle>
            <small className="mid-gray">{date}</small>
          </TitleWrapper>
          <ContentContainer>
            <div className="center measure-wide lh-copy">
              <PostContent content={content} />
              {tags && tags.length ? (
                <p className="pt5">
                  <span className="f5 fw6 mid-gray">{tags.length === 1 ? 'Related topic' : 'Related topics'}: </span>
                    {tags.map(tag => (
                      <Link key={tag + `tag`} className="gray mr2 link" to={`/tags/${kebabCase(tag)}/`}>{tag}</Link>
                    ))}
                </p>
              ) : null}
            </div>
          </ContentContainer>
        </ArticleContainer>
      </Layout>
    )
  }
}

BlogPostTemplate.propTypes = {
  content: PropTypes.node.isRequired,
  contentComponent: PropTypes.func,
  description: PropTypes.string,
  title: PropTypes.string,
  date: PropTypes.string,
  helmet: PropTypes.object,
}

export const pageQuery = graphql`
  query BlogPostTemplateByID($id: String!) {
    markdownRemark(id: { eq: $id }) {
      id
      html
      frontmatter {
        date(formatString: "MMMM DD, YYYY")
        title
        description
        tags
      }
    }
  }
`