From fb4a130b3cdb4f4657b4a46fa5bf5093cf701192 Mon Sep 17 00:00:00 2001
From: Jeff Avallone <jeff.avallone@gmail.com>
Date: Thu, 3 Jan 2019 17:59:22 -0500
Subject: [PATCH] Adding buildId and banner to siteMetadata

---
 gatsby-config.js                       | 10 ++++++++++
 src/components/Header/index.js         | 18 ++++++++++++++----
 src/components/Header/style.module.css | 16 ++++++++++++++++
 3 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/gatsby-config.js b/gatsby-config.js
index de9a687..6048047 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -1,4 +1,14 @@
+const buildId = [
+  process.env.CI_COMMIT_REF_SLUG || 'prerelese',
+  (process.env.CI_COMMIT_SHA || 'gitsha').slice(0, 7)
+].join('-');
+const banner = (process.env.NODE_ENV === 'production') ? false : (process.env.NODE_ENV || 'development');
+
 module.exports = {
+  siteMetadata: {
+    buildId,
+    banner
+  },
   plugins: [
     'gatsby-plugin-react-helmet',
     'gatsby-plugin-postcss',
diff --git a/src/components/Header/index.js b/src/components/Header/index.js
index 28f1236..4e41169 100644
--- a/src/components/Header/index.js
+++ b/src/components/Header/index.js
@@ -1,12 +1,22 @@
 import React from 'react';
-import { Link } from 'gatsby';
+import { Link, StaticQuery, graphql } from 'gatsby';
 
 import GitlabIcon from 'react-feather/dist/icons/gitlab';
 
 import style from './style.module.css';
 
-const Header = () => (
-  <header className={ style.header }>
+const query = graphql`
+  query HeaderQuery {
+    site {
+      siteMetadata {
+        banner
+      }
+    }
+  }
+`;
+
+const Header = () => <StaticQuery query={ query } render={ ({ site: { siteMetadata } }) => (
+  <header className={ style.header } data-banner={ siteMetadata.banner || null }>
     <h1>
       <Link to="/">Regexper</Link>
     </h1>
@@ -23,6 +33,6 @@ const Header = () => (
       </li>
     </ul>
   </header>
-);
+) } />;
 
 export default Header;
diff --git a/src/components/Header/style.module.css b/src/components/Header/style.module.css
index aa4f0ac..a0973ac 100644
--- a/src/components/Header/style.module.css
+++ b/src/components/Header/style.module.css
@@ -10,6 +10,22 @@
   position: relative;
   color: var(--color-black);
 
+  &:after {
+    content: attr(data-banner);
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: var(--header-height);
+    line-height: var(--header-height);
+    text-transform: uppercase;
+    text-align: center;
+    font-size: calc(var(--header-height) * 0.7);
+    font-weight: bold;
+    opacity: 0.2;
+  }
+
   & h1 {
     flex-grow: 1;
     font-family: 'Bangers', 'cursive';