clean up shortcodes

.percy.yml

@@ -5,7 +5,7 @@ snapshot:
     - 1050
   enable-javascript: true
   percy-css: >
-    div.embed,
+    .embed,
     iframe,
     video,
     img[src$=".gif"],

assets/sass/components/_embeds.scss

@@ -1,5 +1,5 @@
 // External social embeds
-div.embed {
+.embed {
   &.codepen {
     iframe {
       width: 100%;
@@ -8,8 +8,10 @@ div.embed {
   }
 
   &.tweet {
-    .twitter-tweet-rendered iframe {
-      margin: 0.5em 0;
+    margin: 0.5em 0;
+
+    > .twitter-tweet-rendered {
+      margin: 0 auto;
     }
   }
 
@@ -40,12 +42,25 @@ div.embed {
     }
   }
 
+  &.vimeo {
+    padding: 75% 0 0 0;
+    position: relative;
+
+    iframe {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
   &.gh-buttons {
     text-align: center;
 
     // GitHub's script replaces <a> with <span>, so cover both
-    > span,
-    > a {
+    > a,
+    > span {
       margin: 0 0.5em;
     }
   }

layouts/shortcodes/iframe.html

@@ -1,3 +1,11 @@
 <div class="embed {{ .Name }}">
-<iframe src="{{ .Get "src" }}"{{ with .Get "title" }} title="{{ . }}"{{ end }}{{ with .Get "sandbox" }} sandbox="{{ . }}"{{ end }}></iframe>
+  <iframe
+    src="{{ .Get "src" }}"
+    {{ with .Get "title" }}
+      title="{{ . }}"
+    {{ end }}
+    {{ with .Get "sandbox" }}
+      sandbox="{{ . }}"
+    {{ end }}>
+  </iframe>
 </div>

layouts/shortcodes/image.html

@@ -6,9 +6,11 @@
     {{- with .Inner }}
       alt="{{ . | $.Page.RenderString | plainify | safeHTML }}"
     {{- else }}
-      {{ with .Get "alt" }} alt="{{ . | safeHTML }}"{{ end }}
+      {{ with .Get "alt" }}
+        alt="{{ . | safeHTML }}"
+      {{ end }}
     {{- end -}}
-  >
+  />
   {{ if .Get "link" }}</a>{{ end }}
 
   {{ with .Inner -}}

layouts/shortcodes/image.rss.xml

@@ -1,10 +1,17 @@
 {{- $optimized := partial "functions/optimize-image" . -}}
 
 <p align="center">
-{{ with .Get "link" }}<a href="{{ . }}">{{ end }}
-<img src="{{ print .Site.Params.baseUrl $optimized.Permalink }}" width="{{ $optimized.Width }}" height="{{ $optimized.Height }}"
-     {{- with .Get "alt" }} alt="{{ . | safeHTML }}"{{ end }}
-     {{- with .Inner }} alt="{{ . | $.Page.RenderString | plainify | safeHTML }}"{{ end }}>
-{{ if .Get "link" }}</a>{{ end }}
-{{ with .Inner }}<br>{{ . | $.Page.RenderString | safeHTML }}{{ end -}}
+  {{ with .Get "link" }}<a href="{{ . }}">{{ end }}
+  <img src="{{ print .Site.Params.baseUrl $optimized.Permalink }}" width="{{ $optimized.Width }}" height="{{ $optimized.Height }}"
+    {{- with .Inner }}
+      alt="{{ . | $.Page.RenderString | plainify | safeHTML }}"
+    {{- else }}
+      {{ with .Get "alt" }}
+        alt="{{ . | safeHTML }}"
+      {{ end }}
+    {{- end -}}
+  />
+  {{ if .Get "link" }}</a>{{ end }}
+
+  {{ with .Inner }}<br>{{ . | $.Page.RenderString | safeHTML }}{{ end -}}
 </p>

layouts/shortcodes/instagram.html

@@ -6,5 +6,5 @@
 </div>
 
 {{- define "__shortcode_instagram_js" }}
-<script async src="https://www.instagram.com/embed.js"></script>
+<script async defer src="https://www.instagram.com/embed.js"></script>
 {{- end }}

layouts/shortcodes/tweet.html

@@ -1,4 +1,4 @@
-{{- $url := printf "https://publish.twitter.com/oembed?lang=en&omit_script=true&dnt=true&align=center&url=%s" (index .Params 0 | safeURL) -}}
+{{- $url := printf "https://publish.twitter.com/oembed?lang=en&omit_script=true&dnt=true&url=%s" (index .Params 0 | safeURL) -}}
 {{- $json := getJSON $url -}}
 
 <div class="embed {{ .Name }}">

layouts/shortcodes/tweet.rss.xml

@@ -1,4 +1,4 @@
-{{- $url := printf "https://publish.twitter.com/oembed?lang=en&omit_script=true&dnt=true&align=center&url=%s" (index .Params 0 | safeURL) -}}
+{{- $url := printf "https://publish.twitter.com/oembed?lang=en&omit_script=true&dnt=true&url=%s" (index .Params 0 | safeURL) -}}
 {{- $json := getJSON $url -}}
 
 {{ $json.html | safeHTML }}

layouts/shortcodes/vimeo.html

@@ -1,7 +1,12 @@
-<div class="embed {{ .Name }}" 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 class="embed {{ .Name }}">
+  <iframe
+    class="vimeo-player"
+    src="https://player.vimeo.com/video/{{ .Get "id" }}&amp;dnt=1"
+    allow="fullscreen"
+    allowfullscreen>
+  </iframe>
 </div>
 
 {{- define "__shortcode_vimeo_js" }}
-<script src="https://player.vimeo.com/api/player.js"></script>
+<script async defer src="https://player.vimeo.com/api/player.js"></script>
 {{ end }}

layouts/shortcodes/youtube.html

@@ -2,6 +2,7 @@
   <iframe
     class="youtube-player"
     src="https://www.youtube-nocookie.com/embed/{{ index .Params 0 }}?autoplay=0&amp;hl=en&amp;fs=1&amp;showinfo=1&amp;rel=0&amp;iv_load_policy=3"
+    allow="fullscreen"
     allowfullscreen>
   </iframe>
 </div>

resources/_gen/getjson/66253b5f9b7458cc40f01f1e4dec5b54

@@ -0,0 +1 @@
+{"url":"https:\/\/twitter.com\/archiveis\/status\/1018691421182791680","author_name":"archive.today","author_url":"https:\/\/twitter.com\/archiveis","html":"\u003Cblockquote class=\"twitter-tweet\" data-lang=\"en\" data-dnt=\"true\"\u003E\u003Cp lang=\"en\" dir=\"ltr\"\u003E"Having to do" is not so direct here.\u003Cbr\u003EAbsence of EDNS and massive mismatch (not only on AS\/Country, but even on the continent level) of where DNS and related HTTP requests come from causes so many troubles so I consider EDNS-less requests from Cloudflare as invalid.\u003C\/p\u003E— archive.today (@archiveis) \u003Ca href=\"https:\/\/twitter.com\/archiveis\/status\/1018691421182791680?ref_src=twsrc%5Etfw\"\u003EJuly 16, 2018\u003C\/a\u003E\u003C\/blockquote\u003E\n","width":550,"height":null,"type":"rich","cache_age":"3153600000","provider_name":"Twitter","provider_url":"https:\/\/twitter.com","version":"1.0"}

resources/_gen/getjson/6a1f75720293575d6406621061cdf3a1

@@ -0,0 +1 @@
+{"url":"https:\/\/twitter.com\/sandofsky\/status\/1138686582859239425","author_name":"Ben Sandofsky","author_url":"https:\/\/twitter.com\/sandofsky","html":"\u003Cblockquote class=\"twitter-tweet\" data-lang=\"en\" data-dnt=\"true\"\u003E\u003Cp lang=\"en\" dir=\"ltr\"\u003EDropbox now uses over half a gig of memory. Let’s peak into its frameworks folder. \u003Ca href=\"https:\/\/t.co\/altzzc2q8L\"\u003Epic.twitter.com\/altzzc2q8L\u003C\/a\u003E\u003C\/p\u003E— Ben Sandofsky (@sandofsky) \u003Ca href=\"https:\/\/twitter.com\/sandofsky\/status\/1138686582859239425?ref_src=twsrc%5Etfw\"\u003EJune 12, 2019\u003C\/a\u003E\u003C\/blockquote\u003E\n","width":550,"height":null,"type":"rich","cache_age":"3153600000","provider_name":"Twitter","provider_url":"https:\/\/twitter.com","version":"1.0"}

resources/_gen/getjson/954c649ddc7e7df8e60b773d80d62c8d

@@ -0,0 +1 @@
+{"url":"https:\/\/twitter.com\/natfriedman\/status\/1271253144442253312","author_name":"Nat Friedman","author_url":"https:\/\/twitter.com\/natfriedman","html":"\u003Cblockquote class=\"twitter-tweet\" data-lang=\"en\" data-dnt=\"true\"\u003E\u003Cp lang=\"en\" dir=\"ltr\"\u003EIt's a great idea and we are already working on this! cc \u003Ca href=\"https:\/\/twitter.com\/billygriffin22?ref_src=twsrc%5Etfw\"\u003E@billygriffin22\u003C\/a\u003E\u003C\/p\u003E— Nat Friedman (@natfriedman) \u003Ca href=\"https:\/\/twitter.com\/natfriedman\/status\/1271253144442253312?ref_src=twsrc%5Etfw\"\u003EJune 12, 2020\u003C\/a\u003E\u003C\/blockquote\u003E\n","width":550,"height":null,"type":"rich","cache_age":"3153600000","provider_name":"Twitter","provider_url":"https:\/\/twitter.com","version":"1.0"}

resources/_gen/getjson/f1d0987a50faef9d3f14ed3d2359d95e

@@ -0,0 +1 @@
+{"url":"https:\/\/twitter.com\/w3Nicolas\/status\/1134529316904153089","author_name":"Nicolas Beauvais","author_url":"https:\/\/twitter.com\/w3Nicolas","html":"\u003Cblockquote class=\"twitter-tweet\" data-lang=\"en\" data-dnt=\"true\"\u003E\u003Cp lang=\"en\" dir=\"ltr\"\u003EHow \u003Ca href=\"https:\/\/twitter.com\/digitalocean?ref_src=twsrc%5Etfw\"\u003E@DigitalOcean\u003C\/a\u003E just killed our company \u003Ca href=\"https:\/\/twitter.com\/raisupcom?ref_src=twsrc%5Etfw\"\u003E@raisupcom\u003C\/a\u003E. A long thread for a very sad story. \u003Ca href=\"https:\/\/t.co\/uOFCDRoYJ6\"\u003Epic.twitter.com\/uOFCDRoYJ6\u003C\/a\u003E\u003C\/p\u003E— Nicolas Beauvais (@w3Nicolas) \u003Ca href=\"https:\/\/twitter.com\/w3Nicolas\/status\/1134529316904153089?ref_src=twsrc%5Etfw\"\u003EMay 31, 2019\u003C\/a\u003E\u003C\/blockquote\u003E\n","width":550,"height":null,"type":"rich","cache_age":"3153600000","provider_name":"Twitter","provider_url":"https:\/\/twitter.com","version":"1.0"}

vercel.json

@@ -8,10 +8,7 @@
     { "source": "/favicon.ico", "destination": "/assets/images/favicon.ico" },
     { "source": "/favicon.png", "destination": "/assets/images/favicon-64.png" },
     { "source": "/apple-touch-icon.png", "destination": "/assets/images/apple-touch-icon.png" },
-    {
-      "source": "/apple-touch-icon-precomposed.png",
-      "destination": "/assets/images/apple-touch-icon.png"
-    }
+    { "source": "/apple-touch-icon-precomposed.png", "destination": "/assets/images/apple-touch-icon.png" }
   ],
   "redirects": [
     { "source": "/notes/:slug/amp.html", "destination": "/notes/:slug/", "statusCode": 301 },