Skip to content

Commit

Permalink
Update links. (#35790)
Browse files Browse the repository at this point in the history
  • Loading branch information
@processprocess
processprocess committed Aug 24, 2021
1 parent 6c949f2 commit 24174aa
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 16 deletions.
14 changes: 7 additions & 7 deletions extensions/amp-story/amp-story-page-attachment.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,9 @@ teaser:
`amp-story-page-attachment` allows additional content in the form of inline AMPHTML content on specific AMP story pages. This content is revealed to users through a "swipe up" gesture, or a tap on the call to action element.
A UI button prompting the viewer to open the attachment will appear at the bottom of every page with a `amp-story-page-attachment` element.

<amp-img alt="AMP Story page attachment" layout="fixed" src="img/amp-story-page-attachment.gif" width="240" height="480">
<amp-img alt="AMP Story page attachment" layout="fixed" src="https://github.com/ampproject/amphtml/raw/main/extensions/amp-story/img/amp-story-page-attachment.gif" width="240" height="480">
<noscript>
<img alt="AMP Story page attachment" src="img/amp-story-page-attachment.gif" />
<img alt="AMP Story page attachment" src="https://github.com/ampproject/amphtml/raw/main/extensions/amp-story/img/amp-story-page-attachment.gif" />
</noscript>
</amp-img>

Expand Down Expand Up @@ -55,7 +55,7 @@ Both [`amp-story-page-attachment`](amp-story-page-attachment.md) and [`amp-story

When no attributes are set, the default UI will render:

![amp-story-page-attachment-default](img/amp-story-page-attachment-default.jpg)
![amp-story-page-attachment-default](https://github.com/ampproject/amphtml/raw/main/extensions/amp-story/img/amp-story-page-attachment-default.jpg)

```html
<amp-story-page-attachment
Expand All @@ -68,7 +68,7 @@ When no attributes are set, the default UI will render:

String representing the color theme, default is `light`. Accepts values `light` & `dark`.

![amp-story-page-attachment-dark-theme](img/amp-story-page-attachment-dark-theme.jpg)
![amp-story-page-attachment-dark-theme](https://github.com/ampproject/amphtml/raw/main/extensions/amp-story/img/amp-story-page-attachment-dark-theme.jpg)

```html
<amp-story-page-attachment
Expand All @@ -82,7 +82,7 @@ String representing the color theme, default is `light`. Accepts values `light`

String that customizes the button text. The default is "Swipe up".

![amp-story-page-attachment-cta-text](img/amp-story-page-attachment-cta-text.jpg)
![amp-story-page-attachment-cta-text](https://github.com/ampproject/amphtml/raw/main/extensions/amp-story/img/amp-story-page-attachment-cta-text.jpg)

```html
<amp-story-page-attachment
Expand All @@ -104,7 +104,7 @@ String representing a URL pointing to an image. Optimize performance and avoid d
</amp-story-page-attachment>
```

![amp-story-page-attachment-1-image](img/amp-story-page-attachment-1-image.jpg)
![amp-story-page-attachment-1-image](https://github.com/ampproject/amphtml/raw/main/extensions/amp-story/img/amp-story-page-attachment-1-image.jpg)

### `cta-image-2` (optional)

Expand All @@ -119,7 +119,7 @@ String representing a URL pointing to an image. Two images will display when `ct
</amp-story-page-attachment>
```

![amp-story-page-attachment-2-images](img/amp-story-page-attachment-2-images.jpg)
![amp-story-page-attachment-2-images](https://github.com/ampproject/amphtml/raw/main/extensions/amp-story/img/amp-story-page-attachment-2-images.jpg)

### `title` (optional)

Expand Down
18 changes: 9 additions & 9 deletions extensions/amp-story/amp-story-page-outlink.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,9 @@ It must have the `layout="nodisplay"` attribute.

`amp-story-page-outlink` requires a single `a` element child.

<amp-img alt="AMP Story page attachment" layout="fixed" src="img/amp-story-page-outlink.gif" width="240" height="480">
<amp-img alt="AMP Story page attachment" layout="fixed" src="https://github.com/ampproject/amphtml/raw/main/extensions/amp-story/img/amp-story-page-outlink.gif" width="240" height="480">
<noscript>
<img alt="AMP Story page attachment" src="img/amp-story-page-outlink.gif" />
<img alt="AMP Story page attachment" src="https://github.com/ampproject/amphtml/raw/main/extensions/amp-story/img/amp-story-page-outlink.gif" />
</noscript>
</amp-img>

Expand All @@ -45,7 +45,7 @@ Both [`amp-story-page-outlink`](amp-story-page-outlink.md) and [`amp-story-page-

When no attributes are set, the default UI will render:

![amp-story-page-outlink-default](img/amp-story-page-outlink-default.jpg)
![amp-story-page-outlink-default](https://github.com/ampproject/amphtml/raw/main/extensions/amp-story/img/amp-story-page-outlink-default.jpg)

```html
<amp-story-page-outlink layout="nodisplay">
Expand All @@ -57,7 +57,7 @@ When no attributes are set, the default UI will render:

String that customizes the button text. The default is "Swipe up".

![amp-story-page-outlink-cta-text](img/amp-story-page-outlink-cta-text.jpg)
![amp-story-page-outlink-cta-text](https://github.com/ampproject/amphtml/raw/main/extensions/amp-story/img/amp-story-page-outlink-cta-text.jpg)

```html
<amp-story-page-outlink
Expand All @@ -80,7 +80,7 @@ String representing the color theme, default is light. Accepts values `light`, `

Contrast protection is automatically applied to ensure readability and a11y compliance. For example, when the accent element is “background”, the higher contrast color (black or white) is applied to the text.

![amp-story-page-outlink-dark-theme](img/amp-story-page-outlink-dark-theme.jpg)
![amp-story-page-outlink-dark-theme](https://github.com/ampproject/amphtml/raw/main/extensions/amp-story/img/amp-story-page-outlink-dark-theme.jpg)

```html
<amp-story-page-outlink
Expand All @@ -90,7 +90,7 @@ Contrast protection is automatically applied to ensure readability and a11y comp
</amp-story-page-outlink>
```

![amp-story-page-outlink-custom-theme](img/amp-story-page-outlink-custom-theme-background.jpg)
![amp-story-page-outlink-custom-theme](https://github.com/ampproject/amphtml/raw/main/extensions/amp-story/img/amp-story-page-outlink-custom-theme-background.jpg)

```html
<amp-story-page-outlink
Expand All @@ -102,7 +102,7 @@ Contrast protection is automatically applied to ensure readability and a11y comp
</amp-story-page-outlink>
```

![amp-story-page-outlink-custom-theme](img/amp-story-page-outlink-custom-theme-text.jpg)
![amp-story-page-outlink-custom-theme](https://github.com/ampproject/amphtml/raw/main/extensions/amp-story/img/amp-story-page-outlink-custom-theme-text.jpg)

```html
<amp-story-page-outlink
Expand All @@ -118,7 +118,7 @@ Contrast protection is automatically applied to ensure readability and a11y comp

String representing a URL pointing to an image. Optimize performance and avoid distortion by using a 32x32px image. A link icon will be displayed by default.

![amp-story-page-outlink-cta-image](img/amp-story-page-outlink-cta-image.jpg)
![amp-story-page-outlink-cta-image](https://github.com/ampproject/amphtml/raw/main/extensions/amp-story/img/amp-story-page-outlink-cta-image.jpg)

```html
<amp-story-page-outlink
Expand All @@ -130,7 +130,7 @@ String representing a URL pointing to an image. Optimize performance and avoid d

Specifying `cta-image=none` will remove the default link icon.

![amp-story-page-outlink-cta-image-none](img/amp-story-page-outlink-cta-image-none.jpg)
![amp-story-page-outlink-cta-image-none](https://github.com/ampproject/amphtml/raw/main/extensions/amp-story/img/amp-story-page-outlink-cta-image-none.jpg)

```html
<amp-story-page-outlink
Expand Down

0 comments on commit 24174aa

Please sign in to comment.