deconstruct props

src/components/Blog/blog-item.js

@@ -57,19 +57,19 @@ const BlogContent = styled.div`
  }
 `
 
-const BlogList = props => {
+const BlogList = ({ key, title, excerpt, path, date }) => {
  return (
- <BlogItem key={props.key}>
+ <BlogItem key={key}>
  <BlogTitle>
- <h2>{props.title}</h2>
+ <h2>{title}</h2>
  </BlogTitle>
  <BlogContent>
- <p>{props.excerpt}</p>
+ <p>{excerpt}</p>
  <BlogMeta>
- <Link className="btn-link" to={props.path}>
+ <Link className="btn-link" to={path}>
  <Button />
  </Link>
- <h4>{props.date}</h4>
+ <h4>{date}</h4>
  </BlogMeta>
  </BlogContent>
  </BlogItem>

src/pages/index.js

@@ -1,22 +1,28 @@
 import React from "react"
 import { graphql } from "gatsby"
 import Layout from "../components/layout"
-import styles from "../scss/blog.module.scss"
 import Seo from "../components/SEO"
 import BlogItem from "../components/Blog/blog-item"
+import styled from "styled-components"
+
+const FeaturedItems = styled.h4`
+ font-size: 1.2rem;
+ color: #939393;
+`
 
 export default ({ data }) => {
+ const { allMarkdownRemark } = data
  return (
  <Layout>
  <Seo />
  <h1>
  My name is Bonneville. I'm a starter theme for Gatsby and I like to talk
  as if I am a living thing
  </h1>
- <h4 className={styles.feature}>
- {data.allMarkdownRemark.totalCount} Featured Posts
- </h4>
- {data.allMarkdownRemark.edges.map(({ node }) => (
+ <FeaturedItems>
+ {allMarkdownRemark.totalCount} Featured Posts
+ </FeaturedItems>
+ {allMarkdownRemark.edges.map(({ node }) => (
  <BlogItem
  title={node.frontmatter.title}
  excerpt={node.excerpt}

src/pages/journal.js

@@ -5,9 +5,10 @@ import { graphql } from "gatsby"
 import BlogItem from "../components/Blog/blog-item"
 
 const Journal = ({ data }) => {
+ const { edges } = data.allMarkdownRemark
  return (
  <>
- <SEO />
+ <SEO title="Read more about the projects at Bonneville" />
  <Layout>
  <h1>Bonneville Journal</h1>
  <p>
@@ -17,7 +18,7 @@ const Journal = ({ data }) => {
  eu. Curabitur mauris risus, pretium et est at, consequat venenatis
  sem. Phasellus vehicula ligula id mauris facilisis bibendum.
  </p>
- {data.allMarkdownRemark.edges.map(({ node }) => (
+ {edges.map(({ node }) => (
  <BlogItem
  title={node.frontmatter.title}
  excerpt={node.excerpt}