amp-html 0.7.7
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/.github/issue_template.md +16 -0
- data/.github/pull_request_template.md +21 -0
- data/.gitignore +13 -0
- data/.travis.yml +4 -0
- data/CHANGELOG.md +302 -0
- data/CONTRIBUTING.md +1 -0
- data/DEPRECATIONS.md +9 -0
- data/Gemfile +12 -0
- data/Gemfile.lock +162 -0
- data/INSTALL.md +1 -0
- data/LICENSE +21 -0
- data/OWNERS.yaml +1 -0
- data/README.md +192 -0
- data/Rakefile +6 -0
- data/amp-html.gemspec +29 -0
- data/bin/amp-html +4 -0
- data/lib/amp_html.rb +27 -0
- data/lib/amp_html/cli.rb +113 -0
- data/lib/amp_html/components/docs/README.md +101 -0
- data/lib/amp_html/components/docs/ad.md +83 -0
- data/lib/amp_html/components/docs/analytics.md +131 -0
- data/lib/amp_html/components/docs/anim.md +66 -0
- data/lib/amp_html/components/docs/fonts.md +63 -0
- data/lib/amp_html/components/docs/forms.md +79 -0
- data/lib/amp_html/components/docs/iframe.md +62 -0
- data/lib/amp_html/components/docs/javascript.md +71 -0
- data/lib/amp_html/components/docs/lists.md +168 -0
- data/lib/amp_html/components/docs/media.md +52 -0
- data/lib/amp_html/components/docs/mustache.md +46 -0
- data/lib/amp_html/components/docs/notifications.md +0 -0
- data/lib/amp_html/components/docs/schema.md +80 -0
- data/lib/amp_html/components/docs/service_worker.md +60 -0
- data/lib/amp_html/components/docs/social.md +130 -0
- data/lib/amp_html/components/docs/stylesheets.md +50 -0
- data/lib/amp_html/components/help.rb +19 -0
- data/lib/amp_html/components/install.rb +34 -0
- data/lib/amp_html/components/templates/ERROR.md +5 -0
- data/lib/amp_html/components/templates/README.md +12 -0
- data/lib/amp_html/configuration.rb +170 -0
- data/lib/amp_html/configuration/docs/README.md +0 -0
- data/lib/amp_html/configuration/help.rb +11 -0
- data/lib/amp_html/helpers/docs/README.md +98 -0
- data/lib/amp_html/helpers/docs/amp.md +0 -0
- data/lib/amp_html/helpers/docs/amp_ad.md +86 -0
- data/lib/amp_html/helpers/docs/amp_analytics.md +76 -0
- data/lib/amp_html/helpers/docs/amp_anim.md +68 -0
- data/lib/amp_html/helpers/docs/amp_audio.md +54 -0
- data/lib/amp_html/helpers/docs/amp_auto_ads.md +43 -0
- data/lib/amp_html/helpers/docs/amp_close_user_notification_button.md +0 -0
- data/lib/amp_html/helpers/docs/amp_css.md +37 -0
- data/lib/amp_html/helpers/docs/amp_css_link.md +0 -0
- data/lib/amp_html/helpers/docs/amp_custom_ad.md +0 -0
- data/lib/amp_html/helpers/docs/amp_document_link.md +0 -0
- data/lib/amp_html/helpers/docs/amp_embed.md +86 -0
- data/lib/amp_html/helpers/docs/amp_facebook.md +70 -0
- data/lib/amp_html/helpers/docs/amp_fallback.md +47 -0
- data/lib/amp_html/helpers/docs/amp_font.md +0 -0
- data/lib/amp_html/helpers/docs/amp_font_link.md +0 -0
- data/lib/amp_html/helpers/docs/amp_form.md +0 -0
- data/lib/amp_html/helpers/docs/amp_form_response.md +0 -0
- data/lib/amp_html/helpers/docs/amp_gfycat.md +0 -0
- data/lib/amp_html/helpers/docs/amp_global_css.md +0 -0
- data/lib/amp_html/helpers/docs/amp_google_analytics.md +0 -0
- data/lib/amp_html/helpers/docs/amp_google_font.md +0 -0
- data/lib/amp_html/helpers/docs/amp_head.md +0 -0
- data/lib/amp_html/helpers/docs/amp_html_doctype.md +0 -0
- data/lib/amp_html/helpers/docs/amp_iframe.md +0 -0
- data/lib/amp_html/helpers/docs/amp_image.md +0 -0
- data/lib/amp_html/helpers/docs/amp_input.md +0 -0
- data/lib/amp_html/helpers/docs/amp_instagram.md +0 -0
- data/lib/amp_html/helpers/docs/amp_js.md +0 -0
- data/lib/amp_html/helpers/docs/amp_link.md +0 -0
- data/lib/amp_html/helpers/docs/amp_list.md +0 -0
- data/lib/amp_html/helpers/docs/amp_live_list.md +0 -0
- data/lib/amp_html/helpers/docs/amp_live_list_items.md +0 -0
- data/lib/amp_html/helpers/docs/amp_live_list_pagination.md +0 -0
- data/lib/amp_html/helpers/docs/amp_live_list_update.md +0 -0
- data/lib/amp_html/helpers/docs/amp_mustache.md +0 -0
- data/lib/amp_html/helpers/docs/amp_pin_it.md +0 -0
- data/lib/amp_html/helpers/docs/amp_pin_widget.md +0 -0
- data/lib/amp_html/helpers/docs/amp_pinterest_follow.md +0 -0
- data/lib/amp_html/helpers/docs/amp_pixel.md +0 -0
- data/lib/amp_html/helpers/docs/amp_placeholder.md +0 -0
- data/lib/amp_html/helpers/docs/amp_reddit.md +0 -0
- data/lib/amp_html/helpers/docs/amp_resources.md +0 -0
- data/lib/amp_html/helpers/docs/amp_selector.md +0 -0
- data/lib/amp_html/helpers/docs/amp_serviceworker.md +0 -0
- data/lib/amp_html/helpers/docs/amp_social_share.md +0 -0
- data/lib/amp_html/helpers/docs/amp_soundcloud.md +0 -0
- data/lib/amp_html/helpers/docs/amp_twitter.md +0 -0
- data/lib/amp_html/helpers/docs/amp_user_notification.md +0 -0
- data/lib/amp_html/helpers/docs/amp_video.md +0 -0
- data/lib/amp_html/helpers/docs/amp_video_ad.md +0 -0
- data/lib/amp_html/helpers/docs/amp_vine.md +0 -0
- data/lib/amp_html/helpers/docs/amp_youtube.md +0 -0
- data/lib/amp_html/helpers/docs/audio_tag.md +0 -0
- data/lib/amp_html/helpers/docs/canonical_document_link.md +0 -0
- data/lib/amp_html/helpers/docs/form_tag.md +0 -0
- data/lib/amp_html/helpers/docs/image_tag.md +0 -0
- data/lib/amp_html/helpers/docs/input_tag.md +0 -0
- data/lib/amp_html/helpers/docs/javascript_include_tag.md +0 -0
- data/lib/amp_html/helpers/docs/noscript_tag.md +0 -0
- data/lib/amp_html/helpers/docs/schema_tag.md +0 -0
- data/lib/amp_html/helpers/docs/stylesheet_link_tag.md +0 -0
- data/lib/amp_html/helpers/docs/video_tag.md +0 -0
- data/lib/amp_html/helpers/help.rb +23 -0
- data/lib/amp_html/root.rb +7 -0
- data/lib/amp_html/test.rb +169 -0
- data/lib/amp_html/test/help.rb +11 -0
- data/lib/amp_html/test/templates/README.md +43 -0
- data/lib/amp_html/test/templates/css/!important.md +1 -0
- data/lib/amp_html/test/templates/css/-amp-.md +1 -0
- data/lib/amp_html/test/templates/css/-moz-binding.md +1 -0
- data/lib/amp_html/test/templates/css/@import.md +1 -0
- data/lib/amp_html/test/templates/css/behavior.md +1 -0
- data/lib/amp_html/test/templates/css/filter.md +1 -0
- data/lib/amp_html/test/templates/css/i-amp-.md +1 -0
- data/lib/amp_html/test/templates/css/overflow.md +1 -0
- data/lib/amp_html/test/templates/html/applet.md +1 -0
- data/lib/amp_html/test/templates/html/audio.md +1 -0
- data/lib/amp_html/test/templates/html/base.md +1 -0
- data/lib/amp_html/test/templates/html/embed.md +1 -0
- data/lib/amp_html/test/templates/html/frame.md +1 -0
- data/lib/amp_html/test/templates/html/frameset.md +1 -0
- data/lib/amp_html/test/templates/html/http-equiv.md +1 -0
- data/lib/amp_html/test/templates/html/iframe.md +1 -0
- data/lib/amp_html/test/templates/html/img.md +1 -0
- data/lib/amp_html/test/templates/html/javascript_include_tag.md +1 -0
- data/lib/amp_html/test/templates/html/object.md +1 -0
- data/lib/amp_html/test/templates/html/onclick.md +1 -0
- data/lib/amp_html/test/templates/html/onmousehover.md +1 -0
- data/lib/amp_html/test/templates/html/param.md +1 -0
- data/lib/amp_html/test/templates/html/stylesheet_link_tag.md +1 -0
- data/lib/amp_html/test/templates/html/video.md +1 -0
- data/lib/amp_html/test/templates/markup/!doctype.md +1 -0
- data/lib/amp_html/test/templates/markup/amp_document_link.md +1 -0
- data/lib/amp_html/test/templates/markup/amp_head.md +1 -0
- data/lib/amp_html/test/templates/markup/amp_html_doctype.md +1 -0
- data/lib/amp_html/test/templates/markup/canonical_document_link.md +1 -0
- data/lib/amp_html/test/templates/markup/head_body.md +1 -0
- data/lib/amp_html/test/templates/markup/html.md +1 -0
- data/lib/amp_html/test/templates/markup/meta_viewport.md +1 -0
- data/lib/amp_html/validate.rb +46 -0
- data/lib/amp_html/validate/help.rb +11 -0
- data/lib/amp_html/validate/templates/README.md +32 -0
- data/lib/amp_html/version.rb +13 -0
- data/lib/generators/amphtml/assets_generator.rb +31 -0
- data/lib/generators/amphtml/bundle_generator.rb +50 -0
- data/lib/generators/amphtml/components_generator.rb +84 -0
- data/lib/generators/amphtml/helpers_generator.rb +32 -0
- data/lib/generators/amphtml/install_generator.rb +53 -0
- data/lib/generators/amphtml/views_generator.rb +62 -0
- data/lib/generators/templates/assets/README.md +0 -0
- data/lib/generators/templates/assets/stylesheets/application.scss +15 -0
- data/lib/generators/templates/components/README.md +0 -0
- data/lib/generators/templates/components/assets/javascripts/application.js +15 -0
- data/lib/generators/templates/components/helpers/ad_tag_helper.rb +83 -0
- data/lib/generators/templates/components/helpers/analytics_tag_helper.rb +30 -0
- data/lib/generators/templates/components/helpers/anim_tag_helper.rb +42 -0
- data/lib/generators/templates/components/helpers/iframe_tag_helper.rb +27 -0
- data/lib/generators/templates/components/helpers/javascript_tag_helper.rb +12 -0
- data/lib/generators/templates/components/helpers/lists_tag_helper.rb +82 -0
- data/lib/generators/templates/components/helpers/notification_tag_helper.rb +16 -0
- data/lib/generators/templates/components/helpers/serviceworker_tag_helper.rb +15 -0
- data/lib/generators/templates/components/helpers/social_tag_helper.rb +228 -0
- data/lib/generators/templates/components/public/remote.html +28 -0
- data/lib/generators/templates/components/views/_components.html.erb +141 -0
- data/lib/generators/templates/components/views/_google_analytics.html.erb +23 -0
- data/lib/generators/templates/helpers/README.md +1 -0
- data/lib/generators/templates/helpers/amp/fallback_tag_helper.rb +16 -0
- data/lib/generators/templates/helpers/amp/font_tag_helper.rb +37 -0
- data/lib/generators/templates/helpers/amp/link_tag_helper.rb +11 -0
- data/lib/generators/templates/helpers/amp/mustache_tag_helper.rb +13 -0
- data/lib/generators/templates/helpers/amp/noscript_tag_helper.rb +13 -0
- data/lib/generators/templates/helpers/amp/placeholder_tag_helper.rb +16 -0
- data/lib/generators/templates/helpers/amp/schema_tag_helper.rb +16 -0
- data/lib/generators/templates/helpers/amp/stylesheets_tag_helper.rb +21 -0
- data/lib/generators/templates/helpers/amp_tag_helper.rb.erb +65 -0
- data/lib/generators/templates/helpers/asset_tag_helper.rb.erb +119 -0
- data/lib/generators/templates/helpers/form_tag_helper.rb.erb +79 -0
- data/lib/generators/templates/install/README.md +1 -0
- data/lib/generators/templates/install/amphtml.rb.erb +19 -0
- data/lib/generators/templates/install/amphtml.yml.erb +189 -0
- data/lib/generators/templates/views/README.md +1 -0
- data/lib/generators/templates/views/application.html.erb +71 -0
- data/lib/generators/templates/views/application/_head.html.erb +47 -0
- data/lib/generators/templates/views/application/_resources.html.erb +16 -0
- data/lib/generators/templates/views/application/_schema.html.erb +6 -0
- data/lib/generators/templates/views/config/mime_types.rb +8 -0
- metadata +294 -0
File without changes
|
@@ -0,0 +1,86 @@
|
|
1
|
+
|
2
|
+
# [Helpers](https://github.com/slooob/amp-html/tree/master/lib/amp-html/helpers/docs#amp-html-helpers) / `amp_ad`
|
3
|
+
|
4
|
+
|
5
|
+
## Information
|
6
|
+
|
7
|
+
`amp_ad` allows to easily embed ads with AMP, not hurting performance.
|
8
|
+
|
9
|
+
---
|
10
|
+
|
11
|
+
### Quick info
|
12
|
+
|
13
|
+
#### Latest update: 0.5.4 (Pre-release) - 2017-03-19
|
14
|
+
|
15
|
+
[**Changelog for version 0.5.4**](https://github.com/slooob/amp-html/blob/master/CHANGELOG.md#054-pre-release---2017-03-19)
|
16
|
+
|
17
|
+
#### [DeepIntegration](https://github.com/slooob/amp-html/tree/master/lib/amp-html/helpers/docs#deepintegration-helpers): Enabled
|
18
|
+
|
19
|
+
#### [Availability](https://github.com/slooob/amp-html/tree/master/lib/amp-html/helpers/docs#availability-of-helpers): Installable with the [Advertisements Component](https://github.com/slooob/amp-html/tree/master/lib/amp-html/components/docs/ad.md)
|
20
|
+
|
21
|
+
#### [Takes a block?](https://github.com/slooob/amp-html/tree/master/lib/amp-html/helpers/docs#takes-a-block): Yes
|
22
|
+
|
23
|
+
---
|
24
|
+
|
25
|
+
## General
|
26
|
+
|
27
|
+
### Reference
|
28
|
+
|
29
|
+
[**AMP Reference**](https://www.ampproject.org/docs/reference/components/ads/amp-ad)
|
30
|
+
|
31
|
+
#### Required Parameters
|
32
|
+
|
33
|
+
* `network` (if not set in the AMP-HTML configuration)
|
34
|
+
* `size` (or `width` & `height`)
|
35
|
+
|
36
|
+
#### Structure
|
37
|
+
|
38
|
+
<%= amp_ad(network, options) %>
|
39
|
+
# <amp-ad type=network layout="responsive"></amp-ad>
|
40
|
+
|
41
|
+
**Note:** `layout` defaults to `responsive` if not explicitly permitted.
|
42
|
+
|
43
|
+
|
44
|
+
## Examples
|
45
|
+
|
46
|
+
Setting width & height:
|
47
|
+
|
48
|
+
<%= amp_ad("a9", width: 400, height: 300) %>
|
49
|
+
<%= amp_ad("a9", size: "400x300") %>
|
50
|
+
# <amp-ad type="a9" layout="responsive" width=400 height=300></amp-ad>
|
51
|
+
|
52
|
+
Creating a sticky ad at the bottom of the viewport:
|
53
|
+
|
54
|
+
<%= amp_ad("a9", sticky: true) %>
|
55
|
+
# <amp-sticky-ad layout="nodisplay">
|
56
|
+
# <amp-ad type="a9" layout="responsive"></amp-ad>
|
57
|
+
# </amp-sticky-ad>
|
58
|
+
|
59
|
+
Setting a placeholder:
|
60
|
+
|
61
|
+
<%= amp_ad("a9", placeholder: "my-ad-screencap.jpg") %>
|
62
|
+
# <amp-ad type="a9" layout="responsive">
|
63
|
+
# <amp-img placeholder src="my-ad-screencap.jpg"></amp-img>
|
64
|
+
# </amp-ad>
|
65
|
+
|
66
|
+
Setting a fallback:
|
67
|
+
|
68
|
+
<%= amp_ad("a9", fallback: "my-ad-screencap.jpg") %>
|
69
|
+
# <amp-ad type="a9" layout="responsive">
|
70
|
+
# <amp-img fallback src="my-ad-screencap.jpg"></amp-img>
|
71
|
+
# </amp-ad>
|
72
|
+
|
73
|
+
**Note:** Currently you can only pass `sticky` **or** `placeholder` **or** `fallback` as an option.
|
74
|
+
|
75
|
+
`amp_ad` also takes a block:
|
76
|
+
|
77
|
+
<%= amp_ad("a9", options) do %>
|
78
|
+
<%= amp_placeholder("amp-img", src: "my-ad-screencap.jpg") %>
|
79
|
+
<%= amp_fallback("amp-img", src: "my-ad-screencap.jpg") %>
|
80
|
+
<% end %>
|
81
|
+
# <amp-ad type="a9" layout="responsive">
|
82
|
+
# <amp-img placeholder src="my-ad-screencap.jpg"></amp-img>
|
83
|
+
# <amp-img fallback src="my-ad-screencap.jpg"></amp-img>
|
84
|
+
# </amp-ad>
|
85
|
+
|
86
|
+
**References:** [`amp_placeholder`](https://github.com/slooob/amp-html/blob/master/lib/amp-html/helpers/docs/amp_placeholder.md), [`amp_fallback`](https://github.com/slooob/amp-html/blob/master/lib/amp-html/helpers/docs/amp_fallback.md)
|
@@ -0,0 +1,76 @@
|
|
1
|
+
|
2
|
+
# [Helpers](https://github.com/slooob/amp-html/tree/master/lib/amp-html/helpers/docs#amp-html-helpers) / `amp_analytics`
|
3
|
+
|
4
|
+
|
5
|
+
## Information
|
6
|
+
|
7
|
+
`amp_analytics` allows to integrate with venders to measure activity on AMP documents.
|
8
|
+
|
9
|
+
---
|
10
|
+
|
11
|
+
### Quick info
|
12
|
+
|
13
|
+
#### Latest update: 0.6.2 (Pre-release) - 2017-03-20
|
14
|
+
|
15
|
+
[**Changelog for version 0.6.2**](https://github.com/slooob/amp-html/blob/master/CHANGELOG.md#062-pre-release---2017-03-20)
|
16
|
+
|
17
|
+
#### [DeepIntegration](https://github.com/slooob/amp-html/tree/master/lib/amp-html/helpers/docs#deepintegration-helpers): Enabled
|
18
|
+
|
19
|
+
#### [Availability](https://github.com/slooob/amp-html/tree/master/lib/amp-html/helpers/docs#availability-of-helpers): Installable with the [Analytics Component](https://github.com/slooob/amp-html/tree/master/lib/amp-html/components/docs/analytics.md)
|
20
|
+
|
21
|
+
#### [Takes a block?](https://github.com/slooob/amp-html/tree/master/lib/amp-html/helpers/docs#takes-a-block): Yes
|
22
|
+
|
23
|
+
---
|
24
|
+
|
25
|
+
## General
|
26
|
+
|
27
|
+
### Reference
|
28
|
+
|
29
|
+
[**AMP Reference**](https://www.ampproject.org/docs/reference/components/ads/amp-analytics)
|
30
|
+
|
31
|
+
#### Required Parameters
|
32
|
+
|
33
|
+
* `vendor` (if not set in the AMP-HTML configuration)
|
34
|
+
|
35
|
+
#### Structure
|
36
|
+
|
37
|
+
<%= amp_analytics(vendor, options) %>
|
38
|
+
# <amp-analytics type=vendor></amp-analytics>
|
39
|
+
|
40
|
+
|
41
|
+
## Examples
|
42
|
+
|
43
|
+
Loading a remote config:
|
44
|
+
|
45
|
+
<%= amp_ad("adobeanalytics", config: "https://example.com/analytics.config.json") %>
|
46
|
+
|
47
|
+
`amp_analytics` also takes a block:
|
48
|
+
|
49
|
+
<%= amp_analytics do %>
|
50
|
+
<script type="application/json">
|
51
|
+
{
|
52
|
+
"requests": {
|
53
|
+
"pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}",
|
54
|
+
"event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
|
55
|
+
},
|
56
|
+
"vars": {
|
57
|
+
"account": "ABC123"
|
58
|
+
},
|
59
|
+
"triggers": {
|
60
|
+
"trackPageview": {
|
61
|
+
"on": "visible",
|
62
|
+
"request": "pageview"
|
63
|
+
},
|
64
|
+
"trackAnchorClicks": {
|
65
|
+
"on": "click",
|
66
|
+
"selector": "a",
|
67
|
+
"request": "event",
|
68
|
+
"vars": {
|
69
|
+
"eventId": "42",
|
70
|
+
"eventLabel": "clicked on a link"
|
71
|
+
}
|
72
|
+
}
|
73
|
+
}
|
74
|
+
}
|
75
|
+
</script>
|
76
|
+
<% end %>
|
@@ -0,0 +1,68 @@
|
|
1
|
+
|
2
|
+
# [Helpers](https://github.com/slooob/amp-html/tree/master/lib/amp-html/helpers/docs#amp-html-helpers) / `amp_anim`
|
3
|
+
|
4
|
+
|
5
|
+
## Information
|
6
|
+
|
7
|
+
`amp_anim` allows to use runtime-managed animated images, typically GIF's, in AMP documents.
|
8
|
+
|
9
|
+
---
|
10
|
+
|
11
|
+
### Quick info
|
12
|
+
|
13
|
+
#### Latest update: 0.6.1 (Pre-release) - 2017-03-19
|
14
|
+
|
15
|
+
[**Changelog for version 0.6.1**](https://github.com/slooob/amp-html/blob/master/CHANGELOG.md#061-pre-release---2017-03-19)
|
16
|
+
|
17
|
+
#### [DeepIntegration](https://github.com/slooob/amp-html/tree/master/lib/amp-html/helpers/docs#deepintegration-helpers): Disabled
|
18
|
+
|
19
|
+
#### [Availability](https://github.com/slooob/amp-html/tree/master/lib/amp-html/helpers/docs#availability-of-helpers): Installable with the [Animated Images Component](https://github.com/slooob/amp-html/tree/master/lib/amp-html/components/docs/anim.md)
|
20
|
+
|
21
|
+
#### [Takes a block?](https://github.com/slooob/amp-html/tree/master/lib/amp-html/helpers/docs#takes-a-block): Yes
|
22
|
+
|
23
|
+
---
|
24
|
+
|
25
|
+
## General
|
26
|
+
|
27
|
+
### Reference
|
28
|
+
|
29
|
+
[**AMP Reference**](https://www.ampproject.org/docs/reference/components/media/amp-anim)
|
30
|
+
|
31
|
+
#### Required Parameters
|
32
|
+
|
33
|
+
* `source`
|
34
|
+
* `size` (or `width` & `height`)
|
35
|
+
|
36
|
+
#### Structure
|
37
|
+
|
38
|
+
<%= amp_anim(source, options) %>
|
39
|
+
# <amp-anim src=source layout="responsive"></amp-ad>
|
40
|
+
|
41
|
+
**Note:** `layout` defaults to `responsive` if not explicitly permitted.
|
42
|
+
|
43
|
+
|
44
|
+
## Examples
|
45
|
+
|
46
|
+
Setting width & height:
|
47
|
+
|
48
|
+
<%= amp_anim("my-gif.gif", width: 400, height: 300) %>
|
49
|
+
<%= amp_anim("my-gif.gif", size: "400x300") %>
|
50
|
+
# <amp-anim type="my-gif.gif" layout="responsive" width=400 height=300></amp-ad>
|
51
|
+
|
52
|
+
Setting a placeholder:
|
53
|
+
|
54
|
+
<%= amp_anim("my-gif.gif", placeholder: "my-gif-screencap.jpg") %>
|
55
|
+
# <amp-anim src="my-gif.gif" layout="responsive">
|
56
|
+
# <amp-img placeholder src="my-gif-screencap.jpg"></amp-img>
|
57
|
+
# </amp-anim>
|
58
|
+
|
59
|
+
`amp_anim` also takes a block:
|
60
|
+
|
61
|
+
<%= amp_anim("my-gif.gif", width: 400, height: 300) do %>
|
62
|
+
<%= amp_placeholder("amp-anim", width: 400, height: 300, src: "my-gif-screencap.jpg") %>
|
63
|
+
<% end %>
|
64
|
+
# <amp-anim src="my-gif.gif" layout="responsive">
|
65
|
+
# <amp-img placeholder src="my-gif-screencap.jpg"></amp-img>
|
66
|
+
# </amp-anim>
|
67
|
+
|
68
|
+
**References:** [`amp_placeholder`](https://github.com/slooob/amp-html/blob/master/lib/amp-html/helpers/docs/amp_placeholder.md)
|
@@ -0,0 +1,54 @@
|
|
1
|
+
|
2
|
+
# [Helpers](https://github.com/slooob/amp-html/tree/master/lib/amp-html/helpers/docs#amp-html-helpers) / `amp_audio`
|
3
|
+
|
4
|
+
|
5
|
+
## Information
|
6
|
+
|
7
|
+
`amp_audio` allows to directly embed audio files with HTML5.
|
8
|
+
|
9
|
+
---
|
10
|
+
|
11
|
+
### Quick info
|
12
|
+
|
13
|
+
#### Latest update: 0.7.5 (Pre-release) - 2017-03-23
|
14
|
+
|
15
|
+
[**Changelog for version 0.7.5**](https://github.com/slooob/amp-html/blob/master/CHANGELOG.md#075-pre-release---2017-03-23)
|
16
|
+
|
17
|
+
#### [DeepIntegration](https://github.com/slooob/amp-html/tree/master/lib/amp-html/helpers/docs#deepintegration-helpers): Disabled
|
18
|
+
|
19
|
+
#### [Availability](https://github.com/slooob/amp-html/tree/master/lib/amp-html/helpers/docs#availability-of-helpers): Build-in with the [Media Component](https://github.com/slooob/amp-html/tree/master/lib/amp-html/components/docs/media.md)
|
20
|
+
|
21
|
+
#### [Takes a block?](https://github.com/slooob/amp-html/tree/master/lib/amp-html/helpers/docs#takes-a-block): No
|
22
|
+
|
23
|
+
---
|
24
|
+
|
25
|
+
## General
|
26
|
+
|
27
|
+
### Reference
|
28
|
+
|
29
|
+
[**AMP Reference**](https://www.ampproject.org/docs/reference/components/media/amp-audio)
|
30
|
+
|
31
|
+
#### Required Parameters
|
32
|
+
|
33
|
+
* `*sources`
|
34
|
+
|
35
|
+
#### Structure
|
36
|
+
|
37
|
+
<%= amp_audio(*sources) %>
|
38
|
+
# <amp-audio>
|
39
|
+
# <div fallback><p>Your browser doesn’t support HTML5 audio</p></div>
|
40
|
+
# <source type=type_of_source src=source></source>
|
41
|
+
# </amp-audio>
|
42
|
+
|
43
|
+
**Note:** `layout` defaults to `responsive` if not explicitly permitted.
|
44
|
+
|
45
|
+
|
46
|
+
## Examples
|
47
|
+
|
48
|
+
Setting a custom fallback:
|
49
|
+
|
50
|
+
<%= amp_audio("audio_file.mp3", fallback: "No audio here.") %>
|
51
|
+
# <amp-audio>
|
52
|
+
# <div fallback><p>No audio here.</p></div>
|
53
|
+
# <source type="audio/mp3" src="audio_file.mp3"></source>
|
54
|
+
# </amp-audio>
|
@@ -0,0 +1,43 @@
|
|
1
|
+
|
2
|
+
# [Helpers](https://github.com/slooob/amp-html/tree/master/lib/amp-html/helpers/docs#amp-html-helpers) / `amp_auto_ads`
|
3
|
+
|
4
|
+
|
5
|
+
## Information
|
6
|
+
|
7
|
+
`amp_auto_ads` allows to autmatically embed ads by a provider.
|
8
|
+
|
9
|
+
---
|
10
|
+
|
11
|
+
### Quick info
|
12
|
+
|
13
|
+
#### Latest update: 0.6.2 (Pre-release) - 2017-03-20
|
14
|
+
|
15
|
+
[**Changelog for version 0.6.2**](https://github.com/slooob/amp-html/blob/master/CHANGELOG.md#062-pre-release---2017-03-20)
|
16
|
+
|
17
|
+
#### [DeepIntegration](https://github.com/slooob/amp-html/tree/master/lib/amp-html/helpers/docs#deepintegration-helpers): Disabled
|
18
|
+
|
19
|
+
#### [Availability](https://github.com/slooob/amp-html/tree/master/lib/amp-html/helpers/docs#availability-of-helpers): Installable with the [Advertisements Component](https://github.com/slooob/amp-html/tree/master/lib/amp-html/components/docs/ad.md)
|
20
|
+
|
21
|
+
#### [Takes a block?](https://github.com/slooob/amp-html/tree/master/lib/amp-html/helpers/docs#takes-a-block): No
|
22
|
+
|
23
|
+
---
|
24
|
+
|
25
|
+
## General
|
26
|
+
|
27
|
+
### Reference
|
28
|
+
|
29
|
+
[**AMP Reference**](https://www.ampproject.org/docs/reference/components/ads/amp-auto-ads)
|
30
|
+
|
31
|
+
#### Required Parameters
|
32
|
+
|
33
|
+
* `network` ([List of supported auto-ads networks](https://www.ampproject.org/docs/reference/components/ads/amp-auto-ads#supported-ad-networks))
|
34
|
+
|
35
|
+
#### Structure
|
36
|
+
|
37
|
+
<%= amp_auto_ads(network, options) %>
|
38
|
+
# <amp-auto-ad type=network></amp-ad>
|
39
|
+
|
40
|
+
|
41
|
+
## Examples
|
42
|
+
|
43
|
+
Some examples may be here in the future.
|
File without changes
|
@@ -0,0 +1,37 @@
|
|
1
|
+
|
2
|
+
# [Helpers](https://github.com/slooob/amp-html/tree/master/lib/amp-html/helpers/docs#amp-html-helpers) / `amp_css`
|
3
|
+
|
4
|
+
|
5
|
+
## Information
|
6
|
+
|
7
|
+
`amp_css` allows allows the use of stylesheets in AMP documents.
|
8
|
+
|
9
|
+
---
|
10
|
+
|
11
|
+
### Quick info
|
12
|
+
|
13
|
+
#### Latest update: 0.6.1 (Pre-release) - 2017-03-19
|
14
|
+
|
15
|
+
[**Changelog for version 0.6.1**](https://github.com/slooob/amp-html/blob/master/CHANGELOG.md#061-pre-release---2017-03-19)
|
16
|
+
|
17
|
+
#### [DeepIntegration](https://github.com/slooob/amp-html/tree/master/lib/amp-html/helpers/docs#deepintegration-helpers): Disabled
|
18
|
+
|
19
|
+
#### [Availability](https://github.com/slooob/amp-html/tree/master/lib/amp-html/helpers/docs#availability-of-helpers): Build-in with the [Stylesheets Component](https://github.com/slooob/amp-html/tree/master/lib/amp-html/components/docs/stylesheets.md)
|
20
|
+
|
21
|
+
#### [Takes a block?](https://github.com/slooob/amp-html/tree/master/lib/amp-html/helpers/docs#takes-a-block): Yes
|
22
|
+
|
23
|
+
---
|
24
|
+
|
25
|
+
## General
|
26
|
+
|
27
|
+
### Reference
|
28
|
+
|
29
|
+
#### Required Parameters
|
30
|
+
|
31
|
+
None.
|
32
|
+
|
33
|
+
#### Structure
|
34
|
+
|
35
|
+
<%= amp_css do %>
|
36
|
+
/* Your CSS here */
|
37
|
+
<% end %>
|
File without changes
|
File without changes
|
File without changes
|
@@ -0,0 +1,86 @@
|
|
1
|
+
|
2
|
+
# [Helpers](https://github.com/slooob/amp-html/tree/master/lib/amp-html/helpers/docs#amp-html-helpers) / `amp_embed`
|
3
|
+
|
4
|
+
|
5
|
+
## Information
|
6
|
+
|
7
|
+
`amp_embed` allows to easily embed ads with AMP, not hurting performance. It is an alias to the [`amp_ad`](https://github.com/slooob/amp-html/tree/master/lib/amp-html/helpers/docs/amp_ad.md) helper.
|
8
|
+
|
9
|
+
---
|
10
|
+
|
11
|
+
### Quick info
|
12
|
+
|
13
|
+
#### Latest update: 0.5.4 (Pre-release) - 2017-03-19
|
14
|
+
|
15
|
+
[**Changelog for version 0.5.4**](https://github.com/slooob/amp-html/blob/master/CHANGELOG.md#054-pre-release---2017-03-19)
|
16
|
+
|
17
|
+
#### [DeepIntegration](https://github.com/slooob/amp-html/tree/master/lib/amp-html/helpers/docs#deepintegration-helpers): Enabled
|
18
|
+
|
19
|
+
#### [Availability](https://github.com/slooob/amp-html/tree/master/lib/amp-html/helpers/docs#availability-of-helpers): Installable with the [Advertisements Component](https://github.com/slooob/amp-html/tree/master/lib/amp-html/components/docs/ad.md)
|
20
|
+
|
21
|
+
#### [Takes a block?](https://github.com/slooob/amp-html/tree/master/lib/amp-html/helpers/docs#takes-a-block): Yes
|
22
|
+
|
23
|
+
---
|
24
|
+
|
25
|
+
## General
|
26
|
+
|
27
|
+
### Reference
|
28
|
+
|
29
|
+
[**AMP Reference**](https://www.ampproject.org/docs/reference/components/ads/amp-ad)
|
30
|
+
|
31
|
+
#### Required Parameters
|
32
|
+
|
33
|
+
* `network` (if not set in the AMP-HTML configuration)
|
34
|
+
* `size` (or `width` & `height`)
|
35
|
+
|
36
|
+
#### Structure
|
37
|
+
|
38
|
+
<%= amp_embed(network, options) %>
|
39
|
+
# <amp-ad type=network layout="responsive"></amp-ad>
|
40
|
+
|
41
|
+
**Note:** `layout` defaults to `responsive` if not explicitly permitted.
|
42
|
+
|
43
|
+
|
44
|
+
## Examples
|
45
|
+
|
46
|
+
Setting width & height:
|
47
|
+
|
48
|
+
<%= amp_embed("a9", width: 400, height: 300) %>
|
49
|
+
<%= amp_embed("a9", size: "400x300") %>
|
50
|
+
# <amp-ad type="a9" layout="responsive" width=400 height=300></amp-ad>
|
51
|
+
|
52
|
+
Creating a sticky ad at the bottom of the viewport:
|
53
|
+
|
54
|
+
<%= amp_embed("a9", sticky: true) %>
|
55
|
+
# <amp-sticky-ad layout="nodisplay">
|
56
|
+
# <amp-ad type="a9" layout="responsive"></amp-ad>
|
57
|
+
# </amp-sticky-ad>
|
58
|
+
|
59
|
+
Setting a placeholder:
|
60
|
+
|
61
|
+
<%= amp_embed("a9", placeholder: "my-ad-screencap.jpg") %>
|
62
|
+
# <amp-ad type="a9" layout="responsive">
|
63
|
+
# <amp-img placeholder src="my-ad-screencap.jpg"></amp-img>
|
64
|
+
# </amp-ad>
|
65
|
+
|
66
|
+
Setting a fallback:
|
67
|
+
|
68
|
+
<%= amp_embed("a9", fallback: "my-ad-screencap.jpg") %>
|
69
|
+
# <amp-ad type="a9" layout="responsive">
|
70
|
+
# <amp-img fallback src="my-ad-screencap.jpg"></amp-img>
|
71
|
+
# </amp-ad>
|
72
|
+
|
73
|
+
**Note:** Currently you can only pass `sticky` **or** `placeholder` **or** `fallback` as an option.
|
74
|
+
|
75
|
+
`amp_ad` also takes a block:
|
76
|
+
|
77
|
+
<%= amp_embed("a9", options) do %>
|
78
|
+
<%= amp_placeholder("amp-img", src: "my-ad-screencap.jpg") %>
|
79
|
+
<%= amp_fallback("amp-img", src: "my-ad-screencap.jpg") %>
|
80
|
+
<% end %>
|
81
|
+
# <amp-ad type="a9" layout="responsive">
|
82
|
+
# <amp-img placeholder src="my-ad-screencap.jpg"></amp-img>
|
83
|
+
# <amp-img fallback src="my-ad-screencap.jpg"></amp-img>
|
84
|
+
# </amp-ad>
|
85
|
+
|
86
|
+
**References:** [`amp_placeholder`](https://github.com/slooob/amp-html/blob/master/lib/amp-html/helpers/docs/amp_placeholder.md), [`amp_fallback`](https://github.com/slooob/amp-html/blob/master/lib/amp-html/helpers/docs/amp_fallback.md)
|