Black lives matter (#3855)
This commit is contained in:
@ -1,5 +1,5 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Link } from 'gatsby';
|
||||
import { Link, graphql, StaticQuery } from 'gatsby';
|
||||
import styled from '@emotion/styled';
|
||||
import { css } from '@emotion/core';
|
||||
|
||||
@ -27,13 +27,18 @@ const StyledHeader = styled.header`
|
||||
z-index: ${theme.zIndexes.header};
|
||||
|
||||
${p =>
|
||||
p.hasHeroBelow &&
|
||||
!p.scrolled &&
|
||||
!p.collapsed &&
|
||||
css`
|
||||
background: #2a2c24;
|
||||
padding-top: ${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;
|
||||
`;
|
||||
|
||||
const NOTIFS_QUERY = graphql`
|
||||
query notifs {
|
||||
file(relativePath: { regex: "/notifications/" }) {
|
||||
childDataYaml {
|
||||
notifications {
|
||||
published
|
||||
loud
|
||||
message
|
||||
url
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const Header = ({ hasHeroBelow }) => {
|
||||
const [scrolled, setScrolled] = useState(false);
|
||||
const [isNavOpen, setNavOpen] = useState(false);
|
||||
@ -158,57 +178,68 @@ const Header = ({ hasHeroBelow }) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledHeader scrolled={scrolled} id="header" hasHeroBelow={hasHeroBelow}>
|
||||
<Notifications />
|
||||
<HeaderContainer>
|
||||
<Logo>
|
||||
<Link to="/">
|
||||
<img src={logo} alt="Netlify CMS logo" />
|
||||
</Link>
|
||||
</Logo>
|
||||
<MenuActions>
|
||||
<SearchBtn onClick={handleSearchBtnClick}>
|
||||
{isSearchOpen ? <span>×</span> : <img src={searchIcon} alt="search" />}
|
||||
</SearchBtn>
|
||||
<MenuBtn onClick={handleMenuBtnClick}>
|
||||
{isNavOpen ? <span>×</span> : <span>☰</span>}
|
||||
</MenuBtn>
|
||||
</MenuActions>
|
||||
<SearchBox open={isSearchOpen}>
|
||||
<DocSearch />
|
||||
</SearchBox>
|
||||
<Menu open={isNavOpen}>
|
||||
<MenuList>
|
||||
<MenuItem
|
||||
css={css`
|
||||
margin-top: 8px;
|
||||
`}
|
||||
>
|
||||
<GitHubButton
|
||||
href="https://github.com/netlify/netlify-cms"
|
||||
data-icon="octicon-star"
|
||||
data-show-count="true"
|
||||
aria-label="Star netlify/netlify-cms on GitHub"
|
||||
>
|
||||
Star
|
||||
</GitHubButton>
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
<NavLink to="/docs/intro/">Docs</NavLink>
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
<NavLink to="/docs/contributor-guide/">Contributing</NavLink>
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
<NavLink to="/community/">Community</NavLink>
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
<NavLink to="/blog/">Blog</NavLink>
|
||||
</MenuItem>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
</HeaderContainer>
|
||||
</StyledHeader>
|
||||
<StaticQuery query={NOTIFS_QUERY}>
|
||||
{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>
|
||||
<Logo>
|
||||
<Link to="/">
|
||||
<img src={logo} alt="Netlify CMS logo" />
|
||||
</Link>
|
||||
</Logo>
|
||||
<MenuActions>
|
||||
<SearchBtn onClick={handleSearchBtnClick}>
|
||||
{isSearchOpen ? <span>×</span> : <img src={searchIcon} alt="search" />}
|
||||
</SearchBtn>
|
||||
<MenuBtn onClick={handleMenuBtnClick}>
|
||||
{isNavOpen ? <span>×</span> : <span>☰</span>}
|
||||
</MenuBtn>
|
||||
</MenuActions>
|
||||
<SearchBox open={isSearchOpen}>
|
||||
<DocSearch />
|
||||
</SearchBox>
|
||||
<Menu open={isNavOpen}>
|
||||
<MenuList>
|
||||
<MenuItem
|
||||
css={css`
|
||||
margin-top: 8px;
|
||||
`}
|
||||
>
|
||||
<GitHubButton
|
||||
href="https://github.com/netlify/netlify-cms"
|
||||
data-icon="octicon-star"
|
||||
data-show-count="true"
|
||||
aria-label="Star netlify/netlify-cms on GitHub"
|
||||
>
|
||||
Star
|
||||
</GitHubButton>
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
<NavLink to="/docs/intro/">Docs</NavLink>
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
<NavLink to="/docs/contributor-guide/">Contributing</NavLink>
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
<NavLink to="/community/">Community</NavLink>
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
<NavLink to="/blog/">Blog</NavLink>
|
||||
</MenuItem>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
</HeaderContainer>
|
||||
</StyledHeader>
|
||||
);
|
||||
}}
|
||||
</StaticQuery>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -9,6 +9,7 @@ const Notif = styled.a`
|
||||
color: white;
|
||||
display: block;
|
||||
padding: ${theme.space[2]} ${theme.space[3]};
|
||||
margin-bottom: ${theme.space[3]};
|
||||
text-align: center;
|
||||
|
||||
/* prettier-ignore */
|
||||
@ -38,7 +39,7 @@ const Notif = styled.a`
|
||||
`;
|
||||
|
||||
const Notification = ({ url, loud, children }) => (
|
||||
<Notif href={url} loud={loud}>
|
||||
<Notif href={url} loud={loud} target="_blank" rel="noopener noreferrer">
|
||||
{children}
|
||||
</Notif>
|
||||
);
|
||||
|
@ -1,34 +1,12 @@
|
||||
import React from 'react';
|
||||
import { graphql, StaticQuery } from 'gatsby';
|
||||
|
||||
import Notification from './notification';
|
||||
|
||||
const NOTIFS_QUERY = graphql`
|
||||
query notifs {
|
||||
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}>
|
||||
{node.message}
|
||||
</Notification>
|
||||
));
|
||||
}}
|
||||
</StaticQuery>
|
||||
);
|
||||
const Notifications = ({ notifications }) => {
|
||||
return notifications.map((node, i) => (
|
||||
<Notification key={i} url={node.url} loud={node.loud}>
|
||||
{node.message}
|
||||
</Notification>
|
||||
));
|
||||
};
|
||||
|
||||
export default Notifications;
|
||||
|
Reference in New Issue
Block a user