search

nuxt-community / amp-module

AMP Module for Nuxt 2
https://codesandbox.io/s/github/nuxt-community/amp-module/
MIT License
204 stars 36 forks source link

amp-story-player not found in amp-module #256

Closed anjali89r closed 3 years ago

anjali89r commented 3 years ago

I'm trying to embed Webstories in a non AMP page. I tried using the mode amp: 'hybrid' in my non AMP page but couldn't embed the story in the non AMP page. On further reading the AMP docs, I realized that Web Stories rely on the AMP Story Player, in the form of the element, to embed and play stories on non-AMP sites https://amp.dev/documentation/guides-and-tutorials/integrate/embed-stories-nonamp/?format=stories I tried the code using as shown in AMP doc, it's working fine then, but not loading on the initial page load even with <client-only>. Is there any way to fix the issue.

Beethoven commented 3 years ago

Add this code to your tags.js inside lib: tags.txt

This adds the necessary tags and a space in html.includes

I made a PR #257 #258

anjali89r commented 3 years ago

Thanks for the reply. So, I updated the tags.js file inside lib and added the webstory in my non AMP page as shown: ` <a href="https://ampfest-story-player-demo.web.app/examples/amp-story/AMPFestPlayerDemo/s1"

<a href="https://ampfest-story-player-demo.web.app/examples/amp-story/AMPFestPlayerDemo/s2" <a href="https://ampfest-story-player-demo.web.app/examples/amp-story/AMPFestPlayerDemo/s3" ` It throws error: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option. Is this the right way or did I miss something here?

Beethoven commented 3 years ago

Thanks for the reply. So, I updated the tags.js file inside lib and added the webstory in my non AMP page as shown: <amp-story-player style="width: 370px; height: 622px;"> <a href="https://ampfest-story-player-demo.web.app/examples/amp-story/AMPFestPlayerDemo/s1" ></a> <a href="https://ampfest-story-player-demo.web.app/examples/amp-story/AMPFestPlayerDemo/s2" ></a> <a href="https://ampfest-story-player-demo.web.app/examples/amp-story/AMPFestPlayerDemo/s3" ></a> </amp-story-player> It throws error: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option. Is this the right way or did I miss something here?

This works in an AMP page, for a non AMP page you have to include a js and css:

https://github.com/ampproject/amphtml/blob/main/spec/amp-story-player.md