1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
next.js/examples/with-amp/pages/_document.js
Dan Zajdband 3ad3a6c1e7 Added Google AMP example (#793)
* 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
2017-01-24 05:20:56 -08:00

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>
)
}
}