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