gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Black lives matter (#3855)

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

139
website/src/components/header.js
View File

@ -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>&times;</span> : <img src={searchIcon} alt="search" />}
</SearchBtn>
<MenuBtn onClick={handleMenuBtnClick}>
{isNavOpen ? <span>&times;</span> : <span>&#9776;</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>&times;</span> : <img src={searchIcon} alt="search" />}
</SearchBtn>
<MenuBtn onClick={handleMenuBtnClick}>
{isNavOpen ? <span>&times;</span> : <span>&#9776;</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>
);
};

3
website/src/components/notification.js
View File

@ -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>
);

36
website/src/components/notifications.js
View File

@ -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;