Adding buildId and banner to siteMetadata

This commit is contained in:
Jeff Avallone 2019-01-03 17:59:22 -05:00
parent c572501d51
commit fb4a130b3c
3 changed files with 40 additions and 4 deletions

View File

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

View File

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

View File

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