Permalink
Aug 18, 2017
Aug 31, 2017
Aug 18, 2017
Aug 20, 2017
Aug 18, 2017
Aug 31, 2017
Aug 18, 2017
Aug 20, 2017
Aug 18, 2017
Aug 20, 2017
Aug 18, 2017
Aug 18, 2017
Aug 31, 2017
Aug 20, 2017
Aug 18, 2017
Aug 18, 2017
Aug 18, 2017
Newer
100644
107 lines (99 sloc)
3.18 KB
1
// @flow
2
3
import React from 'react';
4
import Document, { Head, Main, NextScript } from 'next/document';
5
import getContext from 'docs/src/modules/styles/getContext';
6
import { JssProvider } from 'react-jss';
10
11
class MyDocument extends Document {
12
render() {
13
return (
14
<html lang="en" dir="ltr">
15
<Head>
16
<title>Material-UI</title>
17
<meta
18
name="description"
19
content="React Components that Implement Google's Material Design."
20
/>
21
<meta charSet="utf-8" />
22
{/* Use minimum-scale=1 to enable GPU rasterization */}
23
<meta
24
name="viewport"
25
content={
26
'user-scalable=0, initial-scale=1, ' +
27
'minimum-scale=1, width=device-width, height=device-height'
28
}
29
/>
30
{/*
31
manifest.json provides metadata used when your web app is added to the
32
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
33
*/}
34
<link rel="manifest" href="/static/manifest.json" />
35
{/* PWA primary color */}
36
<meta name="theme-color" content={this.props.stylesContext.theme.palette.primary[500]} />
37
<link
38
rel="stylesheet"
39
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"
40
/>
41
<style id="insertion-point-jss" />
42
{/* Twitter */}
43
<meta name="twitter:card" content="summary_large_image" />
44
<meta name="twitter:site" content="@MaterialUI" />
45
<meta name="twitter:title" content="Material-UI" />
46
<meta
47
name="twitter:description"
48
content="React Components that Implement Google's Material Design."
49
/>
50
<meta name="twitter:image" content="/static/icons/512x512.png" />
51
<link rel="shortcut icon" href="/static/favicon.ico" />
52
</Head>
53
<body>
54
<Main />
55
<NextScript />
56
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js" async defer />
57
</body>
58
</html>
59
);
60
}
61
}
62
63
MyDocument.getInitialProps = ctx => {
64
// Resolution order
65
//
66
// On the server:
67
// 1. page.getInitialProps
68
// 2. document.getInitialProps
69
// 3. page.render
70
// 4. document.render
71
//
72
// On the server with error:
73
// 2. document.getInitialProps
74
// 3. page.render
75
// 4. document.render
76
//
77
// On the client
78
// 1. page.getInitialProps
79
// 3. page.render
80
82
const context = getContext();
83
const page = ctx.renderPage(Component => props => (
84
<JssProvider registry={context.sheetsRegistry} jss={context.jss}>
85
<Component {...props} />
86
</JssProvider>
87
));
88
89
let css = context.sheetsRegistry.toString();
90
if (process.env.NODE_ENV === 'production') {
91
css = cleanCSS.minify(css).styles;
92
}
93
94
return {
95
...page,
97
styles: (
98
<style
99
id="jss-server-side"
100
// eslint-disable-next-line react/no-danger
102
/>
103
),
104
};
105
};
106
107
export default MyDocument;