-
Notifications
You must be signed in to change notification settings - Fork 3.9k
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
Ship remote page attachments #27709
Merged
Merged
Ship remote page attachments #27709
Changes from all commits
Commits
Show all changes
2 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,144 @@ | ||
<!doctype html> | ||
<html amp lang="en"> | ||
<head> | ||
<meta charset="utf-8"> | ||
<script async src="https://cdn.ampproject.org/v0.js"></script> | ||
<script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script> | ||
<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script> | ||
<link href='https://fonts.googleapis.com/css?family=Georgia|Open+Sans|Roboto' rel='stylesheet' type='text/css'> | ||
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet"> | ||
<title>Attachments</title> | ||
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> | ||
<link rel="canonical" href="index.html"> | ||
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> | ||
<style amp-custom> | ||
body { | ||
font-family: 'Roboto', sans-serif; | ||
color: #fff; | ||
} | ||
|
||
amp-story-page { | ||
background-color: #000; | ||
} | ||
|
||
span { | ||
padding: 0 96px 0 20px; | ||
align-items: center; | ||
font-size: 18px; | ||
line-height: 1.5em; | ||
} | ||
|
||
amp-story-page-attachment { | ||
color: rgba(0, 0, 0, 0.93); | ||
} | ||
</style> | ||
</head> | ||
|
||
<body> | ||
<amp-story | ||
standalone | ||
publisher="The AMP team" | ||
publisher-logo-src="/examples/visual-tests/amp-story/img/AMP-Brand-White-Icon.svg" | ||
poster-portrait-src="/examples/visual-tests/amp-story/img/overview.jpg" | ||
title="Landscape story" | ||
supports-landscape> | ||
<amp-story-page id="cover" title="Relentlessly pursues moth annoy owner"> | ||
<amp-story-grid-layer template="fill"> | ||
<amp-img layout="fill" src="/examples/visual-tests/amp-story/img/cat1.jpg"></amp-img> | ||
</amp-story-grid-layer> | ||
<amp-story-grid-layer template="vertical" class="bottom blue-bottom-gradient"> | ||
<p> | ||
<span data-text-background-color="#00A3DB">Relentlessly pursues moth annoy owner until he gives you food say meow repeatedly until belly rubs, feels good drool that box?</span> | ||
</p> | ||
</amp-story-grid-layer> | ||
<amp-story-page-attachment data-title="Lorem ipsum" layout="nodisplay"> | ||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ultricies integer quis auctor elit. Quis eleifend quam adipiscing vitae proin. Id faucibus nisl tincidunt eget nullam. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Sodales ut etiam sit amet nisl purus. Non enim praesent elementum facilisis leo vel fringilla. Sagittis vitae et leo duis ut diam quam nulla. Id diam maecenas ultricies mi eget mauris pharetra et. Sodales neque sodales ut etiam sit amet. Eu sem integer vitae justo eget magna fermentum iaculis eu. Faucibus interdum posuere lorem ipsum dolor sit amet consectetur. Bibendum est ultricies integer quis auctor elit sed vulputate.</p> | ||
|
||
<p>In nisl nisi scelerisque eu ultrices vitae auctor eu. Tristique magna sit amet purus gravida. Tincidunt id aliquet risus feugiat in ante metus dictum. Mattis nunc sed blandit libero volutpat sed. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Sit amet mattis vulputate enim nulla aliquet porttitor lacus luctus. Proin sagittis nisl rhoncus mattis rhoncus. Pulvinar neque laoreet suspendisse interdum consectetur libero. Nibh tellus molestie nunc non blandit massa enim nec dui. Sagittis eu volutpat odio facilisis. Tristique senectus et netus et malesuada fames ac. Molestie a iaculis at erat. Sit amet cursus sit amet. Suscipit tellus mauris a diam maecenas sed enim ut. Gravida quis blandit turpis cursus in. Tincidunt vitae semper quis lectus nulla at volutpat diam ut. Morbi tempus iaculis urna id. Faucibus et molestie ac feugiat sed lectus vestibulum. Mauris augue neque gravida in. Ac turpis egestas sed tempus.</p> | ||
|
||
<p>Ut tristique et egestas quis ipsum. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Elementum curabitur vitae nunc sed velit dignissim. Tristique et egestas quis ipsum suspendisse ultrices gravida dictum fusce. At elementum eu facilisis sed odio morbi. Imperdiet proin fermentum leo vel orci porta non. Quam lacus suspendisse faucibus interdum. Eu non diam phasellus vestibulum lorem sed risus. Commodo viverra maecenas accumsan lacus vel facilisis volutpat est velit. Sagittis aliquam malesuada bibendum arcu vitae elementum. Ut sem viverra aliquet eget sit amet. Nulla facilisi morbi tempus iaculis. Sed odio morbi quis commodo odio aenean sed adipiscing diam. Donec ultrices tincidunt arcu non sodales. Amet venenatis urna cursus eget. Sapien et ligula ullamcorper malesuada proin. Tristique sollicitudin nibh sit amet commodo nulla facilisi. Venenatis tellus in metus vulputate eu scelerisque felis.</p> | ||
</amp-story-page-attachment> | ||
</amp-story-page> | ||
|
||
<amp-story-page id="page1"> | ||
<amp-story-grid-layer template="fill"> | ||
<amp-img layout="fill" src="/examples/visual-tests/amp-story/img/cat2.jpg"></amp-img> | ||
</amp-story-grid-layer> | ||
<amp-story-grid-layer template="center"> | ||
<p> | ||
<span data-text-background-color="crimson">i can fit in that box but inspect anything brought into the house wack the mini furry mouse intently stare at the same spot. Flee in terror at cucumber discovered on floor shake treat bag</span> | ||
</p> | ||
</amp-story-grid-layer> | ||
<amp-story-page-attachment data-title="Link Description" href="https://www.google.com" layout="nodisplay"></amp-story-page-attachment> | ||
</amp-story-page> | ||
|
||
<amp-story-page id="page3"> | ||
<amp-story-grid-layer template="fill"> | ||
<amp-img layout="fill" src="/examples/visual-tests/amp-story/img/cat1.jpg"></amp-img> | ||
</amp-story-grid-layer> | ||
<amp-story-grid-layer template="vertical" class="bottom blue-bottom-gradient"> | ||
<p> | ||
<span data-text-background-color="#00A3DB">Third page</span> | ||
</p> | ||
</amp-story-grid-layer> | ||
</amp-story-page> | ||
|
||
<amp-story-bookend layout="nodisplay"> | ||
<script type="application/json"> | ||
{ | ||
"bookendVersion": "v1.0", | ||
"shareProviders": [ | ||
"email", | ||
{"provider": "facebook", "app_id": "254325784911610"}, | ||
{"provider": "twitter", "text": "This is custom share text that I would like for the Twitter platform"}, | ||
"whatsapp", | ||
"pinterest", | ||
"line" | ||
], | ||
"components": [ | ||
{ | ||
"type": "heading", | ||
"text": "test" | ||
}, | ||
{ | ||
"type": "small", | ||
"title": "This is an example article", | ||
"url": "/article.html", | ||
"image": "http://placehold.it/500x600" | ||
}, | ||
{ | ||
"type": "small", | ||
"title": "This is an example article2", | ||
"url": "http://example.com/article.html", | ||
"image": "http://placehold.it/256x128" | ||
}, | ||
{ | ||
"type": "small", | ||
"title": "This is an example article3", | ||
"url": "http://example.com/article.html", | ||
"image": "http://placehold.it/256x128" | ||
}, | ||
{ | ||
"type": "heading", | ||
"text": "test2" | ||
}, | ||
{ | ||
"type": "small", | ||
"title": "This is an example article", | ||
"url": "http://example.com/article.html", | ||
"image": "http://placehold.it/256x128" | ||
}, | ||
{ | ||
"type": "portrait", | ||
"title": "Heading for portrait", | ||
"category": "This is an example portrait", | ||
"url": "http://example.com/article.html", | ||
"image": "http://placehold.it/350x470" | ||
} | ||
] | ||
} | ||
</script> | ||
</amp-story-bookend> | ||
</amp-story> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
|
@@ -24,7 +24,7 @@ limitations under the License. | |||||||||||
|
||||||||||||
# amp-story-page-attachment | ||||||||||||
|
||||||||||||
Story page attachments allow you to provide additional AMPHTML content to specific pages. This content can be revealed by users through a "swipe up" gesture, or a tap on the call to action element. | ||||||||||||
Story page attachments allow you to provide additional content in the form of a link or inline AMPHTML content to specific pages. This content can be revealed by users through a "swipe up" gesture, or a tap on the call to action element. | ||||||||||||
A UI prompt to open the attachment will automatically be added at the bottom of every page that configured an attachment. | ||||||||||||
|
||||||||||||
<amp-img alt="AMP Story page attachment" layout="fixed" src="https://github.com/ampproject/amphtml/raw/master/extensions/amp-story/img/amp-story-page-attachment.gif" width="240" height="480"> | ||||||||||||
|
@@ -72,7 +72,19 @@ Values: "light" (default), "dark" | |||||||||||
> | ||||||||||||
``` | ||||||||||||
|
||||||||||||
## Allowed content and components | ||||||||||||
## Linked content | ||||||||||||
|
||||||||||||
When providing a `href` attribute as page attachment, the respective URL is opened when the user activates the page attachment. | ||||||||||||
|
||||||||||||
```html | ||||||||||||
<amp-story-page-attachment layout="nodisplay" href="https://www.example.com" | ||||||||||||
>...</amp-story-page-attachment | ||||||||||||
> | ||||||||||||
Comment on lines
+80
to
+82
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Making it more clear that there is no children allowed:
Suggested change
|
||||||||||||
``` | ||||||||||||
|
||||||||||||
## Inline content | ||||||||||||
|
||||||||||||
As an alternative to linking a page attachment, you may also provide inline AMP HTML as the page attachment. | ||||||||||||
|
||||||||||||
Story page attachments allow the same HTML elements as AMP Story along with additional components listed below, such as third party video players or social media embeds. This means you can add additional content that is too verbose or disallowed in an AMP Story page. | ||||||||||||
|
||||||||||||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Wdyt about adding one line about the fact that this is a page navigation on the web, but can be handled different in native contexts (in-app browser, customized app experience...)?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't think we should specify what exactly happens.