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 38531477 authored by Jonathan McGlone's avatar Jonathan McGlone
Browse files

add new catalog component to homepage

parent df90d1d5
const LinkFileButtonComponent = {
// Widget that allows linking to a file in the Media Gallery,
// such as a PDF, from the markdown body
id: "LinkFileButton",
label: "Link File as Button",
fields: [
{name: 'text', label: 'Button Text', widget: 'string'},
{name: 'file', label: 'File', widget: 'file' }
],
pattern: /^<a href="(.*)">(.*)<\/a>$/,
fromBlock: function(match) {
return {
file: match[1],
text: match[2]
};
},
toBlock: function({file, text}) {
return `<a class="btn btn-primary" href="${file}">${text}</a>`
},
toPreview: function({file, text}) {
return `<a class="btn btn-primary" href="${file}">${text}</a>`
}
}
export default LinkFileButtonComponent
\ No newline at end of file
import React from "react"
import Img from "gatsby-image"
const Catalog = ({catalog}) => {
return (
<div className="catalog-wrapper">
<h2 className="sr-only">{catalog.heading}</h2>
<figure><Img fluid={catalog.catalogImage.childImageSharp.fluid} alt="Catalog Cover" className="catalog-image"/></figure>
<div dangerouslySetInnerHTML={{ __html: catalog.catalogPdf }} />
</div>
)
}
export default Catalog
\ No newline at end of file
......@@ -2,12 +2,19 @@ import React from "react"
const Newsletter = ({newsletter}) => {
return (
<div className="text-light">
<h2 className="sr-only">{newsletter.heading}</h2>
<p>{newsletter.description}</p>
<a className="btn btn-primary" href={newsletter.url}>{newsletter.buttonLabel}</a>
<div className="container">
<div className="row">
<div className="col-md-6">
<h2 className="sr-only">{newsletter.heading}</h2>
<p>{newsletter.description}</p>
</div>
<div className="col-md-6 text-center">
<a className="btn btn-secondary" href={newsletter.url}>{newsletter.buttonLabel}</a>
</div>
</div>
</div>
)
}
export default Newsletter
......@@ -140,7 +140,7 @@ p {
}
// home - tagline and newsletter button
.tagline-newsletter-container {
.tagline-catalog-container {
background-color: $lever-brand-color;
padding: 4rem 0;
border-top: 1px solid rgba(0,0,0,.125);
......@@ -148,14 +148,35 @@ p {
.tagline {
font-weight: bold;
font-size: 1.6rem;
margin-left: 1.5em;
}
}
// home - catalog
.catalog-wrapper {
display: flex;
flex-direction: column;
text-align: center;
figure {
display: flex;
justify-content: center;
}
}
.catalog-image {
width: 95px;
}
// home - for authors/for libraries, impact report
.author-library-container {
padding: 2.5rem 0;
padding: 1.5rem 0;
border-bottom: 1px solid rgba(0,0,0,.125);
border-top: 1px solid rgba(0,0,0,.125);
.author-container, .newsletter-container, .library-container {
margin: 15px 0;
}
}
.video-impact-container {
......
......@@ -31,5 +31,10 @@ mapSection:
world and other statistics about the usage of our books.
heading: Our impact and reach is global
mapImage: /assets/screen-shot-2019-11-18-at-11.29.58-am.png
catalogSection:
heading: Lever Press Seasonal Catalog
catalogImage: /assets/2020-2021_final_web-front-cover_resized.jpg
catalogPdf: >-
<a class="btn btn-primary" href="/assets/lever_2020-2021_final_print-1.pdf">Explore our Catalog</a>
---
......@@ -11,6 +11,7 @@ import NewsList from "../components/news/newsList"
import EventList from "../components/events/eventList"
import Video from "../components/video"
import MapImage from "../components/mapImage"
import Catalog from "../components/catalog"
export const IndexQuery = graphql`
query {
......@@ -41,6 +42,17 @@ query {
}
}
}
catalogSection {
heading
catalogImage {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
}
}
catalogPdf
}
}
}
books: allMarkdownRemark (
......@@ -127,6 +139,7 @@ const IndexPage = ({data}) => {
const newsletter = data.home.frontmatter.newsletterSection
const video = data.home.frontmatter.videoSection
const map = data.home.frontmatter.mapSection
const catalog = data.home.frontmatter.catalogSection
const books = data.books.edges
const news = data.news.edges
const events = data.events.edges
......@@ -144,14 +157,14 @@ const IndexPage = ({data}) => {
</div>
</div>
</section>
<section className="tagline-newsletter-container">
<section className="tagline-catalog-container">
<div className="container">
<div className="row">
<div className="tagline-container col-md-9">
<div className="tagline-container col-md-8">
<Tagline text={tagline.text} />
</div>
<div className="newsletter-container col-md-3">
<Newsletter newsletter={newsletter} />
<div className="catalog-container col-md-4">
<Catalog catalog={catalog} />
</div>
</div>
</div>
......@@ -160,23 +173,30 @@ const IndexPage = ({data}) => {
<section className="author-library-container">
<div className="container">
<div className="row">
<div className="author-container col">
<div className="row">
<div className="col-md-6">
<p>Interested in publishing your next book with us?</p>
</div>
<div className="col-md-6">
<a className="btn btn-lg btn-secondary" href="/authors">Publish With Us</a>
<div className="author-container col-sm">
<div className="container">
<div className="row">
<div className="col-md-6">
<p>Interested in publishing your next book with us?</p>
</div>
<div className="col-md-6">
<a className="btn btn-secondary" href="/authors">Publish With Us</a>
</div>
</div>
</div>
</div>
<div className="library-container col">
<div className="row">
<div className="col-md-8">
<p>Join over 50 liberal arts colleges and their libraries who support our Open Access mission</p>
</div>
<div className="col-md-4">
<a className="btn btn-lg btn-secondary" href="/join">Join Us</a>
<div className="newsletter-container col-sm">
<Newsletter newsletter={newsletter} />
</div>
<div className="library-container col-sm">
<div className="container">
<div className="row">
<div className="col-md-8">
<p>Join over 50 liberal arts colleges and their libraries who support our Open Access mission</p>
</div>
<div className="col-md-4">
<a className="btn btn-secondary" href="/join">Join Us</a>
</div>
</div>
</div>
</div>
......
......@@ -68,6 +68,13 @@ collections:
- { name: heading, label: Heading }
- { name: description, label: Description }
- { name: embed, label: "Video Embed Code", widget: text }
- name: catalogSection
label: "Catalog Section"
widget: object
fields:
- { name: heading, label: Heading }
- { name: catalogImage, label: "Catalog Image", widget: image }
- { name: catalogPdf, label: "Catalog PDF", widget: markdown }
- name: mapSection
label: "Map Section"
widget: object
......
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