From db3af819795db0462488445843e4ed4962eee6f2 Mon Sep 17 00:00:00 2001
From: Rohan Kumar <seirdy@seirdy.one>
Date: Sun, 27 Jun 2021 19:25:58 -0700
Subject: [PATCH] Picture shortcode: support JPEG-XL, async decoding

---
 layouts/shortcodes/picture.html | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/layouts/shortcodes/picture.html b/layouts/shortcodes/picture.html
index 15b482a..186afa2 100644
--- a/layouts/shortcodes/picture.html
+++ b/layouts/shortcodes/picture.html
@@ -2,10 +2,12 @@
 {{ $light_png := resources.GetMatch (printf "/p/%s.png" (.Get "name")) -}}
 {{ $light_webp := resources.GetMatch (printf "/p/%s.webp" (.Get "name")) -}}
 {{ $light_avif := resources.GetMatch (printf "/p/%s.avif" (.Get "name")) -}}
+{{ $light_jxl := resources.GetMatch (printf "/p/%s.jxl" (.Get "name")) -}}
 {{ $dark_svg := resources.GetMatch (printf "/p/%s_dark.svg" (.Get "name")) -}}
 {{ $dark_png := resources.GetMatch (printf "/p/%s_dark.png" (.Get "name")) -}}
 {{ $dark_webp := resources.GetMatch (printf "/p/%s_dark.webp" (.Get "name")) -}}
 {{ $dark_avif := resources.GetMatch (printf "/p/%s_dark.avif" (.Get "name")) -}}
+{{ $dark_jxl := resources.GetMatch (printf "/p/%s_dark.jxl" (.Get "name")) -}}
 <picture>
 	{{ with $dark_svg -}}
 	{{ $dark_svg_src := . | resources.Fingerprint "md5" -}}
@@ -14,6 +16,13 @@
 		type="image/svg+xml"
 		media="(prefers-color-scheme: dark)">
 	{{ end -}}
+	{{ with $dark_jxl -}}
+	{{ $dark_jxl_src := . | resources.Fingerprint "md5" -}}
+	<source
+		srcset="{{ $dark_jxl_src.RelPermalink }}"
+		type="image/jxl"
+		media="(prefers-color-scheme: dark)">
+	{{ end -}}
 	{{ with $dark_avif -}}
 	{{ $dark_avif_src := . | resources.Fingerprint "md5" -}}
 	<source
@@ -41,6 +50,12 @@
 		srcset="{{ $light_svg_src.RelPermalink }}"
 		type="image/svg+xml">
 	{{ end -}}
+	{{ with $light_jxl -}}
+	{{ $light_jxl_src := . | resources.Fingerprint "md5" -}}
+	<source
+		srcset="{{ $light_jxl_src.RelPermalink }}"
+		type="image/jxl">
+	{{ end -}}
 	{{ with $light_avif -}}
 	{{ $light_avif_src := . | resources.Fingerprint "md5" -}}
 	<source
@@ -59,5 +74,6 @@
 		type="image/png">
 	<img
 		width="{{ $light_png.Width }}" height="{{ $light_png.Height }}"
-		src="{{ $light_png.RelPermalink }}" alt='{{ .Get "alt" }}'>
+		src="{{ $light_png.RelPermalink }}" alt='{{ .Get "alt" }}'
+		decoding="async">
 </picture>