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)

5 files changed, 57 insertions, 9 deletions

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,
 	})
 
diff --git a/static/input.css b/static/input.css
index d766049..8080d13 100644
--- a/static/input.css
+++ b/static/input.css
@@ -331,22 +331,38 @@ a:hover {
     width: 50%;
 }
 
+.grid-item-2x {
+    width: 100%;
+}
+
 @media (width >= 32rem) {
     .grid-item, .grid-sizer {
         width: 33%;
     }
+
+    .grid-item-2x {
+        width: 66%;
+    }
 }
 
 @media (width >= 40rem) {
     .grid-item, .grid-sizer {
         width: 25%;
     }
+
+    .grid-item-2x {
+        width: 50%;
+    }
 }
 
 @media (width >= 48rem) {
     .grid-item, .grid-sizer {
         width: 20%;
     }
+
+    .grid-item-2x {
+        width: 40%;
+    }
 }
 
 .map-container .leaflet-container {
diff --git a/views/pages/global-map.html b/views/pages/global-map.html
index d595e07..9b67514 100644
--- a/views/pages/global-map.html
+++ b/views/pages/global-map.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{{ .L.GlobalMap.Header }} // SAYA TODAY </title>
+    <title>{{ .L.GlobalMap.Header }} // SAYA TODAY</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>