Skip to content

Commit

Permalink
Updates amp-story attributes to be formatted as a table. (#24962)
Browse files Browse the repository at this point in the history
  • Loading branch information
@cpauwels @gmajoulet
cpauwels authored and gmajoulet committed Oct 8, 2019
1 parent 13d93a8 commit 61432c2
Showing 1 changed file with 53 additions and 50 deletions.
103 changes: 53 additions & 50 deletions extensions/amp-story/amp-story.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,53 +173,56 @@ The `amp-story` component represents an entire story. The component itself imp

### Attributes

##### standalone [required]

Identifies that the AMP document is a story.

##### title [required]

The title of the story.

##### publisher [required]

The name of the story's publisher.

##### publisher-logo-src [required]

A URL to the story publisher's logo in square format (1x1 aspect ratio). For example `publisher-logo-src="https://example.com/logo/1x1.png"`, where 1x1.png is a 96x96 px logo.

##### poster-portrait-src [required]

A URL to the [story poster](#posters) in portrait format (3x4 aspect ratio).

##### supports-landscape [optional]

Enables landscape orientation support on mobile devices and a full bleed landscape experience on desktop devices.

##### background-audio [optional]

A URL to an audio file that plays throughout the story.

##### poster-square-src [optional]

A URL to the [story poster](#posters) in square format (1x1 aspect ratio).

##### poster-landscape-src [optional]

A URL to the [story poster](#posters) in landscape format (4x3 aspect ratio).

##### live-story [optional]

Enables the [Live story](#Live-story) functionality.

##### live-story-disabled [optional]

Disables the [Live story](#Live-story) functionality.

##### data-poll-interval [optional]

Used with the live-story attribute. Time interval (in milliseconds) between checks for new content. If no `data-poll-interval` is provided it with default to the 15000 millisecond minimum. A value under 15000 milliseconds is invalid.
<table>
<tr id="standalone">
<td width="40%"><strong">standalone [required]</strong></td>
<td>Identifies that the AMP document is a story.</td>
</tr>
<tr id="title">
<td width="40%"><strong>title [required]</strong></td>
<td>The title of the story.</td>
</tr>
<tr id="publisher">
<td width="40%"><strong>publisher [required]</strong></td>
<td>The name of the story's publisher.</td>
</tr>
<tr id="publisher-logo-src">
<td width="40%"><strong>publisher-logo-src [required]</strong></td>
<td>A URL to the story publisher's logo in square format (1x1 aspect ratio). For example <code>publisher-logo-src="https://example.com/logo/1x1.png"</code>, where 1x1.png is a 96x96 px logo.</td>
</tr>
<tr id="poster-portrait-src">
<td width="40%"><strong>poster-portrait-src [required]</strong></td>
<td>A URL to the <a href="#posters">story poster</a> in portrait format (3x4 aspect ratio).</td>
</tr>
<tr id="poster-square-src">
<td width="40%"><strong>poster-square-src [required]</strong></td>
<td>A URL to the <a href="#posters">story poster</a> in square format (1x1 aspect ratio).</td>
</tr>
<tr id="poster-landscape-src">
<td width="40%"><strong>poster-landscape-src [required]</strong></td>
<td>A URL to the <a href="#posters">story poster</a> in landscape format (4x3 aspect ratio).</td>
</tr>
<tr id="supports-landscape">
<td width="40%"><strong>supports-landscape [optional]</strong></td>
<td>Enables landscape orientation support on mobile devices and a full bleed landscape experience on desktop devices.</td>
</tr>
<tr id="background-audio">
<td width="40%"><strong>background-audio [optional]</strong></td>
<td>A URL to an audio file that plays throughout the story.</td>
</tr>
<tr id="live-story">
<td width="40%"><strong>live-story [optional]</strong></td>
<td>Enables the <a href="#Live-story">Live story</a> functionality.</td>
</tr>
<tr id="live-story-disabled">
<td width="40%"><strong>live-story-disabled [optional]</strong></td>
<td>Disables the <a href="#Live-story">Live story</a> functionality.</td>
</tr>
<tr id="data-poll-interval">
<td width="40%"><strong>data-poll-interval [optional]</strong></td>
<td>Used with the <code>live-story</code> attribute. Time interval (in milliseconds) between checks for new content. If no <code>data-poll-interval</code> is provided it with default to the 15000 millisecond minimum. A value under 15000 milliseconds is invalid.</td>
</tr>
</table>

### Metadata guidelines

Expand Down Expand Up @@ -337,7 +340,7 @@ In most implementations for live blogs, content is either pushed by the server t

This means that publishers of stories do not need to set up a JSON endpoint or push mechanism for this functionality to work.

Content is updated by publishing to the same URL with valid `<amp-story>` markup. The content is pulled into the user's client instance during the next poll. Poll intervals are configurable using the [`data-poll-interval`](#data-poll-interval-[optional]) attribute.
Content is updated by publishing to the same URL with valid `<amp-story>` markup. The content is pulled into the user's client instance during the next poll. Poll intervals are configurable using the [`data-poll-interval`](#data-poll-interval) attribute.

#### Stop polling

Expand All @@ -347,8 +350,8 @@ As long as the `live-story` attribute is present on the `<amp-story>` element, t

* Specify an `id` on the `<amp-story>` element.
* Add the `live-story` attribute to the `<amp-story>` element.
* [Optional] Add the [`data-poll-interval`](#data-poll-interval-[optional]) attribute to the `<amp-story>` element to specify a time interval for checking for new updates.
* [Optional] When finishing the live broadcast, add the [`live-story-disabled`](#live-story-disabled-[optional]) attribute to the `<amp-story>` element to disable the polling.
* [Optional] Add the [`data-poll-interval`](#data-poll-interval) attribute to the `<amp-story>` element to specify a time interval for checking for new updates.
* [Optional] When finishing the live broadcast, add the [`live-story-disabled`](#live-story-disabled) attribute to the `<amp-story>` element to disable the polling.
* On each `<amp-story-page>`:
* Specify a `data-sort-time` attribute with a valid value. This is a timestamp used for sorting the pages. Higher timestamps will be inserted after older page entries. We recommend using [Unix time](https://www.unixtimestamp.com/).

Expand Down

0 comments on commit 61432c2

Please sign in to comment.