Permalink
material-ui/pages/_document.js
Newer
100644
123 lines (114 sloc)
3.99 KB
1
import React from 'react';
2
import Document, { Head, Main, NextScript } from 'next/document';
3
import getPageContext from 'docs/src/modules/styles/getPageContext';
6
// You can find a benchmark of the available CSS minifiers under
7
// https://github.com/GoalSmashers/css-minification-benchmark
8
// We have found that clean-css is faster than cssnano but the output is larger.
9
// Waiting for https://github.com/cssinjs/jss/issues/279
10
// 4% slower but 12% smaller output than doing it in a single step.
13
let prefixer;
14
let cleanCSS;
15
if (process.env.NODE_ENV === 'production') {
16
const postcss = require('postcss');
17
const autoprefixer = require('autoprefixer');
18
const CleanCSS = require('clean-css');
19
20
prefixer = postcss([autoprefixer]);
21
cleanCSS = new CleanCSS();
22
}
28
return (
29
<html lang="en" dir="ltr">
30
<Head>
31
{/* Use minimum-scale=1 to enable GPU rasterization */}
32
<meta
33
name="viewport"
34
content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
35
/>
36
{/*
37
manifest.json provides metadata used when your web app is added to the
38
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
39
*/}
40
<link rel="manifest" href="/static/manifest.json" />
41
{/* PWA primary color */}
42
<meta name="theme-color" content={pageContext.theme.palette.primary.main} />
43
<link rel="shortcut icon" href="/favicon.ico" />
45
<link
46
rel="stylesheet"
47
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"
48
/>
49
{/*
50
Preconnect allows the browser to setup early connections before an HTTP request
51
is actually sent to the server.
52
This includes DNS lookups, TLS negotiations, TCP handshakes.
53
*/}
54
<link href="https://fonts.gstatic.com" rel="preconnect" crossOrigin="anonymous" />
55
<style id="insertion-point-jss" />
59
{/* Global Site Tag (gtag.js) - Google Analytics */}
60
<script async src="https://www.google-analytics.com/analytics.js" />
61
<script
62
// eslint-disable-next-line react/no-danger
63
dangerouslySetInnerHTML={{
64
__html: `
65
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
66
ga('create', '${config.google.id}', 'material-ui.com');
71
<script async src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js" />
78
MyDocument.getInitialProps = async ctx => {
79
// Resolution order
80
//
81
// On the server:
82
// 1. page.getInitialProps
83
// 2. document.getInitialProps
84
// 3. page.render
85
// 4. document.render
86
//
87
// On the server with error:
88
// 2. document.getInitialProps
89
// 3. page.render
90
// 4. document.render
91
//
92
// On the client
93
// 1. page.getInitialProps
94
// 3. page.render
95
96
// Get the context of the page to collected side effects.
97
const pageContext = getPageContext();
98
const page = ctx.renderPage(Component => props => (
103
if (process.env.NODE_ENV === 'production') {
104
const result1 = await prefixer.process(css, { from: undefined });
112
canonical: `https://material-ui.com${ctx.req.url.replace(/\/$/, '')}/`,
113
styles: (
114
<style
115
id="jss-server-side"
116
// eslint-disable-next-line react/no-danger
117
dangerouslySetInnerHTML={{ __html: css }}
118
/>
119
),
120
};
121
};
122
123
export default MyDocument;