ampproject/amp-by-example

DEPRECATED: AMP by Example has been merged into amp.dev

amp-by-example's Issues

Split examples into sections

To give a better overview over the samples, we could split the samples into sections in the overview page, e.g.:

1. Introduction
   • Hello World
   • ...
2. Components
   • amp-img
   • amp-carousel
   • ....
3. Getting more out of AMP
   • Video Carousel
   • How to cope with the fixed carousel height?
   • User notifications with server end-point
   • ...

Implementation wise this is simple by moving the samples into respective directories.

//cc @adewale @juliantoledo @jkingyens @ymotongpoo @kul3r4 what do you think?

Add drawer menu to example pages

We could implement a hamburger style drawer menu showing all examples and sections.

Create an example that shows all AMP video types in both an amp-carousel and an amp-according

Use the list of AMP video types in #41 to build one example that shows both the carousel and the accordion on the same page. This will allow people to easily compare and contrast the UX of both components.

Create a sample showing an article with Disqus and Discourse comments in amp-iframe

This sample would show people how to embed interactive third-party components in an amp-iframe.

create sample for amp-vimeo

We should then also remove the vimeo sample from amp-iframe.

amp-accordion example does'nt work!

Powered by AMP ⚡ HTML – Version 1456954860788
AMP validation had errors:
https://ampbyexample.com/components/amp-accordion/:5:2 The attribute 'custom-element' in tag 'amp-access extension .js script' is set to the invalid value 'amp-accordion'. (see https://www.ampproject.org/docs/reference/extended/amp-access.html)
https://ampbyexample.com/components/amp-accordion/:1570:12 The tag 'amp-accordion' is disallowed.
https://ampbyexample.com/components/amp-accordion/:1571:4 The attribute 'expanded' may not appear in tag 'section'.
https://ampbyexample.com/components/amp-accordion/:1653:2 The tag 'amp-accordion' is disallowed.

Create amp-install-serviceworker example for AMP->PWA escalation

DocumentParser: fix empty row after body

Example: /advanced/how_to_create_interactive_amp_pages%253f/

Create an example of a page that has a large number of amp-instagram components

The idea would be to show how to create an AMP like this: http://www.buzzfeed.com/amphtml/alexfinnis/places-in-london-every-instagram-lover-needs-to-visit that has a large (18!) number of embeds. It gives us a mechanism for tracking the impact of optimisations like: ampproject/amphtml#2434

/cc @jmadler

Migrate to new boilerplate

Move boilerplate into a template.

Example for an interactive article with charts

Add amp-access to amp-by-example site

Can amp-access examples be added, or at least linked, from the amp-by-example website?

Support code sections in docs

Using code sections in docs with triple ''' does not keep the indentation.
Example is: amp-list where the json inside the docs is not correctly indented.

Embedding Gist code snippets

Example with AMP

create sample for amp-soundcloud

create sample for amp-vine

create sample for amp-list

Create an example that shows how to use amp-carousel to display multiple amp-instagram elements

The idea is that this example would show an alternative UX for embed-heavy pages.

Minimise CSS

This involves migrating to Handlebars.

Add rich snippets sample

Mark experimental samples

[] append [experimental] to example name in overview page
[] inject src/templates/experiment.html into example template if experimental flag is set (see #32)

Validation fails with timeout

[15:24:52] Validating example components/amp-ad/index.html: PASS
undefined:1
Fatal Error: Timeout: did not get to load all resources on this page
^

SyntaxError: Unexpected token F
    at Object.parse (native)
    at ChildProcess.<anonymous> (/Users/sbenz/Documents/projects/amp-by-example-dev/tasks/validate-example.js:63:37)
    at emitTwo (events.js:100:13)
    at ChildProcess.emit (events.js:185:7)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:200:12)

@jkingyens have you seen this before?

Shorten text in code sections

Long texts in the sample files is often required (e.g. amp-carousel), but bloats the code sections. Let's automatically shorten text between html tags that is longer than 50 chars, e.g.

<p>
  This is a very very very very very very very very very veryvery very very long text
</p>

becomes:

<p>
  This is a very very very very very very very ...
</p>

Update amp-social-share sample to show all supported types

Example showing how AMP handles pages with large numbers of amp-ads

Provide an example that shows an AMP with a large (5 or more) number of ads.

This will correct the confusion shown in threads like this: http://stackoverflow.com/questions/36138565/are-multiple-amp-ad-nodes-allowed/36179165

add amp-anim example with webm/mp4

Add amp-analytics sample

amp-carousel-button

Hi,
amp-carousel-button not showing on mobile for the amp-carousel

validate-example: mark ignored samples

Can we include ignored samples (skipValidation / experimental) in the validation report? e.g.:

Validating components/amp-list/index.html: IGNORED (in yellow)

Create an example of a page that has a large number of Twitter components

Create an example showing that large numbers of Twitter embeds don't cause a page to jump around and the page still loads all of the embeds.

Here is a working example: http://jsbin.com/zokuno/edit?html,console,output

A sample like this shows how AMPs don't re-layout and that AMPs can render large numbers of Twitter embeds. This is valuable because this is an increasingly popular style of journalism.

AMP Cache example

Create an example with AMP cache

Add more image sizes to amp-img srcset example

amp-carousel autoplay sample

[P1] Update access and notification examples to always include amp-analytics script

Here are some of the affected examples:

• https://ampbyexample.com/components/amp-access/
• https://ampbyexample.com/components/amp-user-notification/
• https://ampbyexample.com/advanced/amp-user-notification_with_server_endpoint/

See:

• ampproject/amphtml#2701
• ampproject/amphtml#2726

Video source is broken for amp-video sample

It is any way to start with AJAX or custome event ??

Hello,

I am starting with AMP for my site Need to know that we can not use AJAX ??

AND one more issue which i am getting on development

If i am adding script like this
<script async src=https://cdn.ampproject.org/v0.js></script> -IT's fine
But If i download that script and try to add like,<script async src=folderPAth/v0.js></script>
AMP Validation ERROR Why ??

Resource structure shouldn't be accessible

This link: https://ampbyexample.com/advanced/ should give an access forbidden or redirect.

Add description to sections

Create a file section.json in each section dir which includes the description. Generate it automatically when running gulp create with a new section.

{
  "description": "This is my section"
}

Form Input Sample

Add link rel=canonical tags to examples

Currently none of the examples fully validate due to missing <link rel=canonical> tags.
https://www.ampproject.org/docs/reference/spec.html#canon

Make anchor links order independent

Currently anchor links depend on the order (example1, example2,...). These will break if a new section is added in between. We should use a slugged version of the content instead.

Add metadata to examples

Make it possible to add metadata to examples via special comment tag, e.g.

<!---{ 
  experiment: true,
  component: amp-accordion
}--->

Metadata can contain arbitrary JSON. The DocumentParser should extract the metadata and add it to a new field in Document.

This is the foundation for:

• #33 marking experimental samples
• #1 don't validate experimental samples

//cc @jkingyens @juliantoledo does anyone of you want to tackle this?

Video used in amp-youtube example doesn't load on iOS Safari

create sample for amp-pinterest

make css and boilerplate sections expandable

These sections take up a lot of space, we should make them expandable/collapsible using amp-accordion.

SAMPLES_DIR is missing at gulpfile.js

[21:40:56] 'compile:sitemap' errored after 186 μs
[21:40:56] ReferenceError: SAMPLES_DIR is not defined
at Gulp. (/Users/jtoledo/Documents/workspace/amp-by-example/gulpfile.js:167:19)
at module.exports (/Users/jtoledo/Documents/workspace/amp-by-example/node_modules/orchestrator/lib/runTask.js:34:7)
at Gulp.Orchestrator._runTask (/Users/jtoledo/Documents/workspace/amp-by-example/node_modules/orchestrator/index.js:273:3)
at Gulp.Orchestrator._runStep (/Users/jtoledo/Documents/workspace/amp-by-example/node_modules/orchestrator/index.js:214:10)
at Gulp.Orchestrator.start (/Users/jtoledo/Documents/workspace/amp-by-example/node_modules/orchestrator/index.js:134:8)
at /usr/local/lib/node_modules/gulp/bin/gulp.js:129:20
at nextTickCallbackWith0Args (node.js:452:9)
at process._tickCallback (node.js:381:13)
at Function.Module.runMain (module.js:449:11)
at startup (node.js:139:18)

Generate link to next example into each example file

Create an example that shows all the video types in AMP

The list includes (at least):

• amp-video
• amp-instagram pointing at a video
• amp-vine
• amp-youtube
• amp-vimeo
• amp-dailymotion
• amp-twitter pointing at a Twitter-native video
• amp-facebook pointing at a Facebook-native video
• amp-brightcove
• a non-natively supported video platform via amp-iframe

Create an example that shows an amp-img which uses srcset to demonstrate responsive images