Fetch posts frm wp on blog page

src/components/Card.js

@@ -4,24 +4,28 @@ import Link from 'gatsby-link'
 import ImgSprint from '../images/wow-we-did-design-sprint-remotely.png'
 
 const Card = ({ ...props }) => (
-  <div className="my-4 lg:my-2 lg:mx-2 w-full rounded overflow-hidden shadow-md hover:shadow-lg">
-    <img className="w-full" src={ImgSprint} alt="Sprint Work" />
+  <article
+    key={props.postId}
+    className="my-4 lg:my-2 lg:mx-2 w-full rounded overflow-hidden shadow-md hover:shadow-lg"
+  >
+    <Link to={props.url}>
+      <img className="w-full" src={ImgSprint} alt="Sprint Work" />
+    </Link>
     <div className="px-6 py-4">
       <div className="font-bold text-xl mb-2">
-        How we do remote design sprints
+        {props.title} - {props.date}
       </div>
-      <p className="text-grey-darker text-base">
-        It’s amazing how design can impact business and people making the world
-        a better and a friendlier place. Knowing the how important design today
-        is, here’s a complete rundown of our design process in it’s fully glory.
-      </p>
+      <p
+        className="text-grey-darker text-base"
+        dangerouslySetInnerHTML={{ __html: props.excerpt }}
+      />
     </div>
     <div className="px-6 py-4">
       <span className="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker">
         #workstyle
       </span>
     </div>
-  </div>
+  </article>
 )
 
 export default Card

src/templates/blog.js

@@ -1,6 +1,8 @@
 import React, { Component } from 'react'
 import Link from 'gatsby-link'
 
+import Card from '../components/Card'
+
 class Blog extends Component {
   render() {
     const data = this.props.data
@@ -8,13 +10,13 @@ class Blog extends Component {
       <div>
         <h1>Blog Posts</h1>
         {data.allWordpressPost.edges.map(({ node }) => (
-          <article key={node.slug}>
-            <Link to={`post/${node.slug}`}>
-              <h3>{node.title}</h3>
-            </Link>
-            {node.date}
-            <p dangerouslySetInnerHTML={{ __html: node.excerpt }} />
-          </article>
+          <Card
+            url={`blog/${node.slug}`}
+            title={node.title}
+            postId={node.slug}
+            date={node.date}
+            excerpt={node.excerpt}
+          />
         ))}
       </div>
     )