From be6f8b1fef10aecefbb5d4947a546511c4d79556 Mon Sep 17 00:00:00 2001
From: Jake Jarvis <jake@jarv.is>
Date: Mon, 20 Jan 2020 11:32:40 -0500
Subject: [PATCH] simplify shortcode JS logic and only call AMP script if
 shortcodes present

fixes https://search.google.com/search-console/amp/drilldown?resource_id=sc-domain%3Ajarv.is&item_key=GgcIIhADKKZO&utm_source=wnc_10030322&utm_medium=gamma&utm_campaign=wnc_10030322&utm_content=msg_100058679&hl=en&sharing_key=VVX9zj1yTzUxHPzmKFP4Gg
---
 layouts/_default/single.amp.html                   | 13 ++++++++-----
 layouts/partials/scripts/shortcodes.html           | 14 +++++++++++---
 layouts/partials/scripts/shortcodes/facebook.html  |  2 --
 .../partials/scripts/shortcodes/gh-buttons.html    |  1 -
 layouts/partials/scripts/shortcodes/tweet.html     |  1 -
 layouts/shortcodes/facebook.html                   |  5 +++++
 layouts/shortcodes/gh-buttons.html                 |  4 ++++
 layouts/shortcodes/instagram.amp.html              |  7 +++++++
 layouts/shortcodes/instagram.html                  | 10 ++++++++++
 layouts/shortcodes/instagram.rss.xml               |  1 +
 layouts/shortcodes/tweet.html                      |  4 ++++
 layouts/shortcodes/vimeo.amp.html                  |  6 ++++++
 layouts/shortcodes/vimeo.html                      |  7 +++++++
 layouts/shortcodes/vimeo.rss.xml                   |  1 +
 layouts/shortcodes/youtube.rss.xml                 |  2 +-
 15 files changed, 65 insertions(+), 13 deletions(-)
 delete mode 100644 layouts/partials/scripts/shortcodes/facebook.html
 delete mode 100644 layouts/partials/scripts/shortcodes/gh-buttons.html
 delete mode 100644 layouts/partials/scripts/shortcodes/tweet.html
 create mode 100644 layouts/shortcodes/instagram.amp.html
 create mode 100644 layouts/shortcodes/instagram.html
 create mode 100644 layouts/shortcodes/instagram.rss.xml
 create mode 100644 layouts/shortcodes/vimeo.amp.html
 create mode 100644 layouts/shortcodes/vimeo.html
 create mode 100644 layouts/shortcodes/vimeo.rss.xml

diff --git a/layouts/_default/single.amp.html b/layouts/_default/single.amp.html
index 43319e32..d256a94f 100644
--- a/layouts/_default/single.amp.html
+++ b/layouts/_default/single.amp.html
@@ -5,11 +5,13 @@
     {{ hugo.Generator }}
     <script async src="https://cdn.ampproject.org/v0.js"></script>
     <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
-    <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
-    <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
-    <script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
-    <script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>
-    <script async custom-element="amp-gist" src="https://cdn.ampproject.org/v0/amp-gist-0.1.js"></script>
+    {{ if .HasShortcode "video" }}<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>{{ end }}
+    {{ if .HasShortcode "youtube" }}<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>{{ end }}
+    {{ if .HasShortcode "tweet" }}<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>{{ end }}
+    {{ if .HasShortcode "facebook" }}<script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>{{ end }}
+    {{ if .HasShortcode "gist" }}<script async custom-element="amp-gist" src="https://cdn.ampproject.org/v0/amp-gist-0.1.js"></script>{{ end }}
+    {{ if .HasShortcode "instagram" }}<script async custom-element="amp-gist" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>{{ end }}
+    {{ if .HasShortcode "vimeo" }}<script async custom-element="amp-gist" src="https://cdn.ampproject.org/v0/amp-vimeo-0.1.js"></script>{{ end }}
     <title>{{ .Title }} &ndash; {{ .Site.Title }}</title>
     {{ with .OutputFormats.Get "html" }}<link rel="canonical" href="{{ .Permalink }}">{{ end }}
     <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
@@ -169,6 +171,7 @@
     <link rel="icon" href="{{ "favicon-32.png" | absURL }}" sizes="32x32">
     <link rel="icon" href="{{ "favicon-16.png" | absURL }}" sizes="16x16">
     <link rel="shortcut icon" href="{{ "favicon.ico" | absURL }}">
+    <link rel="manifest" href="{{ "site.webmanifest" | absURL }}">
     <link rel="alternate" type="application/rss+xml" href="{{ "feed.xml" | absURL }}" title="{{ .Site.Title }} (RSS)">
 
     {{ partial "head/schema-person" . }}
diff --git a/layouts/partials/scripts/shortcodes.html b/layouts/partials/scripts/shortcodes.html
index a0a3917c..a3284d49 100644
--- a/layouts/partials/scripts/shortcodes.html
+++ b/layouts/partials/scripts/shortcodes.html
@@ -1,11 +1,19 @@
 {{ if .HasShortcode "gh-buttons" -}}
-{{ partial "scripts/shortcodes/gh-buttons" . }}
+{{ template "__shortcode_gh-buttons_js" $ }}
 {{ end -}}
 
 {{ if .HasShortcode "tweet" -}}
-{{ partial "scripts/shortcodes/tweet" . }}
+{{ template "__shortcode_twitter_js" $ }}
 {{ end -}}
 
 {{ if .HasShortcode "facebook" -}}
-{{ partial "scripts/shortcodes/facebook" . }}
+{{ template "__shortcode_facebook_js" $ }}
+{{ end -}}
+
+{{ if .HasShortcode "instagram" -}}
+{{ template "__shortcode_instagram_js" $ }}
+{{ end -}}
+
+{{ if .HasShortcode "vimeo" -}}
+{{ template "__shortcode_vimeo_js" $ }}
 {{ end -}}
diff --git a/layouts/partials/scripts/shortcodes/facebook.html b/layouts/partials/scripts/shortcodes/facebook.html
deleted file mode 100644
index 78c63842..00000000
--- a/layouts/partials/scripts/shortcodes/facebook.html
+++ /dev/null
@@ -1,2 +0,0 @@
-<div id="fb-root"></div>
-<script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v5.0"></script>
diff --git a/layouts/partials/scripts/shortcodes/gh-buttons.html b/layouts/partials/scripts/shortcodes/gh-buttons.html
deleted file mode 100644
index 668938fc..00000000
--- a/layouts/partials/scripts/shortcodes/gh-buttons.html
+++ /dev/null
@@ -1 +0,0 @@
-<script async defer src="https://buttons.github.io/buttons.js"></script>
diff --git a/layouts/partials/scripts/shortcodes/tweet.html b/layouts/partials/scripts/shortcodes/tweet.html
deleted file mode 100644
index dc2415ba..00000000
--- a/layouts/partials/scripts/shortcodes/tweet.html
+++ /dev/null
@@ -1 +0,0 @@
-<script async defer src="https://platform.twitter.com/widgets.js"></script>
diff --git a/layouts/shortcodes/facebook.html b/layouts/shortcodes/facebook.html
index 9499f59d..24b34635 100644
--- a/layouts/shortcodes/facebook.html
+++ b/layouts/shortcodes/facebook.html
@@ -4,3 +4,8 @@
 <div class="embed facebook">
 {{ $json.html | safeHTML }}
 </div>
+
+{{- define "__shortcode_facebook_js" }}
+<div id="fb-root"></div>
+<script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v5.0"></script>
+{{- end }}
diff --git a/layouts/shortcodes/gh-buttons.html b/layouts/shortcodes/gh-buttons.html
index c6c35065..21dfc260 100644
--- a/layouts/shortcodes/gh-buttons.html
+++ b/layouts/shortcodes/gh-buttons.html
@@ -2,3 +2,7 @@
   <a class="github-button" href="https://github.com/{{ .Get "username" }}/{{ .Get "repo" }}" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star {{ .Get "username" }}/{{ .Get "repo" }} on GitHub">Star</a>&nbsp;&nbsp;&nbsp;
   <a class="github-button" href="https://github.com/{{ .Get "username" }}/{{ .Get "repo" }}/issues" data-icon="octicon-issue-opened" data-size="large" data-show-count="true" aria-label="Issues for {{ .Get "username" }}/{{ .Get "repo" }} on GitHub">Issue</a>
 </p></div>
+
+{{- define "__shortcode_gh-buttons_js" }}
+<script async defer src="https://buttons.github.io/buttons.js"></script>
+{{- end }}
diff --git a/layouts/shortcodes/instagram.amp.html b/layouts/shortcodes/instagram.amp.html
new file mode 100644
index 00000000..92c945da
--- /dev/null
+++ b/layouts/shortcodes/instagram.amp.html
@@ -0,0 +1,7 @@
+<amp-instagram
+  data-shortcode="{{ .Get "id" }}"
+  data-captioned
+  width="500"
+  height="500"
+  layout="responsive">
+</amp-instagram>
diff --git a/layouts/shortcodes/instagram.html b/layouts/shortcodes/instagram.html
new file mode 100644
index 00000000..2bc4a29e
--- /dev/null
+++ b/layouts/shortcodes/instagram.html
@@ -0,0 +1,10 @@
+{{- $url := printf "https://api.instagram.com/oembed/?omitscript=1&url=https://www.instagram.com/p/%s" (.Get "id") -}}
+{{- $json := getJSON $url -}}
+
+<div class="embed instagram">
+{{ $json.html | safeHTML }}
+</div>
+
+{{- define "__shortcode_instagram_js" }}
+<script async src="https://www.instagram.com/embed.js"></script>
+{{- end }}
diff --git a/layouts/shortcodes/instagram.rss.xml b/layouts/shortcodes/instagram.rss.xml
new file mode 100644
index 00000000..539b6447
--- /dev/null
+++ b/layouts/shortcodes/instagram.rss.xml
@@ -0,0 +1 @@
+<p style="text-align: center;"><a href="https://www.instagram.com/p/{{ .Get "id" }}" target="_blank" rel="noopener">View this image on Instagram.</a></p>
diff --git a/layouts/shortcodes/tweet.html b/layouts/shortcodes/tweet.html
index babce706..4c3b622c 100644
--- a/layouts/shortcodes/tweet.html
+++ b/layouts/shortcodes/tweet.html
@@ -4,3 +4,7 @@
 <div class="embed tweet">
 {{ $json.html | safeHTML }}
 </div>
+
+{{- define "__shortcode_twitter_js" }}
+<script async defer src="https://platform.twitter.com/widgets.js"></script>
+{{- end }}
diff --git a/layouts/shortcodes/vimeo.amp.html b/layouts/shortcodes/vimeo.amp.html
new file mode 100644
index 00000000..f456297f
--- /dev/null
+++ b/layouts/shortcodes/vimeo.amp.html
@@ -0,0 +1,6 @@
+<amp-vimeo
+  data-videoid="{{ .Get "id" }}"
+  layout="responsive"
+  width="500"
+  height="281">
+</amp-vimeo>
diff --git a/layouts/shortcodes/vimeo.html b/layouts/shortcodes/vimeo.html
new file mode 100644
index 00000000..b8a9a823
--- /dev/null
+++ b/layouts/shortcodes/vimeo.html
@@ -0,0 +1,7 @@
+<div class="embed vimeo" style="padding:75% 0 0 0;position:relative;">
+  <iframe src="https://player.vimeo.com/video/{{ .Get "id" }}&amp;dnt=1" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="fullscreen" allowfullscreen></iframe>
+</div>
+
+{{- define "__shortcode_vimeo_js" }}
+<script src="https://player.vimeo.com/api/player.js"></script>
+{{ end }}
diff --git a/layouts/shortcodes/vimeo.rss.xml b/layouts/shortcodes/vimeo.rss.xml
new file mode 100644
index 00000000..74ab376f
--- /dev/null
+++ b/layouts/shortcodes/vimeo.rss.xml
@@ -0,0 +1 @@
+<p style="text-align: center;"><a href="https://vimeo.com/{{ .Get "id" }}" target="_blank" rel="noopener">Watch this video on Vimeo.</a></p>
diff --git a/layouts/shortcodes/youtube.rss.xml b/layouts/shortcodes/youtube.rss.xml
index e4292dd0..5c5da0db 100644
--- a/layouts/shortcodes/youtube.rss.xml
+++ b/layouts/shortcodes/youtube.rss.xml
@@ -1 +1 @@
-<p style="text-align: center;"><a href="https://www.youtube.com/watch?v={{ index .Params 0 }}">Watch this video on YouTube.</a></p>
+<p style="text-align: center;"><a href="https://www.youtube.com/watch?v={{ index .Params 0 }}" target="_blank" rel="noopener">Watch this video on YouTube.</a></p>