mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
3ad3a6c1e7
* Added Google AMP example * Added styles and a second page * Using regular anchor since there is no client-side routing * Added comment on react config for amp
33 lines
2.1 KiB
JavaScript
33 lines
2.1 KiB
JavaScript
import Document, { Head } from 'next/document'
|
|
import { DOMProperty } from 'react-dom/../lib/ReactInjection'
|
|
|
|
// By default React limit the set of valid DOM elements and attributes
|
|
// (https://github.com/facebook/react/issues140) this config whitelist
|
|
// Amp elements/attributes
|
|
DOMProperty.injectDOMPropertyConfig({
|
|
Properties: { amp: DOMProperty.MUST_USE_ATTRIBUTE },
|
|
isCustomAttribute: attributeName => attributeName.startsWith('amp-')
|
|
})
|
|
|
|
export default class MyDocument extends Document {
|
|
render () {
|
|
const { html } = this.props
|
|
return (
|
|
<html amp=''>
|
|
<Head>
|
|
<meta charset='utf-8' />
|
|
<link rel='canonical' href='/' />
|
|
<meta name='viewport' content='width=device-width,minimum-scale=1' />
|
|
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto' />
|
|
<style amp-boilerplate=''>{`body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}`}</style><noscript><style amp-boilerplate=''>{`body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}`}</style></noscript>
|
|
<style amp-custom=''>{`body {font-family: Roboto, sans-serif; padding: 30px; color: #444;} h1 {margin-bottom: 5px;} .byline { color: #aaa; margin-bottom: 25px; } p {font-size: 18px; line-height: 30px; margin-top: 30px;} .caption {color: #ccc; margin-top: 0; font-size: 14px; text-align: center;}`}</style>
|
|
<script async src='https://cdn.ampproject.org/v0.js' />
|
|
</Head>
|
|
<body>
|
|
<div id='__next' dangerouslySetInnerHTML={{ __html: html }} />
|
|
</body>
|
|
</html>
|
|
)
|
|
}
|
|
}
|