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" ...@@ -2,12 +2,19 @@ import React from "react"
const Newsletter = ({newsletter}) => { const Newsletter = ({newsletter}) => {
return ( return (
<div className="text-light"> <div className="container">
<h2 className="sr-only">{newsletter.heading}</h2> <div className="row">
<p>{newsletter.description}</p> <div className="col-md-6">
<a className="btn btn-primary" href={newsletter.url}>{newsletter.buttonLabel}</a> <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> </div>
) )
} }
export default Newsletter export default Newsletter
...@@ -140,7 +140,7 @@ p { ...@@ -140,7 +140,7 @@ p {
} }
// home - tagline and newsletter button // home - tagline and newsletter button
.tagline-newsletter-container { .tagline-catalog-container {
background-color: $lever-brand-color; background-color: $lever-brand-color;
padding: 4rem 0; padding: 4rem 0;
border-top: 1px solid rgba(0,0,0,.125); border-top: 1px solid rgba(0,0,0,.125);
...@@ -148,14 +148,35 @@ p { ...@@ -148,14 +148,35 @@ p {
.tagline { .tagline {
font-weight: bold; font-weight: bold;
font-size: 1.6rem; 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 // home - for authors/for libraries, impact report
.author-library-container { .author-library-container {
padding: 2.5rem 0; padding: 1.5rem 0;
border-bottom: 1px solid rgba(0,0,0,.125); border-bottom: 1px solid rgba(0,0,0,.125);
border-top: 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 { .video-impact-container {
......
...@@ -31,5 +31,10 @@ mapSection: ...@@ -31,5 +31,10 @@ mapSection:
world and other statistics about the usage of our books. world and other statistics about the usage of our books.
heading: Our impact and reach is global heading: Our impact and reach is global
mapImage: /assets/screen-shot-2019-11-18-at-11.29.58-am.png 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" ...@@ -11,6 +11,7 @@ import NewsList from "../components/news/newsList"
import EventList from "../components/events/eventList" import EventList from "../components/events/eventList"
import Video from "../components/video" import Video from "../components/video"
import MapImage from "../components/mapImage" import MapImage from "../components/mapImage"
import Catalog from "../components/catalog"
export const IndexQuery = graphql` export const IndexQuery = graphql`
query { query {
...@@ -41,6 +42,17 @@ query { ...@@ -41,6 +42,17 @@ query {
} }
} }
} }
catalogSection {
heading
catalogImage {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
}
}
catalogPdf
}
} }
} }
books: allMarkdownRemark ( books: allMarkdownRemark (
...@@ -127,6 +139,7 @@ const IndexPage = ({data}) => { ...@@ -127,6 +139,7 @@ const IndexPage = ({data}) => {
const newsletter = data.home.frontmatter.newsletterSection const newsletter = data.home.frontmatter.newsletterSection
const video = data.home.frontmatter.videoSection const video = data.home.frontmatter.videoSection
const map = data.home.frontmatter.mapSection const map = data.home.frontmatter.mapSection
const catalog = data.home.frontmatter.catalogSection
const books = data.books.edges const books = data.books.edges
const news = data.news.edges const news = data.news.edges
const events = data.events.edges const events = data.events.edges
...@@ -144,14 +157,14 @@ const IndexPage = ({data}) => { ...@@ -144,14 +157,14 @@ const IndexPage = ({data}) => {
</div> </div>
</div> </div>
</section> </section>
<section className="tagline-newsletter-container"> <section className="tagline-catalog-container">
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="tagline-container col-md-9"> <div className="tagline-container col-md-8">
<Tagline text={tagline.text} /> <Tagline text={tagline.text} />
</div> </div>
<div className="newsletter-container col-md-3"> <div className="catalog-container col-md-4">
<Newsletter newsletter={newsletter} /> <Catalog catalog={catalog} />
</div> </div>
</div> </div>
</div> </div>
...@@ -160,23 +173,30 @@ const IndexPage = ({data}) => { ...@@ -160,23 +173,30 @@ const IndexPage = ({data}) => {
<section className="author-library-container"> <section className="author-library-container">
<div className="container"> <div className="container">
<div className="row"> <div className="row">
<div className="author-container col"> <div className="author-container col-sm">
<div className="row"> <div className="container">
<div className="col-md-6"> <div className="row">
<p>Interested in publishing your next book with us?</p> <div className="col-md-6">
</div> <p>Interested in publishing your next book with us?</p>
<div className="col-md-6"> </div>
<a className="btn btn-lg btn-secondary" href="/authors">Publish With Us</a> <div className="col-md-6">
<a className="btn btn-secondary" href="/authors">Publish With Us</a>
</div>
</div> </div>
</div> </div>
</div> </div>
<div className="library-container col"> <div className="newsletter-container col-sm">
<div className="row"> <Newsletter newsletter={newsletter} />
<div className="col-md-8"> </div>
<p>Join over 50 liberal arts colleges and their libraries who support our Open Access mission</p> <div className="library-container col-sm">
</div> <div className="container">
<div className="col-md-4"> <div className="row">
<a className="btn btn-lg btn-secondary" href="/join">Join Us</a> <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> </div>
</div> </div>
......
...@@ -68,6 +68,13 @@ collections: ...@@ -68,6 +68,13 @@ collections:
- { name: heading, label: Heading } - { name: heading, label: Heading }
- { name: description, label: Description } - { name: description, label: Description }
- { name: embed, label: "Video Embed Code", widget: text } - { 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 - name: mapSection
label: "Map Section" label: "Map Section"
widget: object 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