summaryrefslogtreecommitdiff
path: root/internal
diff refs
from: back
to: back
| flip
diff options
context:
space:
mode:
Diffstat (limited to 'internal')
-rw-r--r--internal/glightbox/block.go1
-rw-r--r--internal/glightbox/html_renderer.go80
-rw-r--r--internal/glightbox/parser.go16
3 files changed, 82 insertions, 15 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..44fbd4c 100644
--- a/internal/glightbox/html_renderer.go
+++ b/internal/glightbox/html_renderer.go
@@ -4,11 +4,14 @@ import (
"bytes"
"fmt"
"math/rand"
+ "regexp"
"strings"
"time"
+ "github.com/SayaAndy/saya-today-web/internal/tailwind"
"github.com/yuin/goldmark"
"github.com/yuin/goldmark/ast"
+ "github.com/yuin/goldmark/parser"
"github.com/yuin/goldmark/renderer"
"github.com/yuin/goldmark/renderer/html"
"github.com/yuin/goldmark/util"
@@ -16,22 +19,36 @@ import (
type GLightboxHTMLRenderer struct {
html.Config
- md goldmark.Markdown
+ md goldmark.Markdown
+ anchorMatchRe *regexp.Regexp
}
func NewGLightboxHTMLRenderer(opts ...html.Option) renderer.NodeRenderer {
r := &GLightboxHTMLRenderer{
Config: html.NewConfig(),
md: goldmark.New(
- goldmark.WithRendererOptions(
- html.WithHardWraps(),
- html.WithXHTML(),
+ goldmark.WithParserOptions(
+ parser.WithAutoHeadingID(),
+ parser.WithAttribute(),
+ ),
+ goldmark.WithRenderer(
+ renderer.NewRenderer(
+ renderer.WithNodeRenderers(
+ util.Prioritized(tailwind.NewCustomLinkRenderer(
+ html.WithUnsafe(), html.WithHardWraps(), html.WithXHTML(),
+ ), 50),
+ util.Prioritized(html.NewRenderer(
+ html.WithUnsafe(), html.WithHardWraps(), html.WithXHTML(),
+ ), 100),
+ ),
+ ),
),
),
}
for _, opt := range opts {
opt.SetHTMLOption(&r.Config)
}
+ r.anchorMatchRe = regexp.MustCompile(`(?s)<\s*a(\s+[^<]*)(href\s*=\s*["'].*?["'])\s*([^<]*)>(.*?)<\s*\/\s*a\s*>`)
return r
}
@@ -78,11 +95,34 @@ 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")
+ }
+ }
+
+ if len(img.Caption) > 0 {
+ tagClassList = append(tagClassList, "grid-tooltip")
+ }
+
+ anchorlessCaptionHTML := r.anchorMatchRe.ReplaceAll(captionHTML, []byte("<span class=\"linklike\" $1 $3>$4</span>"))
+
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 p-1"
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>
+ <span class="grid-tooltip-text"><p>%s</p></span>
+ <span class="grid-item-index">%d</span>
+ </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, anchorlessCaptionHTML, i+1))
if glightboxDescId != "" {
elements = append(elements, fmt.Sprintf(`
@@ -95,7 +135,7 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte,
w.WriteString(fmt.Sprintf(`
<div class="justify-content-center display-block m-1">
<hr class="border-t-3 border-dotted border-main-dark mt-1 mb-2 w-[80%%] ml-auto mr-auto">
- <div class="grid masonry-grid-%s">
+ <div class="grid masonry-grid-%s mx-auto">
<div class="grid-sizer grid-sizer-%s"></div>
%s
</div>
@@ -105,19 +145,33 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte,
w.WriteString(fmt.Sprintf(`
<script>
var lightbox_%s = GLightbox({
- selector: '.glightbox-%s'
+ selector: '.glightbox-%s',
+ moreLength: 0
});
var msnry_%s = new Masonry('.masonry-grid-%s', {
itemSelector: '.grid-item-%s',
columnWidth: '.grid-sizer-%s',
- percentPosition: true
+ percentPosition: true,
+ horizontalOrder: true
});
- imagesLoaded('.masonry-grid-%s', function() {
- msnry_%s.layout();
+ var imgLoad_%s_timer;
+ var imgLoad_%s = imagesLoaded('.masonry-grid-%s');
+
+ function initMasonryLayout_%s() {
+ clearTimeout(imgLoad_%s_timer);
+ imgLoad_%s_timer = setTimeout(() => msnry_%s.layout(), 500);
+ }
+
+ imgLoad_%s.on('progress', initMasonryLayout_%s);
+
+ document.addEventListener('popout', (e) => {
+ imgLoad_%s.off('progress', initMasonryLayout_%s);
+ initMasonryLayout_%s = null;
+ imgLoad_%s = null;
});
-</script>`, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID))
+</script>`, galleryID, galleryID, galleryID, galleryID, galleryID, 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,
})