Adding buildId and banner to siteMetadata

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',

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 = () => (
+const query = graphql`
-  <header className={ style.header }>
+  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;

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