|
1 | | -import Document, { Head, Main, NextScript } from 'next/document'; |
| 1 | +import Document, { Html, Head, Main, NextScript } from 'next/document'; |
2 | 2 | import { ServerStyleSheet } from 'styled-components'; |
3 | | -import { background } from '../utils/colors'; |
4 | | - |
5 | | -const resetStyles = ` |
6 | | -*,::after,::before{background-repeat:no-repeat;box-sizing:inherit}::after,::before{text-decoration:inherit;vertical-align:inherit}html{box-sizing:border-box;cursor:default;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,footer,header,nav,section{display:block}body{margin:0}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}nav ol,nav ul{list-style:none}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg{fill:currentColor}svg:not(:root){overflow:hidden}table{border-collapse:collapse}button,input,optgroup,select,textarea{margin:0}button,input,select,textarea{background-color:transparent;color:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto;resize:vertical}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation;touch-action:manipulation}[hidden]{display:none}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-hidden=false][hidden]:not(:focus){clip:rect(0,0,0,0);display:inherit;position:absolute}[aria-disabled]{cursor:default} |
7 | | -`; |
8 | | - |
9 | | -const mainStyles = ` |
10 | | - @font-face { |
11 | | - font-family: 'Source Code Pro'; |
12 | | - font-style: normal; |
13 | | - font-weight: 400; |
14 | | - src: local('Source Code Pro'), local('SourceCodePro-Regular'), url(https://fonts.gstatic.com/s/sourcecodepro/v6/mrl8jkM18OlOQN8JLgasD5bPFduIYtoLzwST68uhz_Y.woff2) format('woff2'); |
15 | | - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; |
16 | | - } |
17 | | -
|
18 | | - @font-face { |
19 | | - font-family: 'Montserrat'; |
20 | | - font-style: normal; |
21 | | - font-weight: 400; |
22 | | - src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v10/zhcz-_WihjSQC0oHJ9TCYAzyDMXhdD8sAj6OAJTFsBI.woff2) format('woff2'); |
23 | | - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; |
24 | | - } |
25 | | -
|
26 | | - @font-face { |
27 | | - font-family: 'Montserrat'; |
28 | | - font-style: normal; |
29 | | - font-weight: 500; |
30 | | - src: local('Montserrat Medium'), local('Montserrat-Medium'), url(https://fonts.gstatic.com/s/montserrat/v10/BYPM-GE291ZjIXBWrtCweteM9fzAXBk846EtUMhet0E.woff2) format('woff2'); |
31 | | - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; |
32 | | - } |
33 | | -
|
34 | | - html, body { |
35 | | - font-size: 16px; |
36 | | - line-height: 1.3; |
37 | | - font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; |
38 | | - font-weight: normal; |
39 | | - font-style: normal; |
40 | | - padding: 0; |
41 | | - margin: 0; |
42 | | - background: ${background}; |
43 | | - color: #f8f8f2; |
44 | | - } |
45 | | -
|
46 | | - .root { |
47 | | - position: relative; |
48 | | - overflow: auto; |
49 | | - min-height: 100vh; |
50 | | - z-index: 0; |
51 | | - } |
52 | | -
|
53 | | - @media (max-width: 1200px) { |
54 | | - html, body { |
55 | | - font-size: 14px; |
56 | | - } |
57 | | - } |
58 | | -`; |
59 | | - |
60 | | -const globalStyles = resetStyles + '\n' + mainStyles + '\n'; |
61 | 3 |
|
62 | 4 | export default class MyDocument extends Document { |
63 | | - static getInitialProps({ renderPage }) { |
| 5 | + static async getInitialProps(ctx) { |
64 | 6 | const sheet = new ServerStyleSheet(); |
65 | | - |
66 | | - const page = renderPage(Component => props => |
67 | | - sheet.collectStyles(<Component {...props} />) |
68 | | - ); |
69 | | - |
70 | | - const styleElements = sheet.getStyleElement(); |
71 | | - return { ...page, styleElements }; |
| 7 | + const originalRenderPage = ctx.renderPage; |
| 8 | + |
| 9 | + try { |
| 10 | + ctx.renderPage = () => |
| 11 | + originalRenderPage({ |
| 12 | + enhanceApp: App => props => sheet.collectStyles(<App {...props} />) |
| 13 | + }); |
| 14 | + |
| 15 | + const initialProps = await Document.getInitialProps(ctx); |
| 16 | + return { |
| 17 | + ...initialProps, |
| 18 | + styles: ( |
| 19 | + <> |
| 20 | + {initialProps.styles} |
| 21 | + {sheet.getStyleElement()} |
| 22 | + </> |
| 23 | + ) |
| 24 | + }; |
| 25 | + } finally { |
| 26 | + sheet.seal(); |
| 27 | + } |
72 | 28 | } |
73 | 29 |
|
74 | 30 | render() { |
75 | | - const { styleElements } = this.props; |
76 | | - |
77 | 31 | return ( |
78 | | - <html> |
79 | | - <Head> |
80 | | - <meta name="viewport" content="width=device-width, initial-scale=1" /> |
81 | | - |
82 | | - <title>React Live Demo</title> |
83 | | - |
84 | | - <meta httpEquiv="X-UA-Compatible" content="IE=edge,chrome=1" /> |
85 | | - |
86 | | - <style dangerouslySetInnerHTML={{ __html: globalStyles }} /> |
87 | | - {styleElements} |
88 | | - </Head> |
89 | | - |
| 32 | + <Html> |
| 33 | + <Head /> |
90 | 34 | <body> |
91 | 35 | <div className="root"> |
92 | 36 | <Main /> |
93 | 37 | </div> |
94 | 38 |
|
95 | 39 | <NextScript /> |
96 | 40 | </body> |
97 | | - </html> |
| 41 | + </Html> |
98 | 42 | ); |
99 | 43 | } |
100 | 44 | } |
0 commit comments