TopGit tracks ampproject/amp-by-example on GitHub. The project has 751 stars. DEPRECATED: AMP by Example has been merged into amp.dev
Snapshot summary built from the project's own GitHub metadata — there's no written TopGit review yet. The page will update automatically when a full review is published.
WHY NO REVIEW YET
TopGit writes full reviews for the most-starred, most-requested repositories. This page is a snapshot until then — see the READ ME tab for the original README in full.
Every HTML comment creates a separate example section spanning the following HTML element.
<!-- This comment spans the whole following section including the two images -->
<section>
<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>
</section>
Nesting comments are not supported:
<!-- A comment -->
<div>
<!-- This does not work because the parent div has already a comment -->
<amp-img src="img/image1.jpg" width="200" height="100" layout="responsive"></amp-img>
</div>
<div>
<!-- Commenting inside nested tags works though -->
<amp-img src="img/image1.jpg" width="200" height="100" layout="responsive"></amp-img>
</div>
If your comment spans multiple elements, wrap these in an single div without any attributes. The enclosing div tag will be hidden in source code listings:
<!-- The enclosing `div` will be hidden in source code listings. -->
<div>
<button on="tap:my-lightbox" role="button" tabindex="0">Open lightbox</button>
<amp-lightbox id="my-lightbox" layout="nodisplay">
<h1>Hello World!</h1>
</amp-lightbox>
</div>
Sample Styling
Sometimes it's good to add a little bit more styling to a sample (e.g. to separate a button from an input field). To make sure that all samples have a consistent styling, please use the following CSS variables to style specific elements in your sample:
Only add the ones that you need to the sample. These CSS variable declarations will be added automatically to your sample, if you use gulp create ... to create the sample.
Colors
Spaces
Formatting
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>
[tip type="important"]
Warning! This might go wrong.
[/tip]
Hints
If you'd like to add additional information about a single element inside a section, use the <!--~ hint syntax ~-->:
<!-- A comment about the form. -->
<form method="post"
action-xhr="https://example.com/subscribe"
target="_top">
<fieldset>
<input type="text" name="username">
<!--~ Addition explanation about the hidden field. ~-->
<input type="hidden" name="id" value="abc">
</fieldset>
</form>
This will make the <input> element clickable, with the additional explanation appearing on click.
Drafts
You can mark samples as drafts if they are still work-in-progress. This means the samples won't show up in the start page.
<!---
draft: true
--->
Experimental Features
If your sample is using one or more experimental features, you can add a metadata section (<!--- ... --->) with the variable experiments to specify which experiments to enable. This will skip its validation and add an experimental note with instructions to your sample:
Visually rich examples can provide a preview mode like this. Enable via metadata in the sample:
<!---
preview: default
--->
There is a special preview mode for AMP Ad samples:
<!---
preview: a4a
--->
Single Column Layout
If your sample looks better with a single column layout, you can disable the code and preview columns adding the following flags to your sample file:
<!---
hideCode: true
hidePreview: true
--->
Disabling the Playground
If it doesn't make sense for your sample to provide a playground link, you can disable it:
<!---
disablePlayground: true
--->
Running the backend server
If you need to run or write a sample that depends on the backend server, you can run a local version.
Install the Google App Engine SDK for Go.
Run the backend server in watch mode so it will recompile on change.
$ gulp backend:watch
If you get an error message can't find import: "golang.org/x/net/context", you have to manually install and configure the GO appengine environment:
# install the google.goland.org/appengine package
$ go get google.golang.org/appengine
# explicitly set the GOROOT and APPENGINE_DEV_APPSERVER env vars
$ export GOROOT=$HOME/local/google-cloud-sdk/platform/google_appengine/goroot
$ export APPENGINE_DEV_APPSERVER=$(which dev_appserver.py)
If everything went well, the full site should now be running on http://localhost:8080/
Adding backend functionality
Sample specific backend endpoints should be defined in their own file, e.g. for a sample amp-my-component.html the backend should be backends/amp-my-component.go.
How to style examples
You can’t reference external stylesheets when creating samples. AMP by Example provides a default styling for common elements (p, h1, h2, h3, a, ...) which you should use. Sample specific styles must live in the head of the document using the tag <style amp-custom>. Try to keep the additional CSS for samples to a minimum and use the default styles as often as possible. If you compile a sample via Gulp and run it, the default styling will be applied.
Please note: if you copy code from a sample's code section, you will not get the style that you can see in the preview section.
Contributing
Please see the CONTRIBUTING file for information on contributing to amp-by-example.
License
AMP by Example is made by the AMP Project, and is licensed under the Apache License, Version 2.0.
How active is development on ampproject/amp-by-example?
The most recent commit recorded on ampproject/amp-by-example was 6.9 years ago, based on the GitHub push timestamp. The repository has 485 forks — one of the better signals of community interest.
How many stars does ampproject/amp-by-example have?
ampproject/amp-by-example has 751 GitHub stars — refresh the page for the live number, or check github.com/ampproject/amp-by-example. TopGit mirrors GitHub's count but does not claim minute-by-minute accuracy.
Is ampproject/amp-by-example open source?
Yes — ampproject/amp-by-example ships under the Apache-2.0 license, which makes its source code freely readable (and, depending on license terms, forkable and reusable). Source: github.com/ampproject/amp-by-example.
What is ampproject/amp-by-example?
ampproject/amp-by-example (ampproject/amp-by-example) is a HTML project on GitHub. From the project's own README: DEPRECATED: AMP by Example has been merged into amp.dev
What language is ampproject/amp-by-example written in?
ampproject/amp-by-example is written primarily in HTML. GitHub's language field is based on the largest share of bytes in the default branch.
What license does ampproject/amp-by-example use?
ampproject/amp-by-example is released under the Apache-2.0 license. Always verify the LICENSE file directly on GitHub for the authoritative terms — license strings can be edited out of sync with a project's actual stance.
Where do I read more about ampproject/amp-by-example?
This TopGit page is a snapshot — the READ ME tab shows the project's own README content (links stripped, images preserved). The GitHub repository at github.com/ampproject/amp-by-example is the definitive source.
Read full README in the tab above.
Still deciding about amp-by-example?
One click hands the question to an AI along with this page — see what it says about amp-by-example.
/amp-by-example
