Black lives matter (#3855)

website/data/notifications.yml

@@ -38,3 +38,9 @@ notifications:
     published: false
     title: JAMStack_conf 2018
     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/'

website/src/components/header.js

@@ -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.collapsed &&
-      !p.scrolled &&
       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}>
+    <StaticQuery query={NOTIFS_QUERY}>
-      <Notifications />
+      {data => {
-      <HeaderContainer>
+        const notifications = data.file.childDataYaml.notifications.filter(
-        <Logo>
+          notif => notif.published,
-          <Link to="/">
+        );
-            <img src={logo} alt="Netlify CMS logo" />
+        const collapsed = !hasHeroBelow || scrolled;
-          </Link>
+        const hasNotifications = notifications.length > 0;
-        </Logo>
+        return (
-        <MenuActions>
+          <StyledHeader collapsed={collapsed} id="header" hasNotifications={hasNotifications}>
-          <SearchBtn onClick={handleSearchBtnClick}>
+            <Notifications notifications={notifications} />
-            {isSearchOpen ? <span>&times;</span> : <img src={searchIcon} alt="search" />}
+            <HeaderContainer>
-          </SearchBtn>
+              <Logo>
-          <MenuBtn onClick={handleMenuBtnClick}>
+                <Link to="/">
-            {isNavOpen ? <span>&times;</span> : <span>&#9776;</span>}
+                  <img src={logo} alt="Netlify CMS logo" />
-          </MenuBtn>
+                </Link>
-        </MenuActions>
+              </Logo>
-        <SearchBox open={isSearchOpen}>
+              <MenuActions>
-          <DocSearch />
+                <SearchBtn onClick={handleSearchBtnClick}>
-        </SearchBox>
+                  {isSearchOpen ? <span>&times;</span> : <img src={searchIcon} alt="search" />}
-        <Menu open={isNavOpen}>
+                </SearchBtn>
-          <MenuList>
+                <MenuBtn onClick={handleMenuBtnClick}>
-            <MenuItem
+                  {isNavOpen ? <span>&times;</span> : <span>&#9776;</span>}
-              css={css`
+                </MenuBtn>
-                margin-top: 8px;
+              </MenuActions>
-              `}
+              <SearchBox open={isSearchOpen}>
-            >
+                <DocSearch />
-              <GitHubButton
+              </SearchBox>
-                href="https://github.com/netlify/netlify-cms"
+              <Menu open={isNavOpen}>
-                data-icon="octicon-star"
+                <MenuList>
-                data-show-count="true"
+                  <MenuItem
-                aria-label="Star netlify/netlify-cms on GitHub"
+                    css={css`
-              >
+                      margin-top: 8px;
-                Star
+                    `}
-              </GitHubButton>
+                  >
-            </MenuItem>
+                    <GitHubButton
-            <MenuItem>
+                      href="https://github.com/netlify/netlify-cms"
-              <NavLink to="/docs/intro/">Docs</NavLink>
+                      data-icon="octicon-star"
-            </MenuItem>
+                      data-show-count="true"
-            <MenuItem>
+                      aria-label="Star netlify/netlify-cms on GitHub"
-              <NavLink to="/docs/contributor-guide/">Contributing</NavLink>
+                    >
-            </MenuItem>
+                      Star
-            <MenuItem>
+                    </GitHubButton>
-              <NavLink to="/community/">Community</NavLink>
+                  </MenuItem>
-            </MenuItem>
+                  <MenuItem>
-            <MenuItem>
+                    <NavLink to="/docs/intro/">Docs</NavLink>
-              <NavLink to="/blog/">Blog</NavLink>
+                  </MenuItem>
-            </MenuItem>
+                  <MenuItem>
-          </MenuList>
+                    <NavLink to="/docs/contributor-guide/">Contributing</NavLink>
-        </Menu>
+                  </MenuItem>
-      </HeaderContainer>
+                  <MenuItem>
-    </StyledHeader>
+                    <NavLink to="/community/">Community</NavLink>
+                  </MenuItem>
+                  <MenuItem>
+                    <NavLink to="/blog/">Blog</NavLink>
+                  </MenuItem>
+                </MenuList>
+              </Menu>
+            </HeaderContainer>
+          </StyledHeader>
+        );
+      }}
+    </StaticQuery>
   );
 };
 

website/src/components/notification.js

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

website/src/components/notifications.js

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