Untitled
raw download clone
JSX
views 26
,
size 3313 b
import React from 'react'
import PropTypes from 'prop-types'
import { Link, graphql, StaticQuery } from 'gatsby'
import PreviewCompatibleImage from './PreviewCompatibleImage'
import List from 'antd'

class BlogRoll extends React.Component {
  render() {
    const { data } = this.props
    const { edges: posts } = data.allMarkdownRemark

    return (
      <div className="columns is-multiline">
        <List 
           pagination={{
           pageSize:5,
        }}
        dataSource= {posts} 
        renderItem={posts.map(({ node: post }) =>(
          <List.Item
           key={post.title}
           > <div className="is-parent column is-6" key={post.id}>
           <article
             className={`blog-list-item tile is-child box notification ${
               post.frontmatter.featuredpost ? 'is-featured' : ''
             }`}
           >
             <header>
               {post.frontmatter.featuredimage ? (
                 <div className="featured-thumbnail">
                   <PreviewCompatibleImage
                     imageInfo={{
                       image: post.frontmatter.featuredimage,
                       alt: `featured image thumbnail for post ${post.frontmatter.title}`,
                     }}
                   />
                 </div>
               ) : null}
               
             </header>
             <p className="post-meta">
                 <Link
                   className="title has-text-primary is-size-4"
                   to={post.fields.slug}
                 >
                   {post.frontmatter.title}
                 </Link>
                 <span> </span>
                 <span className="subtitle is-size-5 is-block">
                   {post.frontmatter.date}
                 </span>
               </p>
             <p><br />
               {post.excerpt}
               <br />
               <br />
               <Link className="button" to={post.fields.slug}>
                 Keep Reading →
               </Link>
             </p>
           </article>
         </div></List.Item>

          ))} />
      </div>
    )
  }
}

BlogRoll.propTypes = {
  data: PropTypes.shape({
    allMarkdownRemark: PropTypes.shape({
      edges: PropTypes.array,
    }),
  }),
}

export default () => (
  <StaticQuery
    query={graphql`
      query BlogRollQuery {
        allMarkdownRemark(
          sort: { order: DESC, fields: [frontmatter___date] }
          filter: { frontmatter: { templateKey: { eq: "blog-post" } } }
        ) {
          edges {
            node {
              excerpt(pruneLength: 400)
              id
              fields {
                slug
              }
              frontmatter {
                title
                templateKey
                date(formatString: "MMMM DD, YYYY")
                featuredpost
                featuredimage {
                  childImageSharp {
                    fluid(maxWidth: 450, quality: 100) {
                      ...GatsbyImageSharpFluid
                    }
                  }
                }
              }
            }
          }
        }
      }
    `}
    render={(data, count) => <BlogRoll data={data} count={count} />}
  />
)
close fullscreen
Login or Register to edit or fork this paste. It's free.