2020-05-22 14:38:19 +02:00
|
|
|
import React, { ReactElement } from 'react'
|
2018-07-17 23:33:55 +02:00
|
|
|
import { graphql } from 'gatsby'
|
2023-01-29 22:58:19 +01:00
|
|
|
import { PageContext } from '../../../@types/Post'
|
|
|
|
import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
|
2020-03-04 22:21:12 +01:00
|
|
|
import Exif from '../../atoms/Exif'
|
2023-01-29 22:58:19 +01:00
|
|
|
import HeadMeta from '../../atoms/HeadMeta'
|
|
|
|
import SchemaOrg from '../../atoms/HeadMeta/SchemaOrg'
|
|
|
|
import { Image } from '../../atoms/Image'
|
2020-03-04 22:21:12 +01:00
|
|
|
import RelatedPosts from '../../molecules/RelatedPosts'
|
|
|
|
import PostActions from './Actions'
|
2023-01-29 22:58:19 +01:00
|
|
|
import PostContent from './Content'
|
|
|
|
import PostLead from './Lead'
|
2020-03-04 22:21:12 +01:00
|
|
|
import PostLinkActions from './LinkActions'
|
|
|
|
import PostMeta from './Meta'
|
|
|
|
import PrevNext from './PrevNext'
|
2023-01-29 22:58:19 +01:00
|
|
|
import PostTitle from './Title'
|
2022-11-11 03:31:54 +01:00
|
|
|
import * as styles from './index.module.css'
|
2018-07-17 23:33:55 +02:00
|
|
|
|
2019-10-02 13:35:50 +02:00
|
|
|
export default function Post({
|
|
|
|
data,
|
2019-11-11 01:00:26 +01:00
|
|
|
pageContext: { next, prev }
|
2019-10-02 13:35:50 +02:00
|
|
|
}: {
|
2022-11-11 03:31:54 +01:00
|
|
|
data: Queries.BlogPostBySlugQuery
|
2019-11-11 01:00:26 +01:00
|
|
|
pageContext: {
|
|
|
|
next: { title: string; slug: string }
|
|
|
|
prev: { title: string; slug: string }
|
|
|
|
}
|
2020-05-22 14:38:19 +02:00
|
|
|
}): ReactElement {
|
2019-10-16 01:45:30 +02:00
|
|
|
const { post } = data
|
2022-11-19 16:09:13 +01:00
|
|
|
const { title, image, linkurl, tags, updated } = post.frontmatter
|
2021-02-28 04:50:05 +01:00
|
|
|
const { slug, githubLink, date, type } = post.fields
|
2018-07-17 23:33:55 +02:00
|
|
|
|
|
|
|
return (
|
2019-10-02 13:35:50 +02:00
|
|
|
<>
|
2022-11-11 03:31:54 +01:00
|
|
|
<article className={styles.hentry}>
|
2019-11-17 23:56:29 +01:00
|
|
|
<header>
|
2020-06-01 16:07:56 +02:00
|
|
|
<PostTitle
|
|
|
|
linkurl={linkurl}
|
|
|
|
title={title}
|
|
|
|
date={date}
|
|
|
|
updated={updated}
|
|
|
|
/>
|
2021-03-04 01:20:39 +01:00
|
|
|
</header>
|
2020-07-19 13:31:27 +02:00
|
|
|
|
2021-03-04 01:20:39 +01:00
|
|
|
{type === 'article' && <PostLead post={post} />}
|
|
|
|
{type === 'photo' && <PostContent post={post} />}
|
2020-07-19 13:31:27 +02:00
|
|
|
|
2021-03-04 01:20:39 +01:00
|
|
|
{image && (
|
|
|
|
<Image
|
2022-11-11 03:31:54 +01:00
|
|
|
className={styles.image}
|
2021-03-13 04:11:44 +01:00
|
|
|
image={(image as any).childImageSharp.gatsbyImageData}
|
2021-03-04 01:20:39 +01:00
|
|
|
alt={title}
|
|
|
|
/>
|
|
|
|
)}
|
2019-11-09 17:28:39 +01:00
|
|
|
|
2020-07-19 13:31:27 +02:00
|
|
|
{type === 'photo' ? (
|
2022-11-11 03:31:54 +01:00
|
|
|
image?.fields && (
|
|
|
|
<Exif exif={image.fields.exif as Queries.ImageExif} />
|
|
|
|
)
|
2020-07-19 13:31:27 +02:00
|
|
|
) : (
|
|
|
|
<PostContent post={post} />
|
2019-11-17 23:56:29 +01:00
|
|
|
)}
|
2018-11-06 21:03:45 +01:00
|
|
|
|
2019-11-17 23:56:29 +01:00
|
|
|
{type === 'link' && <PostLinkActions slug={slug} linkurl={linkurl} />}
|
|
|
|
<PostMeta post={post} />
|
2023-01-26 19:36:45 +01:00
|
|
|
<PostActions githubLink={githubLink} />
|
2019-11-17 23:56:29 +01:00
|
|
|
</article>
|
2018-09-29 20:09:02 +02:00
|
|
|
|
2022-11-11 03:31:54 +01:00
|
|
|
<RelatedPosts isPhotos={type === 'photo'} tags={tags as string[]} />
|
2019-11-11 01:00:26 +01:00
|
|
|
|
2019-11-17 23:56:29 +01:00
|
|
|
<PrevNext prev={prev} next={next} />
|
2019-10-02 13:35:50 +02:00
|
|
|
</>
|
2018-07-17 23:33:55 +02:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2022-11-19 16:09:13 +01:00
|
|
|
export function Head({
|
|
|
|
pageContext,
|
|
|
|
data
|
|
|
|
}: {
|
|
|
|
pageContext: PageContext
|
|
|
|
data: Queries.BlogPostBySlugQuery
|
|
|
|
}): ReactElement {
|
|
|
|
const { siteUrl } = useSiteMetadata()
|
|
|
|
const { excerpt, rawMarkdownBody } = data.post
|
|
|
|
const { title, image, style, updated } = data.post.frontmatter
|
|
|
|
const { date } = data.post.fields
|
|
|
|
const description = excerpt || rawMarkdownBody
|
|
|
|
|
|
|
|
return (
|
|
|
|
<HeadMeta
|
|
|
|
title={title}
|
|
|
|
description={description}
|
|
|
|
slug={pageContext.slug}
|
|
|
|
image={image}
|
|
|
|
>
|
|
|
|
<>
|
|
|
|
<SchemaOrg
|
|
|
|
post={{
|
|
|
|
title,
|
|
|
|
description,
|
|
|
|
image,
|
|
|
|
url: `${siteUrl}${pageContext.slug}`,
|
|
|
|
datePublished: date,
|
|
|
|
dateModified: updated
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
{style && <link rel="stylesheet" href={style.publicURL} />}
|
|
|
|
</>
|
|
|
|
</HeadMeta>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2018-07-17 23:33:55 +02:00
|
|
|
export const pageQuery = graphql`
|
2018-09-07 13:08:01 +02:00
|
|
|
query BlogPostBySlug($slug: String!) {
|
2019-10-16 01:45:30 +02:00
|
|
|
post: markdownRemark(fields: { slug: { eq: $slug } }) {
|
2018-07-17 23:33:55 +02:00
|
|
|
html
|
2018-07-19 23:04:41 +02:00
|
|
|
excerpt
|
2018-07-17 23:33:55 +02:00
|
|
|
frontmatter {
|
|
|
|
title
|
|
|
|
image {
|
|
|
|
childImageSharp {
|
|
|
|
...ImageFluid
|
2018-09-07 13:08:01 +02:00
|
|
|
}
|
|
|
|
fields {
|
|
|
|
exif {
|
2019-10-31 00:51:53 +01:00
|
|
|
formatted {
|
|
|
|
iso
|
|
|
|
model
|
|
|
|
fstop
|
|
|
|
shutterspeed
|
|
|
|
focalLength
|
|
|
|
lensModel
|
|
|
|
exposure
|
|
|
|
gps {
|
|
|
|
latitude
|
|
|
|
longitude
|
|
|
|
}
|
2018-09-14 00:35:40 +02:00
|
|
|
}
|
2018-09-07 01:45:53 +02:00
|
|
|
}
|
2018-07-17 23:33:55 +02:00
|
|
|
}
|
|
|
|
}
|
2019-11-08 20:47:23 +01:00
|
|
|
toc
|
2018-07-19 02:22:01 +02:00
|
|
|
author
|
|
|
|
updated
|
|
|
|
tags
|
2018-07-19 16:49:20 +02:00
|
|
|
linkurl
|
2018-09-13 20:35:08 +02:00
|
|
|
style {
|
|
|
|
publicURL
|
|
|
|
}
|
2018-11-21 23:39:09 +01:00
|
|
|
changelog
|
2018-07-17 23:33:55 +02:00
|
|
|
}
|
|
|
|
fields {
|
2021-02-28 22:14:36 +01:00
|
|
|
type
|
2018-07-17 23:33:55 +02:00
|
|
|
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
|
2020-05-10 14:25:58 +02:00
|
|
|
tableOfContents(maxDepth: 3)
|
2018-07-17 23:33:55 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
`
|