import React from "react"; import PropTypes from "prop-types"; import { Link, graphql, StaticQuery } from "gatsby"; import { CardTitle } from "reactstrap"; import "bootstrap/dist/css/bootstrap.min.css"; class BlogRoll extends React.Component { render() { const { data } = this.props; const { edges: posts } = data.allMarkdownRemark; return ( <div className="allPosts"> {posts && posts.map(({ node: post }) => ( <div style={{ height: "auto", margin: "2%", backgroundColor: "white", boxShadow: "0px 7px 15px #b1b1b1", position: "relative", borderRadius:"2%" }} key={post.id} > <div> {post.frontmatter.featuredimage ? ( <div style={{ border: "none" }}> <img src={ post.frontmatter.featuredimage != null ? "/img/" + post.frontmatter.featuredimage.relativePath : "https://increasify.com.au/wp-content/uploads/2016/08/default-image.png" } alt={post.frontmatter.title} style={{ width: "100%", borderTopLeftRadius:"2%", borderTopRightRadius:"2%" }} /> </div> ) : null} <CardTitle style={{ padding: "5%", fontSize: "1.4em" }}> <Link className="title" to={post.fields.slug}> <span style={{ color: "#242424", }} className="hover-underline" > {post.frontmatter.title} </span> </Link> <span className="d-block mt-1 text-muted"> {post.frontmatter.date} </span> </CardTitle> </div> <p className="px-4 text-justify" style={{ marginBottom: "60px" }}> {post.excerpt.charAt(0).toUpperCase() + post.excerpt.substring(1, 150)} ... <br /> <br /> </p> <p className="px-4 pb-2" style={{ position: "absolute", bottom: "0px", marginTop: "40px", }} > <Link className="btn btn-primary text-white" to={post.fields.slug} > Keep Reading → </Link> </p> </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" } } } ) { edges { node { excerpt(pruneLength: 400) id fields { slug } frontmatter { title templateKey date(formatString: "MMMM DD, YYYY") featuredpost featuredimage { relativePath } } } } } } `} render={(data, count) => <BlogRoll data={data} count={count} />} /> );