amp-html 0.7.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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
|
@@ -0,0 +1,71 @@
|
|
|
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)
|
|
@@ -0,0 +1,168 @@
|
|
|
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)
|
|
@@ -0,0 +1,52 @@
|
|
|
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)
|
|
@@ -0,0 +1,46 @@
|
|
|
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
|
|
@@ -0,0 +1,80 @@
|
|
|
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)
|
|
@@ -0,0 +1,60 @@
|
|
|
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)
|