amp-html 0.7.18 → 1.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +5 -5
- data/CHANGELOG.md +82 -77
- data/README.md +61 -75
- data/app/helpers/amp_html/asset_helper.rb +11 -0
- data/app/helpers/amp_html/base_helper.rb +14 -0
- data/app/helpers/amp_html/dynamic_content_helper.rb +14 -0
- data/app/helpers/amp_html/layouts_helper.rb +11 -0
- data/app/helpers/amp_html/media_helper.rb +15 -0
- data/app/views/mozaic/amp/_amp-link.html.erb +1 -0
- data/app/views/mozaic/amp/_audio.html.erb +11 -0
- data/app/views/mozaic/amp/_canonical-link.html.erb +1 -0
- data/app/views/mozaic/amp/_components.html.erb +6 -0
- data/app/views/mozaic/amp/_doctype.html.erb +4 -0
- data/app/views/mozaic/amp/_font.html.erb +2 -0
- data/app/views/mozaic/amp/_form-response.html.erb +5 -0
- data/app/views/mozaic/amp/_form.html.erb +3 -0
- data/app/views/mozaic/amp/_head.html.erb +13 -0
- data/app/views/mozaic/amp/_img.html.erb +1 -0
- data/app/views/mozaic/amp/_input.html.erb +1 -0
- data/app/views/mozaic/amp/_mustache.html.erb +3 -0
- data/app/views/mozaic/amp/_selector.html.erb +3 -0
- data/app/views/mozaic/amp/_video.html.erb +11 -0
- data/lib/amp-html.rb +4 -20
- data/lib/amp-html/configuration.rb +13 -158
- data/lib/amp-html/engine.rb +6 -0
- data/lib/amp-html/railtie.rb +109 -0
- data/lib/amp-html/version.rb +1 -9
- data/lib/generators/amp_html_generator.rb +27 -0
- data/lib/generators/templates/{assets/stylesheets/application.scss → application.css} +1 -1
- data/lib/generators/templates/initializer.rb +14 -0
- data/lib/generators/templates/layout.html.erb +15 -0
- metadata +53 -204
- data/.github/issue_template.md +0 -16
- data/.github/pull_request_template.md +0 -21
- data/.gitignore +0 -13
- data/.travis.yml +0 -4
- data/CODE_OF_CONDUCT.md +0 -46
- data/CONTRIBUTING.md +0 -1
- data/DEPRECATIONS.md +0 -9
- data/Gemfile +0 -12
- data/Gemfile.lock +0 -164
- data/INSTALL.md +0 -2
- data/OWNERS.yaml +0 -1
- data/Rakefile +0 -6
- data/amp-html.gemspec +0 -30
- data/bin/amp-html +0 -4
- data/lib/amp-html/cli.rb +0 -113
- data/lib/amp-html/components/docs/README.md +0 -101
- data/lib/amp-html/components/docs/ad.md +0 -83
- data/lib/amp-html/components/docs/analytics.md +0 -131
- data/lib/amp-html/components/docs/anim.md +0 -66
- data/lib/amp-html/components/docs/fonts.md +0 -63
- data/lib/amp-html/components/docs/forms.md +0 -79
- data/lib/amp-html/components/docs/iframe.md +0 -62
- data/lib/amp-html/components/docs/javascript.md +0 -71
- data/lib/amp-html/components/docs/lists.md +0 -168
- data/lib/amp-html/components/docs/media.md +0 -52
- data/lib/amp-html/components/docs/mustache.md +0 -46
- data/lib/amp-html/components/docs/notifications.md +0 -0
- data/lib/amp-html/components/docs/schema.md +0 -80
- data/lib/amp-html/components/docs/service_worker.md +0 -60
- data/lib/amp-html/components/docs/social.md +0 -130
- data/lib/amp-html/components/docs/stylesheets.md +0 -50
- data/lib/amp-html/components/help.rb +0 -19
- data/lib/amp-html/components/install.rb +0 -34
- data/lib/amp-html/components/templates/ERROR.md +0 -5
- data/lib/amp-html/components/templates/README.md +0 -12
- data/lib/amp-html/configuration/docs/README.md +0 -0
- data/lib/amp-html/configuration/help.rb +0 -11
- data/lib/amp-html/helpers/docs/README.md +0 -98
- data/lib/amp-html/helpers/docs/amp.md +0 -0
- data/lib/amp-html/helpers/docs/amp_ad.md +0 -86
- data/lib/amp-html/helpers/docs/amp_analytics.md +0 -76
- data/lib/amp-html/helpers/docs/amp_anim.md +0 -68
- data/lib/amp-html/helpers/docs/amp_audio.md +0 -54
- data/lib/amp-html/helpers/docs/amp_auto_ads.md +0 -43
- data/lib/amp-html/helpers/docs/amp_close_user_notification_button.md +0 -0
- data/lib/amp-html/helpers/docs/amp_css.md +0 -37
- 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 +0 -86
- data/lib/amp-html/helpers/docs/amp_facebook.md +0 -70
- data/lib/amp-html/helpers/docs/amp_fallback.md +0 -47
- 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 +0 -23
- data/lib/amp-html/root.rb +0 -7
- data/lib/amp-html/test.rb +0 -169
- data/lib/amp-html/test/help.rb +0 -11
- data/lib/amp-html/test/templates/README.md +0 -43
- data/lib/amp-html/test/templates/css/!important.md +0 -1
- data/lib/amp-html/test/templates/css/-amp-.md +0 -1
- data/lib/amp-html/test/templates/css/-moz-binding.md +0 -1
- data/lib/amp-html/test/templates/css/@import.md +0 -1
- data/lib/amp-html/test/templates/css/behavior.md +0 -1
- data/lib/amp-html/test/templates/css/filter.md +0 -1
- data/lib/amp-html/test/templates/css/i-amp-.md +0 -1
- data/lib/amp-html/test/templates/css/overflow.md +0 -1
- data/lib/amp-html/test/templates/html/applet.md +0 -1
- data/lib/amp-html/test/templates/html/audio.md +0 -1
- data/lib/amp-html/test/templates/html/base.md +0 -1
- data/lib/amp-html/test/templates/html/embed.md +0 -1
- data/lib/amp-html/test/templates/html/frame.md +0 -1
- data/lib/amp-html/test/templates/html/frameset.md +0 -1
- data/lib/amp-html/test/templates/html/http-equiv.md +0 -1
- data/lib/amp-html/test/templates/html/iframe.md +0 -1
- data/lib/amp-html/test/templates/html/img.md +0 -1
- data/lib/amp-html/test/templates/html/javascript_include_tag.md +0 -1
- data/lib/amp-html/test/templates/html/object.md +0 -1
- data/lib/amp-html/test/templates/html/onclick.md +0 -1
- data/lib/amp-html/test/templates/html/onmousehover.md +0 -1
- data/lib/amp-html/test/templates/html/param.md +0 -1
- data/lib/amp-html/test/templates/html/stylesheet_link_tag.md +0 -1
- data/lib/amp-html/test/templates/html/video.md +0 -1
- data/lib/amp-html/test/templates/markup/!doctype.md +0 -1
- data/lib/amp-html/test/templates/markup/amp_document_link.md +0 -1
- data/lib/amp-html/test/templates/markup/amp_head.md +0 -1
- data/lib/amp-html/test/templates/markup/amp_html_doctype.md +0 -1
- data/lib/amp-html/test/templates/markup/canonical_document_link.md +0 -1
- data/lib/amp-html/test/templates/markup/head_body.md +0 -1
- data/lib/amp-html/test/templates/markup/html.md +0 -1
- data/lib/amp-html/test/templates/markup/meta_viewport.md +0 -1
- data/lib/amp-html/validate.rb +0 -46
- data/lib/amp-html/validate/help.rb +0 -11
- data/lib/amp-html/validate/templates/README.md +0 -32
- data/lib/generators/amp_html/assets_generator.rb +0 -31
- data/lib/generators/amp_html/bundle_generator.rb +0 -50
- data/lib/generators/amp_html/components_generator.rb +0 -84
- data/lib/generators/amp_html/helpers_generator.rb +0 -32
- data/lib/generators/amp_html/install_generator.rb +0 -53
- data/lib/generators/amp_html/views_generator.rb +0 -62
- data/lib/generators/templates/assets/README.md +0 -0
- data/lib/generators/templates/components/README.md +0 -0
- data/lib/generators/templates/components/views/_components.html.erb +0 -141
- data/lib/generators/templates/components/views/_google_analytics.html.erb +0 -23
- data/lib/generators/templates/helpers/README.md +0 -0
- data/lib/generators/templates/helpers/amp/fallback_tag_helper.rb +0 -16
- data/lib/generators/templates/helpers/amp/font_tag_helper.rb +0 -37
- data/lib/generators/templates/helpers/amp/link_tag_helper.rb +0 -11
- data/lib/generators/templates/helpers/amp/mustache_tag_helper.rb +0 -13
- data/lib/generators/templates/helpers/amp/noscript_tag_helper.rb +0 -13
- data/lib/generators/templates/helpers/amp/placeholder_tag_helper.rb +0 -16
- data/lib/generators/templates/helpers/amp/schema_tag_helper.rb +0 -16
- data/lib/generators/templates/helpers/amp/stylesheets_tag_helper.rb +0 -21
- data/lib/generators/templates/helpers/amp_tag_helper.rb.erb +0 -65
- data/lib/generators/templates/helpers/asset_tag_helper.rb.erb +0 -119
- data/lib/generators/templates/helpers/form_tag_helper.rb.erb +0 -79
- data/lib/generators/templates/install/README.md +0 -0
- data/lib/generators/templates/install/amp-html.rb.erb +0 -19
- data/lib/generators/templates/install/amp-html.yml.erb +0 -189
- data/lib/generators/templates/views/README.md +0 -0
- data/lib/generators/templates/views/application.html.erb +0 -71
- data/lib/generators/templates/views/application/_head.html.erb +0 -47
- data/lib/generators/templates/views/application/_resources.html.erb +0 -16
- data/lib/generators/templates/views/application/_schema.html.erb +0 -6
- data/lib/generators/templates/views/config/mime_types.rb +0 -8
@@ -1,71 +0,0 @@
|
|
1
|
-
|
2
|
-
# [Components](https://github.com/slooob/amp-html/tree/master/lib/amp-html/components/docs) / Javascript BETA
|
3
|
-
|
4
|
-
|
5
|
-
## Information
|
6
|
-
|
7
|
-
The AMP-HTML Javascript Component allows the use of javascript assets in AMP documents.
|
8
|
-
|
9
|
-
---
|
10
|
-
|
11
|
-
### Quick info
|
12
|
-
|
13
|
-
#### Latest component release: 0.6.0 (Pre-release) - 2017-03-19
|
14
|
-
|
15
|
-
[**Changelog for version 0.6.0**](https://github.com/slooob/amp-html/blob/master/CHANGELOG.md#060-pre-release---2017-03-19)
|
16
|
-
|
17
|
-
#### Requirements
|
18
|
-
|
19
|
-
The Javascript Component depends on the [AMP-HTML Iframe Component](https://github.com/slooob/amp-html/tree/master/lib/amp-html/components/docs/iframe.md).
|
20
|
-
|
21
|
-
#### Dependents
|
22
|
-
|
23
|
-
No other components depend on the Javascript Component.
|
24
|
-
|
25
|
-
#### [DeepIntegration](https://github.com/slooob/amp-html/tree/master/lib/amp-html/components/docs#deepintegration-components): Disabled
|
26
|
-
|
27
|
-
#### [Availability](https://github.com/slooob/amp-html/tree/master/lib/amp-html/components/docs#availability-of-components): Installable
|
28
|
-
|
29
|
-
---
|
30
|
-
|
31
|
-
## Installation
|
32
|
-
|
33
|
-
Run in the command line:
|
34
|
-
|
35
|
-
amp-html install javascript
|
36
|
-
|
37
|
-
Now you are ready to use the Javascript Component.
|
38
|
-
|
39
|
-
To learn more about this component, without opening the documentation, run:
|
40
|
-
|
41
|
-
amp-html component javascript
|
42
|
-
|
43
|
-
|
44
|
-
## Configuration
|
45
|
-
|
46
|
-
In your AMP-HTML configuration (`config/amp-html.yml`) search for the section of the Assets Configuration.
|
47
|
-
|
48
|
-
There you can specify whether javascript-assets outside of the `assets/#{type}/amp` are precompiled or not:
|
49
|
-
|
50
|
-
only_amp: true
|
51
|
-
|
52
|
-
If you set it to `true`, only assets inside the amp directory are precompiled. It defaults to `true`. If SplitView is enabled it defaults to `false`.
|
53
|
-
|
54
|
-
|
55
|
-
## Usage
|
56
|
-
|
57
|
-
By default every javascript (`.js`) file inside of your `app/assets/javascripts/amp` (depending on your AMP-HTML configuration) directory is included in your application layout.
|
58
|
-
|
59
|
-
You can include some external javascript utilizing the `amp_js` helper in your `<head>` tag:
|
60
|
-
|
61
|
-
<%= amp_js(source) %>
|
62
|
-
<%= amp_js("https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js") %>
|
63
|
-
|
64
|
-
For a detailed reference on the `amp_js` helper, follow the link below.
|
65
|
-
|
66
|
-
|
67
|
-
### Helpers
|
68
|
-
|
69
|
-
The following helpers are usable with the Javascript Component of AMP-HTML
|
70
|
-
|
71
|
-
* [`amp_js`](https://github.com/slooob/amp-html/blob/master/lib/amp-html/helpers/docs/amp_js.md)
|
@@ -1,168 +0,0 @@
|
|
1
|
-
|
2
|
-
# [Components](https://github.com/slooob/amp-html/tree/master/lib/amp-html/components/docs) / Lists BETA
|
3
|
-
|
4
|
-
|
5
|
-
## Information
|
6
|
-
|
7
|
-
The AMP-HTML Lists Component allows to dynamically from a CORS JSON endpoint.
|
8
|
-
|
9
|
-
---
|
10
|
-
|
11
|
-
### Quick info
|
12
|
-
|
13
|
-
#### Latest component release: 0.7.3 (Pre-release) - 2017-03-22
|
14
|
-
|
15
|
-
[**Changelog for version 0.7.3**](https://github.com/slooob/amp-html/blob/master/CHANGELOG.md#073-pre-release---2017-03-22)
|
16
|
-
|
17
|
-
#### Requirements
|
18
|
-
|
19
|
-
The Lists Component does not depend on any other components.
|
20
|
-
|
21
|
-
#### Dependents
|
22
|
-
|
23
|
-
No other components depend on the Lists Component.
|
24
|
-
|
25
|
-
#### [DeepIntegration](https://github.com/slooob/amp-html/tree/master/lib/amp-html/components/docs#deepintegration-components): Disabled
|
26
|
-
|
27
|
-
#### [Availability](https://github.com/slooob/amp-html/tree/master/lib/amp-html/components/docs#availability-of-components): Installable
|
28
|
-
|
29
|
-
---
|
30
|
-
|
31
|
-
## Installation
|
32
|
-
|
33
|
-
Run in the command line:
|
34
|
-
|
35
|
-
amp-html install lists
|
36
|
-
|
37
|
-
Now you are ready to use the Lists Component.
|
38
|
-
|
39
|
-
To learn more about this component, without opening the documentation, run:
|
40
|
-
|
41
|
-
amp-html component lists
|
42
|
-
|
43
|
-
|
44
|
-
## Usage
|
45
|
-
|
46
|
-
In your views you can implement a list as follows:
|
47
|
-
|
48
|
-
<%= amp_list(source, options) do %>
|
49
|
-
<% end %>
|
50
|
-
|
51
|
-
<%= amp_list("https://data.com/articles.json?ref=CANONICAL_URL", width: 300, height: 200) do %>
|
52
|
-
<%= amp_mustache do %>
|
53
|
-
<div>
|
54
|
-
<%= amp_image("{{imageUrl}}", width: 50, height:50) %>
|
55
|
-
{{title}}
|
56
|
-
</div>
|
57
|
-
<% end %>
|
58
|
-
<div overflow role=button aria-label="Show more" class="list-overflow">
|
59
|
-
Show more
|
60
|
-
</div>
|
61
|
-
<% end %>
|
62
|
-
|
63
|
-
**Note:** The `amp_list` defaults to `layout: "responsive"`.
|
64
|
-
|
65
|
-
Learn more about the `amp_list` helper in the dedicated reference linked below.
|
66
|
-
|
67
|
-
**References:** [`amp_mustache`](https://github.com/slooob/amp-html/blob/master/lib/amp-html/helpers/docs/amp_mustache.md), [`amp_image`](https://github.com/slooob/amp-html/blob/master/lib/amp-html/helpers/docs/amp_image.md)
|
68
|
-
|
69
|
-
### Live Lists
|
70
|
-
|
71
|
-
By using `amp_live_list` you can update the content in the client as new content is available:
|
72
|
-
|
73
|
-
<%= amp_live_list(id, max_items_per_page, interval) do %>
|
74
|
-
<% end %>
|
75
|
-
|
76
|
-
|
77
|
-
<%= amp_css do %>
|
78
|
-
amp-live-list > [update] {
|
79
|
-
display: none;
|
80
|
-
}
|
81
|
-
|
82
|
-
#fixed-button {
|
83
|
-
position: fixed;
|
84
|
-
top: 10px;
|
85
|
-
left: 50%;
|
86
|
-
transform: translateX(-50%)
|
87
|
-
}
|
88
|
-
|
89
|
-
.slide.amp-active {
|
90
|
-
overflow-y: hidden;
|
91
|
-
height: 100px;
|
92
|
-
max-height: 150px;
|
93
|
-
transition-property: height;
|
94
|
-
transition-duration: .2s;
|
95
|
-
transition-timing-function: ease-in;
|
96
|
-
background: #3f51b5;
|
97
|
-
}
|
98
|
-
|
99
|
-
.slide.amp-hidden {
|
100
|
-
max-height: 0;
|
101
|
-
}
|
102
|
-
|
103
|
-
// We need to override "display: none" to be able to see
|
104
|
-
// the transition effect on the 2nd live list.
|
105
|
-
#live-list-2 > .amp-hidden[update] {
|
106
|
-
display: block;
|
107
|
-
}
|
108
|
-
<% end %>
|
109
|
-
|
110
|
-
<%= amp_live_list("live-list-1", "5", "16000") do %>
|
111
|
-
<%= amp_live_list_update(ontap: "live-list-1.update", id: "fixed-button", class: "button") do %>
|
112
|
-
new updates on live list 1
|
113
|
-
<% end %>
|
114
|
-
<%= amp_live_list_items do %>
|
115
|
-
<div id="live-list-1-item-2" data-sort-time="1462814963592">
|
116
|
-
<div class="card">
|
117
|
-
<div class="logo">
|
118
|
-
<%= amp_image("ampicon.png", layout: "fixed", height: "50", width: "50") %>
|
119
|
-
</div>
|
120
|
-
</div>
|
121
|
-
</div>
|
122
|
-
<div id="live-list-1-item-1" data-sort-time="1462814955597">
|
123
|
-
<div class="card">
|
124
|
-
<div class="logo">
|
125
|
-
<%= amp_image("ampicon.png", layout: "fixed", height: "50", width: "50") %>
|
126
|
-
</div>
|
127
|
-
</div>
|
128
|
-
</div>
|
129
|
-
<% end %>
|
130
|
-
<% end %>
|
131
|
-
<%= amp_live_list("live-list-2", "10", "20000") do %>
|
132
|
-
<%= amp_live_list_update("button", "live-list-1", id: "fixed-button", class: "button") do %>
|
133
|
-
new updates on live list 1
|
134
|
-
<% end %>
|
135
|
-
<%= amp_live_list_items do %>
|
136
|
-
<div id="live-list-1-item-2" data-sort-time="1462814963592">
|
137
|
-
<div class="card">
|
138
|
-
<div class="logo">
|
139
|
-
<%= amp_image("ampicon.png", layout: "fixed", height: "50", width: "50") %>
|
140
|
-
</div>
|
141
|
-
</div>
|
142
|
-
</div>
|
143
|
-
<div id="live-list-1-item-1" data-sort-time="1462814955597">
|
144
|
-
<div class="card">
|
145
|
-
<div class="logo">
|
146
|
-
<%= amp_image("ampicon.png", layout: "fixed", height: "50", width: "50") %>
|
147
|
-
</div>
|
148
|
-
</div>
|
149
|
-
</div>
|
150
|
-
<% end %>
|
151
|
-
<% end %>
|
152
|
-
|
153
|
-
**Note:** The `amp_live_list` defaults to `layout: "responsive"`.
|
154
|
-
|
155
|
-
Learn more about the `amp_live_list` helper in the dedicated reference linked below.
|
156
|
-
|
157
|
-
**References:** [`amp_css`](https://github.com/slooob/amp-html/blob/master/lib/amp-html/helpers/docs/amp_css.md), [`amp_image`](https://github.com/slooob/amp-html/blob/master/lib/amp-html/helpers/docs/amp_image.md)
|
158
|
-
|
159
|
-
|
160
|
-
### Helpers
|
161
|
-
|
162
|
-
The following helpers are usable with the Lists Component of AMP-HTML
|
163
|
-
|
164
|
-
* [`amp_list`](https://github.com/slooob/amp-html/blob/master/lib/amp-html/helpers/docs/amp_list.md)
|
165
|
-
* [`amp_live_list`](https://github.com/slooob/amp-html/blob/master/lib/amp-html/helpers/docs/amp_live_list.md)
|
166
|
-
* [`amp_live_list_update`](https://github.com/slooob/amp-html/blob/master/lib/amp-html/helpers/docs/amp_live_list_update.md)
|
167
|
-
* [`amp_live_list_items`](https://github.com/slooob/amp-html/blob/master/lib/amp-html/helpers/docs/amp_live_list_items.md)
|
168
|
-
* [`amp_live_list_pagination`](https://github.com/slooob/amp-html/blob/master/lib/amp-html/helpers/docs/amp_live_list_pagination.md)
|
@@ -1,52 +0,0 @@
|
|
1
|
-
|
2
|
-
# [Components](https://github.com/slooob/amp-html/tree/master/lib/amp-html/components/docs) / Media BETA
|
3
|
-
|
4
|
-
|
5
|
-
## Information
|
6
|
-
|
7
|
-
The AMP-HTML Media Component allows to use HTML5-similar media tags in AMP documents.
|
8
|
-
|
9
|
-
---
|
10
|
-
|
11
|
-
### Quick info
|
12
|
-
|
13
|
-
#### Latest component release: 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
|
-
#### Requirements
|
18
|
-
|
19
|
-
The Media Component does not depend on any other components.
|
20
|
-
|
21
|
-
#### Dependents
|
22
|
-
|
23
|
-
No other components depend on the Media Component.
|
24
|
-
|
25
|
-
#### [DeepIntegration](https://github.com/slooob/amp-html/tree/master/lib/amp-html/components/docs#deepintegration-components): Disabled
|
26
|
-
|
27
|
-
#### [Availability](https://github.com/slooob/amp-html/tree/master/lib/amp-html/components/docs#availability-of-components): Build-in
|
28
|
-
|
29
|
-
---
|
30
|
-
|
31
|
-
## Usage
|
32
|
-
|
33
|
-
In your views you include an image as follows:
|
34
|
-
|
35
|
-
<%= amp_image(source, options) %>
|
36
|
-
<%= amp_image("my_image.png", size: "400x300", alt: "My Image") %>
|
37
|
-
|
38
|
-
**Note:** The `amp_image` helper uses the assets pipeline to find your image source.
|
39
|
-
|
40
|
-
Learn more about the `amp_image` helper in the dedicated reference linked below.
|
41
|
-
|
42
|
-
|
43
|
-
### Helpers
|
44
|
-
|
45
|
-
The following helpers are usable with the Media Component of AMP-HTML
|
46
|
-
|
47
|
-
* [`amp_image`](https://github.com/slooob/amp-html/blob/master/lib/amp-html/helpers/docs/amp_image.md)
|
48
|
-
* [`amp_video`](https://github.com/slooob/amp-html/blob/master/lib/amp-html/helpers/docs/amp_video.md)
|
49
|
-
* [`amp_audio`](https://github.com/slooob/amp-html/blob/master/lib/amp-html/helpers/docs/amp_audio.md)
|
50
|
-
* [`image_tag`](https://github.com/slooob/amp-html/blob/master/lib/amp-html/helpers/docs/image_tag.md)
|
51
|
-
* [`video_tag`](https://github.com/slooob/amp-html/blob/master/lib/amp-html/helpers/docs/video_tag.md)
|
52
|
-
* [`audio_tag`](https://github.com/slooob/amp-html/blob/master/lib/amp-html/helpers/docs/audio_tag.md)
|
@@ -1,46 +0,0 @@
|
|
1
|
-
|
2
|
-
# [Components](https://github.com/slooob/amp-html/tree/master/lib/amp-html/components/docs) / Mustache.js
|
3
|
-
|
4
|
-
|
5
|
-
## Information
|
6
|
-
|
7
|
-
The AMP-HTML Mustache.js Component allows rendering of templates with `{{mustaches}}`.
|
8
|
-
|
9
|
-
---
|
10
|
-
|
11
|
-
### Quick info
|
12
|
-
|
13
|
-
#### Latest component release: 0.7.3 (Pre-release) - 2017-03-22
|
14
|
-
|
15
|
-
[**Changelog for version 0.7.3**](https://github.com/slooob/amp-html/blob/master/CHANGELOG.md#073-pre-release---2017-03-22)
|
16
|
-
|
17
|
-
#### Requirements
|
18
|
-
|
19
|
-
The Mustache.js Component does not depend on any other components.
|
20
|
-
|
21
|
-
#### Dependents
|
22
|
-
|
23
|
-
The [AMP-HTML Forms Component](https://github.com/slooob/amp-html/tree/master/lib/amp-html/components/docs/forms.md) depends on the Mustache.js Component.
|
24
|
-
|
25
|
-
#### [DeepIntegration](https://github.com/slooob/amp-html/tree/master/lib/amp-html/components/docs#deepintegration-components): Disabled
|
26
|
-
|
27
|
-
#### [Availability](https://github.com/slooob/amp-html/tree/master/lib/amp-html/components/docs#availability-of-components): Build-in
|
28
|
-
|
29
|
-
---
|
30
|
-
|
31
|
-
## Usage
|
32
|
-
|
33
|
-
In your views you can create a Mustache.js template as follows:
|
34
|
-
|
35
|
-
<%= amp_mustache do %>
|
36
|
-
Hello {{world}}!
|
37
|
-
<% end %>
|
38
|
-
|
39
|
-
Learn more about the `amp_mustache` helper in the dedicated reference linked below.
|
40
|
-
|
41
|
-
|
42
|
-
### Helpers
|
43
|
-
|
44
|
-
The following helpers are usable with the Mustache.js Component of AMP-HTML
|
45
|
-
|
46
|
-
* [`amp_mustache`](https://github.com/slooob/amp-html/blob/master/lib/amp-html/helpers/docs/amp_mustache.md)
|
File without changes
|
@@ -1,80 +0,0 @@
|
|
1
|
-
|
2
|
-
# [Components](https://github.com/slooob/amp-html/tree/master/lib/amp-html/components/docs) / Schema.org
|
3
|
-
|
4
|
-
|
5
|
-
## Information
|
6
|
-
|
7
|
-
The AMP-HTML Schema.org Component allows to easily include a Schema.org definition to get your content distributed in certain places, like the Google News Carousel.
|
8
|
-
|
9
|
-
---
|
10
|
-
|
11
|
-
### Quick info
|
12
|
-
|
13
|
-
#### Latest component release: 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
|
-
#### Requirements
|
18
|
-
|
19
|
-
The Schema.org Component does not depend on any other components.
|
20
|
-
|
21
|
-
#### Dependents
|
22
|
-
|
23
|
-
No other components depend on the Schema.org Component.
|
24
|
-
|
25
|
-
#### [DeepIntegration](https://github.com/slooob/amp-html/tree/master/lib/amp-html/components/docs#deepintegration-components): Enabled
|
26
|
-
|
27
|
-
#### [Availability](https://github.com/slooob/amp-html/tree/master/lib/amp-html/components/docs#availability-of-components): Build-in
|
28
|
-
|
29
|
-
---
|
30
|
-
|
31
|
-
## Configuration
|
32
|
-
|
33
|
-
In your AMP-HTML configuration (`config/amp-html.yml`) search for the section of the App Customization.
|
34
|
-
|
35
|
-
There you can specify some information about your app:
|
36
|
-
|
37
|
-
name: "MyApp"
|
38
|
-
type: "Organization"
|
39
|
-
date_published: "2015-10-07T12:02:41Z"
|
40
|
-
image: ["logo.jpg"]
|
41
|
-
|
42
|
-
You can override each of these values by passing a different value to the `schema_tag`.
|
43
|
-
|
44
|
-
|
45
|
-
## Usage
|
46
|
-
|
47
|
-
In your views you can setup analytics as follows:
|
48
|
-
|
49
|
-
<%= schema_tag %>
|
50
|
-
|
51
|
-
By default it takes the configured values in your AMP-HTML configuration:
|
52
|
-
|
53
|
-
<script type="application/ld+json">
|
54
|
-
{
|
55
|
-
"@context": "http://schema.org",
|
56
|
-
"@type": "Organization",
|
57
|
-
"headline": "MyApp",
|
58
|
-
"datePublished": "2015-10-07T12:02:41Z",
|
59
|
-
"image": [
|
60
|
-
"logo.jpg"
|
61
|
-
]
|
62
|
-
}
|
63
|
-
</script>
|
64
|
-
|
65
|
-
You can override values:
|
66
|
-
|
67
|
-
<%= schema_tag(headline: "Open-source framework for publishing content", type: "NewsArticle", image: ["cover.jpg"]) %>
|
68
|
-
|
69
|
-
You can also add new information:
|
70
|
-
|
71
|
-
<%= schema_tag(address: "PO Box 7775, San Francisco", email: "email@example.com") %>
|
72
|
-
|
73
|
-
Learn more about the `schema_tag` helper in the dedicated reference linked below.
|
74
|
-
|
75
|
-
|
76
|
-
### Helpers
|
77
|
-
|
78
|
-
The following helpers are usable with the Schema.org Component of AMP-HTML
|
79
|
-
|
80
|
-
* [`schema_tag`](https://github.com/slooob/amp-html/blob/master/lib/amp-html/helpers/docs/schema_tag.md)
|
@@ -1,60 +0,0 @@
|
|
1
|
-
|
2
|
-
# [Components](https://github.com/slooob/amp-html/tree/master/lib/amp-html/components/docs) / Service Worker BETA
|
3
|
-
|
4
|
-
|
5
|
-
## Information
|
6
|
-
|
7
|
-
The AMP-HTML Service Worker Component allows to install [ServiceWorker](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers)'s in AMP documents.
|
8
|
-
|
9
|
-
---
|
10
|
-
|
11
|
-
### Quick info
|
12
|
-
|
13
|
-
#### Latest component release: 0.7.2 (Pre-release) - 2017-03-22
|
14
|
-
|
15
|
-
[**Changelog for version 0.7.2**](https://github.com/slooob/amp-html/blob/master/CHANGELOG.md#072-pre-release---2017-03-22)
|
16
|
-
|
17
|
-
#### Requirements
|
18
|
-
|
19
|
-
The Service Worker Component does not depend on any other components.
|
20
|
-
|
21
|
-
#### Dependents
|
22
|
-
|
23
|
-
No other components depend on the Service Worker Component.
|
24
|
-
|
25
|
-
#### [DeepIntegration](https://github.com/slooob/amp-html/tree/master/lib/amp-html/components/docs#deepintegration-components): Disabled
|
26
|
-
|
27
|
-
#### [Availability](https://github.com/slooob/amp-html/tree/master/lib/amp-html/components/docs#availability-of-components): Installable
|
28
|
-
|
29
|
-
---
|
30
|
-
|
31
|
-
## Installation
|
32
|
-
|
33
|
-
Run in the command line:
|
34
|
-
|
35
|
-
amp-html install service_worker
|
36
|
-
|
37
|
-
Now you are ready to use the Service Worker Component.
|
38
|
-
|
39
|
-
To learn more about this component, without opening the documentation, run:
|
40
|
-
|
41
|
-
amp-html component service_worker
|
42
|
-
|
43
|
-
|
44
|
-
## Usage
|
45
|
-
|
46
|
-
In your views you can implement a ServiceWorker as follows:
|
47
|
-
|
48
|
-
<%= amp_serviceworker(register_url, install_url, options) %>
|
49
|
-
<%= amp_anim("https://www.your-domain.com/serviceworker.js", "https://www.your-domain.com/install-serviceworker.html") %>
|
50
|
-
|
51
|
-
Learn more about the `amp_serviceworker` helper in the dedicated reference linked below.
|
52
|
-
|
53
|
-
**References:** [`amp_placeholder`](https://github.com/slooob/amp-html/blob/master/lib/amp-html/helpers/docs/amp_placeholder.md)
|
54
|
-
|
55
|
-
|
56
|
-
### Helpers
|
57
|
-
|
58
|
-
The following helpers are usable with the Service Worker Component of AMP-HTML
|
59
|
-
|
60
|
-
* [`amp_serviceworker`](https://github.com/slooob/amp-html/blob/master/lib/amp-html/helpers/docs/amp_serviceworker.md)
|