2018-09-25 22:32:38 +02:00
|
|
|
import React, { Fragment } from 'react'
|
2018-07-17 23:33:55 +02:00
|
|
|
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'
|
2018-10-11 20:35:10 +02:00
|
|
|
import PostImage from '../components/Post/PostImage'
|
|
|
|
import PostTitle from '../components/Post/PostTitle'
|
|
|
|
import PostLead from '../components/Post/PostLead'
|
|
|
|
import PostContent from '../components/Post/PostContent'
|
|
|
|
import PostActions from '../components/Post/PostActions'
|
|
|
|
import PostLinkActions from '../components/Post/PostLinkActions'
|
2018-09-24 23:50:39 +02:00
|
|
|
import SEO from '../components/atoms/SEO'
|
2018-09-25 22:32:38 +02:00
|
|
|
import Coinhive from '../components/atoms/Coinhive'
|
2018-10-11 20:35:10 +02:00
|
|
|
import PostMeta from '../components/Post/PostMeta'
|
2018-09-07 01:45:53 +02:00
|
|
|
import Exif from '../components/atoms/Exif'
|
2018-09-29 20:09:02 +02:00
|
|
|
import RelatedPosts from '../components/molecules/RelatedPosts'
|
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-09-30 03:11:08 +02:00
|
|
|
const meta = data.site.siteMetadata
|
2018-09-29 20:09:02 +02:00
|
|
|
const {
|
|
|
|
title,
|
|
|
|
image,
|
|
|
|
type,
|
|
|
|
linkurl,
|
|
|
|
style,
|
|
|
|
coinhive,
|
|
|
|
tags
|
|
|
|
} = post.frontmatter
|
2018-11-18 23:11:36 +01:00
|
|
|
const { slug, githubLink } = post.fields
|
2018-07-17 23:33:55 +02:00
|
|
|
|
|
|
|
return (
|
2018-09-25 22:32:38 +02:00
|
|
|
<Fragment>
|
2018-11-07 01:15:41 +01:00
|
|
|
<Helmet title={title}>
|
|
|
|
{style && <link rel="stylesheet" href={style.publicURL} />}
|
|
|
|
</Helmet>
|
2018-07-17 23:33:55 +02:00
|
|
|
|
2018-11-07 01:15:41 +01:00
|
|
|
<SEO slug={slug} post={post} postSEO />
|
2018-09-24 23:50:39 +02:00
|
|
|
|
2018-11-07 01:15:41 +01:00
|
|
|
<Layout location={location}>
|
2018-09-25 22:32:38 +02:00
|
|
|
<article className={styles.hentry}>
|
|
|
|
<PostTitle type={type} linkurl={linkurl} title={title} />
|
2018-09-27 22:33:01 +02:00
|
|
|
{type === 'post' && <PostLead post={post} />}
|
2018-11-06 21:03:45 +01:00
|
|
|
{type === 'photo' && <PostContent post={post} />}
|
2018-09-25 22:32:38 +02:00
|
|
|
{image && (
|
|
|
|
<PostImage fluid={image.childImageSharp.fluid} alt={title} />
|
|
|
|
)}
|
|
|
|
{image && image.fields && <Exif exif={image.fields.exif} />}
|
2018-11-06 21:03:45 +01:00
|
|
|
|
|
|
|
{type !== 'photo' && <PostContent post={post} />}
|
|
|
|
|
2018-09-29 20:09:02 +02:00
|
|
|
{type === 'link' && <PostLinkActions slug={slug} linkurl={linkurl} />}
|
2018-11-18 23:11:36 +01:00
|
|
|
<PostActions slug={slug} url={meta.siteUrl} githubLink={githubLink} />
|
2018-09-25 22:32:38 +02:00
|
|
|
<PostMeta post={post} meta={meta} />
|
|
|
|
</article>
|
2018-09-29 20:09:02 +02:00
|
|
|
|
|
|
|
{type === 'post' && <RelatedPosts tags={tags} />}
|
2018-09-25 22:32:38 +02:00
|
|
|
</Layout>
|
|
|
|
{coinhive && <Coinhive />}
|
|
|
|
</Fragment>
|
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`
|
2018-09-07 13:08:01 +02:00
|
|
|
query BlogPostBySlug($slug: String!) {
|
2018-07-17 23:33:55 +02:00
|
|
|
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-09-07 13:08:01 +02:00
|
|
|
}
|
|
|
|
fields {
|
|
|
|
exif {
|
|
|
|
iso
|
|
|
|
model
|
|
|
|
fstop
|
|
|
|
shutterspeed
|
|
|
|
focalLength
|
|
|
|
exposure
|
2018-09-14 00:35:40 +02:00
|
|
|
gps {
|
|
|
|
latitude
|
|
|
|
longitude
|
|
|
|
}
|
2018-09-07 01:45:53 +02:00
|
|
|
}
|
2018-07-17 23:33:55 +02:00
|
|
|
}
|
|
|
|
}
|
2018-07-19 02:22:01 +02:00
|
|
|
author
|
|
|
|
updated
|
|
|
|
tags
|
2018-07-19 16:49:20 +02:00
|
|
|
linkurl
|
2018-09-25 22:32:38 +02:00
|
|
|
coinhive
|
2018-09-13 20:35:08 +02:00
|
|
|
style {
|
|
|
|
publicURL
|
|
|
|
}
|
2018-07-17 23:33:55 +02:00
|
|
|
}
|
|
|
|
fields {
|
|
|
|
slug
|
2018-11-01 21:14:04 +01:00
|
|
|
date
|
2018-11-18 23:11:36 +01:00
|
|
|
githubLink
|
2018-07-17 23:33:55 +02:00
|
|
|
}
|
2018-08-28 23:28:42 +02:00
|
|
|
rawMarkdownBody
|
2018-07-17 23:33:55 +02:00
|
|
|
}
|
2018-07-19 02:22:01 +02:00
|
|
|
|
2018-09-30 03:11:08 +02:00
|
|
|
site {
|
|
|
|
siteMetadata {
|
|
|
|
siteUrl
|
|
|
|
author {
|
2018-10-31 18:12:26 +01:00
|
|
|
name
|
2018-09-30 03:11:08 +02:00
|
|
|
uri
|
|
|
|
}
|
2018-07-19 02:22:01 +02:00
|
|
|
}
|
|
|
|
}
|
2018-07-17 23:33:55 +02:00
|
|
|
}
|
|
|
|
`
|