From 76ccbe3c7dc9316d7e3f213cd21214891f1508a7 Mon Sep 17 00:00:00 2001
From: rhiannon morris <rhi@rhiannon.website>
Date: Sun, 15 Jan 2023 21:38:43 +0100
Subject: [PATCH 1/3] styles for chatlogs etc

---
 style/shiny/single.css | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/style/shiny/single.css b/style/shiny/single.css
index cbfc6d3..54b939d 100644
--- a/style/shiny/single.css
+++ b/style/shiny/single.css
@@ -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;
+}
-- 
2.39.2


From 0f2075380812559e8ea1cdbd5fa591d89aec0aec Mon Sep 17 00:00:00 2001
From: rhiannon morris <rhi@rhiannon.website>
Date: Sun, 15 Jan 2023 21:39:03 +0100
Subject: [PATCH 2/3] generate jxl from png,jpg,gif

---
 Makefile             | 13 +++++++++++++
 make-pages/Depend.hs | 17 +++++++++++------
 make-pages/Info.hs   |  4 ++--
 3 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/Makefile b/Makefile
index 59dd355..5589f90 100644
--- a/Makefile
+++ b/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]    "$@
diff --git a/make-pages/Depend.hs b/make-pages/Depend.hs
index 534f91d..46b7648 100644
--- a/make-pages/Depend.hs
+++ b/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
diff --git a/make-pages/Info.hs b/make-pages/Info.hs
index 6e92cbb..3ed0280 100644
--- a/make-pages/Info.hs
+++ b/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
 
 
-- 
2.39.2


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 3/3] <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;
 }
 
-- 
2.39.2