Black lives matter (#3855)
This commit is contained in:
@ -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/'
|
||||||
|
@ -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;
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
|
@ -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;
|
||||||
|
Reference in New Issue
Block a user