amp-html 0.7.7

data/lib/amp_html/components/docs/ad.md

@@ -0,0 +1,83 @@
+
+# [Components](https://github.com/slooob/amp-html/tree/master/lib/amp-html/components/docs) / Advertisements BETA
+
+
+## Information
+
+The AMP-HTML Advertisement Component allows to easily embed ads with AMP, not hurting performance.
+
+---
+
+### Quick info
+
+#### Latest component release: 0.6.2 (Pre-release) - 2017-03-20
+
+[**Changelog for version 0.6.2**](https://github.com/slooob/amp-html/blob/master/CHANGELOG.md#062-pre-release---2017-03-20)
+
+#### Requirements
+
+The Advertisement Component does not depend on any other components.
+
+#### Dependents
+
+No other components depend on the Advertisement Component.
+
+#### [DeepIntegration](https://github.com/slooob/amp-html/tree/master/lib/amp-html/components/docs#deepintegration-components): Enabled
+
+#### [Availability](https://github.com/slooob/amp-html/tree/master/lib/amp-html/components/docs#availability-of-components): Installable
+
+---
+
+## Installation
+
+Run in the command line:
+
+    amp-html install ad
+
+Now you are ready to use the Advertisement Component.
+
+To learn more about this component, without opening the documentation, run:
+
+    amp-html component ad
+
+
+## Configuration
+
+The Advertisement Component allows you to specify a default advertisement network for your app.
+
+In your AMP-HTML configuration (`config/amp-html.yml`) search for the section of the Advertisement Component.
+
+There you can set your default network like so:
+
+    default_network: mywidget
+
+You can always override this network default by passing a different network to your advertisement integration in your view.
+
+A list of all by AMP supported advertisement networks: https://www.ampproject.org/docs/reference/components/ads/amp-ad#supported-ad-networks
+
+
+## Usage
+
+In your views you can add an advertisement as follows:
+
+    <%= amp_ad(network) %>
+    <%= amp_ad("mywidget", width: 300, height: 250, data: { aax_size: "300x250", aax_pubname: "test123", aax_src: "302" }) %>
+
+Learn more about the `amp_ad` helper in the dedicated reference linked below.
+
+### Auto Ads
+
+To dynamically inject ads via a remotely-served configuration file use:
+
+    <%= amp_auto_ads(type) %>
+    <%= amp_auto_ads("adsense", data: { ad: { client: "ca-pub-5439573510495356" } }) %>
+
+
+### Helpers
+
+The following helpers are usable with the Advertisement Component of AMP-HTML
+
+* [`amp_ad`](https://github.com/slooob/amp-html/blob/master/lib/amp-html/helpers/docs/amp_ad.md)
+* [`amp_embed`](https://github.com/slooob/amp-html/blob/master/lib/amp-html/helpers/docs/amp_embed.md)
+* [`amp_auto_ads`](https://github.com/slooob/amp-html/blob/master/lib/amp-html/helpers/docs/amp_auto_ads.md)
+* [`amp_custom_ad`](https://github.com/slooob/amp-html/blob/master/lib/amp-html/helpers/docs/amp_custom_ad.md)

data/lib/amp_html/components/docs/analytics.md

@@ -0,0 +1,131 @@
+
+# [Components](https://github.com/slooob/amp-html/tree/master/lib/amp-html/components/docs) / Analytics BETA
+
+
+## Information
+
+The AMP-HTML Analytics Component allows to integrate with venders to measure activity on AMP documents.
+
+---
+
+### Quick info
+
+#### Latest component release: 0.6.2 (Pre-release) - 2017-03-20
+
+[**Changelog for version 0.6.2**](https://github.com/slooob/amp-html/blob/master/CHANGELOG.md#062-pre-release---2017-03-20)
+
+#### Requirements
+
+The Analytics Component does not depend on any other components.
+
+#### Dependents
+
+The [AMP-HTML Notifications Component](https://github.com/slooob/amp-html/tree/master/lib/amp-html/components/docs/notifications.md) depends on the Analytics Component.
+
+#### [DeepIntegration](https://github.com/slooob/amp-html/tree/master/lib/amp-html/components/docs#deepintegration-components): Enabled
+
+#### [Availability](https://github.com/slooob/amp-html/tree/master/lib/amp-html/components/docs#availability-of-components): Installable
+
+---
+
+## Installation
+
+Run in the command line:
+
+    amp-html install analytics
+
+Now you are ready to use the Analytics Component.
+
+To learn more about this component, without opening the documentation, run:
+
+    amp-html component analytics
+
+
+## Configuration
+
+The Analytics Component allows you to specify a default analytics vendor for your app.
+
+In your AMP-HTML configuration (`config/amp-html.yml`) search for the section of the Analytics Component.
+
+There you can set your default network like so:
+
+    default_vendor: parsely
+
+You can always override this vendor default by passing a different vendor to your analytics integration in your view.
+
+A list of all by AMP supported analytics vendors: https://www.ampproject.org/docs/reference/components/ads/amp-analytics#analytics-vendors
+
+### Google Analytics
+
+With DeepIntegration you can also easily setup your **Google Analytics** account.
+
+Therefore configure your Google Analytics id in your AMP-HTML configuration:
+
+    google_analytics:
+        account: UA-*****-*
+
+
+## Usage
+
+In your views you can setup analytics as follows:
+
+    <%= amp_analytics(vendor) %>
+    <%= amp_analytics do %>
+        <script type="application/json">
+            {
+                "requests": {
+                    "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}",
+                    "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
+                },
+                "vars": {
+                    "account": "ABC123"
+                },
+                "triggers": {
+                    "trackPageview": {
+                        "on": "visible",
+                        "request": "pageview"
+                    },
+                    "trackAnchorClicks": {
+                        "on": "click",
+                        "selector": "a",
+                        "request": "event",
+                        "vars": {
+                            "eventId": "42",
+                            "eventLabel": "clicked on a link"
+                        }
+                    }
+                }
+            }
+        </script>
+    <% end %>
+
+To learn how to setup analytics for a specific vendor, reference the AMP documentation: https://www.ampproject.org/docs/reference/components/ads/amp-analytics#analytics-vendors
+
+Learn more about the `amp_analytics` helper in the dedicated reference linked below.
+
+### Google Analytics
+
+To setup Google Analytics, you need to first set your account in the AMP-HTML configuration. Then add to your view:
+
+    <%= amp_google_analytics %>
+
+By default the component just listens for pageviews. You can also set complex triggers:
+
+    <%= amp_google_analytics(triggers: { "trackPageviewWithCustomUrl": { on: "visible", request: "pageview", vars: { title: "My page", document_location: "https://www.examplepetstore.com/pets.html" } } }) %>
+
+Learn more about creating triggers for Google Analytics: https://developers.google.com/analytics/devguides/collection/amp-analytics/
+
+### AMP Pixel
+
+You can use the `amp_pixel` helper to track user behavior on your site:
+
+    <%= amp_pixel("https://foo.com/pixel?RANDOM") %>
+
+
+### Helpers
+
+The following helpers are usable with the Analytics Component of AMP-HTML
+
+* [`amp_analytics`](https://github.com/slooob/amp-html/blob/master/lib/amp-html/helpers/docs/amp_analytics.md)
+* [`amp_google_analytics`](https://github.com/slooob/amp-html/blob/master/lib/amp-html/helpers/docs/amp_google_analytics.md)
+* [`amp_pixel`](https://github.com/slooob/amp-html/blob/master/lib/amp-html/helpers/docs/amp_pixel.md)

data/lib/amp_html/components/docs/anim.md

@@ -0,0 +1,66 @@
+
+# [Components](https://github.com/slooob/amp-html/tree/master/lib/amp-html/components/docs) / Animated Images BETA
+
+
+## Information
+
+The AMP-HTML Animated Images Component allows to use runtime-managed animated images, typically GIF's, in AMP documents.
+
+---
+
+### Quick info
+
+#### Latest component release: 0.6.1 (Pre-release) - 2017-03-19
+
+[**Changelog for version 0.6.1**](https://github.com/slooob/amp-html/blob/master/CHANGELOG.md#061-pre-release---2017-03-19)
+
+#### Requirements
+
+The Animated Images Component does not depend on any other components.
+
+#### Dependents
+
+No other components depend on the Animated Images Component.
+
+#### [DeepIntegration](https://github.com/slooob/amp-html/tree/master/lib/amp-html/components/docs#deepintegration-components): Disabled
+
+#### [Availability](https://github.com/slooob/amp-html/tree/master/lib/amp-html/components/docs#availability-of-components): Installable
+
+---
+
+## Installation
+
+Run in the command line:
+
+    amp-html install anim
+
+Now you are ready to use the Animated Images Component.
+
+To learn more about this component, without opening the documentation, run:
+
+    amp-html component anim
+
+
+## Usage
+
+In your views you can implement an animated image as follows:
+
+    <%= amp_anim(source) %>
+    <%= amp_anim("my-gif.gif", width: 400, height: 300, placeholder: "my-gif-screencap.jpg") %>
+
+It also takes a block. For example, you could use the built-in `amp_placeholder` helper to achieve the same:
+
+    <%= amp_anim("my-gif.gif", width: 400, height: 300) do %>
+        <%= amp_placeholder("amp-anim", width: 400, height: 300, src: "my-gif-screencap.jpg") %>
+    <% end %>
+
+Learn more about the `amp_anim` helper in the dedicated reference linked below.
+
+**References:** [`amp_placeholder`](https://github.com/slooob/amp-html/blob/master/lib/amp-html/helpers/docs/amp_placeholder.md)
+
+
+### Helpers
+
+The following helpers are usable with the Animated Images Component of AMP-HTML
+
+* [`amp_anim`](https://github.com/slooob/amp-html/blob/master/lib/amp-html/helpers/docs/amp_anim.md)

data/lib/amp_html/components/docs/fonts.md

@@ -0,0 +1,63 @@
+
+# [Components](https://github.com/slooob/amp-html/tree/master/lib/amp-html/components/docs) / Fonts BETA
+
+
+## Information
+
+The AMP-HTML Fonts Component allows to include stylesheets for custom fonts without using `@font-face`.
+
+---
+
+### Quick info
+
+#### Latest component release: 0.6.1 (Pre-release) - 2017-03-19
+
+[**Changelog for version 0.6.1**](https://github.com/slooob/amp-html/blob/master/CHANGELOG.md#061-pre-release---2017-03-19)
+
+#### Requirements
+
+The Fonts Component does not depend on any other components.
+
+#### Dependents
+
+No other components depend on the Fonts Component.
+
+#### [DeepIntegration](https://github.com/slooob/amp-html/tree/master/lib/amp-html/components/docs#deepintegration-components): Disabled
+
+#### [Availability](https://github.com/slooob/amp-html/tree/master/lib/amp-html/components/docs#availability-of-components): Build-in
+
+---
+
+## Usage
+
+In your views you include a custom font as follows:
+
+    <%= amp_font_link(href) %>
+    <%= amp_font_link("https://fonts.googleapis.com/css?family=Roboto") %>
+
+**Note:** Font providers need to be whitelisted. All whitelisted font providers: https://github.com/ampproject/amp-html/blob/master/spec/amp-html-format.md#custom-fonts
+
+Learn more about the `amp_font_link` helper in the dedicated reference linked below.
+
+### Google Fonts
+
+AMP-HTML offers an easy-to-use integration of Google Fonts.
+
+You can include any font of https://fonts.google.com as follows:
+
+    <%= amp_google_font(family) %>
+    <%= amp_google_font("Roboto") %>
+
+This will only serve the default width and style. You can be more specific:
+
+    <%= amp_google_font("Roboto", [100i,400,900]) %>
+
+Learn more about the `amp_google_font` helper in the dedicated reference linked below.
+
+
+### Helpers
+
+The following helpers are usable with the Fonts Component of AMP-HTML
+
+* [`amp_font_link`](https://github.com/slooob/amp-html/blob/master/lib/amp-html/helpers/docs/amp_font_link.md)
+* [`amp_google_font`](https://github.com/slooob/amp-html/blob/master/lib/amp-html/helpers/docs/amp_google_font.md)

data/lib/amp_html/components/docs/forms.md

@@ -0,0 +1,79 @@
+
+# [Components](https://github.com/slooob/amp-html/tree/master/lib/amp-html/components/docs) / Forms BETA
+
+
+## Information
+
+The AMP-HTML Forms Component allows the use of forms and input tags in AMP documents.
+
+---
+
+### Quick info
+
+#### Latest component release: 0.7.1 (Pre-release) - 2017-03-21
+
+[**Changelog for version 0.7.1**](https://github.com/slooob/amp-html/blob/master/CHANGELOG.md#071-pre-release---2017-03-21)
+
+#### Requirements
+
+The Forms Component depends on the [AMP-HTML Mustache.js Component](https://github.com/slooob/amp-html/tree/master/lib/amp-html/components/docs/mustache.md).
+
+#### Dependents
+
+No other components depend on the Forms Component.
+
+#### [DeepIntegration](https://github.com/slooob/amp-html/tree/master/lib/amp-html/components/docs#deepintegration-components): Enabled
+
+#### [Availability](https://github.com/slooob/amp-html/tree/master/lib/amp-html/components/docs#availability-of-components): Build-in
+
+---
+
+## Configuration
+
+The Forms Component allows you to specify a whether you want to use [`amp_selector`](https://github.com/slooob/amp-html/blob/master/lib/amp-html/helpers/docs/amp_selector.md) or not.
+
+In your AMP-HTML configuration (`config/amp-html.yml`) search for the section of the Forms Component.
+
+There you can enable the helper like so:
+
+    amp_selector: true
+
+
+## Usage
+
+
+**Important note:** In AMP documents you can neither use the default `font_tag` helper, nor a helper provided by `simple_form` or similar.
+
+You can create forms in your views as follows:
+
+    <%= amp_form("https://example.com/subscribe", "post", id: "myform") do %>
+        <fieldset>
+            <label>
+                <span>Your name</span>
+                <%= amp_input("text", "type your name", "name", "myform.submit") %>
+            </label>
+            <label>
+                <span>Your email</span>
+                <%= amp_input("email", "type your email", "email", "myform.submit") %>
+            </label>
+            <%= amp_input("submit", value: "Subscribe") %>
+        </fieldset>
+        <%= amp_form_response("error") %>Subscription failed!<% end %>
+        <%= amp_form_response %>Subscription successful!<% end %>
+    <% end %>
+
+**Note:** `POST` forms are submitted via AJAX by default. To submit `GET` forms via AJAX pass `ajax: true` to `amp_form` as parameter.
+
+For a detailed reference on the `amp_form`, `amp_input` and `amp_form_response` helpers, follow the links below.
+
+
+### Helpers
+
+The following helpers are usable with the Forms Component of AMP-HTML
+
+* [`amp_form`](https://github.com/slooob/amp-html/blob/master/lib/amp-html/helpers/docs/amp_form.md)
+* [`amp_input`](https://github.com/slooob/amp-html/blob/master/lib/amp-html/helpers/docs/amp_input.md)
+* [`amp_selector`](https://github.com/slooob/amp-html/blob/master/lib/amp-html/helpers/docs/amp_selector.md)
+* [`amp_form_response`](https://github.com/slooob/amp-html/blob/master/lib/amp-html/helpers/docs/amp_form_response.md)
+* [`form_tag`](https://github.com/slooob/amp-html/blob/master/lib/amp-html/helpers/docs/form_tag.md)
+* [`input_tag`](https://github.com/slooob/amp-html/blob/master/lib/amp-html/helpers/docs/input_tag.md)

data/lib/amp_html/components/docs/iframe.md

@@ -0,0 +1,62 @@
+
+# [Components](https://github.com/slooob/amp-html/tree/master/lib/amp-html/components/docs) / Iframe BETA
+
+
+## Information
+
+The AMP-HTML Iframe Component allows to use iframes similar to the HTML `<iframe>` tag in AMP documents.
+
+---
+
+### Quick info
+
+#### Latest component release: 0.4.1 (Pre-release) - 2017-03-16
+
+[**Changelog for version 0.4.1**](https://github.com/slooob/amp-html/blob/master/CHANGELOG.md#041-pre-release---2017-03-16)
+
+#### Requirements
+
+The Iframe Component does not depend on any other components.
+
+#### Dependents
+
+The [AMP-HTML Javascript Component](https://github.com/slooob/amp-html/tree/master/lib/amp-html/components/docs/javascript.md) depends on the Iframe Component.
+
+The [AMP-HTML Service Worker Component](https://github.com/slooob/amp-html/tree/master/lib/amp-html/components/docs/service_worker.md) depends on the Iframe Component.
+
+#### [DeepIntegration](https://github.com/slooob/amp-html/tree/master/lib/amp-html/components/docs#deepintegration-components): Disabled
+
+#### [Availability](https://github.com/slooob/amp-html/tree/master/lib/amp-html/components/docs#availability-of-components): Installable
+
+---
+
+## Installation
+
+Run in the command line:
+
+    amp-html install iframe
+
+Now you are ready to use the Iframe Component.
+
+To learn more about this component, without opening the documentation, run:
+
+    amp-html component iframe
+
+
+## Usage
+
+In your views you can create an iframe as follows:
+
+    <%= amp_iframe(source) %>
+    <%= amp_iframe("https://railsamp.com", width: 300, height: 300, sandbox: "allow-scripts allow-same-origin") %>
+
+**Note:** `amp_iframe` must only request resources via HTTPS or from a data-URI or via the `srcdoc` attribute.
+
+Learn more about the `amp_iframe` helper in the dedicated reference linked below.
+
+
+### Helpers
+
+The following helpers are usable with the Iframe Component of AMP-HTML
+
+* [`amp_iframe`](https://github.com/slooob/amp-html/blob/master/lib/amp-html/helpers/docs/amp_iframe.md)