Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React from 'react'
- import Layout from '../components/layout'
- import { graphql, Link } from 'gatsby'
- import SEO from '../components/seo'
- import { Badge, Card, CardBody, CardSubtitle } from 'reactstrap'
- import Img from 'gatsby'
- import { slugify } from '../util/utilityFunctions'
- import authors from '../util/authors'
- const SinglePost = ({ data }) => {
- const post = data.markdownRemark.frontmatter
- const author = authors.find(x => x.name === post.author)
- return (
- <Layout
- pageTitle={post.title}
- postAuthor={author}
- authorImageFluid={data.file.childImageSharp.fluid}
- >
- <SEO
- title={post.title}
- />
- <Card>
- <Img
- className="card-image-top"
- fluid={post.image.childImageSharp.fluid}
- />
- <CardBody>
- <CardSubtitle>
- <span className="text-info">{post.date}</span> by{' '}
- <span className="text-info">{post.author}</span>
- </CardSubtitle>
- <div dangerouslySetInnerHTML={{ __html: data.markdownRemark.html }}/>
- <ul className="post-tags">
- {post.tags.map(tag => (
- <li key={tag}>
- <Link to={`/tag/${slugify(tag)}`}>
- <Badge color="primary">{tag}</Badge>
- </Link>
- </li>
- ))}
- </ul>
- </CardBody>
- </Card>
- </Layout>
- )
- }
- export const postQuery = graphql`
- query blogPostBySlug($slug: String!, $imageUrl: String!){
- markdownRemark(fields: { slug: { eq: $slug }}){
- id
- html
- frontmatter{
- title
- author
- date(formatString: "MMM Do YYYY")
- tags
- image{
- childImageSharp{
- fluid(maxWidth: 700){
- ...GatsbyImageSharpFluid
- }
- }
- }
- }
- }
- file(relativePath: { eq: $imageUrl }){
- childImageSharp{
- fluid(maxWidth: 300){
- ...GatsbyImageSharpFluid
- }
- }
- }
- }
- `
- export default SinglePost
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement