Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

📖 Sync recent changes from amphtml to amp.dev #5843

Merged
merged 1 commit into from
May 17, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
2 changes: 1 addition & 1 deletion .github/ISSUE_TEMPLATE/tool.md
Original file line number Diff line number Diff line change
Expand Up @@ -48,4 +48,4 @@ Insert name here
Please provide an image (min. 800x400 pixels) to appear on the [Tools](https://amp.dev/documentation/tools) page, as well as a short description (max. 100 characters).

#### 4.2 If you chose 2 in Step 4:
Please provide link(s) to your documentation page(s) on your domain and for ads, the configuration page in the [ads/](https://github.com/ampproject/amphtml/tree/master/ads) folder of the `amphtml` repository.
Please provide link(s) to your documentation page(s) on your domain and for ads, the configuration page in the [ads/](https://github.com/ampproject/amphtml/tree/main/ads) folder of the `amphtml` repository.
2 changes: 1 addition & 1 deletion examples/source/0.introduction/Hello_World.html
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
-->
<h1>Hello World!</h1>
<!--
Certain tags, such as the `<img>` tag, are replaced with equivalent or slightly enhanced custom AMP HTML tags (see [HTML Tags in the specification](https://github.com/ampproject/amphtml/blob/main/spec/amp-html-format.md)). You can use the [AMP Validator](/documentation/guides-and-tutorials/learn/validation-workflow/validate_amp) to check
Certain tags, such as the `<img>` tag, are replaced with equivalent or slightly enhanced custom AMP HTML tags (see [HTML Tags in the specification](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md)). You can use the [AMP Validator](/documentation/guides-and-tutorials/learn/validation-workflow/validate_amp) to check
if your AMP HTML file is valid AMP HTML. Simply add `#development=1` to an AMP URL. Validation errors will be printed in the Javascript console. You can try it with this website which is built with AMP.

Check out the [other examples](/documentation/examples/) to learn more about AMP.
Expand Down
2 changes: 1 addition & 1 deletion examples/source/0.introduction/Hello_World_Email.html
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@
-->
<h1 class="helloworld">Hello!</h1>
<!--
Certain tags, such as the `<img>` tag, are replaced with equivalent or slightly enhanced custom AMP HTML tags (see [HTML Tags in the specification](https://github.com/ampproject/amphtml/blob/main/spec/amp-html-format.md)).
Certain tags, such as the `<img>` tag, are replaced with equivalent or slightly enhanced custom AMP HTML tags (see [HTML Tags in the specification](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md)).
-->
<amp-img src="<% hosts.platform %>/static/samples/img/amp.jpg" width="800" height="600" layout="responsive"></amp-img>
<!--
Expand Down
2 changes: 1 addition & 1 deletion examples/source/1.components/amp-bodymovin-animation.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
## Introduction

Embed Bodymovin animations in your AMP HTML files.
The [`amp-bodymovin-animation`](/content/amp-dev/documentation/components/reference/amp-bodymovin-animation-v0.1.md) component embeds an <a href="http://airbnb.io/lottie/">AirBnB Bodymovin animation player</a>, which renders an animation from JSON generated by <a href="https://www.adobe.com/products/aftereffects.html">Adobe After Effects</a>. The doc describing this element can be found <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-bodymovin-animation/amp-bodymovin-animation.md">here</a> and the actions supported by this element can be found on the AMP Actions and Events page <a href="https://github.com/ampproject/amphtml/blob/main/spec/amp-actions-and-events.md#amp-bodymovin-animation">here</a>.
The [`amp-bodymovin-animation`](/content/amp-dev/documentation/components/reference/amp-bodymovin-animation-v0.1.md) component embeds an <a href="http://airbnb.io/lottie/">AirBnB Bodymovin animation player</a>, which renders an animation from JSON generated by <a href="https://www.adobe.com/products/aftereffects.html">Adobe After Effects</a>. The doc describing this element can be found <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-bodymovin-animation/amp-bodymovin-animation.md">here</a> and the actions supported by this element can be found on the AMP Actions and Events page <a href="https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-actions-and-events.md#amp-bodymovin-animation">here</a>.
-->
<!-- -->
<!doctype html>
Expand Down
2 changes: 1 addition & 1 deletion examples/source/1.components/amp-call-tracking.html
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
<!--
An XHR endpoint that returns a JSON response will define the phone number and how the number will be formatted.

Your XHR endpoint needs to follow and implement [CORS Requests in AMP spec](https://github.com/ampproject/amphtml/blob/main/spec/amp-cors-requests.md).
Your XHR endpoint needs to follow and implement [CORS Requests in AMP spec](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-cors-requests.md).

The following is the JSON response used in the endpoint in this example:

Expand Down
2 changes: 1 addition & 1 deletion examples/source/1.components/amp-date-picker.html
Original file line number Diff line number Diff line change
Expand Up @@ -232,7 +232,7 @@

<!-- ## Highlighted and blocked attributes -->
<!--
`amp-date-picker` supports a range of attributes, for example `highlighted` and `blocked`. Find the complete list in the official [doc](https://github.com/ampproject/amphtml/tree/master/extensions/amp-date-picker/0.1).
`amp-date-picker` supports a range of attributes, for example `highlighted` and `blocked`. Find the complete list in the official [doc](https://github.com/ampproject/amphtml/tree/main/extensions/amp-date-picker/0.1).
The `blocked` attribute allows to specify a space separated list of ISO 8601 dates and RFC 5545 RRULEs specifying disallowed dates.
The `highlighted` attributes a space separated list of ISO 8601 dates and RFC 5545 RRULEs specifying dates displayed with a highlight style.
Here every Thursday is `highlighted`, while every weekend is `blocked`.
Expand Down
2 changes: 1 addition & 1 deletion examples/source/1.components/amp-pixel.html
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@

<!-- ## Variable substitution -->
<!--
The variables noted in <a href="https://github.com/ampproject/amphtml/blob/main/spec/amp-var-substitutions.md">amp-var-substitutions</a> will be interpolated in the URL as a way to capture some meaningful data.
The variables noted in <a href="https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-var-substitutions.md">amp-var-substitutions</a> will be interpolated in the URL as a way to capture some meaningful data.
-->
<amp-pixel src="<% hosts.backend %>/tracker/foo?redirectTime=REDIRECT_TIME&sourceHost=SOURCE_HOSTNAME&viewer=VIEWER" layout="nodisplay"></amp-pixel>

Expand Down
2 changes: 1 addition & 1 deletion examples/source/1.components/amp-video-iframe.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@

With [`amp-video-iframe`](/content/amp-dev/documentation/components/reference/amp-video-iframe-v0.1.md)
you can include a custom-built video player that will obtain all the features available
in the [AMP Video Interface](https://github.com/ampproject/amphtml/blob/main/spec/amp-video-interface.md)
in the [AMP Video Interface](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-video-interface.md)

This example integrates an AMP page with a simple custom player that uses the [Video.JS](https://videojs.com/)
framework. You can use any framework or custom-built player by following the integration instructions in
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,7 @@
<!--
## Personalization and Login

An easy way to provide personalized content in AMPs is to use `amp-list`. You can either use cookies (using the attribute `credentials="include"`) or AMP's [client id](https://github.com/ampproject/amphtml/blob/main/spec/amp-var-substitutions.md#client-id):
An easy way to provide personalized content in AMPs is to use `amp-list`. You can either use cookies (using the attribute `credentials="include"`) or AMP's [client id](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-var-substitutions.md#client-id):
-->

<amp-list credentials="include" height="24" layout="fixed-height" src="/static/samples/json/product.json?clientId=CLIENT_ID(myCookieId)" binding="no" class="m1">
Expand All @@ -158,7 +158,7 @@

<!--

**Best Practice:** make sure to configure the [AMP CORS headers](https://github.com/ampproject/amphtml/blob/main/spec/amp-cors-requests.md) when using `amp-list` for personalization.
**Best Practice:** make sure to configure the [AMP CORS headers](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-cors-requests.md) when using `amp-list` for personalization.

If you rely on logged-in users, you can use the [amp-access](/documentation/components/amp-access) component to log users into your website directly from an AMP page. Check out [this sample](/documentation/examples/e-commerce/checkout_flow/) for how to implement a login flow in AMP.

Expand Down
2 changes: 1 addition & 1 deletion examples/source/e-commerce/Product_Page.html
Original file line number Diff line number Diff line change
Expand Up @@ -836,7 +836,7 @@ <h2 class="m1">Apple</h2>
amp-redirect-to:<a href="http://ampbyexample.com/shopping_cart/?clientid=amp-123456789">http://ampbyexample.com/shopping_cart/?clientid=amp-123456789</a></p>
-->

<!-- We use the `CLIENT_ID` variable to identify the user, this enables storing a shopping cart between repeated visits of an AMP page (either via the AMP Cache or the original host). This variable can be used inside an amp-form by declaring an hidden input value with `default-value="CLIENT_ID(cart)`. Read more about variable substitution [here](https://github.com/ampproject/amphtml/blob/main/spec/amp-var-substitutions.md). -->
<!-- We use the `CLIENT_ID` variable to identify the user, this enables storing a shopping cart between repeated visits of an AMP page (either via the AMP Cache or the original host). This variable can be used inside an amp-form by declaring an hidden input value with `default-value="CLIENT_ID(cart)`. Read more about variable substitution [here](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-var-substitutions.md). -->

<form id="order" method="POST"
action-xhr="/documentation/examples/e-commerce/shopping_cart/add-to-cart"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ <h1>The all-new Howdy WX-S Series</h1>

All elements with the `carousel-item` class-name have essentially the same markup.

AMP has a system in place for [events and actions](https://github.com/ampproject/amphtml/blob/main/spec/amp-actions-and-events.md). It uses a domain-specific language to describe how actions are triggered. In this example, we use the actions system in combination with `amp-bind` to keep a state variable of the current selected slide.
AMP has a system in place for [events and actions](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-actions-and-events.md). It uses a domain-specific language to describe how actions are triggered. In this example, we use the actions system in combination with `amp-bind` to keep a state variable of the current selected slide.

This is only used for transitions that are activated when the selected item slides into view. If the transition is not desired, `amp-bind` is no longer a requisite for this example.
-->
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -204,7 +204,7 @@
</div>
<!-- ## Stack -->
<!--
AMP has a system in place for [events and actions](https://github.com/ampproject/amphtml/blob/main/spec/amp-actions-and-events.md). It uses a domain-specific language to describe how actions are triggered. In this example, we set the `on` attribute so the amp-bind state changes on tap. The `selection` variable is originally undefined, which means that when it is accessed by the first time, it will fallback to zero. The remainder operation (`%`) is used so that the stack will cycle back to zero once the final element is at the top.
AMP has a system in place for [events and actions](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-actions-and-events.md). It uses a domain-specific language to describe how actions are triggered. In this example, we set the `on` attribute so the amp-bind state changes on tap. The `selection` variable is originally undefined, which means that when it is accessed by the first time, it will fallback to zero. The remainder operation (`%`) is used so that the stack will cycle back to zero once the final element is at the top.

Each stack item has a conditional class value (`[class]`) that is calculated by amp-bind. This is to determine whether each item is the topmost or the second-topmost element in the stack so it can be styled appropriately.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@
We'll use a set of radio buttons to take user input for the star ratings, because they are keyboard-accessible.
For desktop, it's nice to change the style of the previous stars when the user hovers their mouse over them. The [only](https://github.com/dandv/comparisons/blob/master/star-rating-widgets.md) pure-CSS way to affect the style of previous elements onmouseover is to list them in reverse DOM order, which is why the `<input>` elements below run from 5 to 1.

We want the form to submit as soon as the user makes a selection, without a Submit button. To do that, we'll set the [`on` attribute](https://github.com/ampproject/amphtml/blob/main/spec/amp-html-format.md#on) of the `input`s to submit the form on [`change`](/content/amp-dev/documentation/components/reference/amp-form.md#input-events).
We want the form to submit as soon as the user makes a selection, without a Submit button. To do that, we'll set the [`on` attribute](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-format.md#on) of the `input`s to submit the form on [`change`](/content/amp-dev/documentation/components/reference/amp-form.md#input-events).

The initial rating is determined by which radio button has the `checked` attribute set. This is optional. -->
<form id="rating" method="post" action-xhr="<% base_path %>/set" target="_blank">
Expand Down
2 changes: 1 addition & 1 deletion examples/source/style-layout/Carousel_Ad.html
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@

All elements with the `carousel-item` class-name have essentially the same markup: one container that activates the lightbox, an image, and a button.

AMP has a system in place for [events and actions](https://github.com/ampproject/amphtml/blob/main/spec/amp-actions-and-events.md). It uses a domain-specific language to describe how actions are triggered. In this example, we set the `on` attribute so the lightbox will activate when a carousel item is tapped. Each button will also toggle the visibility of specific items in the lightbox (see `show` and `hide`).
AMP has a system in place for [events and actions](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-actions-and-events.md). It uses a domain-specific language to describe how actions are triggered. In this example, we set the `on` attribute so the lightbox will activate when a carousel item is tapped. Each button will also toggle the visibility of specific items in the lightbox (see `show` and `hide`).
-->
<amp-carousel
height="132"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@

## Object-Fit to the rescue

We can solve this problem by combining AMP's [fill layout](https://github.com/ampproject/amphtml/blob/main/spec/amp-html-layout.md) with the [object-fit]( https://css-tricks.com/almanac/properties/o/object-fit/) CSS property. The `object-fit` property helps us ensure that the image maintains its aspect ratio while being resized via the `fill` layout.
We can solve this problem by combining AMP's [fill layout](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-html-layout.md) with the [object-fit]( https://css-tricks.com/almanac/properties/o/object-fit/) CSS property. The `object-fit` property helps us ensure that the image maintains its aspect ratio while being resized via the `fill` layout.

First we need to define a container to constrain the maximum size of the image, e.g.:

Expand Down
2 changes: 1 addition & 1 deletion examples/source/style-layout/Lightbox_Ad.html
Original file line number Diff line number Diff line change
Expand Up @@ -219,7 +219,7 @@
<amp-ad-banner class="root-container" layout="container">
<!-- ## Cards -->
<!--
AMP has a system in place for [events and actions](https://github.com/ampproject/amphtml/blob/main/spec/amp-actions-and-events.md). It uses a domain-specific language to describe how actions are triggered. In this example, we set the `on` attribute so the lightbox will activate when a card button is tapped.
AMP has a system in place for [events and actions](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-actions-and-events.md). It uses a domain-specific language to describe how actions are triggered. In this example, we set the `on` attribute so the lightbox will activate when a card button is tapped.

Each button opens the lightbox related to the card that triggers it.
-->
Expand Down
2 changes: 1 addition & 1 deletion examples/source/visual-effects/Scroll_to_top.html
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,7 @@ <h3 class="target">
<div class="spacer"></div>
<!--## The scroll to top button -->
<!--
We use the `scrollTo` action to scroll the page when the button is tapped. Find more about actions [here](https://github.com/ampproject/amphtml/blob/main/spec/amp-actions-and-events.md).
We use the `scrollTo` action to scroll the page when the button is tapped. Find more about actions [here](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-actions-and-events.md).
-->
<button id="scrollToTopButton" on="tap:top.scrollTo(duration=200)" class="scrollToTop">⌃</button>

Expand Down
2 changes: 1 addition & 1 deletion pages/content/amp-dev/community/governance.md
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ The Advisory Committee provides perspective and advice to the Technical Steering

#### Role <a name="role-2"></a>
* A Working Group is a segment of the community with knowledge/interest in specific areas of AMP (e.g. UI, Runtime, Infrastructure, documentation) recognized by the TSC.
* The TSC defines each Working Group's mandate, which may include responsibility for certain AMP features, systems and/or code. A Working Group generally operates independently on the area(s) in which it has a mandate while adhering to AMP's [project guidelines](https://github.com/ampproject/amphtml/tree/master/contributing), [vision/mission](https://www.ampproject.org/about/mission/) and [technical/product roadmaps](https://github.com/ampproject/amphtml/projects/43).
* The TSC defines each Working Group's mandate, which may include responsibility for certain AMP features, systems and/or code. A Working Group generally operates independently on the area(s) in which it has a mandate while adhering to AMP's [project guidelines](https://github.com/ampproject/amphtml/tree/main/contributing), [vision/mission](https://www.ampproject.org/about/mission/) and [technical/product roadmaps](https://github.com/ampproject/amphtml/projects/43).
* Each Working Group is made up of a set of Collaborators with knowledge/interest in that particular area + other interested parties.
* Each Working Group's Facilitator is responsible for:
* Facilitating consensus-based decisions within the Working Group.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -229,7 +229,7 @@ limitations under the License.

### متغيرات عناوين URL للوصول <a name="access-url-variables"></a>

عند تهيئة عناوين URL لنقاط النهاية المختلفة، يمكن للناشر استخدام متغيرات الاستبدال. يمكن العثور على قائمة كاملة بتعريفات هذه المتغيرات في [مواصفات متغيرات AMP](https://github.com/ampproject/amphtml/blob/main/spec/amp-var-substitutions.md). بالإضافة إلى هذا، تزيد هذه المواصفات متغيرات خاصة بالوصول، مثل `READER_ID` و`AUTHDATA`. يوضّح الجدول أدناه بعضًا من أكثر المتغيرات صلة:
عند تهيئة عناوين URL لنقاط النهاية المختلفة، يمكن للناشر استخدام متغيرات الاستبدال. يمكن العثور على قائمة كاملة بتعريفات هذه المتغيرات في [مواصفات متغيرات AMP](https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-var-substitutions.md). بالإضافة إلى هذا، تزيد هذه المواصفات متغيرات خاصة بالوصول، مثل `READER_ID` و`AUTHDATA`. يوضّح الجدول أدناه بعضًا من أكثر المتغيرات صلة:

<table>
<tr>
Expand Down
Loading