<picture> elements for jxls

Makefile

@@ -66,6 +66,11 @@ $(TMPDIR)/%_big.jpg: $(DATADIR)/%.jpg
 	$(call resize,$(BIG),$(BIG),>)
 
 
+%.jxl: %.png ; $(call cjxl,-e 9)
+%.jxl: %.jpg ; $(call cjxl,-e 9)
+%.jxl: %.gif ; $(call cjxl)
+
+
 $(MAKEPAGES): make-pages/*.hs make-pages/make-pages.cabal
 	echo "[make-pages]"
 	mkdir -p $(dir $@)
@@ -133,6 +138,14 @@ mkdir -p "$(dir $@)"
 convert -resize "$(1)x$(2)$(3)" $(4) "$^" "$@"
 endef
 
+# args:
+#  1. extra flags
+define cjxl
+echo "[cjxl]    "$@
+mkdir -p "$(dir $@)"
+cjxl -d 1 "$^" "$@" $(1) 2>/dev/null
+endef
+
 # no args
 define depend-gallery
 echo "[deps]    "$@

make-pages/Depend.hs

@@ -29,17 +29,22 @@ dependSingle' yamlDir indexFile info prefix build nsfw =
  where
   images = #all if nsfw then #images info else #sfwImages info
 
-  paths  = map #path images
+  paths = map #path images
+  thumb = thumbFile $ thumbnail info
+  jxls fs = [base <.> "jxl" | f <- fs,
+              let (base, ext) = splitExtension f,
+              ext `elem` imgTypes]
+  imgTypes = words ".png .jpg .gif"
+
+  imgFiles0 = thumb : map pageFile paths ++ map bigFile paths
+  imgFiles  = imgFiles0 ++ jxls imgFiles0
+
   dls    = mapMaybe #download images
   extras = #extras info
 
   dir  = build </> prefix </> yamlDir
   page = dir </> "index.html"
-  deps = unwords $ map (dir </>) $
-    thumbFile (thumbnail info) :
-    map pageFile paths ++
-    map bigFile  paths ++
-    dls ++ extras
+  deps = unwords $ map (dir </>) $ imgFiles ++ dls ++ extras
 
 dependGallery :: GalleryInfo
               -> FilePath -- ^ index file

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

make-pages/Info.hs

@@ -33,7 +33,7 @@ import Data.Text (Text)
 import qualified Data.Text as Text
 import Data.YAML (FromYAML (..), (.:), (.:?), (.!=))
 import qualified Data.YAML as YAML
-import System.FilePath ((</>), takeBaseName, takeExtension, splitExtension)
+import System.FilePath ((</>), takeBaseName, takeExtension, splitExtensions)
 import Data.Bifunctor (second)
 
 
@@ -244,7 +244,7 @@ bigFile f
 
 addSuffix :: String -> FilePath -> FilePath
 addSuffix suf path =
-  let (pre, ext) = splitExtension path in
+  let (pre, ext) = splitExtensions path in
   pre ++ suf ++ ext
 
 

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>
 

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;

style/shiny/single.css

@@ -27,7 +27,7 @@
   box-shadow: var(--focus-box);
 }
 
-#mainimg {
+#mainimg, #mainimg img {
   display: block;
 }
 
@@ -230,3 +230,21 @@ footer {
   display: inline;
   margin-right: 0.75em;
 }
+
+.conversation {
+  display: grid;
+  grid-template-columns: min-content auto;
+  grid-gap: 0.15em 1em;
+  margin: 0;
+}
+.conversation > b {
+  grid-area: auto / 1 / auto / auto;
+  display: block;
+  text-align: right;
+}
+.conversation > q {
+  grid-area: auto / 2 / auto / auto;
+  font-style: initial;
+  quotes: none;
+  display: block;
+}