Alt Text

Welcome to part-15 of the series.

As told in the earlier post, this series is based on the learning from this awesome udemy course by John Smilga

Before moving forward, i would want to create another graphql query. Generally the blog are posted in descending order, meaning the newer blogs should come up.

Desc postsDesc posts

It time to write the code to display the blog component. Create a new folder Blog inside components folder. Inside it create two files BlogList.js and BlogCard.js

BlogBlog

Let’s first add the CSS required for this component in css folder. Add a file blog.module.css in css folder and the below content.

.blog {
  padding: 4rem 0;
}
.center {
  width: 80vw;
  margin: 3rem auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
}
.links {
  width: 80vw;
  margin: 0 auto 5rem auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.link {
  text-transform: uppercase;
  letter-spacing: var(--mainSpacing);
  background: var(--primaryColor);
  color: var(--mainWhite);
  border: 2px solid var(--primaryColor);
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  display: inline-block;
  transition: var(--mainTransition);
  cursor: pointer;
}
.link:hover {
  background: transparent;
  color: var(--primaryColor);
}
.active {
  background: var(--mainWhite);
  color: var(--primaryColor);
}

[@media](http://twitter.com/media) screen and (min-width: 576px) {
  .center {
    grid-template-columns: repeat(auto-fill, minmax(368.66px, 1fr));
  }
  .links {
    width: 60vw;
  }
}
[@media](http://twitter.com/media) screen and (min-width: 1200px) {
  .center {
    width: 100%;
    max-width: 1170px;
  }
}

Next, let’s add this dummy content for now in BlogCard.js which we will change soon.

BlogCard componentBlogCard component

Next, add the below content in BlogList.js file. Here, we are using the graphql query which we created earlier in our graphiql playground. We are mapping through the response which we are getting from this query.

import React from "react"
import BlogCard from "./BlogCard"
import Title from "../Title"
import { useStaticQuery, graphql } from "gatsby"
import styles from "../../css/blog.module.css"

const getPosts = graphql

query { posts: allContentfulPost(sort:{fields:published,order:DESC}) { edges { node { title slug published(formatString: "MMMM Do, YYYY") author id: contentful_id image { fluid { ...GatsbyContentfulFluid } } } } } }

const BlogList = () => {
    const { posts } = useStaticQuery(getPosts)

return (
        <section className={styles.blog}>
            <Title title="hampi" subtitle="blogs" />
            <div className={styles.center}>
                {posts.edges.map(({ node }) => {
                    return <BlogCard key={node.id} blog={node} />
                })}
            </div>
        </section>
    )
}

export default BlogList

Finally, add this component to blog.js file so that it can be rendered when we click on the blog page.

BlogListBlogList

We will work on the BlogCard component now. But first let’s add some styles for it. Create a new file blog-card.module.css inside the css folder. Add the below content in it.

.blog {
  box-shadow: var(--lightShadow);
  transition: var(--mainTransition);
}
.blog:hover {
  box-shadow: var(--darkShadow);
}

.img-container {
  position: relative;
  background: var(--primaryColor);
  transition: var(--mainTransition);
}
.img {
  transition: var(--mainTransition);
}
.img-container:hover .img {
  opacity: 0.3;
}

.link {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  text-transform: uppercase;
  letter-spacing: var(--mainSpacing);
  color: var(--mainWhite);
  border: 2px solid var(--mainWhite);
  padding: 0.5rem 0.7rem;
  display: inline-block;
  transition: var(--mainTransition);
  cursor: pointer;
}
.link:hover {
  background: var(--mainWhite);
  color: var(--primaryColor);
}
.img-container:hover .link {
  opacity: 1;
}

.footer {
  padding: 1rem;
  text-align: left;
}
.footer h4 {
  text-transform: capitalize;
  margin-bottom: 0;
}
.date {
  position: absolute;
  left: 0;
  top: 75%;
  background: var(--primaryColor);
  padding: 0.3rem 0.5rem;
  border-top-right-radius: 1rem;
  border-bottom-right-radius: 1rem;
}

Next, let’s update our BlogCard.js file with real code. Here, we are just adding some styles from the css file. We are getting the props blog which we are from the BlogList component. We are destructring it and taking the title image and published to show the blog.

Once we click on the post, we will use the slug to display it. But that we will do in the next part.

BlogCard.jsBlogCard.js

It will show all our four blogs from contentful, in the below way in the browser.

Hampi blogHampi blog

This completes part-15 of the series. You can find the code for the same here.

Also, because of the continuous deployment it got successfully pushed to netlify site.

See you soon.

This post is also available on DEV.