Merge branch 'add-news-to-homepage' into 'master'

add news, events to homepage

See merge request about-leverpress!5

src/components/books/bookList.js

 import React from "react"
-import {useStaticQuery, graphql} from "gatsby"
 import BookCard from "./bookCard"
 
-export const bookQuery = graphql`
-  query {
-    allMarkdownRemark (
-      filter: {
-        frontmatter: { templateKey: { eq: "book" } }
-      }
-    ) {
-      edges {
-        node {
-          id
-          frontmatter {
-            title
-            author
-            description
-            readLink
-            buyLink
-            cover {
-          	  childImageSharp {
-                fluid {
-                  ...GatsbyImageSharpFluid
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-`
-
-const BookList = () => {
-  const data = useStaticQuery(bookQuery)
+const BookList = ({books}) => {
 
   return (
     <section className="card-deck lever-card-list">
       {
-        data.allMarkdownRemark.edges.map(({node}) => {
+        books.map(({node}) => {
           return (
             <div>
               <BookCard key={node.id} book={node.frontmatter} />

src/components/events/eventCard.js

@@ -2,12 +2,12 @@ import React from "react"
 import Img from "gatsby-image"
 import {Link} from "gatsby"
 
-const EventCard = (props) => {
-  const {title, date, image} = props.event.frontmatter
-  const slug = props.event.fields.slug
+const EventCard = ({event, cardStyle}) => {
+  const {title, date, image} = event.frontmatter
+  const slug = event.fields.slug
 
   return (
-    <div className="card lever-card">
+    <div className={`card ${cardStyle || "lever-card"}`}>
       <div className="card-img-top lever-card-img">
         <Link to={slug}>
           <Img fluid={image.childImageSharp.fluid} />
@@ -15,7 +15,7 @@ const EventCard = (props) => {
       </div>
       <div className="card-body">
         <h5 className="card-title">{title}</h5>
-        <h5 className="card-title">{date}</h5>
+        <h5 className="card-text">{date}</h5>
       </div>
     </div>
   )

src/components/events/eventList.js

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

src/components/layout.scss

@@ -38,22 +38,22 @@ body {
 }
 
 .news-container {
-
+  background: mediumpurple;
 }
 
 .events-container {
-
+  background: palegoldenrod;
 }
 
-.author-area {
-
+.author-container {
+  background: hotpink;
 }
 
-.library-area {
-
+.library-container {
+  background: lightseagreen;
 }
 
-.video-area {
+.video-container {
 
 }
 
@@ -61,27 +61,34 @@ body {
 
 }
 
-
-
-
 // card stuff
-.lever-card-list {
-  display: flex;
-  align-items: top;
-  margin: 1rem;
-}
-
 .lever-card {
   min-width: 10rem;
   max-width: 20rem;
-  // border: none;
+
+  .lever-card-img {
+    width: 225px;
+    margin: auto;
+  }
 }
 
-.lever-card-img {
-  width: 225px;
-  margin: auto;
+.tiny-card {
+  min-width: 10rem;
+  max-width: 10rem;
+
+  .lever-card-img {
+    width: 100px;
+    margin: auto;
+  }
+  .card-title {
+    font-size: 1rem;
+  }
+  .card-text {
+    font-size: 0.7rem;
+  }
 }
 
+
 // footer
 .lever-footer-links {
   list-style: none;

src/components/news/newsCard.js

@@ -2,12 +2,13 @@ import React from "react"
 import Img from "gatsby-image"
 import {Link} from "gatsby"
 
-const NewsCard = (props) => {
-  const {title, date, image} = props.singleNews.frontmatter
-  const slug = props.singleNews.fields.slug
+const NewsCard = ({singleNews, cardStyle}) => {
+  const {title, date, image} = singleNews.frontmatter
+  const slug = singleNews.fields.slug
+
 
   return (
-    <div className="card lever-card">
+    <div className={`card ${cardStyle || "lever-card"}`}>
       <div className="card-img-top lever-card-img">
         <Link to={slug}>
           <Img fluid={image.childImageSharp.fluid} />
@@ -15,7 +16,7 @@ const NewsCard = (props) => {
       </div>
       <div className="card-body">
         <h5 className="card-title">{title}</h5>
-        <h5 className="card-title">{date}</h5>
+        <h5 className="card-text">{date}</h5>
       </div>
     </div>
   )

src/components/news/newsList.js

 import React from "react"
 import NewsCard from "./newsCard"
 
-const NewsList = (props) => {
+const NewsList = ({news, cardStyle}) => {
   return (
     <section className="card-deck lever-card-list">
     {
-      props.news.map(({node}) => {
-        return <NewsCard key={node.id} singleNews={node} />
+      news.map(({node}) => {
+        return <NewsCard key={node.id} singleNews={node} cardStyle={cardStyle}/>
       })
     }
     </section>

src/pages/index.js

@@ -2,15 +2,17 @@ import React from "react"
 
 import Layout from "../components/layout"
 import SEO from "../components/seo"
-import BookList from "../components/books/bookList"
 import {graphql} from "gatsby"
 
+import BookList from "../components/books/bookList"
 import Tagline from "../components/tagline"
 import Newsletter from "../components/newsletter"
+import NewsList from "../components/news/newsList"
+import EventList from "../components/events/eventList"
 
 export const IndexQuery = graphql`
 query {
-  markdownRemark(frontmatter: { templateKey: { eq: "home-page" } }) {
+  home: markdownRemark(frontmatter: { templateKey: { eq: "home-page" } }) {
     frontmatter {
       taglineSection {
         text
@@ -23,19 +25,107 @@ query {
       }
     }
   }
+  books: allMarkdownRemark (
+    filter: {
+      frontmatter: { templateKey: { eq: "book" } }
+    }
+  ) {
+    edges {
+      node {
+        id
+        frontmatter {
+          title
+          author
+          description
+          readLink
+          buyLink
+          cover {
+            childImageSharp {
+              fluid {
+                ...GatsbyImageSharpFluid
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  news: allMarkdownRemark (
+    filter: {
+      frontmatter: { templateKey: { eq: "news" } }
+    },
+    sort: {
+      fields: frontmatter___date
+    },
+    limit: 4
+  ) {
+    edges {
+      node {
+        id
+        fields{
+          slug
+        }
+        html
+        frontmatter {
+          title
+          date(formatString:"MMMM Do, YYYY")
+          image{
+            childImageSharp{
+              fluid{
+                ...GatsbyImageSharpFluid
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  events: allMarkdownRemark (
+    filter: {
+      frontmatter: { templateKey: { eq: "event" } }
+    },
+    sort: {
+      fields: frontmatter___date
+    },
+    limit: 4
+  ) {
+    edges {
+      node {
+        id
+        fields{
+          slug
+        }
+        html
+        frontmatter {
+          title
+          date(formatString:"MMMM Do, YYYY")
+          image{
+            childImageSharp{
+              fluid{
+                ...GatsbyImageSharpFluid
+              }
+            }
+          }
+        }
+      }
+    }
+  }
 }
 `
 
 const IndexPage = ({data}) => {
-  const tagline = data.markdownRemark.frontmatter.taglineSection
-  const newsletter = data.markdownRemark.frontmatter.newsletterSection
+  const tagline = data.home.frontmatter.taglineSection
+  const newsletter = data.home.frontmatter.newsletterSection
+  const books = data.books.edges
+  const news = data.news.edges
+  const events = data.events.edges
 
   return (
     <Layout>
       <SEO title="Home" />
       <div className="index-grid">
         <div className="books-container">
-          <BookList />
+          <BookList books={books} />
         </div>
         <div className="tagline-container">
           <Tagline text={tagline.text} />
@@ -43,6 +133,21 @@ const IndexPage = ({data}) => {
         <div className="newsletter-container">
           <Newsletter newsletter={newsletter} />
         </div>
+        <div className="news-container">
+          <NewsList news={news} cardStyle="tiny-card"/>
+        </div>
+        <div className="events-container">
+          <EventList events={events} cardStyle="tiny-card"/>
+        </div>
+        <div className="author-container">
+          author signup thing
+        </div>
+        <div className="library-container">
+          library signup thing
+        </div>
+        <div className="video-container">
+          video
+        </div>
       </div>
     </Layout>
   )