diff --git a/extensions/amp-list/amp-list.md b/extensions/amp-list/amp-list.md index ea05821d6b929..43e6133f08b95 100644 --- a/extensions/amp-list/amp-list.md +++ b/extensions/amp-list/amp-list.md @@ -532,7 +532,7 @@ Defines a `credentials` option as specified by the [Fetch API](https://fetch.spe - Supported values: `omit`, `include` - Default: `omit` -To send credentials, pass the value of `include`. If this value is set, the response must follow the [AMP CORS security guidelines](https://www.ampproject.org/docs/fundamentals/amp-cors-requests#cors-security-in-amp). +To send credentials, pass the value of `include`. If this value is set, the response must follow the [AMP CORS security guidelines](https://amp.dev/documentation/guides-and-tutorials/learn/amp-caches-and-cors/amp-cors-requests/#cors-security-in-amp). Here's an example that specifies including credentials to display personalized content in a list: diff --git a/extensions/amp-render/amp-render.md b/extensions/amp-render/amp-render.md index 96b9227f9dac1..ed8fd7e08dd7a 100644 --- a/extensions/amp-render/amp-render.md +++ b/extensions/amp-render/amp-render.md @@ -1,3 +1,233 @@ +--- +$category@: dynamic-content +formats: + - websites +teaser: + text: Renders remote or inline data using a template. +--- + + +# amp-render + + + +## Usage + +The `amp-render` component renders content in a specified template. It can fetch content from a CORS JSON endpoint or inline from `amp-state` or `amp-script`. + +[tip type="important"] +Your endpoint must implement the requirements specified in the [CORS Requests in AMP](https://amp.dev/documentation/guides-and-tutorials/learn/amp-caches-and-cors/amp-cors-requests) spec. +[/tip] + +You can specify a template in one of two ways: + +- a `template` attribute that references an ID of an existing templating element. + +```html + + + +``` + +- a templating element nested directly inside the `amp-render` element. + +```html + + + +``` + +For more details on templates, see [AMP HTML Templates](../../docs/spec/amp-html-templates.md). + + + +### XHR batching + +AMP batches XMLHttpRequests (XHRs) to JSON endpoints. This lets you use a single JSON request as a data source for multiple elements on an AMP page. For example, if your `` makes an XHR to an endpoint, while the XHR is in flight, all subsequent XHRs to the same endpoint won't trigger and will instead return the results from the first XHR. + +### Placeholder and fallback + +`` supports an optional placeholder and/or fallback. + +- A _placeholder_ is a child element with the `placeholder` attribute. This element is shown until the `` loads successfully. If a fallback is also provided, the placeholder is hidden when the `` fails to load. +- A _fallback_ is a child element with the `fallback` attribute. This element is shown if the `` fails to load. + +Learn more in [Placeholders & Fallbacks](https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/placeholders). Note that a child element cannot be both a placeholder and a fallback. + +```html + +
Loading ...
+
Failed to load data.
+
+``` + +### Refreshing data + +The `` element exposes a `refresh` action that other elements can reference in `on="tap:..."` attributes. + +```html + + + + +``` + +### Substitutions + +`` allows all standard URL variable substitutions. +See the [Substitutions Guide](../../docs/spec/amp-var-substitutions.md) for more info. + +For example: + +```html + +``` + +may make a request to something like `https://foo.com/list.json?0.8390278471201` where the RANDOM value is randomly generated upon each impression. + +## Attributes + +### `src` (required) + +The URL of the remote endpoint that returns the JSON that will be rendered +within this ``. There are three valid protocols for the `src` attribute. + +1. **https**: This must refer to a CORS HTTP service. Insecure HTTP is not supported. +2. **amp-state**: For initializing from `` data. See [Initialization from ``](#initialization-from-amp-state) for more details. +3. **amp-script**: For using `` functions as the data source. See [Using `` as a data source](#using-amp-script-as-a-data-source) for more details. + +[tip type="important"] +Your endpoint must implement the requirements specified in the [CORS Requests in AMP](https://www.ampproject.org/docs/fundamentals/amp-cors-requests) spec. +[/tip] + +The `src` attribute may be omitted if the `[src]` attribute exists. `[src]` supports URL and non-URL expression values. + +### `credentials` + +Defines a `credentials` option as specified by the [Fetch API](https://fetch.spec.whatwg.org/). + +- Supported values: `omit`, `include` +- Default: `omit` + +To send credentials, pass the value of `include`. If this value is set, the response must follow the [AMP CORS security guidelines](https://amp.dev/documentation/guides-and-tutorials/learn/amp-caches-and-cors/amp-cors-requests/#cors-security-in-amp). + +The example below uses the "include" value in `credentials` to display personalized content: + +```html + + + +``` + +### `xssi-prefix` + +Causes `` to strip a prefix from the fetched JSON before parsing. This can be useful for APIs that include [security prefixes](http://patorjk.com/blog/2013/02/05/crafty-tricks-for-avoiding-xssi/) like `)]}` to help prevent cross site scripting attacks. + +For example, let's say we had an API that returned this response: + +```json +)]}{ "items": ["value"] } +``` + +We could instruct `amp-render` to remove the security prefix like so: + +```html + +``` + +### `key` + +Defines the expression to locate the sub-object to be rendered within the response. For example, let's say we had an API that returned this response: + +```json +{ + "automobiles": { + "cars": { + "german": { + "make": "BMW", + "model": "M3" + }, + "american": { + "make": "Tesla", + "model": "Model X" + } + } + } +} +``` + +If we just want to display the German cars from the response, we can use the `key` attribute. + +```html + + + +``` + +### `binding` + +Controls wheather to render on binding evaluations (e.g. `[text]`) in children on pages using `amp-render` and `amp-bind`. + +- `binding="no"`: Never block render **(faster)**. +- `binding="refresh"`: Don't block render on initial load **(slower)**. + +If `binding` attribute is not provided, default is `refresh`. + +### Common attributes + +This element includes [common attributes](https://amp.dev/documentation/guides-and-tutorials/learn/common_attributes) extended to AMP components. + +## Actions + +The `` element exposes a `refresh` action that other elements can reference in `on="tap:..."` attributes. + +```html + + + + +``` + +## Accessibility + +For `amp-render` instances that do not have an aria-live attribute, `aria-live="polite"` will be added so any changes to the content are announced by screen readers. To override the addition of `aria-live="polite"`, add `aria-live="off"`. + +## Validation + +See [amp-render rules](https://github.com/ampproject/amphtml/blob/main/extensions/amp-render/validator-amp-render.protoascii) in the AMP validator specification.