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.
Files changed (191) hide show
  1. checksums.yaml +7 -0
  2. data/.github/issue_template.md +16 -0
  3. data/.github/pull_request_template.md +21 -0
  4. data/.gitignore +13 -0
  5. data/.travis.yml +4 -0
  6. data/CHANGELOG.md +302 -0
  7. data/CONTRIBUTING.md +1 -0
  8. data/DEPRECATIONS.md +9 -0
  9. data/Gemfile +12 -0
  10. data/Gemfile.lock +162 -0
  11. data/INSTALL.md +1 -0
  12. data/LICENSE +21 -0
  13. data/OWNERS.yaml +1 -0
  14. data/README.md +192 -0
  15. data/Rakefile +6 -0
  16. data/amp-html.gemspec +29 -0
  17. data/bin/amp-html +4 -0
  18. data/lib/amp_html.rb +27 -0
  19. data/lib/amp_html/cli.rb +113 -0
  20. data/lib/amp_html/components/docs/README.md +101 -0
  21. data/lib/amp_html/components/docs/ad.md +83 -0
  22. data/lib/amp_html/components/docs/analytics.md +131 -0
  23. data/lib/amp_html/components/docs/anim.md +66 -0
  24. data/lib/amp_html/components/docs/fonts.md +63 -0
  25. data/lib/amp_html/components/docs/forms.md +79 -0
  26. data/lib/amp_html/components/docs/iframe.md +62 -0
  27. data/lib/amp_html/components/docs/javascript.md +71 -0
  28. data/lib/amp_html/components/docs/lists.md +168 -0
  29. data/lib/amp_html/components/docs/media.md +52 -0
  30. data/lib/amp_html/components/docs/mustache.md +46 -0
  31. data/lib/amp_html/components/docs/notifications.md +0 -0
  32. data/lib/amp_html/components/docs/schema.md +80 -0
  33. data/lib/amp_html/components/docs/service_worker.md +60 -0
  34. data/lib/amp_html/components/docs/social.md +130 -0
  35. data/lib/amp_html/components/docs/stylesheets.md +50 -0
  36. data/lib/amp_html/components/help.rb +19 -0
  37. data/lib/amp_html/components/install.rb +34 -0
  38. data/lib/amp_html/components/templates/ERROR.md +5 -0
  39. data/lib/amp_html/components/templates/README.md +12 -0
  40. data/lib/amp_html/configuration.rb +170 -0
  41. data/lib/amp_html/configuration/docs/README.md +0 -0
  42. data/lib/amp_html/configuration/help.rb +11 -0
  43. data/lib/amp_html/helpers/docs/README.md +98 -0
  44. data/lib/amp_html/helpers/docs/amp.md +0 -0
  45. data/lib/amp_html/helpers/docs/amp_ad.md +86 -0
  46. data/lib/amp_html/helpers/docs/amp_analytics.md +76 -0
  47. data/lib/amp_html/helpers/docs/amp_anim.md +68 -0
  48. data/lib/amp_html/helpers/docs/amp_audio.md +54 -0
  49. data/lib/amp_html/helpers/docs/amp_auto_ads.md +43 -0
  50. data/lib/amp_html/helpers/docs/amp_close_user_notification_button.md +0 -0
  51. data/lib/amp_html/helpers/docs/amp_css.md +37 -0
  52. data/lib/amp_html/helpers/docs/amp_css_link.md +0 -0
  53. data/lib/amp_html/helpers/docs/amp_custom_ad.md +0 -0
  54. data/lib/amp_html/helpers/docs/amp_document_link.md +0 -0
  55. data/lib/amp_html/helpers/docs/amp_embed.md +86 -0
  56. data/lib/amp_html/helpers/docs/amp_facebook.md +70 -0
  57. data/lib/amp_html/helpers/docs/amp_fallback.md +47 -0
  58. data/lib/amp_html/helpers/docs/amp_font.md +0 -0
  59. data/lib/amp_html/helpers/docs/amp_font_link.md +0 -0
  60. data/lib/amp_html/helpers/docs/amp_form.md +0 -0
  61. data/lib/amp_html/helpers/docs/amp_form_response.md +0 -0
  62. data/lib/amp_html/helpers/docs/amp_gfycat.md +0 -0
  63. data/lib/amp_html/helpers/docs/amp_global_css.md +0 -0
  64. data/lib/amp_html/helpers/docs/amp_google_analytics.md +0 -0
  65. data/lib/amp_html/helpers/docs/amp_google_font.md +0 -0
  66. data/lib/amp_html/helpers/docs/amp_head.md +0 -0
  67. data/lib/amp_html/helpers/docs/amp_html_doctype.md +0 -0
  68. data/lib/amp_html/helpers/docs/amp_iframe.md +0 -0
  69. data/lib/amp_html/helpers/docs/amp_image.md +0 -0
  70. data/lib/amp_html/helpers/docs/amp_input.md +0 -0
  71. data/lib/amp_html/helpers/docs/amp_instagram.md +0 -0
  72. data/lib/amp_html/helpers/docs/amp_js.md +0 -0
  73. data/lib/amp_html/helpers/docs/amp_link.md +0 -0
  74. data/lib/amp_html/helpers/docs/amp_list.md +0 -0
  75. data/lib/amp_html/helpers/docs/amp_live_list.md +0 -0
  76. data/lib/amp_html/helpers/docs/amp_live_list_items.md +0 -0
  77. data/lib/amp_html/helpers/docs/amp_live_list_pagination.md +0 -0
  78. data/lib/amp_html/helpers/docs/amp_live_list_update.md +0 -0
  79. data/lib/amp_html/helpers/docs/amp_mustache.md +0 -0
  80. data/lib/amp_html/helpers/docs/amp_pin_it.md +0 -0
  81. data/lib/amp_html/helpers/docs/amp_pin_widget.md +0 -0
  82. data/lib/amp_html/helpers/docs/amp_pinterest_follow.md +0 -0
  83. data/lib/amp_html/helpers/docs/amp_pixel.md +0 -0
  84. data/lib/amp_html/helpers/docs/amp_placeholder.md +0 -0
  85. data/lib/amp_html/helpers/docs/amp_reddit.md +0 -0
  86. data/lib/amp_html/helpers/docs/amp_resources.md +0 -0
  87. data/lib/amp_html/helpers/docs/amp_selector.md +0 -0
  88. data/lib/amp_html/helpers/docs/amp_serviceworker.md +0 -0
  89. data/lib/amp_html/helpers/docs/amp_social_share.md +0 -0
  90. data/lib/amp_html/helpers/docs/amp_soundcloud.md +0 -0
  91. data/lib/amp_html/helpers/docs/amp_twitter.md +0 -0
  92. data/lib/amp_html/helpers/docs/amp_user_notification.md +0 -0
  93. data/lib/amp_html/helpers/docs/amp_video.md +0 -0
  94. data/lib/amp_html/helpers/docs/amp_video_ad.md +0 -0
  95. data/lib/amp_html/helpers/docs/amp_vine.md +0 -0
  96. data/lib/amp_html/helpers/docs/amp_youtube.md +0 -0
  97. data/lib/amp_html/helpers/docs/audio_tag.md +0 -0
  98. data/lib/amp_html/helpers/docs/canonical_document_link.md +0 -0
  99. data/lib/amp_html/helpers/docs/form_tag.md +0 -0
  100. data/lib/amp_html/helpers/docs/image_tag.md +0 -0
  101. data/lib/amp_html/helpers/docs/input_tag.md +0 -0
  102. data/lib/amp_html/helpers/docs/javascript_include_tag.md +0 -0
  103. data/lib/amp_html/helpers/docs/noscript_tag.md +0 -0
  104. data/lib/amp_html/helpers/docs/schema_tag.md +0 -0
  105. data/lib/amp_html/helpers/docs/stylesheet_link_tag.md +0 -0
  106. data/lib/amp_html/helpers/docs/video_tag.md +0 -0
  107. data/lib/amp_html/helpers/help.rb +23 -0
  108. data/lib/amp_html/root.rb +7 -0
  109. data/lib/amp_html/test.rb +169 -0
  110. data/lib/amp_html/test/help.rb +11 -0
  111. data/lib/amp_html/test/templates/README.md +43 -0
  112. data/lib/amp_html/test/templates/css/!important.md +1 -0
  113. data/lib/amp_html/test/templates/css/-amp-.md +1 -0
  114. data/lib/amp_html/test/templates/css/-moz-binding.md +1 -0
  115. data/lib/amp_html/test/templates/css/@import.md +1 -0
  116. data/lib/amp_html/test/templates/css/behavior.md +1 -0
  117. data/lib/amp_html/test/templates/css/filter.md +1 -0
  118. data/lib/amp_html/test/templates/css/i-amp-.md +1 -0
  119. data/lib/amp_html/test/templates/css/overflow.md +1 -0
  120. data/lib/amp_html/test/templates/html/applet.md +1 -0
  121. data/lib/amp_html/test/templates/html/audio.md +1 -0
  122. data/lib/amp_html/test/templates/html/base.md +1 -0
  123. data/lib/amp_html/test/templates/html/embed.md +1 -0
  124. data/lib/amp_html/test/templates/html/frame.md +1 -0
  125. data/lib/amp_html/test/templates/html/frameset.md +1 -0
  126. data/lib/amp_html/test/templates/html/http-equiv.md +1 -0
  127. data/lib/amp_html/test/templates/html/iframe.md +1 -0
  128. data/lib/amp_html/test/templates/html/img.md +1 -0
  129. data/lib/amp_html/test/templates/html/javascript_include_tag.md +1 -0
  130. data/lib/amp_html/test/templates/html/object.md +1 -0
  131. data/lib/amp_html/test/templates/html/onclick.md +1 -0
  132. data/lib/amp_html/test/templates/html/onmousehover.md +1 -0
  133. data/lib/amp_html/test/templates/html/param.md +1 -0
  134. data/lib/amp_html/test/templates/html/stylesheet_link_tag.md +1 -0
  135. data/lib/amp_html/test/templates/html/video.md +1 -0
  136. data/lib/amp_html/test/templates/markup/!doctype.md +1 -0
  137. data/lib/amp_html/test/templates/markup/amp_document_link.md +1 -0
  138. data/lib/amp_html/test/templates/markup/amp_head.md +1 -0
  139. data/lib/amp_html/test/templates/markup/amp_html_doctype.md +1 -0
  140. data/lib/amp_html/test/templates/markup/canonical_document_link.md +1 -0
  141. data/lib/amp_html/test/templates/markup/head_body.md +1 -0
  142. data/lib/amp_html/test/templates/markup/html.md +1 -0
  143. data/lib/amp_html/test/templates/markup/meta_viewport.md +1 -0
  144. data/lib/amp_html/validate.rb +46 -0
  145. data/lib/amp_html/validate/help.rb +11 -0
  146. data/lib/amp_html/validate/templates/README.md +32 -0
  147. data/lib/amp_html/version.rb +13 -0
  148. data/lib/generators/amphtml/assets_generator.rb +31 -0
  149. data/lib/generators/amphtml/bundle_generator.rb +50 -0
  150. data/lib/generators/amphtml/components_generator.rb +84 -0
  151. data/lib/generators/amphtml/helpers_generator.rb +32 -0
  152. data/lib/generators/amphtml/install_generator.rb +53 -0
  153. data/lib/generators/amphtml/views_generator.rb +62 -0
  154. data/lib/generators/templates/assets/README.md +0 -0
  155. data/lib/generators/templates/assets/stylesheets/application.scss +15 -0
  156. data/lib/generators/templates/components/README.md +0 -0
  157. data/lib/generators/templates/components/assets/javascripts/application.js +15 -0
  158. data/lib/generators/templates/components/helpers/ad_tag_helper.rb +83 -0
  159. data/lib/generators/templates/components/helpers/analytics_tag_helper.rb +30 -0
  160. data/lib/generators/templates/components/helpers/anim_tag_helper.rb +42 -0
  161. data/lib/generators/templates/components/helpers/iframe_tag_helper.rb +27 -0
  162. data/lib/generators/templates/components/helpers/javascript_tag_helper.rb +12 -0
  163. data/lib/generators/templates/components/helpers/lists_tag_helper.rb +82 -0
  164. data/lib/generators/templates/components/helpers/notification_tag_helper.rb +16 -0
  165. data/lib/generators/templates/components/helpers/serviceworker_tag_helper.rb +15 -0
  166. data/lib/generators/templates/components/helpers/social_tag_helper.rb +228 -0
  167. data/lib/generators/templates/components/public/remote.html +28 -0
  168. data/lib/generators/templates/components/views/_components.html.erb +141 -0
  169. data/lib/generators/templates/components/views/_google_analytics.html.erb +23 -0
  170. data/lib/generators/templates/helpers/README.md +1 -0
  171. data/lib/generators/templates/helpers/amp/fallback_tag_helper.rb +16 -0
  172. data/lib/generators/templates/helpers/amp/font_tag_helper.rb +37 -0
  173. data/lib/generators/templates/helpers/amp/link_tag_helper.rb +11 -0
  174. data/lib/generators/templates/helpers/amp/mustache_tag_helper.rb +13 -0
  175. data/lib/generators/templates/helpers/amp/noscript_tag_helper.rb +13 -0
  176. data/lib/generators/templates/helpers/amp/placeholder_tag_helper.rb +16 -0
  177. data/lib/generators/templates/helpers/amp/schema_tag_helper.rb +16 -0
  178. data/lib/generators/templates/helpers/amp/stylesheets_tag_helper.rb +21 -0
  179. data/lib/generators/templates/helpers/amp_tag_helper.rb.erb +65 -0
  180. data/lib/generators/templates/helpers/asset_tag_helper.rb.erb +119 -0
  181. data/lib/generators/templates/helpers/form_tag_helper.rb.erb +79 -0
  182. data/lib/generators/templates/install/README.md +1 -0
  183. data/lib/generators/templates/install/amphtml.rb.erb +19 -0
  184. data/lib/generators/templates/install/amphtml.yml.erb +189 -0
  185. data/lib/generators/templates/views/README.md +1 -0
  186. data/lib/generators/templates/views/application.html.erb +71 -0
  187. data/lib/generators/templates/views/application/_head.html.erb +47 -0
  188. data/lib/generators/templates/views/application/_resources.html.erb +16 -0
  189. data/lib/generators/templates/views/application/_schema.html.erb +6 -0
  190. data/lib/generators/templates/views/config/mime_types.rb +8 -0
  191. 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)
@@ -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)