From 84f822f73bbc2808f7b392e3391bcf67433b996d Mon Sep 17 00:00:00 2001
From: rhiannon morris <rhi@rhiannon.website>
Date: Tue, 17 Jan 2023 18:45:12 +0100
Subject: [PATCH] <picture> elements for jxls

---
 make-pages/GalleryPage.hs | 9 ++++++---
 make-pages/SinglePage.hs  | 8 ++++++--
 script/single.js          | 5 ++++-
 style/shiny/single.css    | 2 +-
 4 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/make-pages/GalleryPage.hs b/make-pages/GalleryPage.hs
index 966d240..e3abca7 100644
--- a/make-pages/GalleryPage.hs
+++ b/make-pages/GalleryPage.hs
@@ -15,7 +15,7 @@ import qualified Data.HashSet as HashSet
 import Data.List (intersperse, groupBy, sortBy, sortOn)
 import Data.Maybe
 import qualified Data.Text.Lazy as Lazy
-import System.FilePath (takeDirectory, joinPath, splitPath)
+import System.FilePath (takeDirectory, joinPath, splitPath, (-<.>))
 import GHC.Exts (Down (..), the)
 
 make :: Text -> GalleryInfo -> [(FilePath, Info)] -> Lazy.Text
@@ -158,7 +158,10 @@ makeItem nsfw file info@(Info {bg}) = [b|@0
         data-tags="$tags'">
       <figure>
         <a href="$dir">
-          <img src="$thumb" loading=lazy$bgStyle>
+          <picture>
+            <source srcset="$thumbJxl" type=image/jxl>
+            <img src="$thumb" loading=lazy$bgStyle>
+          </picture>
         </a>
         <figcaption>
           <span class=date>$date'</span>
@@ -169,7 +172,7 @@ makeItem nsfw file info@(Info {bg}) = [b|@0
  where
   title    = fromMaybe (#title info) $ #galleryTitle info
   dir      = takeDirectory file
-  thumb    = getThumb dir info
+  thumb    = getThumb dir info; thumbJxl = thumb -<.> "jxl"
   nsfw'    = if nsfw && #anyNsfw info then [b| nsfw|] else ""
   tags'    = fold $ intersperse ";" $ map fromText $ tagsFor nsfw info
   date     = #latestDate info nsfw
diff --git a/make-pages/SinglePage.hs b/make-pages/SinglePage.hs
index 8856e85..832dadd 100644
--- a/make-pages/SinglePage.hs
+++ b/make-pages/SinglePage.hs
@@ -12,7 +12,7 @@ import Data.List (sort, intersperse)
 import Data.Maybe (fromMaybe, isNothing, isJust)
 import qualified Data.Text as Strict
 import qualified Data.Text.Lazy as Lazy
-import System.FilePath (joinPath, splitPath)
+import System.FilePath (joinPath, splitPath, (-<.>))
 import qualified Data.HashSet as Set
 import Data.Traversable
 
@@ -57,6 +57,7 @@ make' root siteName prefix nsfw _dataDir dir
 
   let download0 = fromMaybe (bigFile path0) download0'
   let path0'    = pageFile path0
+  let path0'Jxl = path0' -<.> "jxl"
 
   let descSection = makeDesc $ descFor nsfw info
   let tagsList    = makeTags undir $ tagsFor nsfw info
@@ -155,7 +156,10 @@ make' root siteName prefix nsfw _dataDir dir
         <figure id=mainfig>
           $warning'
           <a id=mainlink href="$download0" title="download full version">
-            <img id=mainimg src="$path0'" alt="">
+            <picture id=mainimg>
+              <source srcset="$path0'Jxl" type=image/jxl>
+              <img src="$path0'" alt="">
+            </picture>
           </a>
         </figure>
 
diff --git a/script/single.js b/script/single.js
index 31e464b..a78211b 100644
--- a/script/single.js
+++ b/script/single.js
@@ -45,7 +45,10 @@ function setImage(id, src, width, height, href, cw, firstLoad) {
     mainlink.tabIndex = -1;
   }
 
-  mainimg.src            = src;
+  let jxl = src.replace(/\..*?$/, ".jxl");
+
+  mainimg.querySelector('img').src       = src;
+  mainimg.querySelector('source').srcset = jxl;
   mainfig.dataset.width  = width;
   mainfig.dataset.height = height;
   mainlink.href          = href;
diff --git a/style/shiny/single.css b/style/shiny/single.css
index 54b939d..6eb0816 100644
--- a/style/shiny/single.css
+++ b/style/shiny/single.css
@@ -27,7 +27,7 @@
   box-shadow: var(--focus-box);
 }
 
-#mainimg {
+#mainimg, #mainimg img {
   display: block;
 }