Query for indexing posts on landing page

src/layouts/index.js

@@ -11,7 +11,7 @@ import '../styles/custom.css'
 const Layout = ({ children, data }) => (
   <div className="font-sans mx-auto">
     <Helmet
-      title={data.site.siteMetadata.title}
+      title="Saburly"
       meta={[
         { name: 'description', content: 'We code & design great software' },
         {
@@ -34,13 +34,3 @@ Layout.propTypes = {
 }
 
 export default Layout
-
-export const query = graphql`
-  query SiteTitleQuery {
-    site {
-      siteMetadata {
-        title
-      }
-    }
-  }
-`

src/pages/index.js

@@ -15,7 +15,7 @@ import LogoRicoh from '../images/logo-ricoh-color.svg'
 import LogoKinnarps from '../images/logo-kinnarps-color.svg'
 import LogoCoor from '../images/logo-coor-color.svg'
 
-const IndexPage = () => (
+const IndexPage = ({ ...props }) => (
   <main>
     <section className="bg-saburly-indigo relative">
       <div className="container mx-auto flex lg:flex-row flex-col flex-col-reverse p-4">
@@ -148,8 +148,22 @@ const IndexPage = () => (
         headline="But occasionally we find the time to have fun and publish stuff"
       />
       <div className="lg:flex justify-center mt-8">
-        <Card />
-        <Card />
+        {props.data.allWordpressPost.edges.map(({ node }) => (
+          <div className="md:w-1/2 p-2">
+            <Card
+              key={node.id}
+              url={`blog/${node.slug}`}
+              title={node.title}
+              date={node.date}
+              excerpt={node.excerpt}
+              image={
+                node.featured_media
+                  ? node.featured_media.localFile.childImageSharp.resolutions
+                  : undefined
+              }
+            />
+          </div>
+        ))}
       </div>
       <Button
         standard
@@ -161,4 +175,32 @@ const IndexPage = () => (
   </main>
 )
 
+export const query = graphql`
+  query indexPostsQuery {
+    allWordpressPost {
+      edges {
+        node {
+          id
+          title
+          excerpt
+          status
+          slug
+          date(formatString: "MMMM DD, YYYY")
+          featured_media {
+            localFile {
+              childImageSharp {
+                resolutions(width: 600, height: 300) {
+                  src
+                  width
+                  height
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`
+
 export default IndexPage