The project's Gemfile includes the jekyll-gist package, which allows embedding GitHub gists in posts and pages. However, this package is incompatible with AMP, and it renders script tags that break AMP validation and page layout. To prevent these issues, the theme should remove the jekyll-gist dependency and use alternative methods to embed gists.
Problem
The jekyll-gist package always renders the gist content with a script tag, regardless of whether the page is an AMP page or not. This violates the AMP specification, and results in AMP validation errors and broken page layout.
Steps to reproduce the behavior
Create a Jekyll site with AMP and jekyll-gist
Add a gist tag to a post or page, e.g. {% gist c08ee0f2726fd0e3909d %}
Build the site and view the AMP version of the post or page
Observe the AMP validation errors and the broken page layout
Environment
Jekyll version: 4.2.0
jekyll-gist version: 1.5.0
Google AMP version: 0.1
Operating system: Windows 10
Browser: Chrome 87
Solution
The jekyll-gist package should be removed from the theme's Gemfile and any usage of the gist tag should be replaced with using an <amp-gist> component to embed the gist. This will ensure that the theme is compatible with AMP and does not render any script tags that are forbidden by AMP.
Steps to implement the solution
[x] Remove the jekyll-gist package from the theme's Gemfile
[x] Run bundle install to update the dependencies
[x] Replace any occurrence of the gist tag with an <amp-gist> component, e.g. {% gist c08ee0f2726fd0e3909d %} -> <amp-gist data-gistid="c08ee0f2726fd0e3909d" layout="fixed-height" height="1200"></amp-gist>
[x] Build the site and view the AMP version of the posts and pages
[x] Observe that the AMP validation errors and the layout issues are resolved
Overview
The project's Gemfile includes the jekyll-gist package, which allows embedding GitHub gists in posts and pages. However, this package is incompatible with AMP, and it renders script tags that break AMP validation and page layout. To prevent these issues, the theme should remove the jekyll-gist dependency and use alternative methods to embed gists.
Problem
The jekyll-gist package always renders the gist content with a script tag, regardless of whether the page is an AMP page or not. This violates the AMP specification, and results in AMP validation errors and broken page layout.
Steps to reproduce the behavior
{% gist c08ee0f2726fd0e3909d %}Environment
Solution
The jekyll-gist package should be removed from the theme's Gemfile and any usage of the gist tag should be replaced with using an
<amp-gist>component to embed the gist. This will ensure that the theme is compatible with AMP and does not render any script tags that are forbidden by AMP.Steps to implement the solution
bundle installto update the dependencies<amp-gist>component, e.g.{% gist c08ee0f2726fd0e3909d %}-><amp-gist data-gistid="c08ee0f2726fd0e3909d" layout="fixed-height" height="1200"></amp-gist>