Skip to content
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.

Sign up for GitHub

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

Jump to bottom

✨ [AMP Story Paywall] Validator changes to launch amp-story-subscriptions #38194

Merged
merged 8 commits into from
Jul 18, 2022
Merged

✨ [AMP Story Paywall] Validator changes to launch amp-story-subscriptions #38194

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
674b9da
amp-story-subscriptions doc
ychsieh May 10, 2022
d8e5c8f
merge
ychsieh May 13, 2022
de6cbb6
validator test
ychsieh May 13, 2022
6bda3b1
Merge branch 'main' into validator
ychsieh May 13, 2022
b768213
Merge branch 'main' into validator
ychsieh May 16, 2022
eb56fbc
Add optional attributes
ychsieh May 20, 2022
bcbe781
Merge branch 'main' into validator
ychsieh Jun 2, 2022
4b36752
Merge remote-tracking branch 'upstream/main' into validator
ychsieh Jun 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 1 addition & 4 deletions examples/amp-story/amp-story-subscriptions.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,9 +118,6 @@
}
</style>

<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700" rel="stylesheet">

<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-subscriptions" src="https://cdn.ampproject.org/v0/amp-subscriptions-0.1.js"></script>
<script
Expand Down Expand Up @@ -250,6 +247,6 @@ <h3>Cultral Experiences</h3>
description='Subscribe for unlimited access.'
additional-description='Cancel anytime.'>
</amp-story-subscriptions>
</amp-story>>
</amp-story>
</body>
</html>
59 changes: 55 additions & 4 deletions extensions/amp-story-subscriptions/0.1/test/validator-amp-story-subscriptions.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,63 @@
color: red;
}
</style>
<script async custom-element="amp-story-subscriptions" src="https://cdn.ampproject.org/v0/amp-story-subscriptions-0.1.js"></script>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-subscriptions" src="https://cdn.ampproject.org/v0/amp-subscriptions-0.1.js"></script>
<script
async
custom-element="amp-subscriptions-google"
src="https://cdn.ampproject.org/v0/amp-subscriptions-google-0.1.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-story-subscriptions" src="https://cdn.ampproject.org/v0/amp-story-subscriptions-0.1.js"></script>
</head>
<body>
<amp-story-subscriptions
layout="container"
></amp-story-subscriptions>
<amp-story standalone title="My story" publisher="Monocle" publisher-logo-src="https://res.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_170,w_170,f_auto,b_white,q_auto:eco,dpr_1/tbvbvipimh2camf5nb2q" poster-portrait-src="POSTER-IMAGE-URL">
<amp-story-page id="cover" auto-advance-after="5s">
<amp-story-grid-layer template="fill">
<amp-img src="https://images.unsplash.com/photo-1552650904-54d0c54b278f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80"
width="720" height="1280"
layout="responsive"
alt="">
</amp-img>
</amp-story-grid-layer>
</amp-story-page>

<amp-story-page id="page-1" auto-advance-after="5s">
<amp-story-grid-layer template="fill">
<amp-img src="https://images.unsplash.com/photo-1544965563-bb8d8bce9791?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1011&q=80"
width="720" height="1280"
layout="responsive"
alt="">
</amp-img>
</amp-story-grid-layer>
</amp-story-page>

<amp-story-page id="page-2" auto-advance-after="5s">
<amp-story-grid-layer template="fill">
<amp-img src="https://images.unsplash.com/photo-1599849913403-f45ef2181b49?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3024&q=80"
width="720" height="1280"
layout="responsive"
alt="">
</amp-img>
</amp-story-grid-layer>
</amp-story-page>

<amp-story-page id="page-3">
<amp-story-grid-layer template="fill">
<amp-img src="https://images.unsplash.com/photo-1574236170880-fbbca132d83d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=926&q=80"
width="720" height="1280"
layout="responsive"
alt="">
</amp-img>
</amp-story-grid-layer>
</amp-story-page>

<amp-story-subscriptions layout='container'
price='$0.50/week'
description='Subscribe for unlimited access.'>
</amp-story-subscriptions>
</amp-story>
</body>
</html>
59 changes: 55 additions & 4 deletions extensions/amp-story-subscriptions/0.1/test/validator-amp-story-subscriptions.out
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,63 @@ PASS
| color: red;
| }
| </style>
| <script async custom-element="amp-story-subscriptions" src="https://cdn.ampproject.org/v0/amp-story-subscriptions-0.1.js"></script>
| <script async src="https://cdn.ampproject.org/v0.js"></script>
| <script async custom-element="amp-subscriptions" src="https://cdn.ampproject.org/v0/amp-subscriptions-0.1.js"></script>
| <script
| async
| custom-element="amp-subscriptions-google"
| src="https://cdn.ampproject.org/v0/amp-subscriptions-google-0.1.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-story-subscriptions" src="https://cdn.ampproject.org/v0/amp-story-subscriptions-0.1.js"></script>
| </head>
| <body>
| <amp-story-subscriptions
| layout="container"
| ></amp-story-subscriptions>
| <amp-story standalone title="My story" publisher="Monocle" publisher-logo-src="https://res.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_170,w_170,f_auto,b_white,q_auto:eco,dpr_1/tbvbvipimh2camf5nb2q" poster-portrait-src="POSTER-IMAGE-URL">
| <amp-story-page id="cover" auto-advance-after="5s">
| <amp-story-grid-layer template="fill">
| <amp-img src="https://images.unsplash.com/photo-1552650904-54d0c54b278f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80"
| width="720" height="1280"
| layout="responsive"
| alt="">
| </amp-img>
| </amp-story-grid-layer>
| </amp-story-page>
|
| <amp-story-page id="page-1" auto-advance-after="5s">
| <amp-story-grid-layer template="fill">
| <amp-img src="https://images.unsplash.com/photo-1544965563-bb8d8bce9791?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1011&q=80"
| width="720" height="1280"
| layout="responsive"
| alt="">
| </amp-img>
| </amp-story-grid-layer>
| </amp-story-page>
|
| <amp-story-page id="page-2" auto-advance-after="5s">
| <amp-story-grid-layer template="fill">
| <amp-img src="https://images.unsplash.com/photo-1599849913403-f45ef2181b49?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3024&q=80"
| width="720" height="1280"
| layout="responsive"
| alt="">
| </amp-img>
| </amp-story-grid-layer>
| </amp-story-page>
|
| <amp-story-page id="page-3">
| <amp-story-grid-layer template="fill">
| <amp-img src="https://images.unsplash.com/photo-1574236170880-fbbca132d83d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=926&q=80"
| width="720" height="1280"
| layout="responsive"
| alt="">
| </amp-img>
| </amp-story-grid-layer>
| </amp-story-page>
|
| <amp-story-subscriptions layout='container'
| price='$0.50/week'
| description='Subscribe for unlimited access.'>
| </amp-story-subscriptions>
| </amp-story>
| </body>
| </html>
17 changes: 17 additions & 0 deletions extensions/amp-story-subscriptions/validator-amp-story-subscriptions.protoascii
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,4 +15,21 @@ tags: { # <amp-story-subscriptions>
amp_layout: {
supported_layouts: CONTAINER
}
attrs: {
name: "price"
mandatory: true
}
attrs: {
name: "description"
mandatory: true
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You'll need to add the other supported fields as listed in your documentation, otherwise people can't use them: #38179

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done. Thanks for the catch.

attrs: {
name: "subscriptions-page-index"
}
attrs: {
name: "headline"
}
attrs: {
name: "additional-description"
}
}
4 changes: 2 additions & 2 deletions extensions/amp-story/1.0/test/validator-amp-story-amp-experiment-error.out
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ amp-story/1.0/test/validator-amp-story-amp-experiment-error.html:49:6 Tag 'amp-e
| <!-- Invalid: amp-experiment not allowed as a child of amp-story -->
| <amp-experiment>
>> ^~~~~~~~~
amp-story/1.0/test/validator-amp-story-amp-experiment-error.html:65:4 Tag 'amp-experiment' is disallowed as child of tag 'amp-story'. Child tag must be one of ['amp-analytics', 'amp-consent', 'amp-geo', 'amp-pixel', 'amp-sidebar', 'amp-story-auto-ads', 'amp-story-auto-analytics', 'amp-story-bookend', 'amp-story-page', 'amp-story-social-share']. (see https://amp.dev/documentation/components/amp-story)
amp-story/1.0/test/validator-amp-story-amp-experiment-error.html:65:4 Tag 'amp-experiment' is disallowed as child of tag 'amp-story'. Child tag must be one of ['amp-analytics', 'amp-consent', 'amp-geo', 'amp-pixel', 'amp-sidebar', 'amp-story-auto-ads', 'amp-story-auto-analytics', 'amp-story-bookend', 'amp-story-page', 'amp-story-social-share', 'amp-story-subscriptions']. (see https://amp.dev/documentation/components/amp-story)
| <script type="application/json">
| {
| "background-color-test": {
Expand All @@ -83,4 +83,4 @@ amp-story/1.0/test/validator-amp-story-amp-experiment-error.html:65:4 Tag 'amp-e
| </amp-experiment>
| </amp-story>
| </body>
| </html>
| </html>
4 changes: 2 additions & 2 deletions extensions/amp-story/1.0/test/validator-amp-story-cta-layer-error.out
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,9 +60,9 @@ amp-story/1.0/test/validator-amp-story-cta-layer-error.html:48:6 The attribute '
>> ^~~~~~~~~
amp-story/1.0/test/validator-amp-story-cta-layer-error.html:52:4 The tag 'amp-story-cta-layer' may only appear as a descendant of tag 'amp-story-page'.
>> ^~~~~~~~~
amp-story/1.0/test/validator-amp-story-cta-layer-error.html:52:4 Tag 'amp-story-cta-layer' is disallowed as child of tag 'amp-story'. Child tag must be one of ['amp-analytics', 'amp-consent', 'amp-geo', 'amp-pixel', 'amp-sidebar', 'amp-story-auto-ads', 'amp-story-auto-analytics', 'amp-story-bookend', 'amp-story-page', 'amp-story-social-share']. (see https://amp.dev/documentation/components/amp-story)
amp-story/1.0/test/validator-amp-story-cta-layer-error.html:52:4 Tag 'amp-story-cta-layer' is disallowed as child of tag 'amp-story'. Child tag must be one of ['amp-analytics', 'amp-consent', 'amp-geo', 'amp-pixel', 'amp-sidebar', 'amp-story-auto-ads', 'amp-story-auto-analytics', 'amp-story-bookend', 'amp-story-page', 'amp-story-social-share', 'amp-story-subscriptions']. (see https://amp.dev/documentation/components/amp-story)
| <a href="http://www.google.com" class="button"> Illegal CTA layer outside of amp-story-page! </a>
| </amp-story-cta-layer>
| </amp-story>
| </body>
| </html>
| </html>
1 change: 1 addition & 0 deletions extensions/amp-story/validator-amp-story.protoascii
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,7 @@ tags: { # <amp-story>
child_tag_name_oneof: "AMP-STORY-BOOKEND"
child_tag_name_oneof: "AMP-STORY-PAGE"
child_tag_name_oneof: "AMP-STORY-SOCIAL-SHARE"
child_tag_name_oneof: "AMP-STORY-SUBSCRIPTIONS"
}
}
tags: { # <amp-story-page>
Expand Down