Adding sitewide banner

Author: runemadsen

content/sitewide/banner.json

@@ -0,0 +1,5 @@
+{
+  "visible": false,
+  "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,12 @@
+import React, { memo } from 'react';
+import * as css from './Banner.module.css';
+
+export const Banner = ({ text, url }) => {
+  return (
+    <a href={url} target="_blank" className={css.root}>
+      {text}
+    </a>
+  );
+};
+
+export default memo(Banner);

src/components/Banner.module.css

@@ -0,0 +1,9 @@
+.root {
+  display: block;
+  text-align: center;
+  background-color: var(--processing-blue-gradient);
+  padding: var(--margin-quarter);
+  font-size: var(--text-small);
+  color: var(--processing-blue-dark);
+  margin-top: -2px;
+}

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