ampproject / amp-by-example Goto Github PK

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

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

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.

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.

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

Move boilerplate into a template.

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.

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

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

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

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

Example: /advanced/how_to_create_interactive_amp_pages%253f/

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?

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>

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

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

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

This involves migrating to Handlebars.

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?

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

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

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 ??

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.

Create an example with AMP cache

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

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

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"
}

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

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

[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)

[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?

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.