Permalink
Newer
100644
104 lines (96 sloc)
3.07 KB
1
// @flow
2
3
import React from 'react';
4
import Document, { Head, Main, NextScript } from 'next/document';
5
import { getContext, setContext } from 'docs/src/modules/styles/context';
9
10
class MyDocument extends Document {
11
render() {
12
const context = getContext();
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={context.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."
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
81
// Reset the context for handling a new request.
82
setContext();
83
const page = ctx.renderPage();
84
// Get the context with the collected side effects.
85
const context = getContext();
86
87
let css = context.sheetsRegistry.toString();
88
if (process.env.NODE_ENV === 'production') {
89
css = cleanCSS.minify(css).styles;
90
}
91
92
return {
93
...page,
94
styles: (
95
<style
96
id="jss-server-side"
97
// eslint-disable-next-line react/no-danger