Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Move page title up and remove blue bar #73

Open
wants to merge 13 commits into
base: master
Choose a base branch
from
Open

Move page title up and remove blue bar #73

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
80ffe4a
Pass post frontmatter to TemplateWrapper and SEO component #7
Shelob9 Mar 31, 2020
4e70888
#7 merge master to branch
Shelob9 Apr 2, 2020
a973905
#7 fix formatting in changed files
Shelob9 Apr 2, 2020
a5d3c66
Add SEO fields for patterns #7
Shelob9 Apr 2, 2020
7bf8307
#7 impliment SEO for patterns
Shelob9 Apr 2, 2020
2e309eb
Add SEO related fields for all pages to cms config.yml #7
Shelob9 Apr 2, 2020
da9f264
update queries to include SEO fields #7
Shelob9 Apr 2, 2020
98d6084
pass post to layout in templates #7
Shelob9 Apr 2, 2020
6567c24
#72 put the title above call to action
Shelob9 Apr 2, 2020
5bee894
#72 place page title above heading
Shelob9 Apr 2, 2020
75951e1
Remove blue background from CTA #72
Shelob9 Apr 2, 2020
d2e9214
#72 remove redundant page title h2s #71
Shelob9 Apr 2, 2020
39b7e8c
change CTA button color #72
Shelob9 Apr 2, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 24 additions & 4 deletions src/components/Layout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,21 @@ import Navbar from '../components/Navbar';
import './all.sass';
import useSiteMetadata from './SiteMetadata';
import SEO from './SEO';
import PropTypes from 'prop-types';

const TemplateWrapper = ({ children }) => {
const { title, description, image, siteUrl } = useSiteMetadata();
const TemplateWrapper = ({ children, postNode }) => {
let { title, description, image, siteUrl } = useSiteMetadata();
//Current page SHOULD provide title
if (
postNode &&
postNode.frontmatter &&
postNode.frontmatter.hasOwnProperty('title')
) {
title = postNode.frontmatter.title;
}
return (
<div>
<SEO />
<SEO postNode={postNode} article={postNode ? true : false} />
<Helmet>
{/* <html lang="en" />
<title>{title}</title>
Expand All @@ -27,11 +36,22 @@ const TemplateWrapper = ({ children }) => {
sizes="16x16"
/>
</Helmet>
<Navbar />
<Navbar title={title} />
<div>{children}</div>
<Footer />
</div>
);
};

TemplateWrapper.propTypes = {
children: PropTypes.any.isRequired,
postNode: PropTypes.shape({
title: PropTypes.string.isRequired,
description: PropTypes.string,
featuredimage: PropTypes.shape({
publicURL: PropTypes.string,
}),
keywords: PropTypes.string,
}),
};
export default TemplateWrapper;
10 changes: 9 additions & 1 deletion src/components/Navbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,13 @@ import { Link, useStaticQuery, graphql } from 'gatsby';
import Img from 'gatsby-image';
import headerBackground from '../img/header-bg.png';
import maskNowImg from '../img/header-masksnow.png';
import PropTypes from 'prop-types';

const HamburgerLine = () => {
return <span />;
};

const Navbar = () => {
const Navbar = ({ title }) => {
const data = useStaticQuery(graphql`
query {
rosie: file(relativePath: { eq: "header-rosie.png" }) {
Expand Down Expand Up @@ -118,6 +119,9 @@ const Navbar = () => {
</div>
</div>
</nav>
<h1 className="is-size-1 has-text-weight-bold has-text-centered">
{title}
</h1>
<div className="call-to-action">
<Link to="/volunteer">Volunteer Here</Link>
<Link to="/request-supplies">Request Masks</Link>
Expand All @@ -126,4 +130,8 @@ const Navbar = () => {
);
};

Navbar.propTypes = {
title: PropTypes.string.isRequired,
};

export default Navbar;
56 changes: 40 additions & 16 deletions src/components/SEO.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,25 +7,39 @@ import config from '../../config';
const SEO = props => {
const { postNode, postPath, article, buildTime } = props;

let title;
let description;
let keywords;

const realPrefix = config.pathPrefix === '/' ? '' : config.pathPrefix;
const homeURL = `${config.siteUrl}${realPrefix}`;
const URL = `${homeURL}${postPath || ''}`;
const image = `${homeURL}${config.siteBanner}`;

//Set defaults
//Will attempt to chnage based on postNode.frontMatter
let title = config.siteTitleAlt;
let description = config.siteDescription;
let keywords =
'Donate medical masks, covid19, homemade masks, homemade surgical mask, surgical mask, reuseable masks';
let image = `${homeURL}${config.siteBanner}`;

if (article) {
const postMeta = postNode.frontmatter;
title = `${postMeta.title} | ${config.siteTitle}`;
description = postNode.excerpt;
keywords = postNode.frontmatter.keywords.join();
} else {
title = config.siteTitleAlt;
description = config.siteDescription;
keywords =
'Donate medical masks, covid19, homemade masks, homemade surgical mask, surgical mask, reuseable masks';
//Description may be set, else, use excerpt
if (postMeta.hasOwnProperty('description')) {
description = postMeta.description;
} else if (postNode.hasOwnProperty('excerpt')) {
description = postNode.excerpt;
Comment on lines +25 to +29
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think one of these isn't working quite right. If you look at the twitter card validator for the preview site - the only card with a description now is the patterns page. So I think one of those two checks aren't actually working as they are always overwriting the siteDescription.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think one of those two checks aren't actually working as they are always overwriting the siteDescription.

If the post has frontmatter.description, it is overwriting siteDescription

}
//keywords
if (postMeta.hasOwnProperty('keywords')) {
keywords = postNode.frontmatter.keywords.join();
}

//featured image
if (
postMeta.featuredimage &&
postMeta.featuredimage.hasOwnProperty('publicURL')
) {
image = postMeta.featuredimage.publicURL;
}
}

// schema.org in JSONLD format
Expand Down Expand Up @@ -125,7 +139,10 @@ const SEO = props => {
'@type': 'Person',
name: config.author,
},
copyrightYear: postNode.parent.birthtime,
copyrightYear:
postNode.parent && postNode.parent.hasOwnProperty('birthtime')
? postNode.parent.birthtime
: 2020,
creator: {
'@type': 'Person',
name: config.author,
Expand All @@ -138,8 +155,8 @@ const SEO = props => {
url: `${homeURL}${config.siteLogo}`,
},
},
datePublished: postNode.parent.birthtime,
dateModified: postNode.parent.mtime,
//datePublished: postNode.parent.birthtime,
//dateModified: postNode.parent.mtime,
description,
headline: title,
inLanguage: 'en',
Expand Down Expand Up @@ -223,7 +240,14 @@ const SEO = props => {
export default SEO;

SEO.propTypes = {
postNode: PropTypes.object,
postNode: PropTypes.shape({
title: PropTypes.string.isRequired,
description: PropTypes.string,
featuredimage: PropTypes.shape({
publicURL: PropTypes.string,
}),
keywords: PropTypes.string,
}),
postPath: PropTypes.string,
article: PropTypes.bool,
buildTime: PropTypes.string,
Expand Down
7 changes: 4 additions & 3 deletions src/components/all.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,18 +188,19 @@ a:hover
display: flex
justify-content: center
flex-wrap: wrap
background-color: rgb(13, 50, 95)

.call-to-action a
font-size: 3em
font-family: 'Oswald', sans-serif;
font-weight: bold;
text-align: center;
color: rgb(13, 50, 95)
color: rgb(234, 204, 98)
margin: 16px
padding: 4px
min-width: 340px;
background-color: rgb(234, 204, 98)
background-color: rgb(13, 50, 95)
.call-to-action a:hover
color: white

footer.footer
color: white
Expand Down
21 changes: 12 additions & 9 deletions src/pages/patterns/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,28 @@
templateKey: patterns
path: /patterns
title: Patterns
description: Downloadable patterns for Crisis 3-Layer Mask Pattern Packet which includes instructions, pattern, tips, materials guide, process guide and packing sheet.
featureimage: /static/img/rosie-logo.png
---

Download Created for Crisis 3-Layer Mask Pattern Packet which includes instructions, pattern, tips, materials guide, process guide and packing sheet.

We are in discussions to partner with the CDC for the 3-Layer Mask pattern. This pattern requires the use of a midweight/lightweight non-woven polyester material, for example:

* Pellon 830 Easy Pattern
* Pellon 40 Midweight Stabilizer
* Pellon 30 Lightweight Stabilizer
* Pellon 810
- Pellon 830 Easy Pattern
- Pellon 40 Midweight Stabilizer
- Pellon 30 Lightweight Stabilizer
- Pellon 810

If you do not have access to this material, you may use the [Pocket pattern](https://masksnow.org/docs/CFC_Pocket_Mask_3_28.pdf) as a backup.

Smaller sizes coming soon.

## 3-Layer Mask (Large)
[![Download 3-layer mask pattern](/img/3-layer-mask-download.png "Download 3-layer mask pattern")](https://masksnow.org/docs/CFCMask_3_27.pdf)
`youtube:https://www.youtube.com/embed/J0HnaWUIyzg`
## 3-Layer Mask (Large)

[![Download 3-layer mask pattern](/img/3-layer-mask-download.png "Download 3-layer mask pattern")](https://masksnow.org/docs/CFCMask_3_27.pdf)

`youtube:https://www.youtube.com/embed/J0HnaWUIyzg`

## Pocket Mask
### [Download Pocket Mask Pattern](https://masksnow.org/docs/CFC_Pocket_Mask_3_28.pdf)
Expand Down
9 changes: 5 additions & 4 deletions src/templates/groups-directory.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,6 @@ export const GroupsDirectoryTemplate = ({
<div className="columns">
<div className="column is-10 is-offset-1">
<div className="section">
<h2 className="title is-size-3 has-text-weight-bold is-bold-light">
{title}
</h2>
<PageContent className="content" content={content} />
</div>
</div>
Expand All @@ -39,7 +36,7 @@ const GroupsDirectory = ({ data }) => {
const { markdownRemark: post } = data;

return (
<Layout>
<Layout postNode={post}>
<GroupsDirectoryTemplate
contentComponent={HTMLContent}
title={post.frontmatter.title}
Expand All @@ -61,6 +58,10 @@ export const aboutPageQuery = graphql`
html
frontmatter {
title
description
featuredimage {
publicURL
}
}
}
}
Expand Down
9 changes: 5 additions & 4 deletions src/templates/index-page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,6 @@ export const IndexPageTemplate = ({ title, content, contentComponent }) => {
<div className="columns">
<div className="column is-10 is-offset-1">
<div className="section">
<h2 className="title is-size-3 has-text-weight-bold is-bold-light">
{title}
</h2>
<PageContent className="content" content={content} />
</div>
</div>
Expand All @@ -35,7 +32,7 @@ const IndexPage = ({ data }) => {
const { markdownRemark: post } = data;

return (
<Layout>
<Layout postNode={post}>
<IndexPageTemplate
contentComponent={HTMLContent}
title={post.frontmatter.title}
Expand All @@ -57,6 +54,10 @@ export const aboutPageQuery = graphql`
html
frontmatter {
title
description
featuredimage {
publicURL
}
}
}
}
Expand Down
9 changes: 5 additions & 4 deletions src/templates/info-page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,6 @@ export const PageTemplate = ({ title, content, contentComponent }) => {
<div className="columns">
<div className="column is-10 is-offset-1">
<div className="section">
<h2 className="title is-size-3 has-text-weight-bold is-bold-light">
{title}
</h2>
<PageContent className="content" content={content} />
</div>
</div>
Expand All @@ -35,7 +32,7 @@ const Page = ({ data }) => {
const { markdownRemark: post } = data;

return (
<Layout>
<Layout postNode={post}>
<PageTemplate
contentComponent={HTMLContent}
title={post.frontmatter.title}
Expand All @@ -57,6 +54,10 @@ export const infoPageQuery = graphql`
html
frontmatter {
title
description
featuredimage {
publicURL
}
}
}
}
Expand Down
3 changes: 3 additions & 0 deletions src/templates/news-post.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,9 @@ export const pageQuery = graphql`
title
description
tags
featuredimage {
publicURL
}
}
}
}
Expand Down
11 changes: 5 additions & 6 deletions src/templates/patterns.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,12 @@ import Content, { HTMLContent } from '../components/Content';
// import PATTERN from "../img/MasksNOW-Mask-Pattern-MasksNOW-Mask-Pattern-Packet-by-Created-for-Crisis.png";
export const PatternsTemplate = ({ title, content, contentComponent }) => {
const PageContent = contentComponent || Content;

return (
<section className="section section--gradient">
<div className="container">
<div className="columns">
<div className="column is-10 is-offset-1">
<div className="section">
<h2 className="title is-size-3 has-text-weight-bold is-bold-light">
{title}
</h2>
<PageContent className="content" content={content} />

<a href="/docs/CFCMask_3_27.pdf">
Expand All @@ -43,9 +39,8 @@ PatternsTemplate.propTypes = {

const Patterns = ({ data }) => {
const { markdownRemark: post } = data;

return (
<Layout>
<Layout postNode={post}>
<PatternsTemplate
contentComponent={HTMLContent}
title={post.frontmatter.title}
Expand All @@ -67,6 +62,10 @@ export const aboutPageQuery = graphql`
html
frontmatter {
title
description
featuredimage {
publicURL
}
}
}
}
Expand Down
Loading