Permalink
Aug 18, 2017
Newer
100644
92 lines (87 sloc)
2.57 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';
6
7
class MyDocument extends Document {
8
render() {
9
const context = getContext();
10
return (
11
<html lang="en" dir="ltr">
12
<Head>
13
<title>Material-UI</title>
14
<meta charSet="utf-8" />
15
{/* Use minimum-scale=1 to enable GPU rasterization */}
16
<meta
17
name="viewport"
18
content={
19
'user-scalable=0, initial-scale=1, ' +
20
'minimum-scale=1, width=device-width, height=device-height'
21
}
22
/>
23
{/*
24
manifest.json provides metadata used when your web app is added to the
25
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
26
*/}
27
<link rel="manifest" href="/static/manifest.json" />
28
{/* PWA primary color */}
29
<meta name="theme-color" content={context.theme.palette.primary[500]} />
30
<link
31
rel="stylesheet"
32
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"
33
/>
34
<link
35
rel="stylesheet"
36
href="https://fonts.googleapis.com/icon?family=Material+Icons"
37
async
38
/>
39
<link
40
id="docsearch-styles-sheet"
41
rel="stylesheet"
42
href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css"
43
async
44
defer
45
/>
46
</Head>
47
<body>
48
<Main />
49
<NextScript />
50
<script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js" async defer />
51
</body>
52
</html>
53
);
54
}
55
}
56
57
MyDocument.getInitialProps = ctx => {
58
// Resolution order
59
//
60
// On the server:
61
// 1. page.getInitialProps
62
// 2. document.getInitialProps
63
// 3. page.render
64
// 4. document.render
65
//
66
// On the server with error:
67
// 2. document.getInitialProps
68
// 3. page.render
69
// 4. document.render
70
//
71
// On the client
72
// 1. page.getInitialProps
73
// 3. page.render
74
75
// Reset the context for handling a new request.
76
setContext();
77
const page = ctx.renderPage();
78
// Get the context with the collected side effects.
79
const context = getContext();
80
return {
81
...page,
82
styles: (
83
<style
84
id="jss-server-side"
85
// eslint-disable-next-line react/no-danger
86
dangerouslySetInnerHTML={{ __html: context.sheetsRegistry.toString() }}
87
/>
88
),
89
};
90
};
91
92
export default MyDocument;