Advertisement
Guest User

Untitled

a guest
May 2nd, 2020
148
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.53 KB | None | 0 0
  1. import React from 'react'
  2. import Layout from '../components/layout'
  3. import { graphql, Link } from 'gatsby'
  4. import SEO from '../components/seo'
  5. import { Badge, Card, CardBody, CardSubtitle } from 'reactstrap'
  6. import Img from 'gatsby'
  7. import { slugify } from '../util/utilityFunctions'
  8. import authors from '../util/authors'
  9.  
  10. const SinglePost = ({ data }) => {
  11. const post = data.markdownRemark.frontmatter
  12. const author = authors.find(x => x.name === post.author)
  13.  
  14. return (
  15. <Layout
  16. pageTitle={post.title}
  17. postAuthor={author}
  18. authorImageFluid={data.file.childImageSharp.fluid}
  19. >
  20.  
  21. <SEO
  22. title={post.title}
  23. />
  24.  
  25. <Card>
  26. <Img
  27. className="card-image-top"
  28. fluid={post.image.childImageSharp.fluid}
  29. />
  30. <CardBody>
  31. <CardSubtitle>
  32. <span className="text-info">{post.date}</span> by{' '}
  33. <span className="text-info">{post.author}</span>
  34. </CardSubtitle>
  35. <div dangerouslySetInnerHTML={{ __html: data.markdownRemark.html }}/>
  36. <ul className="post-tags">
  37. {post.tags.map(tag => (
  38. <li key={tag}>
  39. <Link to={`/tag/${slugify(tag)}`}>
  40. <Badge color="primary">{tag}</Badge>
  41. </Link>
  42. </li>
  43. ))}
  44. </ul>
  45. </CardBody>
  46. </Card>
  47. </Layout>
  48. )
  49. }
  50.  
  51. export const postQuery = graphql`
  52. query blogPostBySlug($slug: String!, $imageUrl: String!){
  53. markdownRemark(fields: { slug: { eq: $slug }}){
  54. id
  55. html
  56. frontmatter{
  57. title
  58. author
  59. date(formatString: "MMM Do YYYY")
  60. tags
  61. image{
  62. childImageSharp{
  63. fluid(maxWidth: 700){
  64. ...GatsbyImageSharpFluid
  65. }
  66. }
  67. }
  68.  
  69. }
  70. }
  71. file(relativePath: { eq: $imageUrl }){
  72. childImageSharp{
  73. fluid(maxWidth: 300){
  74. ...GatsbyImageSharpFluid
  75. }
  76. }
  77. }
  78. }
  79. `
  80.  
  81. export default SinglePost
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement