Commit f364c350 authored by Jonathan McGlone's avatar Jonathan McGlone
Browse files

add catalog component for home page; add series page to main navigation and remove from footer

parent d5110d70
import CMS from 'netlify-cms-app'; import CMS from 'netlify-cms-app';
import LinkFileComponent from "./components/linkFileComponent" import LinkFileComponent from "./components/linkFileComponent"
import LinkFileButtonComponent from "./components/linkFileButtonComponent"
CMS.registerEditorComponent(LinkFileComponent); CMS.registerEditorComponent(LinkFileComponent);
CMS.registerEditorComponent(LinkFileButtonComponent);
// https://github.com/netlify/netlify-cms/issues/1737 and HELIO-3241 // https://github.com/netlify/netlify-cms/issues/1737 and HELIO-3241
window.CMS_MANUAL_INIT = true; window.CMS_MANUAL_INIT = true;
......
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-secondary" href="${file}">${text}</a>`
},
toPreview: function({file, text}) {
return `<a class="btn btn-secondary" 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
...@@ -31,7 +31,7 @@ const Footer = () => { ...@@ -31,7 +31,7 @@ const Footer = () => {
<a href="https://twitter.com/AmCollPress"><svg width="24px" height="24px" viewBox="0 0 24 24" className="social-link tw" aria-hidden="false"><title>Twitter</title><path d="M22,5.8a8.6,8.6,0,0,1-2.36.65,4.07,4.07,0,0,0,1.8-2.27,8.1,8.1,0,0,1-2.6,1A4.1,4.1,0,0,0,11.75,8a4.73,4.73,0,0,0,.09.93A11.6,11.6,0,0,1,3.39,4.62,4.2,4.2,0,0,0,2.83,6.7a4.09,4.09,0,0,0,1.82,3.4A4,4,0,0,1,2.8,9.6v0a4.11,4.11,0,0,0,3.29,4A4.2,4.2,0,0,1,5,13.81a4,4,0,0,1-.78-.07,4.14,4.14,0,0,0,3.83,2.85A8.22,8.22,0,0,1,3,18.34a6.37,6.37,0,0,1-1-.06,11.48,11.48,0,0,0,6.29,1.84A11.58,11.58,0,0,0,20,8.46c0-.18,0-.36,0-.53A8.31,8.31,0,0,0,22,5.8Z"></path></svg></a> <a href="https://twitter.com/AmCollPress"><svg width="24px" height="24px" viewBox="0 0 24 24" className="social-link tw" aria-hidden="false"><title>Twitter</title><path d="M22,5.8a8.6,8.6,0,0,1-2.36.65,4.07,4.07,0,0,0,1.8-2.27,8.1,8.1,0,0,1-2.6,1A4.1,4.1,0,0,0,11.75,8a4.73,4.73,0,0,0,.09.93A11.6,11.6,0,0,1,3.39,4.62,4.2,4.2,0,0,0,2.83,6.7a4.09,4.09,0,0,0,1.82,3.4A4,4,0,0,1,2.8,9.6v0a4.11,4.11,0,0,0,3.29,4A4.2,4.2,0,0,1,5,13.81a4,4,0,0,1-.78-.07,4.14,4.14,0,0,0,3.83,2.85A8.22,8.22,0,0,1,3,18.34a6.37,6.37,0,0,1-1-.06,11.48,11.48,0,0,0,6.29,1.84A11.58,11.58,0,0,0,20,8.46c0-.18,0-.36,0-.53A8.31,8.31,0,0,0,22,5.8Z"></path></svg></a>
</p> </p>
</div> </div>
<div className="col-md-2"> <div className="col-md-3">
<h5>Our Partners</h5> <h5>Our Partners</h5>
<ul className="list-unstyled text-small"> <ul className="list-unstyled text-small">
<li><a href="https://leverpress.org/" className="text-light">Lever Press</a></li> <li><a href="https://leverpress.org/" className="text-light">Lever Press</a></li>
...@@ -39,21 +39,12 @@ const Footer = () => { ...@@ -39,21 +39,12 @@ const Footer = () => {
<li><a href="https://www.publishing.umich.edu" className="text-light">Michigan Publishing</a></li> <li><a href="https://www.publishing.umich.edu" className="text-light">Michigan Publishing</a></li>
</ul> </ul>
</div> </div>
<div className="col-md-2"> <div className="col-md-3">
<h5>Peer Review</h5> <h5>Peer Review</h5>
<ul className="list-unstyled text-small"> <ul className="list-unstyled text-small">
<li><a href="/peerreview" className="text-light">Our Commitments and Guidelines</a></li> <li><a href="/peerreview" className="text-light">Our Commitments and Guidelines</a></li>
</ul> </ul>
</div> </div>
<div className="col-md-2">
<h5>Book Series</h5>
<ul className="list-unstyled text-small">
<li><a href="/series#public-works" className="text-light">Public Works</a></li>
<li><a href="/series#law-literature-culture" className="text-light">Law, Literature, &amp; Culture</a></li>
<li><a href="/series#russian-travelogues" className="text-light">Russian Travelogues</a></li>
<li><a href="/series#mammoth-records" className="text-light">Mammoth Records</a></li>
</ul>
</div>
</div> </div>
<div className="row"> <div className="row">
<div className="col-md-6"> <div className="col-md-6">
......
...@@ -8,7 +8,7 @@ const Fundraiser = ({fundraiser}) => { ...@@ -8,7 +8,7 @@ const Fundraiser = ({fundraiser}) => {
<p>{fundraiser.description}</p> <p>{fundraiser.description}</p>
</div> </div>
<div className="col-md-6"> <div className="col-md-6">
<a className="btn btn-lg btn-secondary" href={fundraiser.url}>{fundraiser.buttonLabel}</a> <a className="btn btn-secondary" href={fundraiser.url}>{fundraiser.buttonLabel}</a>
</div> </div>
</div> </div>
) )
......
...@@ -33,6 +33,11 @@ const Navbar = () => { ...@@ -33,6 +33,11 @@ const Navbar = () => {
Books Books
</a> </a>
</li> </li>
<li>
<a href="/series" className="nav-link text-dark">
Series
</a>
</li>
<li> <li>
<Link to="/authors" className="nav-link text-dark"> <Link to="/authors" className="nav-link text-dark">
Publish With Us Publish With Us
......
...@@ -2,10 +2,16 @@ import React from "react" ...@@ -2,10 +2,16 @@ 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-secondary" 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>
) )
} }
......
...@@ -143,8 +143,8 @@ p { ...@@ -143,8 +143,8 @@ p {
} }
} }
// home - tagline and newsletter button // home - tagline and catalog container
.tagline-newsletter-container { .tagline-catalog-container {
background-color: $amherst-brand-color; background-color: $amherst-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);
...@@ -153,14 +153,36 @@ p { ...@@ -153,14 +153,36 @@ p {
@include abril; @include abril;
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 {
......
...@@ -29,4 +29,9 @@ communitySection: ...@@ -29,4 +29,9 @@ communitySection:
Amherst and beyond. Amherst and beyond.
heading: An inclusive scholarly publishing community heading: An inclusive scholarly publishing community
communityImage: /assets/screen-shot-2020-10-12-at-4.14.15-pm.png communityImage: /assets/screen-shot-2020-10-12-at-4.14.15-pm.png
catalogSection:
heading: Amherst College Press Seasonal Catalog
catalogImage: /assets/screen-shot-2020-10-12-at-12.08.40-pm.png
catalogPdf: >-
<a class="btn btn-secondary" href="/assets/acp-digital-catalog-2020-21.pdf">Explore our Catalog</a>
--- ---
...@@ -12,6 +12,7 @@ import NewsList from "../components/news/newsList" ...@@ -12,6 +12,7 @@ import NewsList from "../components/news/newsList"
import EventList from "../components/events/eventList" import EventList from "../components/events/eventList"
import MapImage from "../components/mapImage" import MapImage from "../components/mapImage"
import CommunityImage from "../components/communityImage" import CommunityImage from "../components/communityImage"
import Catalog from "../components/catalog"
export const IndexQuery = graphql` export const IndexQuery = graphql`
query { query {
...@@ -54,6 +55,17 @@ query { ...@@ -54,6 +55,17 @@ query {
} }
} }
} }
catalogSection {
heading
catalogImage {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
}
}
catalogPdf
}
} }
} }
books: allMarkdownRemark ( books: allMarkdownRemark (
...@@ -141,6 +153,7 @@ const IndexPage = ({data}) => { ...@@ -141,6 +153,7 @@ const IndexPage = ({data}) => {
const fundraiser = data.home.frontmatter.fundraiserSection const fundraiser = data.home.frontmatter.fundraiserSection
const map = data.home.frontmatter.mapSection const map = data.home.frontmatter.mapSection
const community = data.home.frontmatter.communitySection const community = data.home.frontmatter.communitySection
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
...@@ -158,14 +171,14 @@ const IndexPage = ({data}) => { ...@@ -158,14 +171,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="newsletter-container col-md-4">
<Newsletter newsletter={newsletter} /> <Catalog catalog={catalog} />
</div> </div>
</div> </div>
</div> </div>
...@@ -173,17 +186,22 @@ const IndexPage = ({data}) => { ...@@ -173,17 +186,22 @@ 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">
<Newsletter newsletter={newsletter} />
</div>
<div className="library-container col-sm">
<Fundraiser fundraiser={fundraiser} /> <Fundraiser fundraiser={fundraiser} />
</div> </div>
</div> </div>
......
...@@ -80,6 +80,13 @@ collections: ...@@ -80,6 +80,13 @@ collections:
- { name: description, label: Description } - { name: description, label: Description }
- { name: url, label: "Fundraiser URL" } - { name: url, label: "Fundraiser URL" }
- { name: buttonLabel, label: "Button Label" } - { name: buttonLabel, label: "Button Label" }
- 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
......
Supports Markdown
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