Note: The default ITS GitLab runner is a shared resource and is subject to slowdowns during heavy usage.
You can run your own GitLab runner that is dedicated just to your group if you need to avoid processing delays.

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`
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} />
......
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 = () => {
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="/">
......
* {
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;
......
......@@ -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
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"
const IndexPage = () => (
<Layout>
<SEO title="Home" />
<BookList />
<div className="index-grid">
<div className="books">
<BookList />
</div>
</div>
</Layout>
)
......
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
......@@ -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
......
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