#AMP by Example
AMP by Example is a collection of Accelerated Mobile Pages.
- Create a fork of the repository.
- Install NodeJS.
- Setup the repository.
$ git clone https://github.com/YOUR_GITHUB_NAME/amp-by-example.git
$ cd amp-by-example
$ npm i
$ sudo npm i -g gulp
Create a new example with gulp create:
$ gulp create --name amp-img
$ vim src/amp-img.html
For more descriptive example names with whitespaces use quotes:
$ gulp create --name 'Hello World'
$ vim src/Hello_World.html
Run build to generate all examples:
$ gulp build
While working on an example you can start a local webserver with auto-reload by simply running
gulp:
$ gulp
$ open http://localhost:8000/index.html
Some components, like the amp-user-notification with server endpoint require an additional server endpoint.
Use HTML comments (<!-- ... -->) to document your sample code:
<!-- Look! Images in AMP. -->
<amp-img src="img/image1.jpg" width=200 height=100 layout=responsive></amp-img>This works for elements in the header as well:
<head>
<!-- Import the amp-youtube component -->
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
...
</head>Every HTML comment creates a separate example section spanning the following HTML element.
<!-- This comment spans the whole following div including the two images -->
<div>
<amp-img src="img/image1.jpg" width=200 height=100 layout=responsive></amp-img>
<amp-img src="img/image2.jpg" width=200 height=100 layout=responsive></amp-img>
</div>Nested comments are not supported:
<!-- A comment -->
<div>
<!-- This does not work -->
<amp-img src="img/image1.jpg" width=200 height=100 layout=responsive></amp-img>
</div>You can use markdown to format your documentation:
<!--
A simple [responsive](https://www.ampproject.org/docs/guides/responsive/control_layout.html)
image - *width* and *height* are used to determine the aspect ratio.
-->
<amp-img src="img/image1.jpg" width=200 height=100 layout=responsive></amp-img>Please see the CONTRIBUTING file for information on contributing to amp-by-example.
AMP by Example is made by the AMP Project, and is licensed under the Apache License, Version 2.0.