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">
<div className="row">
<div className="col-md-6">
<h2 className="sr-only">{newsletter.heading}</h2> <h2 className="sr-only">{newsletter.heading}</h2>
<p>{newsletter.description}</p> <p>{newsletter.description}</p>
<a className="btn btn-primary" href={newsletter.url}>{newsletter.buttonLabel}</a> </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="container">
<div className="row"> <div className="row">
<div className="col-md-6"> <div className="col-md-6">
<p>Interested in publishing your next book with us?</p> <p>Interested in publishing your next book with us?</p>
</div> </div>
<div className="col-md-6"> <div className="col-md-6">
<a className="btn btn-lg btn-secondary" href="/authors">Publish With Us</a> <a className="btn btn-secondary" href="/authors">Publish With Us</a>
</div> </div>
</div> </div>
</div> </div>
<div className="library-container col"> </div>
<div className="newsletter-container col-sm">
<Newsletter newsletter={newsletter} />
</div>
<div className="library-container col-sm">
<div className="container">
<div className="row"> <div className="row">
<div className="col-md-8"> <div className="col-md-8">
<p>Join over 50 liberal arts colleges and their libraries who support our Open Access mission</p> <p>Join over 50 liberal arts colleges and their libraries who support our Open Access mission</p>
</div> </div>
<div className="col-md-4"> <div className="col-md-4">
<a className="btn btn-lg btn-secondary" href="/join">Join Us</a> <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