add image fallback

themes/tfsci/assets/main.ts

@@ -2,7 +2,9 @@ import { onRestoreAnchor, onSaveAnchor } from './functions/scroll'
 import { on, ready } from './functions/browser'
 import tippy from 'tippy.js'
 
-ready
+Promise.resolve()
+  .then(onImageFallback)
+  .then(() => ready)
   .then(onTableStyle)
   .then(onMobileHeader)
   .then(onLanguageSwitch)
@@ -102,3 +104,18 @@ function onAbbreviation() {
     },
   })
 }
+
+function onImageFallback() {
+  on(document, 'error', 'img', onError, { capture: true })
+
+  function onError(event: Event) {
+    if (event.target === null) return
+    const target = event.target as HTMLImageElement
+    if (target.tagName !== 'IMG') return
+    const attribute = 'data-origin'
+    const origin = target.getAttribute(attribute)
+    if (origin) target.src = origin
+    target.removeAttribute(attribute)
+    target.removeEventListener('error', onError)
+  }
+}

themes/tfsci/layouts/_default/_markup/render-image.html

@@ -1,16 +1,20 @@
-{{- $destination := .Destination -}}
-{{- if eq (getenv "CI") "true" -}}
-  {{- if hasPrefix $destination "http" -}}
-    {{- with resources.GetRemote $destination -}}
-      {{- $destination = .Permalink -}}
+{{- $src := .Destination -}}
+{{- if and (getenv "CI") (hasPrefix $src "https://transfemscience.org/assets/images/") -}}
+  {{- $image := resources.GetRemote $src -}}
+  {{- if $image -}}
+    {{- if eq $image.MediaType.SubType "svg" -}}
+      {{- $image = $image | minify -}}
     {{- end -}}
+    {{- $src = $image.Permalink -}}
   {{- end -}}
 {{- end -}}
+{{- $alt := .Text | default .Title | default "figure" -}}
+{{- $figure := printf `<figure class="image"><img src=%q alt=%q data-origin=%q></figure>` $src $alt .Destination | safeHTML -}}
 {{- if .Title }}
 <div class="card">
-<div class="card-image"><figure class="image"><img src="{{ $destination | safeURL }}" alt="{{ .Text }}"></figure></div>
+<div class="card-image">{{ $figure }}</div>
 <div class="card-content">{{ .Title }}</div>
 </div>
 {{- else }}
-<figure class="image"><img src="{{ $destination | safeURL }}" alt="{{ .Text }}"></figure>
+{{ $figure }}
 {{- end }}

themes/tfsci/layouts/partials/head/resources.html

@@ -5,7 +5,7 @@
 <link rel="stylesheet" href="{{ .Permalink }}">
 {{- end }}
 {{- with resources.Get "main.ts" | js.Build | minify | fingerprint }}
-<script async defer src="{{ .Permalink }}"></script>
+<script src="{{ .Permalink }}"></script>
 {{- end }}
 {{- if not .Site.IsServer }}
 {{- partial "head/google-analytics" . }}