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
vercel · Jan 24, 2017 · 3ad3a6c · 3ad3a6c
1 parent cbb2d1c
commit 3ad3a6c
Show file tree

Hide file tree

Showing 9 changed files with 118 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -408,6 +408,7 @@ Supported options:
 <p><details>
   <summary><b>Examples</b></summary>
   <ul><li><a href="./examples/with-styled-components">Styled components custom document</a></li></ul>
+  <ul><li><a href="./examples/with-amp">Google AMP</a></li></ul>
 </details></p>
 
 Pages in `Next.js` skip the definition of the surrounding document's markup. For example, you never include `<html>`, `<body>`, etc. To override that default behavior, you must create a file at `./pages/_document.js`, where you can extend the `Document` class:

diff --git a/examples/with-amp/README.md b/examples/with-amp/README.md
@@ -0,0 +1,28 @@
+
+# Google AMP
+
+## How to use
+
+Download the example [or clone the repo](https://github.com/zeit/next.js.git):
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-amp
+cd with-amp
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+```
+
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
+
+```bash
+now
+```
+
+## The idea behind the example
+
+Next.js allows the construction of custom Documents. This feature enable the usage of custom attributes and elements. In this case, AMP tags and attributes.
diff --git a/examples/with-amp/components/Byline.js b/examples/with-amp/components/Byline.js
@@ -0,0 +1,5 @@
+export default ({ author }) => (
+  <div className='byline'>
+    By {author}
+  </div>
+)
diff --git a/examples/with-amp/package.json b/examples/with-amp/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "amp",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "^2.0.0-beta"
+  },
+  "author": "",
+  "license": "ISC"
+}
diff --git a/examples/with-amp/pages/_document.js b/examples/with-amp/pages/_document.js
@@ -0,0 +1,32 @@
+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>
+    )
+  }
+}
diff --git a/examples/with-amp/pages/dog.js b/examples/with-amp/pages/dog.js
diff --git a/examples/with-amp/pages/index.js b/examples/with-amp/pages/index.js
diff --git a/examples/with-amp/static/cat.jpg b/examples/with-amp/static/cat.jpg
diff --git a/examples/with-amp/static/dog.jpg b/examples/with-amp/static/dog.jpg