summaryrefslogtreecommitdiff
path: root/internal/glightbox
diff refs
from: back
to: back
| flip
diff options
context:
space:
mode:
Diffstat (limited to 'internal/glightbox')
-rw-r--r--internal/glightbox/block.go5
-rw-r--r--internal/glightbox/extension.go11
-rw-r--r--internal/glightbox/html_renderer.go123
-rw-r--r--internal/glightbox/parser.go9
4 files changed, 100 insertions, 48 deletions
diff --git a/internal/glightbox/block.go b/internal/glightbox/block.go
index e53e67b..30cda1c 100644
--- a/internal/glightbox/block.go
+++ b/internal/glightbox/block.go
@@ -9,8 +9,9 @@ import (
// GLightboxBlock represents a light gallery block in the AST
type GLightboxBlock struct {
ast.BaseBlock
- Images []GLightboxImage
- Location *time.Location
+ Images []GLightboxImage
+ Location *time.Location
+ Namespace string
}
type GLightboxImage struct {
diff --git a/internal/glightbox/extension.go b/internal/glightbox/extension.go
index 7fd17b1..e9a9f3e 100644
--- a/internal/glightbox/extension.go
+++ b/internal/glightbox/extension.go
@@ -1,6 +1,7 @@
package glightbox
import (
+ "github.com/SayaAndy/saya-today-web/config"
"github.com/yuin/goldmark"
"github.com/yuin/goldmark/parser"
"github.com/yuin/goldmark/renderer"
@@ -8,10 +9,12 @@ import (
)
// Extension that combines parser and renderer
-type GLightboxExtension struct{}
+type GLightboxExtension struct {
+ photoStorage config.PhotoStorageConfig
+}
-func NewGLightboxExtension() goldmark.Extender {
- return &GLightboxExtension{}
+func NewGLightboxExtension(photoStorage config.PhotoStorageConfig) goldmark.Extender {
+ return &GLightboxExtension{photoStorage}
}
func (e *GLightboxExtension) Extend(m goldmark.Markdown) {
@@ -22,7 +25,7 @@ func (e *GLightboxExtension) Extend(m goldmark.Markdown) {
)
m.Renderer().AddOptions(
renderer.WithNodeRenderers(
- util.Prioritized(NewGLightboxHTMLRenderer(), 500),
+ util.Prioritized(NewGLightboxHTMLRenderer(e.photoStorage), 500),
),
)
}
diff --git a/internal/glightbox/html_renderer.go b/internal/glightbox/html_renderer.go
index 5514b6d..b2cd855 100644
--- a/internal/glightbox/html_renderer.go
+++ b/internal/glightbox/html_renderer.go
@@ -4,11 +4,15 @@ import (
"bytes"
"fmt"
"math/rand"
+ "regexp"
"strings"
"time"
+ "github.com/SayaAndy/saya-today-web/config"
+ "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,18 +20,34 @@ import (
type GLightboxHTMLRenderer struct {
html.Config
- md goldmark.Markdown
+ md goldmark.Markdown
+ anchorMatchRe *regexp.Regexp
+ photoStorage config.PhotoStorageConfig
}
-func NewGLightboxHTMLRenderer(opts ...html.Option) renderer.NodeRenderer {
+func NewGLightboxHTMLRenderer(photoStorage config.PhotoStorageConfig, 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),
+ ),
+ ),
),
),
+ anchorMatchRe: regexp.MustCompile(`(?s)<\s*a(\s+[^<]*)(href\s*=\s*["'].*?["'])\s*([^<]*)>(.*?)<\s*\/\s*a\s*>`),
+ photoStorage: photoStorage,
}
for _, opt := range opts {
opt.SetHTMLOption(&r.Config)
@@ -51,7 +71,8 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte,
var elements []string
for i, img := range gallery.Images {
- imageUrlSegments := strings.Split(img.URL, ".")
+ fullImageUrl := gallery.Namespace + img.URL
+ imageUrlSegments := strings.Split(fullImageUrl, ".")
imageUrlWithoutExt := strings.Join(imageUrlSegments[:len(imageUrlSegments)-1], ".")
imageUrlParts := strings.Split(imageUrlWithoutExt, "/")
imageNameParts := strings.Split(imageUrlParts[len(imageUrlParts)-1], "-")
@@ -90,20 +111,35 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte,
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 %s grid-item-%s p-1"
- data-gallery="gallery-%s" data-title="%s" %s>
+ <a href="%[7]s" class="glightbox grid-item %[1]s grid-item-%[2]s p-1"
+ data-gallery="gallery" data-title="%[3]s" %[4]s>
<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" />
+ <source media="(width < 800px)" srcset="%[8]s" />
+ <source media="(width < 2400px)" srcset="%[9]s" />
+ <source media="(width < 3200px)" srcset="%[10]s" />
+ <source media="(width < 4000px)" srcset="%[11]s" />
+ <source media="(width >= 4000px)" srcset="%[12]s" />
+ <img src="%[9]s" />
</picture>
- <span class="grid-tooltip-text">%s</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, captionHTML, i+1))
+ <span class="grid-tooltip-text"><p>%[5]s</p></span>
+ <span class="grid-item-index">%[6]d</span>
+ </a>`,
+ strings.Join(tagClassList, " "),
+ galleryID,
+ dayDate.Format("2006-01-02 15:04:05 -07:00"),
+ dataDescriptionAttribute,
+ anchorlessCaptionHTML,
+ i+1,
+ fmt.Sprintf(r.photoStorage.Full.BaseUrl, fullImageUrl),
+ fmt.Sprintf(r.photoStorage.Thumbnail1600p.BaseUrl, imageUrlWithoutExt),
+ fmt.Sprintf(r.photoStorage.Thumbnail1200p.BaseUrl, imageUrlWithoutExt),
+ fmt.Sprintf(r.photoStorage.Thumbnail800p.BaseUrl, imageUrlWithoutExt),
+ fmt.Sprintf(r.photoStorage.Thumbnail560p.BaseUrl, imageUrlWithoutExt),
+ fmt.Sprintf(r.photoStorage.Thumbnail320p.BaseUrl, imageUrlWithoutExt),
+ ))
if glightboxDescId != "" {
elements = append(elements, fmt.Sprintf(`
@@ -113,36 +149,43 @@ 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-sizer grid-sizer-%s"></div>
- %s
+ w.WriteString(strings.ReplaceAll(`
+<div class="items-center flex flex-col">
+ <hr class="border-t-3 border-dotted border-main-hard mt-1 mb-2 w-[80%] ml-auto mr-auto">
+ <div class="grid masonry-grid-{id}">
+ <div class="grid-sizer grid-sizer-{id}"></div>
+ `+strings.Join(elements, "\n")+`
</div>
- <hr class="border-t-3 border-dotted border-main-dark mt-1 mb-2 w-[80%%] ml-auto mr-auto">
-</div>`, galleryID, galleryID, strings.Join(elements, "\n")))
+ <hr class="border-t-3 border-dotted border-main-hard mt-1 mb-2 w-[80%] ml-auto mr-auto">
+</div>
- w.WriteString(fmt.Sprintf(`
<script>
- var lightbox_%s = GLightbox({
- selector: '.glightbox-%s'
+ var pckry_{id} = new Packery('.masonry-grid-{id}', {
+ itemSelector: '.grid-item-{id}',
+ columnWidth: '.grid-sizer-{id}',
+ percentPosition: false
});
- var msnry_%s = new Masonry('.masonry-grid-%s', {
- itemSelector: '.grid-item-%s',
- columnWidth: '.grid-sizer-%s',
- percentPosition: true
- });
+ var imgLoad_{id}_timer;
+ var imgLoad_{id} = imagesLoaded('.masonry-grid-{id}');
- var imgLoad_%s_timer;
- var imgLoad_%s = imagesLoaded('.masonry-grid-%s', () => msnry_%s.layout());
+ function initMasonryLayout_{id}(tm) {
+ clearTimeout(imgLoad_{id}_timer);
+ imgLoad_{id}_timer = setTimeout(() => pckry_{id}.layout(), 100);
+ }
- 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, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID))
+ imgLoad_{id}.on('progress', initMasonryLayout_{id});
+
+ window.addEventListener('resize', initMasonryLayout_{id});
+
+ document.addEventListener('popout', (e) => {
+ window.removeEventListener('resize', initMasonryLayout_{id});
+ imgLoad_{id}.off('progress', initMasonryLayout_{id});
+ initMasonryLayout_{id} = null;
+ imgLoad_{id} = null;
+ }, {once: true});
+</script>
+`, "{id}", galleryID))
}
return ast.WalkContinue, nil
diff --git a/internal/glightbox/parser.go b/internal/glightbox/parser.go
index 6780090..b376034 100644
--- a/internal/glightbox/parser.go
+++ b/internal/glightbox/parser.go
@@ -29,7 +29,7 @@ func (p *GLightboxParser) Open(parent ast.Node, reader text.Reader, pc parser.Co
return nil, parser.NoChildren
}
- r := regexp.MustCompile(`^\{Gallery:([A-Za-z0-9\+\-/]+)\}$`)
+ r := regexp.MustCompile(`^\{Gallery:([A-Za-z0-9\+\-/]+)(:([A-Za-z0-9\+\-/]+))?\}$`)
trimmed := bytes.TrimSpace(line)
parts := r.FindSubmatch(trimmed)
@@ -44,7 +44,12 @@ func (p *GLightboxParser) Open(parent ast.Node, reader text.Reader, pc parser.Co
return nil, parser.NoChildren
}
- return &GLightboxBlock{Location: loc}, parser.NoChildren
+ ns := ""
+ if len(parts) >= 4 {
+ ns = string(parts[3])
+ }
+
+ return &GLightboxBlock{Location: loc, Namespace: ns}, parser.NoChildren
}
func (p *GLightboxParser) Continue(node ast.Node, reader text.Reader, pc parser.Context) parser.State {