Adding an environment banner to the page
To prevent testing local changes in production
This commit is contained in:
parent
84df219d7f
commit
bbdacca1da
@ -18,7 +18,7 @@ const PageTemplate = ({ title, children }) => (
|
||||
<title>Regexper{ title && (' - ' + title) }</title>
|
||||
</head>
|
||||
<body>
|
||||
<header id="main">
|
||||
<header id="main" data-banner={ process.env.BANNER }>
|
||||
<h1>
|
||||
<a href="/">Regexper</a>
|
||||
</h1>
|
||||
|
@ -24,6 +24,7 @@ exports[`PageTemplate rendering 1`] = `
|
||||
</head>
|
||||
<body>
|
||||
<header
|
||||
data-banner={undefined}
|
||||
id="main"
|
||||
>
|
||||
<h1>
|
||||
@ -102,6 +103,7 @@ exports[`PageTemplate rendering with title 1`] = `
|
||||
</head>
|
||||
<body>
|
||||
<header
|
||||
data-banner={undefined}
|
||||
id="main"
|
||||
>
|
||||
<h1>
|
||||
|
@ -33,6 +33,22 @@ body {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#main: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;
|
||||
}
|
||||
|
||||
#main h1 {
|
||||
font-family: 'Bangers', 'cursive';
|
||||
font-size: 4rem;
|
||||
|
@ -38,7 +38,10 @@ module.exports = {
|
||||
},
|
||||
plugins: [
|
||||
new webpack.EnvironmentPlugin({
|
||||
NODE_ENV: 'development'
|
||||
NODE_ENV: 'development',
|
||||
GA_PROPERTY: null,
|
||||
SENTRY_KEY: null,
|
||||
BANNER: process.env.NODE_ENV === 'production' ? null : (process.env.NODE_ENV || 'development')
|
||||
}),
|
||||
new webpack.optimize.CommonsChunkPlugin({
|
||||
name: 'common',
|
||||
|
Loading…
Reference in New Issue
Block a user