Commit c1936aeb authored by Torstein Nicolaysen's avatar Torstein Nicolaysen Committed by Torstein
Browse files

DEICH-6140 clean up _document.js

parent ec9a93e2
......@@ -3,6 +3,9 @@ const config = {
// CODE: "UA-XXXXXXXX-X"
CODE: "UA-42068879-1"
},
GOOGLE_OPTIMIZE: {
CODE: "OPT-TK9WVTM"
},
SOCIAL_MEDIA: [
{
type: "facebook",
......
import { Fragment } from "react";
import React from "react";
import classNames from "classnames";
import Document, { Html, Head, Main, NextScript } from "next/document";
......@@ -6,20 +6,32 @@ import CONFIG from "../constants/config";
import { detectBrowser } from "../utilities/browserDetect";
const useLocalStyles = process.env.CSS_MODE === "local";
const isProduction = process.env.NODE_ENV === "production";
class MyDocument extends Document {
static async getInitialProps(ctx) {
const isProduction = process.env.NODE_ENV === "production";
const initialProps = await Document.getInitialProps(ctx);
const userAgent = ctx.req
? ctx.req.headers["user-agent"]
: navigator.userAgent;
const nonce = ctx.res ? ctx.res.locals.cspNonce : "";
return { ...initialProps, userAgent, isProduction, nonce };
// noinspection JSUnresolvedVariable
const nonce = ctx.res?.locals?.cspNonce || "";
return Promise.resolve({
...initialProps,
userAgent,
isProduction,
nonce
});
}
initGoogleAnalytics() {
// NOTE: This has to be removed on v11+
// Example on how to do this: https://github.com/vercel/next.js/blob/canary/examples/with-google-analytics/pages/_app.js
// Also, consider combining the effort with changing to gtag.js
// https://developers.google.com/analytics/devguides/migration/ua/analyticsjs-to-gtagjs
return {
__html: `
window.dataLayer=[{event: "optimize.page_navigation"}];
......@@ -31,8 +43,9 @@ class MyDocument extends Document {
`
};
}
render() {
const { isProduction, userAgent, nonce } = this.props;
const { userAgent, nonce } = this.props;
const browser = detectBrowser(userAgent);
const bodyClass = classNames({
......@@ -43,42 +56,35 @@ class MyDocument extends Document {
return (
<Html lang="no">
<Head nonce={nonce}>
{/* Prevent indexing in non-production environment */}
{!isProduction && (
<Fragment>
<meta name="robots" content="noindex" />
</Fragment>
)}
<Head nonce={nonce} title="Deichman">
{/* Prevent search engines indexing in non-production environment */}
{!isProduction && <meta name="robots" content="noindex" />}
{/* Apply polyfills for legacy browsers */}
{browser.legacy && (
<Fragment>
<script src="https://polyfill.io/v3/polyfill.js?features=es6,es7&flags=gated" />
<script src="https://cdn.jsdelivr.net/npm/css-vars-ponyfill@1" />
<>
{/* NOTE: Polyfill.io should be removed when upgrading to v11+ as it's built in */}
<script src="//polyfill.io/v3/polyfill.js?features=es6,es7&flags=gated" />
<script src="//cdn.jsdelivr.net/npm/css-vars-ponyfill@1" />
<link rel="stylesheet" href="/static/polyfills.css" />
<link
href="https://cdn.jsdelivr.net/npm/@digibib/deichman-ui@7.2.2/dist/legacy.css"
rel="stylesheet"
/>
<script nonce={nonce}>cssVars();</script>
</Fragment>
</>
)}
{/* Init GA queue */}
<script
dangerouslySetInnerHTML={this.initGoogleAnalytics()}
nonce={nonce}
/>
{/* Apply development styling */}
{useLocalStyles && (
<Fragment>
<>
<link
href="http://localhost:5000/dist/index.css"
rel="stylesheet"
/>
<link href="/static/temp.css" rel="stylesheet" />
</Fragment>
</>
)}
{/* Apply production styling */}
......@@ -96,7 +102,7 @@ class MyDocument extends Document {
{/* Only add tracking scripts if in production */}
{isProduction && (
<Fragment>
<>
<script
async
src="https://www.google-analytics.com/analytics.js"
......@@ -104,10 +110,12 @@ class MyDocument extends Document {
/>
<script
async
src="https://www.googleoptimize.com/optimize.js?id=OPT-TK9WVTM"
src={`https://www.googleoptimize.com/optimize.js?id=${
CONFIG.GOOGLE_OPTIMIZE.CODE
}`}
nonce={nonce}
/>
</Fragment>
</>
)}
<div id="modalRoot" />
</body>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment