Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Google AMP example #793

Merged
merged 4 commits into from
Jan 24, 2017
Merged

Added Google AMP example #793

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2eba114
Added Google AMP example
impronunciable Jan 16, 2017
0ec22d3
Added styles and a second page
impronunciable Jan 16, 2017
1d876c4
Using regular anchor since there is no client-side routing
impronunciable Jan 24, 2017
5edc745
Added comment on react config for amp
impronunciable Jan 24, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -406,6 +406,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. But we still make it possible to override that:
Expand Down
28 changes: 28 additions & 0 deletions examples/with-amp/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@

# Google AMP

## How to use

Download the example [or clone the repo](https://github.com/zeit/next.js.git):
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(.git isn't needed)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this was because of git clone https://github.com/zeit/next.js.git

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

git clone https://github.com/zeit/next.js also works


```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.
5 changes: 5 additions & 0 deletions examples/with-amp/components/Byline.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
export default ({ author }) => (
<div className='byline'>
By {author}
</div>
)
14 changes: 14 additions & 0 deletions examples/with-amp/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
}
32 changes: 32 additions & 0 deletions examples/with-amp/pages/_document.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import Document, { Head } from 'next/document'
import { DOMProperty } from 'react-dom/../lib/ReactInjection'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you, please, shed some light on what this hack is about?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, there is an issue with the path resolution, I had to do a hack as you guessed :P more than happy to change it for a more elegant solution

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@impronunciable would like to know about more info.
What was the problem?


// 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({
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just removed this and it didn't trigger any errors for me.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It doesn't trigger errors but it's not a valid AMP document anymore. Try going to http://localhost:3000/#development=1 and check the console

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay. I'll test.
BTW: What does this line do?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

By default react limit the set of valid DOM elements and attributes facebook/react#140 this config whitelist amp elements/attributes

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay. Then that's totally fine.
Shall we add a few lines of comments?
After that I think we could take this.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good idea, done

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 }} />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe html includes data-reactid things ? Ideally, we'd like to render the html by ReactDOMServer.renderToStaticMarkup.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@nkzawa The idea is to override getInitialProps on the custom document and get that html?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yep, though we don't support it for now 😂

</body>
</html>
)
}
}
19 changes: 19 additions & 0 deletions examples/with-amp/pages/dog.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

19 changes: 19 additions & 0 deletions examples/with-amp/pages/index.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Binary file added examples/with-amp/static/cat.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added examples/with-amp/static/dog.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.