import React, { Component, PropTypes } from 'react'
import htmlescape from 'htmlescape'
import { renderStatic } from 'glamor/server'
import flush from 'styled-jsx/server'
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
})
const styles = flush()
const nextCSS = { css, ids, styles }
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
}
}
export class Head extends Component {
static contextTypes = {
_documentProps: PropTypes.any
}
render () {
const { head, nextCSS } = this.context._documentProps
return
{(head || []).map((h, i) => React.cloneElement(h, { key: i }))}
{nextCSS && nextCSS.css ? : null}
{nextCSS && nextCSS.styles ? nextCSS.styles : null}
{this.props.children}
}
}
export class Main extends Component {
static contextTypes = {
_documentProps: PropTypes.any
}
render () {
const { html, __NEXT_DATA__, staticMarkup } = this.context._documentProps
return
}
}
export class NextScript extends Component {
static contextTypes = {
_documentProps: PropTypes.any
}
render () {
const { staticMarkup } = this.context._documentProps
return
{ staticMarkup ? null : }
{ staticMarkup ? null : }
}
}