Skip to content

Instantly share code, notes, and snippets.

@domtaylor
Created June 3, 2020 15:04
Show Gist options
  • Save domtaylor/5fc98893cd89d5a27d56c39f990df8e0 to your computer and use it in GitHub Desktop.
Save domtaylor/5fc98893cd89d5a27d56c39f990df8e0 to your computer and use it in GitHub Desktop.
blog roll component
import React from 'react'
import PropTypes from 'prop-types'
import { Link, graphql, StaticQuery } from 'gatsby'
import PreviewCompatibleImage from './PreviewCompatibleImage'
class BlogRoll extends React.Component {
render() {
const { data } = this.props
const { edges: posts } = data.allMarkdownRemark
const postLimit = 10
return (
<div className="columns is-multiline">
{posts && postLimit &&
posts.map(({ node: post }) => (
<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.title
}`,
}}
/>
</div>
) : null}
<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>
</header>
<p>
{post.excerpt}
<br />
<br />
<Link className="button" to={post.fields.slug}>
Keep Reading →
</Link>
</p>
</article>
</div>
))}
</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" } } }
limit: 10
) {
edges {
node {
excerpt(pruneLength: 400)
id
fields {
slug
}
frontmatter {
title
templateKey
date(formatString: "MMMM DD, YYYY")
featuredpost
featuredimage {
childImageSharp {
fluid(maxWidth: 120, quality: 100) {
...GatsbyImageSharpFluid
}
}
}
}
}
}
}
}
`}
render={(data, count, postLimit) => <BlogRoll data={data} count={count} postLimit={postLimit} />}
/>
)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment