AMP Best Practices with Hugo

support
1

I am using the gist shortcode in my canonical page, but this correctly generates the “User-authored JavaScript found on page” error for the AMP equivalent of my page. Meanwhile, there is an AMP tag for gists.

I suppose I need a way for a page to “know” it’s an AMP or canonical page and that it has a gist in it and then to import the appropriate JavaScript (to import JS you don’t use generates a warning in AMP) and more importantly to choose the appropriate gist rendering mechanism–the shortcode or the AMP tag.

Whether with this specific example or others that come to mind, what would you suggest would be the “best practices” for writing layouts that can handle these possibilities?

Thanks.

2

The built-in gist shortcode probably doesn’t account in any way for AMP pages. It simply outputs the standard embed code for gists.

If you’d like to use the amp-gist, you could write your own shortcode. Ie. save this as /layouts/shortcodes/amp-gist.html

<script async custom-element="amp-gist" src="https://cdn.ampproject.org/v0/amp-gist-0.1.js"></script>
<amp-gist
    data-gistid="{{ .Get "id" }}"
    layout="fixed-height"
    height="{{ .Get "height" }}">
</amp-gist>

and you could use it via:

{{< amp-gist id="<gist id>" height="<gist embed height>" >}}
3

Not that I really understand what this Gist shortcode does, I wanted to chime in and say that in Hugo, shortcodes are “output format” aware, so you can have in layouts/shortcodes:

gist.html
gist.amp.html

And you will get the appropriate shortcode for the output format in question.

3 Likes
4

Thanks. Your comments are both very helpful.

The amp-gist script has to be in head though, but there are ways to deal with that.

Thanks again.