-
-
Notifications
You must be signed in to change notification settings - Fork 32.5k
/
Copy path_document.js
144 lines (130 loc) · 4.49 KB
/
_document.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
import React from 'react';
import PropTypes from 'prop-types';
import Document, { Head, Main, NextScript } from 'next/document';
// You can find a benchmark of the available CSS minifiers under
// https://github.com/GoalSmashers/css-minification-benchmark
// We have found that clean-css is faster than cssnano but the output is larger.
// Waiting for https://github.com/cssinjs/jss/issues/279
// 4% slower but 12% smaller output than doing it in a single step.
//
// It's using .browserslistrc
let prefixer;
let cleanCSS;
if (process.env.NODE_ENV === 'production') {
const postcss = require('postcss');
const autoprefixer = require('autoprefixer');
const CleanCSS = require('clean-css');
prefixer = postcss([autoprefixer]);
cleanCSS = new CleanCSS();
}
const GOOGLE_ID = process.env.NODE_ENV === 'production' ? 'UA-106598593-2' : 'UA-106598593-3';
class MyDocument extends Document {
render() {
const { canonical, pageContext, url } = this.props;
let font = 'https://fonts.googleapis.com/css?family=Roboto:300,400,500';
if (url.match(/onepirate/)) {
font = 'https://fonts.googleapis.com/css?family=Roboto+Condensed:700|Work+Sans:300,400';
}
return (
<html lang="en" dir="ltr">
<Head>
{/* Use minimum-scale=1 to enable GPU rasterization */}
<meta
name="viewport"
content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
/>
{/*
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
*/}
<link rel="manifest" href="/static/manifest.json" />
{/* PWA primary color */}
<meta
name="theme-color"
content={pageContext ? pageContext.theme.palette.primary.main : null}
/>
<link rel="shortcut icon" href="/static/favicon.ico" />
<link rel="canonical" href={canonical} />
<link rel="stylesheet" href={font} />
{/*
Preconnect allows the browser to setup early connections before an HTTP request
is actually sent to the server.
This includes DNS lookups, TLS negotiations, TCP handshakes.
*/}
<link href="https://fonts.gstatic.com" rel="preconnect" crossOrigin="anonymous" />
<style id="insertion-point-jss" />
</Head>
<body>
<Main />
<NextScript />
{/* Global Site Tag (gtag.js) - Google Analytics */}
<script defer src="https://www.google-analytics.com/analytics.js" />
<script
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{
__html: `
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
window.ga('create','${GOOGLE_ID}','auto');
`,
}}
/>
<script defer src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js" />
</body>
</html>
);
}
}
MyDocument.getInitialProps = async ctx => {
// Resolution order
//
// On the server:
// 1. page.getInitialProps
// 2. document.getInitialProps
// 3. page.render
// 4. document.render
//
// On the server with error:
// 2. document.getInitialProps
// 3. page.render
// 4. document.render
//
// On the client
// 1. page.getInitialProps
// 3. page.render
// Render app and page and get the context of the page with collected side effects.
let pageContext;
const page = ctx.renderPage(Component => {
const WrappedComponent = props => {
pageContext = props.pageContext;
return <Component {...props} />;
};
WrappedComponent.propTypes = {
pageContext: PropTypes.object.isRequired,
};
return WrappedComponent;
});
let css;
// It might be undefined, e.g. after an error.
if (pageContext) {
css = pageContext.sheetsRegistry.toString();
if (process.env.NODE_ENV === 'production') {
const result1 = await prefixer.process(css, { from: undefined });
css = result1.css;
css = cleanCSS.minify(css).styles;
}
}
return {
...page,
pageContext,
url: ctx.req.url,
canonical: `https://material-ui.com${ctx.req.url.replace(/\/$/, '')}/`,
styles: (
<style
id="jss-server-side"
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{ __html: css }}
/>
),
};
};
export default MyDocument;