Merge pull request #341 from processing/banner

Adding sitewide banner

Author: SableRaf

content/sitewide/banner.json

@@ -0,0 +1,5 @@
+{
+  "visible": true,
+  "text": "This is some text",
+  "url": "https://designsystems.international"
+}

gatsby-config.js

@@ -53,6 +53,13 @@ module.exports = {
         ]
       }
     },
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `sitewide`,
+        path: path.resolve(__dirname, 'content/sitewide')
+      }
+    },
     {
       resolve: `gatsby-source-filesystem`,
       options: {

src/components/Banner.js

@@ -0,0 +1,45 @@
+import React, { memo, useEffect, useState } from 'react';
+import { slugify } from '../utils';
+import * as css from './Banner.module.css';
+
+export const Banner = ({ text, url }) => {
+  const [visible, setVisible] = useState(false);
+  const key = slugify(text);
+
+  const hide = () => {
+    if (window.localStorage) {
+      window.localStorage.setItem(
+        `banner-${key}`,
+        JSON.stringify({
+          visible: false
+        })
+      );
+    }
+    setVisible(false);
+  };
+
+  // Only show the banner if this text has not been dismissed yet
+  useEffect(() => {
+    if (window.localStorage) {
+      const savedState = window.localStorage.getItem(`banner-${key}`);
+      if (savedState) {
+        setVisible(JSON.parse(savedState).visible);
+      } else {
+        setVisible(true);
+      }
+    }
+  }, [key]);
+
+  return visible ? (
+    <div className={css.root}>
+      <a className={css.link} href={url} target="_blank" rel="noreferrer">
+        {text}
+      </a>
+      <button className={css.close} onClick={hide}>
+        x
+      </button>
+    </div>
+  ) : null;
+};
+
+export default memo(Banner);

src/components/Banner.module.css

@@ -0,0 +1,23 @@
+.root {
+  text-align: center;
+  background-color: var(--processing-blue-deep);
+  color: white;
+  font-size: var(--text-normal);
+  margin-top: -2px;
+  display: flex;
+}
+
+.link {
+  display: block;
+  padding: var(--margin-quarter);
+  flex: 1;
+}
+
+.close {
+  flex: 0 0 60px;
+  cursor: pointer;
+  background: none;
+  color: white;
+  border: none;
+  font-size: var(--text-large);
+}

src/components/Header.js

@@ -1,15 +1,35 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { graphql, useStaticQuery } from 'gatsby';
 
 import Topbar from './Topbar';
 import Navbar from './Navbar';
+import Banner from './Banner';
 
 import * as css from './Header.module.css';
 
 const Header = ({ siteTitle, scrolled }) => {
+  const data = useStaticQuery(graphql`
+    query {
+      banner: file(
+        name: { eq: "banner" }
+        sourceInstanceName: { eq: "sitewide" }
+      ) {
+        name
+        childJson {
+          visible
+          url
+          text
+        }
+      }
+    }
+  `);
+  const bannerData = data.banner.childJson;
+
   return (
     <header className={css.root}>
       <Topbar show={!scrolled} />
+      {bannerData && bannerData.visible && <Banner {...bannerData} />}
       <Navbar siteTitle={siteTitle} scrolled={scrolled} />
     </header>
   );