Black lives matter (#3855)

This commit is contained in:
Erez Rokah
2020-06-04 20:51:07 +03:00
committed by GitHub
parent 2b46608f86
commit 8ccbb3489f
4 changed files with 100 additions and 84 deletions

View File

@ -38,3 +38,9 @@ notifications:
published: false published: false
title: JAMStack_conf 2018 title: JAMStack_conf 2018
url: 'https://jamstackconf.com/' url: 'https://jamstackconf.com/'
- loud: false
message: >-
Netlify stands in solidarity with the Black community. Make a donation. Netlify will match it. #BlackLivesMatter
published: true
title: Donate now
url: 'http://www.netlify.com/donation-matching/'

View File

@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { Link } from 'gatsby'; import { Link, graphql, StaticQuery } from 'gatsby';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { css } from '@emotion/core'; import { css } from '@emotion/core';
@ -27,13 +27,18 @@ const StyledHeader = styled.header`
z-index: ${theme.zIndexes.header}; z-index: ${theme.zIndexes.header};
${p => ${p =>
p.hasHeroBelow && !p.collapsed &&
!p.scrolled &&
css` css`
background: #2a2c24; background: #2a2c24;
padding-top: ${theme.space[5]}; padding-top: ${theme.space[5]};
padding-bottom: ${theme.space[5]}; padding-bottom: ${theme.space[5]};
`}; `};
${p =>
p.hasNotifications &&
css`
padding-top: 0;
`};
} }
`; `;
@ -125,6 +130,21 @@ const NavLink = styled(Link)`
font-weight: 600; font-weight: 600;
`; `;
const NOTIFS_QUERY = graphql`
query notifs {
file(relativePath: { regex: "/notifications/" }) {
childDataYaml {
notifications {
published
loud
message
url
}
}
}
}
`;
const Header = ({ hasHeroBelow }) => { const Header = ({ hasHeroBelow }) => {
const [scrolled, setScrolled] = useState(false); const [scrolled, setScrolled] = useState(false);
const [isNavOpen, setNavOpen] = useState(false); const [isNavOpen, setNavOpen] = useState(false);
@ -158,8 +178,16 @@ const Header = ({ hasHeroBelow }) => {
}; };
return ( return (
<StyledHeader scrolled={scrolled} id="header" hasHeroBelow={hasHeroBelow}> <StaticQuery query={NOTIFS_QUERY}>
<Notifications /> {data => {
const notifications = data.file.childDataYaml.notifications.filter(
notif => notif.published,
);
const collapsed = !hasHeroBelow || scrolled;
const hasNotifications = notifications.length > 0;
return (
<StyledHeader collapsed={collapsed} id="header" hasNotifications={hasNotifications}>
<Notifications notifications={notifications} />
<HeaderContainer> <HeaderContainer>
<Logo> <Logo>
<Link to="/"> <Link to="/">
@ -210,6 +238,9 @@ const Header = ({ hasHeroBelow }) => {
</HeaderContainer> </HeaderContainer>
</StyledHeader> </StyledHeader>
); );
}}
</StaticQuery>
);
}; };
export default Header; export default Header;

View File

@ -9,6 +9,7 @@ const Notif = styled.a`
color: white; color: white;
display: block; display: block;
padding: ${theme.space[2]} ${theme.space[3]}; padding: ${theme.space[2]} ${theme.space[3]};
margin-bottom: ${theme.space[3]};
text-align: center; text-align: center;
/* prettier-ignore */ /* prettier-ignore */
@ -38,7 +39,7 @@ const Notif = styled.a`
`; `;
const Notification = ({ url, loud, children }) => ( const Notification = ({ url, loud, children }) => (
<Notif href={url} loud={loud}> <Notif href={url} loud={loud} target="_blank" rel="noopener noreferrer">
{children} {children}
</Notif> </Notif>
); );

View File

@ -1,34 +1,12 @@
import React from 'react'; import React from 'react';
import { graphql, StaticQuery } from 'gatsby';
import Notification from './notification'; import Notification from './notification';
const NOTIFS_QUERY = graphql` const Notifications = ({ notifications }) => {
query notifs { return notifications.map((node, i) => (
file(relativePath: { regex: "/notifications/" }) {
childDataYaml {
notifications {
published
loud
message
url
}
}
}
}
`;
const Notifications = () => (
<StaticQuery query={NOTIFS_QUERY}>
{data => {
const notifs = data.file.childDataYaml.notifications.filter(notif => notif.published);
return notifs.map((node, i) => (
<Notification key={i} url={node.url} loud={node.loud}> <Notification key={i} url={node.url} loud={node.loud}>
{node.message} {node.message}
</Notification> </Notification>
)); ));
}} };
</StaticQuery>
);
export default Notifications; export default Notifications;