Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Ship remote page attachments (#27709)
- Adds docs - Adds validator rules - Adds example - Fixes robustness of drawer stylesheet (Ideally the UI would move into shadow DOM)
- Loading branch information
Showing
8 changed files
with
229 additions
and
11 deletions.
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
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