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 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 {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>
)
......
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