From f9d803b4955b1dc08d3f56eadd8cbb03af1d73e1 Mon Sep 17 00:00:00 2001 From: Malte Ubl Date: Sat, 11 Apr 2020 14:14:45 -0700 Subject: [PATCH 1/2] Ship remote page attachments - Adds docs - Adds validator rules - Adds example - Fixes robustness of drawer stylesheet (Ideally the UI would move into shadow DOM) --- examples/amp-story/attachment.html | 144 ++++++++++++++++++ .../1.0/amp-story-page-attachment.css | 1 + ...dator-amp-story-page-attachment-error.html | 6 + ...idator-amp-story-page-attachment-error.out | 16 +- .../validator-amp-story-page-attachment.html | 7 + .../validator-amp-story-page-attachment.out | 9 +- .../amp-story/amp-story-page-attachment.md | 16 +- .../amp-story/validator-amp-story.protoascii | 7 + 8 files changed, 199 insertions(+), 7 deletions(-) create mode 100644 examples/amp-story/attachment.html diff --git a/examples/amp-story/attachment.html b/examples/amp-story/attachment.html new file mode 100644 index 000000000000..3fe518cd6962 --- /dev/null +++ b/examples/amp-story/attachment.html @@ -0,0 +1,144 @@ + + + + + + + + + + Attachments + + + + + + + + + + + + + +

+ Relentlessly pursues moth annoy owner until he gives you food say meow repeatedly until belly rubs, feels good drool that box? +

+ + +

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.

+ +

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.

+ +

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.

+ + + + + + + + +

+ 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 +

+ + + + + + + + + +

+ Third page +

+ + + + + + + + + diff --git a/extensions/amp-story/1.0/amp-story-page-attachment.css b/extensions/amp-story/1.0/amp-story-page-attachment.css index ceaa107cc041..7cda209ee11d 100644 --- a/extensions/amp-story/1.0/amp-story-page-attachment.css +++ b/extensions/amp-story/1.0/amp-story-page-attachment.css @@ -49,6 +49,7 @@ display: block !important; height: 24px !important; width: 24px !important; + padding: 0px !important; background-image: url('data:image/svg+xml;charset=utf-8,') !important; } diff --git a/extensions/amp-story/1.0/test/validator-amp-story-page-attachment-error.html b/extensions/amp-story/1.0/test/validator-amp-story-page-attachment-error.html index da4b5e971b82..25d707564f61 100644 --- a/extensions/amp-story/1.0/test/validator-amp-story-page-attachment-error.html +++ b/extensions/amp-story/1.0/test/validator-amp-story-page-attachment-error.html @@ -39,6 +39,12 @@

Amazing title

Bacon ipsum dolor cat cat cat.

+ +

Amazing title

+

Bacon ipsum dolor cat cat cat.

+ + +

Amazing title

Bacon ipsum dolor cat cat cat.

diff --git a/extensions/amp-story/1.0/test/validator-amp-story-page-attachment-error.out b/extensions/amp-story/1.0/test/validator-amp-story-page-attachment-error.out index e16621b914ad..3bb76789d4c6 100644 --- a/extensions/amp-story/1.0/test/validator-amp-story-page-attachment-error.out +++ b/extensions/amp-story/1.0/test/validator-amp-story-page-attachment-error.out @@ -42,21 +42,29 @@ amp-story/1.0/test/validator-amp-story-page-attachment-error.html:37:6 The attri |

Bacon ipsum dolor cat cat cat.

| | +| +>> ^~~~~~~~~ +amp-story/1.0/test/validator-amp-story-page-attachment-error.html:42:6 Invalid URL protocol 'javascript:' for attribute 'href' in tag 'amp-story-page-attachment'. +|

Amazing title

+|

Bacon ipsum dolor cat cat cat.

+| +| +| | >> ^~~~~~~~~ -amp-story/1.0/test/validator-amp-story-page-attachment-error.html:42:6 Tag 'amp-story-page-attachment', if present, must be the last child of tag 'amp-story-page'. +amp-story/1.0/test/validator-amp-story-page-attachment-error.html:48:6 Tag 'amp-story-page-attachment', if present, must be the last child of tag 'amp-story-page'. |

Amazing title

|

Bacon ipsum dolor cat cat cat.

| | >> ^~~~~~~~~ -amp-story/1.0/test/validator-amp-story-page-attachment-error.html:46:8 The tag 'amp-story-grid-layer' may not appear as a descendant of tag 'amp-story-page-attachment'. +amp-story/1.0/test/validator-amp-story-page-attachment-error.html:52:8 The tag 'amp-story-grid-layer' may not appear as a descendant of tag 'amp-story-page-attachment'. |

fill

| | | >> ^~~~~~~~~ -amp-story/1.0/test/validator-amp-story-page-attachment-error.html:50:8 The tag 'amp-story-bookend' may not appear as a descendant of tag 'amp-story-page-attachment'. +amp-story/1.0/test/validator-amp-story-page-attachment-error.html:56:8 The tag 'amp-story-bookend' may not appear as a descendant of tag 'amp-story-page-attachment'. | | | | | -| +| \ No newline at end of file diff --git a/extensions/amp-story/1.0/test/validator-amp-story-page-attachment.html b/extensions/amp-story/1.0/test/validator-amp-story-page-attachment.html index d1c2449c9ecb..b74f274c952d 100644 --- a/extensions/amp-story/1.0/test/validator-amp-story-page-attachment.html +++ b/extensions/amp-story/1.0/test/validator-amp-story-page-attachment.html @@ -50,6 +50,13 @@

Amazing title

 + + +

fill

+ + + + diff --git a/extensions/amp-story/1.0/test/validator-amp-story-page-attachment.out b/extensions/amp-story/1.0/test/validator-amp-story-page-attachment.out index 05d6d4ccbfda..85cf4b88066f 100644 --- a/extensions/amp-story/1.0/test/validator-amp-story-page-attachment.out +++ b/extensions/amp-story/1.0/test/validator-amp-story-page-attachment.out @@ -51,6 +51,13 @@ PASS | | | +| +| +|

fill

+| +| +| +| | | -| +| \ No newline at end of file diff --git a/extensions/amp-story/amp-story-page-attachment.md b/extensions/amp-story/amp-story-page-attachment.md index db3312cc80c8..8f3c01911b12 100644 --- a/extensions/amp-story/amp-story-page-attachment.md +++ b/extensions/amp-story/amp-story-page-attachment.md @@ -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. @@ -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 +... +``` + +## 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. diff --git a/extensions/amp-story/validator-amp-story.protoascii b/extensions/amp-story/validator-amp-story.protoascii index 9b1c87daa4de..3032dc050f4b 100644 --- a/extensions/amp-story/validator-amp-story.protoascii +++ b/extensions/amp-story/validator-amp-story.protoascii @@ -771,6 +771,13 @@ tags: { # value: "dark" value: "light" } + attrs: { + name: "href" + value_url: { + protocol: "http" + protocol: "https" + } + } } descendant_tag_list { # Whitelisting as many components as possible, unless they could result in a From de06a8f856f57475e2c2f57b5a7939f8fb0177bb Mon Sep 17 00:00:00 2001 From: Malte Ubl Date: Mon, 13 Apr 2020 10:44:45 -0700 Subject: [PATCH 2/2] No children with href --- ...dator-amp-story-page-attachment-error.html | 7 ++--- ...idator-amp-story-page-attachment-error.out | 23 +++++++++------- .../amp-story/validator-amp-story.protoascii | 26 +++++++++++++++++-- 3 files changed, 41 insertions(+), 15 deletions(-) diff --git a/extensions/amp-story/1.0/test/validator-amp-story-page-attachment-error.html b/extensions/amp-story/1.0/test/validator-amp-story-page-attachment-error.html index 25d707564f61..8ccd45f9ee6e 100644 --- a/extensions/amp-story/1.0/test/validator-amp-story-page-attachment-error.html +++ b/extensions/amp-story/1.0/test/validator-amp-story-page-attachment-error.html @@ -39,9 +39,10 @@

Amazing title

Bacon ipsum dolor cat cat cat.

 - -

Amazing title

-

Bacon ipsum dolor cat cat cat.

+ + + +

Illegal child element

 diff --git a/extensions/amp-story/1.0/test/validator-amp-story-page-attachment-error.out b/extensions/amp-story/1.0/test/validator-amp-story-page-attachment-error.out index 3bb76789d4c6..4b6aa027e4f3 100644 --- a/extensions/amp-story/1.0/test/validator-amp-story-page-attachment-error.out +++ b/extensions/amp-story/1.0/test/validator-amp-story-page-attachment-error.out @@ -37,34 +37,37 @@ FAIL | | >> ^~~~~~~~~ -amp-story/1.0/test/validator-amp-story-page-attachment-error.html:37:6 The attribute 'theme' in tag 'amp-story-page-attachment' is set to the invalid value 'cat'. +amp-story/1.0/test/validator-amp-story-page-attachment-error.html:37:6 The attribute 'theme' in tag 'amp-story-page-attachment[href]' is set to the invalid value 'cat'. |

Amazing title

|

Bacon ipsum dolor cat cat cat.

| | -| +| >> ^~~~~~~~~ -amp-story/1.0/test/validator-amp-story-page-attachment-error.html:42:6 Invalid URL protocol 'javascript:' for attribute 'href' in tag 'amp-story-page-attachment'. -|

Amazing title

-|

Bacon ipsum dolor cat cat cat.

+amp-story/1.0/test/validator-amp-story-page-attachment-error.html:42:6 Invalid URL protocol 'javascript:' for attribute 'href' in tag 'amp-story-page-attachment[href]'. +| +| +>> ^~~~~~~~~ +amp-story/1.0/test/validator-amp-story-page-attachment-error.html:44:6 Tag 'amp-story-page-attachment[href]' must have 0 child tags - saw 1 child tags. +>> ^~~~~~~~~ +amp-story/1.0/test/validator-amp-story-page-attachment-error.html:44:6 Tag 'amp-story-page-attachment[href]', if present, must be the last child of tag 'amp-story-page'. +>> ^~~~~~~~~ +amp-story/1.0/test/validator-amp-story-page-attachment-error.html:44:6 Tag 'amp-story-page-attachment[href]', if present, must be the last child of tag 'amp-story-page'. +|

Illegal child element

| | | | ->> ^~~~~~~~~ -amp-story/1.0/test/validator-amp-story-page-attachment-error.html:48:6 Tag 'amp-story-page-attachment', if present, must be the last child of tag 'amp-story-page'. |

Amazing title

|

Bacon ipsum dolor cat cat cat.

| | ->> ^~~~~~~~~ -amp-story/1.0/test/validator-amp-story-page-attachment-error.html:52:8 The tag 'amp-story-grid-layer' may not appear as a descendant of tag 'amp-story-page-attachment'. |

fill

| | | >> ^~~~~~~~~ -amp-story/1.0/test/validator-amp-story-page-attachment-error.html:56:8 The tag 'amp-story-bookend' may not appear as a descendant of tag 'amp-story-page-attachment'. +amp-story/1.0/test/validator-amp-story-page-attachment-error.html:57:8 Tag 'amp-story-bookend', if present, must be the last child of tag 'amp-story-page-attachment'. | | | +tags: { # with href html_format: AMP tag_name: "AMP-STORY-PAGE-ATTACHMENT" + spec_name: "amp-story-page-attachment[href]" mandatory_ancestor: "AMP-STORY-PAGE" - descendant_tag_list: "amp-story-page-attachment-allowed-descendants" mandatory_last_child: true attrs: { name: "layout" @@ -773,11 +773,33 @@ tags: { # } attrs: { name: "href" + mandatory: true value_url: { protocol: "http" protocol: "https" } } + child_tags: { + mandatory_num_child_tags: 0 + } +} +tags: { # with no href + html_format: AMP + tag_name: "AMP-STORY-PAGE-ATTACHMENT" + spec_name: "amp-story-page-attachment" + mandatory_ancestor: "AMP-STORY-PAGE" + descendant_tag_list: "amp-story-page-attachment-allowed-descendants" + mandatory_last_child: true + attrs: { + name: "layout" + mandatory: true + value: "nodisplay" + } + attrs: { + name: "theme" + value: "dark" + value: "light" + } } descendant_tag_list { # Whitelisting as many components as possible, unless they could result in a