Added Events

Right now these are essentially identical to News but
I assume they will someday be different...

src/components/books/bookList.js

@@ -34,13 +34,11 @@ export const bookQuery = graphql`
 
 const BookList = () => {
   const data = useStaticQuery(bookQuery)
-  console.log(data)
 
   return (
     <section className="card-deck lever-card-list">
       {
         data.allMarkdownRemark.edges.map(({node}) => {
-          console.log(node.id);
           return (
             <div>
               <BookCard key={node.id} book={node.frontmatter} />

src/components/events/eventCard.js

+import React from "react"
+import Img from "gatsby-image"
+import {Link} from "gatsby"
+
+const EventCard = (props) => {
+  const {title, date, image} = props.singleNews.frontmatter
+  const slug = props.event.fields.slug
+
+  return (
+    <div className="card lever-card">
+      <div className="card-img-top lever-card-img">
+        <Link to={slug}>
+          <Img fluid={image.childImageSharp.fluid} />
+        </Link>
+      </div>
+      <div className="card-body">
+        <h5 className="card-title">{title}</h5>
+        <h5 className="card-title">{date}</h5>
+      </div>
+    </div>
+  )
+}
+
+export default EventCard

src/components/events/eventList.js

+import React from "react"
+import EventCard from "./eventCard"
+
+const EventList = (props) => {
+  return (
+    <section className="card-deck lever-card-list">
+    {
+      props.events.map(({node}) => {
+        return <EventCard key={node.id} event={node} />
+      })
+    }
+    </section>
+  )
+}
+
+export default EventList

src/components/footer.js

@@ -17,7 +17,7 @@ const Footer = () => {
     const {title} = data.site.siteMetadata
 
     return (
-    <footer className="navbar fixed-bottom bg-dark">
+    <footer className="footer navbar fixed-bottom bg-dark">
       <ul className="lever-footer-links">
         <li>
           <Link to="/">

src/components/layout.scss

+* {
+  box-sizing: border-box;
+}
+
+body {
+  padding-top: 4rem;
+}
+
 .navbar-brand-logo {
   width: 10rem;
   height: 2.5rem;
   vertical-align: middle;
 }
 
+// index
+.index-grid {
+  grid-area: main;
+  display: grid;
+  grid-template-rows: 3.5rem auto fit-content(8rem);
+  grid-template-areas: "books    books",
+                       "tagline  newsletter",
+                       "news     events",
+                       "author   library",
+                       "video    map";
+}
+
+.books-container {
+  grid-area: books;
+}
+
+.tagline-container {
+  grid-area: tagline;
+}
+
+.newsletter-container {
+  grid-area: newletter;
+}
+
+.news-container {
+  grid-area: news;
+}
+
+.events-container {
+  grid-area: events;
+}
+
+.author-area {
+  grid-area: author;
+}
+
+.library-area {
+  grid-area: library;
+}
+
+.video-area {
+  grid-area: video;
+}
+
+.map-area {
+  grid-area: map;
+}
+
+
+
+
+// card stuff
 .lever-card-list {
   display: flex;
   align-items: top;
@@ -21,6 +81,7 @@
   margin: auto;
 }
 
+// footer
 .lever-footer-links {
   list-style: none;
   margin: 0;

src/components/news/newsCard.js

@@ -2,7 +2,7 @@ import React from "react"
 import Img from "gatsby-image"
 import {Link} from "gatsby"
 
-const News = (props) => {
+const NewsCard = (props) => {
   const {title, date, image} = props.singleNews.frontmatter
   const slug = props.singleNews.fields.slug
 
@@ -21,4 +21,4 @@ const News = (props) => {
   )
 }
 
-export default News
+export default NewsCard

src/pages/events.js

+import React from "react"
+import {graphql} from "gatsby"
+import Layout from "../components/layout"
+import EventList from "../components/news/newsList"
+
+const Events = ({data}) => {
+  const events = data.allMarkdownRemark.edges
+
+  return (
+    <Layout>
+      <EventList events={events} />
+    </Layout>
+  )
+}
+
+export const query = graphql`
+{
+  allMarkdownRemark (
+    filter: {
+      frontmatter: { templateKey: { eq: "event" } }
+    }
+  ) {
+    edges {
+      node {
+        id
+        fields{
+          slug
+        }
+        html
+        frontmatter {
+          title
+          date(formatString:"MMMM Do, YYYY")
+          image{
+            childImageSharp{
+              fluid{
+                ...GatsbyImageSharpFluid
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+`
+
+export default Events

src/pages/index.js

@@ -8,7 +8,11 @@ import BookList from "../components/books/bookList"
 const IndexPage = () => (
   <Layout>
     <SEO title="Home" />
+    <div className="index-grid">
+      <div className="books">
         <BookList />
+      </div>
+    </div>
   </Layout>
 )
 

src/templates/event.js

 import React from 'react'
 import Layout from '../components/layout'
+import {graphql} from "gatsby"
+import Img from "gatsby-image"
+
+const Event = ({data}) => {
+  const { html } = data.markdownRemark
+  const { title, date, image } = data.markdownRemark.frontmatter
+
 
-const Event = () => {
   return (
     <Layout>
-
+      <h1>{title}</h1>
+      <Img fluid={image.childImageSharp.fluid} />
+      <h4>{date}</h4>
+      <p dangerouslySetInnerHTML={{ __html: html }} />
     </Layout>
   )
 }
 
+export const query = graphql`
+query ($id: String!) {
+  markdownRemark(id: {eq: $id}) {
+    html
+    frontmatter {
+      title
+      date(formatString: "MMMM Do, YYYY")
+      image {
+        childImageSharp {
+          fluid {
+            ...GatsbyImageSharpFluid
+          }
+        }
+      }
+    }
+  }
+}
+`
+
 export default Event

src/templates/news.js

@@ -4,7 +4,6 @@ import {graphql} from "gatsby"
 import Img from "gatsby-image"
 
 const News = ({data}) => {
-  console.log(data)
   const { html } = data.markdownRemark
   const { title, date, image } = data.markdownRemark.frontmatter