Commit 7f5e0beb authored by Seth A Johnson's avatar Seth A Johnson
Browse files

add news, events to homepage

parent 01bcf46c
import React from "react" import React from "react"
import {useStaticQuery, graphql} from "gatsby"
import BookCard from "./bookCard" import BookCard from "./bookCard"
export const bookQuery = graphql` const BookList = ({books}) => {
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)
return ( return (
<section className="card-deck lever-card-list"> <section className="card-deck lever-card-list">
{ {
data.allMarkdownRemark.edges.map(({node}) => { books.map(({node}) => {
return ( return (
<div> <div>
<BookCard key={node.id} book={node.frontmatter} /> <BookCard key={node.id} book={node.frontmatter} />
......
...@@ -2,12 +2,12 @@ import React from "react" ...@@ -2,12 +2,12 @@ import React from "react"
import Img from "gatsby-image" import Img from "gatsby-image"
import {Link} from "gatsby" import {Link} from "gatsby"
const EventCard = (props) => { const EventCard = ({event, cardStyle}) => {
const {title, date, image} = props.event.frontmatter const {title, date, image} = event.frontmatter
const slug = props.event.fields.slug const slug = event.fields.slug
return ( return (
<div className="card lever-card"> <div className={`card ${cardStyle || "lever-card"}`}>
<div className="card-img-top lever-card-img"> <div className="card-img-top lever-card-img">
<Link to={slug}> <Link to={slug}>
<Img fluid={image.childImageSharp.fluid} /> <Img fluid={image.childImageSharp.fluid} />
...@@ -15,7 +15,7 @@ const EventCard = (props) => { ...@@ -15,7 +15,7 @@ const EventCard = (props) => {
</div> </div>
<div className="card-body"> <div className="card-body">
<h5 className="card-title">{title}</h5> <h5 className="card-title">{title}</h5>
<h5 className="card-title">{date}</h5> <h5 className="card-text">{date}</h5>
</div> </div>
</div> </div>
) )
......
import React from "react" import React from "react"
import EventCard from "./eventCard" import EventCard from "./eventCard"
const EventList = (props) => { const EventList = ({events, cardStyle}) => {
return ( return (
<section className="card-deck lever-card-list"> <section className="card-deck lever-card-list">
{ {
props.events.map(({node}) => { events.map(({node}) => {
return <EventCard key={node.id} event={node} /> return <EventCard key={node.id} event={node} cardStyle={cardStyle} />
}) })
} }
</section> </section>
......
...@@ -38,22 +38,22 @@ body { ...@@ -38,22 +38,22 @@ body {
} }
.news-container { .news-container {
background: mediumpurple;
} }
.events-container { .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 { ...@@ -61,27 +61,34 @@ body {
} }
// card stuff // card stuff
.lever-card-list {
display: flex;
align-items: top;
margin: 1rem;
}
.lever-card { .lever-card {
min-width: 10rem; min-width: 10rem;
max-width: 20rem; max-width: 20rem;
// border: none;
.lever-card-img {
width: 225px;
margin: auto;
}
} }
.lever-card-img { .tiny-card {
width: 225px; min-width: 10rem;
margin: auto; max-width: 10rem;
.lever-card-img {
width: 100px;
margin: auto;
}
.card-title {
font-size: 1rem;
}
.card-text {
font-size: 0.7rem;
}
} }
// footer // footer
.lever-footer-links { .lever-footer-links {
list-style: none; list-style: none;
......
...@@ -2,12 +2,13 @@ import React from "react" ...@@ -2,12 +2,13 @@ import React from "react"
import Img from "gatsby-image" import Img from "gatsby-image"
import {Link} from "gatsby" import {Link} from "gatsby"
const NewsCard = (props) => { const NewsCard = ({singleNews, cardStyle}) => {
const {title, date, image} = props.singleNews.frontmatter const {title, date, image} = singleNews.frontmatter
const slug = props.singleNews.fields.slug const slug = singleNews.fields.slug
return ( return (
<div className="card lever-card"> <div className={`card ${cardStyle || "lever-card"}`}>
<div className="card-img-top lever-card-img"> <div className="card-img-top lever-card-img">
<Link to={slug}> <Link to={slug}>
<Img fluid={image.childImageSharp.fluid} /> <Img fluid={image.childImageSharp.fluid} />
...@@ -15,7 +16,7 @@ const NewsCard = (props) => { ...@@ -15,7 +16,7 @@ const NewsCard = (props) => {
</div> </div>
<div className="card-body"> <div className="card-body">
<h5 className="card-title">{title}</h5> <h5 className="card-title">{title}</h5>
<h5 className="card-title">{date}</h5> <h5 className="card-text">{date}</h5>
</div> </div>
</div> </div>
) )
......
import React from "react" import React from "react"
import NewsCard from "./newsCard" import NewsCard from "./newsCard"
const NewsList = (props) => { const NewsList = ({news, cardStyle}) => {
return ( return (
<section className="card-deck lever-card-list"> <section className="card-deck lever-card-list">
{ {
props.news.map(({node}) => { news.map(({node}) => {
return <NewsCard key={node.id} singleNews={node} /> return <NewsCard key={node.id} singleNews={node} cardStyle={cardStyle}/>
}) })
} }
</section> </section>
......
...@@ -2,15 +2,17 @@ import React from "react" ...@@ -2,15 +2,17 @@ import React from "react"
import Layout from "../components/layout" import Layout from "../components/layout"
import SEO from "../components/seo" import SEO from "../components/seo"
import BookList from "../components/books/bookList"
import {graphql} from "gatsby" import {graphql} from "gatsby"
import BookList from "../components/books/bookList"
import Tagline from "../components/tagline" import Tagline from "../components/tagline"
import Newsletter from "../components/newsletter" import Newsletter from "../components/newsletter"
import NewsList from "../components/news/newsList"
import EventList from "../components/events/eventList"
export const IndexQuery = graphql` export const IndexQuery = graphql`
query { query {
markdownRemark(frontmatter: { templateKey: { eq: "home-page" } }) { home: markdownRemark(frontmatter: { templateKey: { eq: "home-page" } }) {
frontmatter { frontmatter {
taglineSection { taglineSection {
text text
...@@ -23,19 +25,107 @@ query { ...@@ -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 IndexPage = ({data}) => {
const tagline = data.markdownRemark.frontmatter.taglineSection const tagline = data.home.frontmatter.taglineSection
const newsletter = data.markdownRemark.frontmatter.newsletterSection const newsletter = data.home.frontmatter.newsletterSection
const books = data.books.edges
const news = data.news.edges
const events = data.events.edges
return ( return (
<Layout> <Layout>
<SEO title="Home" /> <SEO title="Home" />
<div className="index-grid"> <div className="index-grid">
<div className="books-container"> <div className="books-container">
<BookList /> <BookList books={books} />
</div> </div>
<div className="tagline-container"> <div className="tagline-container">
<Tagline text={tagline.text} /> <Tagline text={tagline.text} />
...@@ -43,6 +133,21 @@ const IndexPage = ({data}) => { ...@@ -43,6 +133,21 @@ const IndexPage = ({data}) => {
<div className="newsletter-container"> <div className="newsletter-container">
<Newsletter newsletter={newsletter} /> <Newsletter newsletter={newsletter} />
</div> </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> </div>
</Layout> </Layout>
) )
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment