forked from mui/material-ui
-
Notifications
You must be signed in to change notification settings - Fork 0
/
_document.js
138 lines (129 loc) · 4.67 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
import React from 'react';
import Document, { Head, Main, NextScript } from 'next/document';
import postcss from 'postcss';
import autoprefixer from 'autoprefixer';
import CleanCSS from 'clean-css';
import getPageContext from 'docs/src/modules/styles/getPageContext';
import config from 'docs/src/config';
const cleanCSS = new CleanCSS();
// 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
const prefixer = postcss([autoprefixer]);
class MyDocument extends Document {
render() {
const { canonical, pageContext } = this.props;
return (
<html lang="en" dir="ltr">
<Head>
<meta
name="description"
content="React Components that Implement Google's Material Design."
/>
{/* Use minimum-scale=1 to enable GPU rasterization */}
<meta
name="viewport"
content={
'user-scalable=0, initial-scale=1, ' +
'minimum-scale=1, width=device-width, height=device-height'
}
/>
{/*
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.theme.palette.primary.main} />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"
/>
<style id="insertion-point-jss" />
{/* Twitter */}
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@MaterialUI" />
<meta name="twitter:title" content="Material-UI" />
<meta
name="twitter:description"
content="React Components that Implement Google's Material Design."
/>
<meta name="twitter:image" content="https://material-ui-next.com/static/brand.png" />
{/* Facebook */}
<meta property="og:type" content="website" />
<meta property="og:title" content="Material-UI" />
<meta
property="og:description"
content="React Components that Implement Google's Material Design."
/>
<meta property="og:image" content="https://material-ui-next.com/static/brand.png" />
<meta property="og:locale" content="en_US" />
<link rel="shortcut icon" href="/static/favicon.ico" />
<link rel="canonical" href={canonical} />
</Head>
<body>
<Main />
{/* Global Site Tag (gtag.js) - Google Analytics */}
<script async src={`https://www.googletagmanager.com/gtag/js?id=${config.google.id}`} />
<script
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments)};
gtag('js', new Date());
`,
}}
/>
<NextScript />
<script async 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
// Get the context of the page to collected side effects.
const pageContext = getPageContext();
const page = ctx.renderPage(Component => props => (
<Component pageContext={pageContext} {...props} />
));
let 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,
canonical: `https://material-ui-next.com${ctx.req.url.replace(/\/$/, '')}/`,
styles: (
<style
id="jss-server-side"
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{ __html: css }}
/>
),
};
};
export default MyDocument;