Commit 9d7c638a authored by Seth A Johnson's avatar Seth A Johnson
Browse files

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

add news, events to homepage

See merge request !5
parents da0fb8a7 7f5e0beb
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} />
......
......@@ -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>
)
......
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>
......
......@@ -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;
......
......@@ -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>
)
......
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>
......
......@@ -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>
)
......
Supports Markdown
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