2016-12-16 18:42:40 +00:00
|
|
|
import React, { Component, PropTypes } from 'react'
|
|
|
|
|
import htmlescape from 'htmlescape'
|
|
|
|
|
import { renderStatic } from 'glamor/server'
|
2016-12-19 18:42:19 +00:00
|
|
|
import flush from 'styled-jsx/server'
|
2016-12-16 18:42:40 +00:00
|
|
|
|
|
|
|
|
export default class Document extends Component {
|
|
|
|
|
static getInitialProps ({ renderPage }) {
|
|
|
|
|
let head
|
|
|
|
|
const { html, css, ids } = renderStatic(() => {
|
|
|
|
|
const page = renderPage()
|
|
|
|
|
head = page.head
|
|
|
|
|
return page.html
|
|
|
|
|
})
|
2016-12-19 18:42:19 +00:00
|
|
|
const styles = flush()
|
|
|
|
|
const nextCSS = { css, ids, styles }
|
2016-12-16 18:42:40 +00:00
|
|
|
return { html, head, nextCSS }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
static childContextTypes = {
|
|
|
|
|
_documentProps: PropTypes.any
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
constructor (props) {
|
|
|
|
|
super(props)
|
|
|
|
|
const { __NEXT_DATA__, nextCSS } = props
|
|
|
|
|
if (nextCSS) __NEXT_DATA__.ids = nextCSS.ids
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
getChildContext () {
|
|
|
|
|
return { _documentProps: this.props }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
render () {
|
|
|
|
|
return <html>
|
|
|
|
|
<Head />
|
|
|
|
|
<body>
|
|
|
|
|
<Main />
|
|
|
|
|
<NextScript />
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export class Head extends Component {
|
|
|
|
|
static contextTypes = {
|
|
|
|
|
_documentProps: PropTypes.any
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
render () {
|
|
|
|
|
const { head, nextCSS } = this.context._documentProps
|
|
|
|
|
return <head>
|
|
|
|
|
{(head || []).map((h, i) => React.cloneElement(h, { key: i }))}
|
2016-12-19 18:42:19 +00:00
|
|
|
{nextCSS && nextCSS.css ? <style dangerouslySetInnerHTML={{ __html: nextCSS.css }} /> : null}
|
|
|
|
|
{nextCSS && nextCSS.styles ? nextCSS.styles : null}
|
2016-12-16 18:42:40 +00:00
|
|
|
{this.props.children}
|
|
|
|
|
</head>
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export class Main extends Component {
|
|
|
|
|
static contextTypes = {
|
|
|
|
|
_documentProps: PropTypes.any
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
render () {
|
|
|
|
|
const { html, __NEXT_DATA__, staticMarkup } = this.context._documentProps
|
|
|
|
|
return <div>
|
|
|
|
|
<div id='__next' dangerouslySetInnerHTML={{ __html: html }} />
|
|
|
|
|
{staticMarkup ? null : <script dangerouslySetInnerHTML={{
|
|
|
|
|
__html: `__NEXT_DATA__ = ${htmlescape(__NEXT_DATA__)}; module={};`
|
|
|
|
|
}} />}
|
|
|
|
|
</div>
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export class NextScript extends Component {
|
|
|
|
|
static contextTypes = {
|
|
|
|
|
_documentProps: PropTypes.any
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
render () {
|
2016-12-17 08:49:10 +00:00
|
|
|
const { staticMarkup } = this.context._documentProps
|
|
|
|
|
|
2016-12-16 18:42:40 +00:00
|
|
|
return <div>
|
2016-12-17 08:49:10 +00:00
|
|
|
{ staticMarkup ? null : <script type='text/javascript' src='/_next/commons.js' /> }
|
|
|
|
|
{ staticMarkup ? null : <script type='text/javascript' src='/_next/main.js' /> }
|
2016-12-16 18:42:40 +00:00
|
|
|
</div>
|
|
|
|
|
}
|
|
|
|
|
}
|
