2018-07-17 23:33:55 +02:00
|
|
|
import React from 'react'
|
|
|
|
import PropTypes from 'prop-types'
|
|
|
|
import Helmet from 'react-helmet'
|
|
|
|
import { graphql } from 'gatsby'
|
2018-07-18 00:24:11 +02:00
|
|
|
import Layout from '../components/Layout'
|
|
|
|
import Image from '../components/atoms/Image'
|
2018-07-19 16:49:20 +02:00
|
|
|
import PostTitle from '../components/atoms/PostTitle'
|
2018-07-22 04:27:37 +02:00
|
|
|
import PostLead from '../components/atoms/PostLead'
|
|
|
|
import PostContent from '../components/atoms/PostContent'
|
2018-07-19 02:22:01 +02:00
|
|
|
import PostMeta from '../components/molecules/PostMeta'
|
2018-07-18 23:04:31 +02:00
|
|
|
import styles from './Post.module.scss'
|
2018-07-17 23:33:55 +02:00
|
|
|
|
2018-07-20 15:52:17 +02:00
|
|
|
const Post = ({ data, location }) => {
|
2018-07-17 23:33:55 +02:00
|
|
|
const { markdownRemark: post } = data
|
2018-07-19 02:22:01 +02:00
|
|
|
const { contentYaml: meta } = data
|
2018-07-19 16:49:20 +02:00
|
|
|
const { title, image, type, linkurl } = post.frontmatter
|
2018-07-17 23:33:55 +02:00
|
|
|
|
|
|
|
return (
|
2018-07-18 00:24:11 +02:00
|
|
|
<Layout location={location}>
|
2018-07-17 23:33:55 +02:00
|
|
|
<Helmet title={title} />
|
|
|
|
|
2018-07-18 23:04:31 +02:00
|
|
|
<article className={styles.hentry}>
|
2018-07-19 16:49:20 +02:00
|
|
|
<PostTitle type={type} linkurl={linkurl} title={title} />
|
|
|
|
|
2018-07-21 13:45:38 +02:00
|
|
|
<PostLead post={post} />
|
|
|
|
|
2018-07-18 23:04:31 +02:00
|
|
|
{image && (
|
|
|
|
<figure className={styles.hentry__teaser}>
|
|
|
|
<Image fluid={image.childImageSharp.fluid} alt={title} />
|
|
|
|
</figure>
|
|
|
|
)}
|
2018-07-19 16:49:20 +02:00
|
|
|
|
2018-07-21 13:45:38 +02:00
|
|
|
<PostContent post={post} />
|
2018-07-19 02:22:01 +02:00
|
|
|
|
|
|
|
<PostMeta post={post} meta={meta} />
|
2018-07-18 00:24:11 +02:00
|
|
|
</article>
|
|
|
|
</Layout>
|
2018-07-17 23:33:55 +02:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2018-07-21 13:45:38 +02:00
|
|
|
PostLead.propTypes = {
|
|
|
|
post: PropTypes.object.isRequired
|
|
|
|
}
|
|
|
|
|
|
|
|
PostContent.propTypes = {
|
|
|
|
post: PropTypes.object.isRequired
|
|
|
|
}
|
|
|
|
|
2018-07-17 23:33:55 +02:00
|
|
|
Post.propTypes = {
|
2018-07-20 15:52:17 +02:00
|
|
|
data: PropTypes.object.isRequired,
|
|
|
|
location: PropTypes.object.isRequired
|
2018-07-17 23:33:55 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
export default Post
|
|
|
|
|
|
|
|
export const pageQuery = graphql`
|
|
|
|
query BlogPostByPath($slug: String!) {
|
|
|
|
markdownRemark(fields: { slug: { eq: $slug } }) {
|
|
|
|
html
|
2018-07-19 23:04:41 +02:00
|
|
|
excerpt
|
2018-07-17 23:33:55 +02:00
|
|
|
frontmatter {
|
2018-07-19 16:49:20 +02:00
|
|
|
type
|
2018-07-17 23:33:55 +02:00
|
|
|
title
|
|
|
|
image {
|
|
|
|
childImageSharp {
|
|
|
|
...ImageFluid
|
|
|
|
}
|
|
|
|
}
|
2018-07-19 02:22:01 +02:00
|
|
|
author
|
|
|
|
updated
|
|
|
|
category
|
|
|
|
tags
|
2018-07-19 16:49:20 +02:00
|
|
|
linkurl
|
2018-07-17 23:33:55 +02:00
|
|
|
}
|
|
|
|
fields {
|
|
|
|
slug
|
|
|
|
date(formatString: "MMMM DD, YYYY")
|
|
|
|
}
|
|
|
|
}
|
2018-07-19 02:22:01 +02:00
|
|
|
|
|
|
|
contentYaml {
|
|
|
|
author {
|
|
|
|
uri
|
|
|
|
}
|
|
|
|
}
|
2018-07-17 23:33:55 +02:00
|
|
|
}
|
|
|
|
`
|