75 lines
1.7 KiB
TypeScript
75 lines
1.7 KiB
TypeScript
import * as React from 'react'
|
|
import { graphql, PageProps } from 'gatsby'
|
|
|
|
import Layout from '../components/layout'
|
|
import Seo from '../components/seo'
|
|
|
|
import { Section } from '../components/shared'
|
|
import Post from './post'
|
|
import { SideBar } from './sidebar'
|
|
|
|
import type { PostNode, PageContext } from '../types'
|
|
|
|
const BlogPostTemplate: React.FC<
|
|
PageProps<{ post: PostNode }, PageContext>
|
|
> = ({ data, location, pageContext }) => {
|
|
const { post } = data
|
|
|
|
return (
|
|
<Layout location={location} heroSection={false}>
|
|
<Section color="black" bgColor="white" bottomArrow={false}>
|
|
<div className="row">
|
|
<div className="col-md-7">
|
|
<Post post={post} location={location} />
|
|
</div>
|
|
<div className="col-md-5">
|
|
<SideBar pageContext={pageContext} location={location} />
|
|
</div>
|
|
</div>
|
|
</Section>
|
|
</Layout>
|
|
)
|
|
}
|
|
|
|
export default BlogPostTemplate
|
|
|
|
export const Head: React.FC<{ data: { post: PostNode } }> = ({ data }) => {
|
|
const { post } = data
|
|
const { previewImg } = post.frontmatter
|
|
|
|
return (
|
|
<Seo
|
|
title={post.frontmatter.title}
|
|
description={post.frontmatter.description}
|
|
previewImg={
|
|
previewImg?.childImageSharp?.gatsbyImageData?.images?.fallback?.src
|
|
}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export const pageQuery = graphql`
|
|
query PostByPath($id: String!) {
|
|
post: markdownRemark(id: { eq: $id }) {
|
|
id
|
|
html
|
|
fields {
|
|
slug
|
|
}
|
|
frontmatter {
|
|
title
|
|
description
|
|
date(formatString: "MMMM DD, YYYY")
|
|
author
|
|
authorLink
|
|
previewImg {
|
|
childImageSharp {
|
|
gatsbyImageData(layout: CONSTRAINED)
|
|
}
|
|
}
|
|
tags
|
|
}
|
|
}
|
|
}
|
|
`
|