From c9a2858279d3d3bf48d752d5ad250303368f9ebd Mon Sep 17 00:00:00 2001
From: SayaAndy <montferrat@tuta.io>
Date: Fri, 17 Oct 2025 04:17:06 +0700
Subject: feat: add support for tags in gallery images feat: add 2x tag for an
 image in gallery feat: update layout of galleries while loading images (not
 just after)

---
 internal/glightbox/block.go         |  1 +
 internal/glightbox/html_renderer.go | 31 +++++++++++++++++++++++++------
 internal/glightbox/parser.go        | 16 ++++++++++++++--
 3 files changed, 40 insertions(+), 8 deletions(-)

(limited to 'internal')

diff --git a/internal/glightbox/block.go b/internal/glightbox/block.go
index 696f328..e53e67b 100644
--- a/internal/glightbox/block.go
+++ b/internal/glightbox/block.go
@@ -15,6 +15,7 @@ type GLightboxBlock struct {
 
 type GLightboxImage struct {
 	URL     string
+	Tags    []string
 	Caption []byte
 }
 
diff --git a/internal/glightbox/html_renderer.go b/internal/glightbox/html_renderer.go
index 43d4790..3da98eb 100644
--- a/internal/glightbox/html_renderer.go
+++ b/internal/glightbox/html_renderer.go
@@ -78,11 +78,26 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte,
 				dataDescriptionAttribute = fmt.Sprintf("data-description=\".%s\"", glightboxDescId)
 			}
 
+			tagClassList := make([]string, 0, len(img.Tags))
+			for _, tag := range img.Tags {
+				switch tag {
+				case "2x":
+					tagClassList = append(tagClassList, "grid-item-2x")
+				}
+			}
+
 			elements = append(elements, fmt.Sprintf(`
-	<a href="https://f003.backblazeb2.com/file/sayana-photos/full/%s" class="glightbox-%s grid-item grid-item-%s"
+	<a href="https://f003.backblazeb2.com/file/sayana-photos/full/%s" class="glightbox-%s grid-item %s grid-item-%s"
 	    data-gallery="gallery-%s" data-title="%s" %s>
-	    <img src="https://f003.backblazeb2.com/file/sayana-photos/webp-320p/%s.webp" class="rounded-md p-1" alt="webp thumbnail" />
-	</a>`, img.URL, galleryID, galleryID, galleryID, dayDate.Format("2006-01-02 15:04:05 -07:00"), dataDescriptionAttribute, imageUrlWithoutExt))
+		<picture>
+			<source media="(width < 640px)" srcset="https://f003.backblazeb2.com/file/sayana-photos/webp-320p/%s.webp" />
+			<source media="(width < 1120px)" srcset="https://f003.backblazeb2.com/file/sayana-photos/webp-560p/%s.webp" />
+			<source media="(width < 1600px)" srcset="https://f003.backblazeb2.com/file/sayana-photos/webp-800p/%s.webp" />
+			<source media="(width < 2400px)" srcset="https://f003.backblazeb2.com/file/sayana-photos/webp-1200p/%s.webp" />
+			<source media="(width >= 2400px)" srcset="https://f003.backblazeb2.com/file/sayana-photos/webp-1600p/%s.webp" />
+			<img src="https://f003.backblazeb2.com/file/sayana-photos/webp-800p/%s.webp" />
+		</picture>
+	</a>`, img.URL, galleryID, strings.Join(tagClassList, " "), galleryID, galleryID, dayDate.Format("2006-01-02 15:04:05 -07:00"), dataDescriptionAttribute, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt))
 
 			if glightboxDescId != "" {
 				elements = append(elements, fmt.Sprintf(`
@@ -114,10 +129,14 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte,
 		percentPosition: true
 	});
 
-	imagesLoaded('.masonry-grid-%s', function() {
-		msnry_%s.layout();
+	var imgLoad_%s_timer;
+	var imgLoad_%s = imagesLoaded('.masonry-grid-%s', () => msnry_%s.layout());
+
+	imgLoad_%s.on('progress', function() {
+		clearTimeout(imgLoad_%s_timer);
+		imgLoad_%s_timer = setTimeout(() => msnry_%s.layout(), 500);
 	});
-</script>`, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID))
+</script>`, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID))
 	}
 
 	return ast.WalkContinue, nil
diff --git a/internal/glightbox/parser.go b/internal/glightbox/parser.go
index ba3f22e..6780090 100644
--- a/internal/glightbox/parser.go
+++ b/internal/glightbox/parser.go
@@ -4,6 +4,7 @@ import (
 	"bytes"
 	"log/slog"
 	"regexp"
+	"strings"
 	"time"
 
 	"github.com/yuin/goldmark/ast"
@@ -60,16 +61,27 @@ func (p *GLightboxParser) Continue(node ast.Node, reader text.Reader, pc parser.
 
 	gallery := node.(*GLightboxBlock)
 
-	parts := bytes.SplitN(trimmed, []byte{'|'}, 2)
+	parts := bytes.SplitN(trimmed, []byte{'|'}, 3)
 	url := bytes.TrimSpace(parts[0])
 
 	caption := make([]byte, 0)
-	if len(parts) > 1 {
+	tagsRaw := ""
+	if len(parts) == 2 {
 		caption = bytes.TrimSpace(parts[1])
 	}
+	if len(parts) >= 3 {
+		tagsRaw = string(parts[1])
+		caption = bytes.TrimSpace(parts[2])
+	}
+
+	tags := strings.Split(tagsRaw, ",")
+	for i := range tags {
+		tags[i] = strings.TrimSpace(tags[i])
+	}
 
 	gallery.Images = append(gallery.Images, GLightboxImage{
 		URL:     string(url),
+		Tags:    tags,
 		Caption: caption,
 	})
 
-- 
cgit v1.3.1+13