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,8 +178,16 @@ const Header = ({ hasHeroBelow }) => {
   };
 
   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>
               <Logo>
                 <Link to="/">
@@ -210,6 +238,9 @@ const Header = ({ hasHeroBelow }) => {
             </HeaderContainer>
           </StyledHeader>
         );
+      }}
+    </StaticQuery>
+  );
 };
 
 export default Header;

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/" }) {
-      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>
-);
 
 export default Notifications;