Commit a1d370e2 authored by Seth A Johnson's avatar Seth A Johnson
Browse files

Added Events

Right now these are essentially identical to News but
I assume they will someday be different...
parent dce9da97
...@@ -34,13 +34,11 @@ export const bookQuery = graphql` ...@@ -34,13 +34,11 @@ export const bookQuery = graphql`
const BookList = () => { const BookList = () => {
const data = useStaticQuery(bookQuery) const data = useStaticQuery(bookQuery)
console.log(data)
return ( return (
<section className="card-deck lever-card-list"> <section className="card-deck lever-card-list">
{ {
data.allMarkdownRemark.edges.map(({node}) => { data.allMarkdownRemark.edges.map(({node}) => {
console.log(node.id);
return ( return (
<div> <div>
<BookCard key={node.id} book={node.frontmatter} /> <BookCard key={node.id} book={node.frontmatter} />
......
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
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
...@@ -17,7 +17,7 @@ const Footer = () => { ...@@ -17,7 +17,7 @@ const Footer = () => {
const {title} = data.site.siteMetadata const {title} = data.site.siteMetadata
return ( return (
<footer className="navbar fixed-bottom bg-dark"> <footer className="footer navbar fixed-bottom bg-dark">
<ul className="lever-footer-links"> <ul className="lever-footer-links">
<li> <li>
<Link to="/"> <Link to="/">
......
* {
box-sizing: border-box;
}
body {
padding-top: 4rem;
}
.navbar-brand-logo { .navbar-brand-logo {
width: 10rem; width: 10rem;
height: 2.5rem; height: 2.5rem;
vertical-align: middle; 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 { .lever-card-list {
display: flex; display: flex;
align-items: top; align-items: top;
...@@ -21,6 +81,7 @@ ...@@ -21,6 +81,7 @@
margin: auto; margin: auto;
} }
// footer
.lever-footer-links { .lever-footer-links {
list-style: none; list-style: none;
margin: 0; margin: 0;
......
...@@ -2,7 +2,7 @@ import React from "react" ...@@ -2,7 +2,7 @@ import React from "react"
import Img from "gatsby-image" import Img from "gatsby-image"
import {Link} from "gatsby" import {Link} from "gatsby"
const News = (props) => { const NewsCard = (props) => {
const {title, date, image} = props.singleNews.frontmatter const {title, date, image} = props.singleNews.frontmatter
const slug = props.singleNews.fields.slug const slug = props.singleNews.fields.slug
...@@ -21,4 +21,4 @@ const News = (props) => { ...@@ -21,4 +21,4 @@ const News = (props) => {
) )
} }
export default News export default NewsCard
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
...@@ -8,7 +8,11 @@ import BookList from "../components/books/bookList" ...@@ -8,7 +8,11 @@ import BookList from "../components/books/bookList"
const IndexPage = () => ( const IndexPage = () => (
<Layout> <Layout>
<SEO title="Home" /> <SEO title="Home" />
<BookList /> <div className="index-grid">
<div className="books">
<BookList />
</div>
</div>
</Layout> </Layout>
) )
......
import React from 'react' import React from 'react'
import Layout from '../components/layout' 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 ( return (
<Layout> <Layout>
<h1>{title}</h1>
<Img fluid={image.childImageSharp.fluid} />
<h4>{date}</h4>
<p dangerouslySetInnerHTML={{ __html: html }} />
</Layout> </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 export default Event
...@@ -4,7 +4,6 @@ import {graphql} from "gatsby" ...@@ -4,7 +4,6 @@ import {graphql} from "gatsby"
import Img from "gatsby-image" import Img from "gatsby-image"
const News = ({data}) => { const News = ({data}) => {
console.log(data)
const { html } = data.markdownRemark const { html } = data.markdownRemark
const { title, date, image } = data.markdownRemark.frontmatter const { title, date, image } = data.markdownRemark.frontmatter
......
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