diff options
| -rw-r--r-- | internal/glightbox/block.go | 31 | ||||
| -rw-r--r-- | internal/glightbox/extension.go (renamed from internal/lightgallery/extension.go) | 14 | ||||
| -rw-r--r-- | internal/glightbox/html_renderer.go | 134 | ||||
| -rw-r--r-- | internal/glightbox/parser.go (renamed from internal/lightgallery/parser.go) | 26 | ||||
| -rw-r--r-- | internal/lightgallery/block.go | 31 | ||||
| -rw-r--r-- | internal/lightgallery/html_renderer.go | 145 | ||||
| -rw-r--r-- | main.go | 4 | ||||
| -rw-r--r-- | static/input.css | 147 | ||||
| -rw-r--r-- | views/layouts/general-page.html | 11 | ||||
| -rw-r--r-- | views/pages/blog-catalogue.html | 2 |
10 files changed, 206 insertions, 339 deletions
diff --git a/internal/glightbox/block.go b/internal/glightbox/block.go new file mode 100644 index 0000000..696f328 --- /dev/null +++ b/internal/glightbox/block.go @@ -0,0 +1,31 @@ +package glightbox + +import ( + "time" + + "github.com/yuin/goldmark/ast" +) + +// GLightboxBlock represents a light gallery block in the AST +type GLightboxBlock struct { + ast.BaseBlock + Images []GLightboxImage + Location *time.Location +} + +type GLightboxImage struct { + URL string + Caption []byte +} + +var KindGLightboxBlock = ast.NewNodeKind("GLightboxBlock") + +// Dump implements ast.Node.Dump +func (n *GLightboxBlock) Dump(source []byte, level int) { + ast.DumpHelper(n, source, level, nil, nil) +} + +// Kind implements ast.Node.Kind +func (n *GLightboxBlock) Kind() ast.NodeKind { + return KindGLightboxBlock +} diff --git a/internal/lightgallery/extension.go b/internal/glightbox/extension.go index 761dc05..7fd17b1 100644 --- a/internal/lightgallery/extension.go +++ b/internal/glightbox/extension.go @@ -1,4 +1,4 @@ -package lightgallery +package glightbox import ( "github.com/yuin/goldmark" @@ -8,21 +8,21 @@ import ( ) // Extension that combines parser and renderer -type LightGalleryExtension struct{} +type GLightboxExtension struct{} -func NewLightGalleryExtension() goldmark.Extender { - return &LightGalleryExtension{} +func NewGLightboxExtension() goldmark.Extender { + return &GLightboxExtension{} } -func (e *LightGalleryExtension) Extend(m goldmark.Markdown) { +func (e *GLightboxExtension) Extend(m goldmark.Markdown) { m.Parser().AddOptions( parser.WithBlockParsers( - util.Prioritized(NewLightGalleryParser(), 500), + util.Prioritized(NewGLightboxParser(), 500), ), ) m.Renderer().AddOptions( renderer.WithNodeRenderers( - util.Prioritized(NewLightGalleryHTMLRenderer(), 500), + util.Prioritized(NewGLightboxHTMLRenderer(), 500), ), ) } diff --git a/internal/glightbox/html_renderer.go b/internal/glightbox/html_renderer.go new file mode 100644 index 0000000..3b6a533 --- /dev/null +++ b/internal/glightbox/html_renderer.go @@ -0,0 +1,134 @@ +package glightbox + +import ( + "bytes" + "fmt" + "math/rand" + "strings" + "time" + + "github.com/yuin/goldmark" + "github.com/yuin/goldmark/ast" + "github.com/yuin/goldmark/renderer" + "github.com/yuin/goldmark/renderer/html" + "github.com/yuin/goldmark/util" +) + +type GLightboxHTMLRenderer struct { + html.Config + md goldmark.Markdown +} + +func NewGLightboxHTMLRenderer(opts ...html.Option) renderer.NodeRenderer { + r := &GLightboxHTMLRenderer{ + Config: html.NewConfig(), + md: goldmark.New( + goldmark.WithRendererOptions( + html.WithHardWraps(), + html.WithXHTML(), + ), + ), + } + for _, opt := range opts { + opt.SetHTMLOption(&r.Config) + } + return r +} + +func (r *GLightboxHTMLRenderer) RegisterFuncs(reg renderer.NodeRendererFuncRegisterer) { + reg.Register(KindGLightboxBlock, r.renderGLightbox) +} + +func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte, n ast.Node, entering bool) (ast.WalkStatus, error) { + if entering { + gallery := n.(*GLightboxBlock) + + if len(gallery.Images) == 0 { + return ast.WalkContinue, nil + } + + galleryID := generateDivId(8) + + var elements []string + for i, img := range gallery.Images { + imageUrlSegments := strings.Split(img.URL, ".") + imageUrlWithoutExt := strings.Join(imageUrlSegments[:len(imageUrlSegments)-1], ".") + imageUrlParts := strings.Split(imageUrlWithoutExt, "/") + imageNameParts := strings.Split(imageUrlParts[len(imageUrlParts)-1], "-") + + var captionBuf bytes.Buffer + captionHTML := img.Caption + if err := r.md.Convert(img.Caption, &captionBuf); err == nil { + captionHTML = captionBuf.Bytes() + captionHTML = bytes.TrimPrefix(captionHTML, []byte("<p>")) + captionHTML = bytes.TrimSuffix(captionHTML, []byte("</p>\n")) + captionHTML = bytes.TrimSuffix(captionHTML, []byte("</p>")) + } + + dayDate, _ := time.Parse("20060102 150405", imageNameParts[len(imageNameParts)-2]+" "+imageNameParts[len(imageNameParts)-1]) + dayDate = dayDate.In(gallery.Location) + + glightboxDescId := "" + if len(captionHTML) != 0 { + glightboxDescId = fmt.Sprintf("glightbox-desc-%s-%d", galleryID, i) + } + + dataDescriptionAttribute := "" + if glightboxDescId != "" { + dataDescriptionAttribute = fmt.Sprintf("data-description=\".%s\"", glightboxDescId) + } + + elements = append(elements, fmt.Sprintf(` + <a href="https://f003.backblazeb2.com/file/sayana-photos/full/%s" class="glightbox-%s grid-item 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-0.5" alt="webp thumbnail" /> + </a>`, img.URL, galleryID, galleryID, galleryID, dayDate.Format("2006-01-02 15:04:05 -07:00"), dataDescriptionAttribute, imageUrlWithoutExt)) + + if glightboxDescId != "" { + elements = append(elements, fmt.Sprintf(` + <div class="glightbox-desc rounded-4 %s"> + <p>%s</p> + </div>`, glightboxDescId, captionHTML)) + } + } + + 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 + </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"))) + + w.WriteString(fmt.Sprintf(` +<script> + var lightbox_%s = GLightbox({ + selector: '.glightbox-%s' + }); + + var msnry_%s = new Masonry('.masonry-grid-%s', { + itemSelector: '.grid-item-%s', + columnWidth: '.grid-sizer-%s', + percentPosition: true + }); + + imagesLoaded('.masonry-grid-%s', function() { + msnry_%s.layout(); + }); +</script>`, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID)) + } + + return ast.WalkContinue, nil +} + +func generateDivId(length int) string { + const charset = "abcdefghijklmnopqrstuvwxyz" + seededRand := rand.New(rand.NewSource(time.Now().UnixNano())) // Seed with current time + b := make([]byte, length) + for i := range b { + b[i] = charset[seededRand.Intn(len(charset))] + } + return string(b) +} diff --git a/internal/lightgallery/parser.go b/internal/glightbox/parser.go index daec797..ba3f22e 100644 --- a/internal/lightgallery/parser.go +++ b/internal/glightbox/parser.go @@ -1,4 +1,4 @@ -package lightgallery +package glightbox import ( "bytes" @@ -11,17 +11,17 @@ import ( "github.com/yuin/goldmark/text" ) -type LightGalleryParser struct{} +type GLightboxParser struct{} -func NewLightGalleryParser() parser.BlockParser { - return &LightGalleryParser{} +func NewGLightboxParser() parser.BlockParser { + return &GLightboxParser{} } -func (p *LightGalleryParser) Trigger() []byte { +func (p *GLightboxParser) Trigger() []byte { return []byte{'{'} } -func (p *LightGalleryParser) Open(parent ast.Node, reader text.Reader, pc parser.Context) (ast.Node, parser.State) { +func (p *GLightboxParser) Open(parent ast.Node, reader text.Reader, pc parser.Context) (ast.Node, parser.State) { line, _ := reader.PeekLine() if !bytes.HasPrefix(line, []byte("{Gallery:")) { @@ -43,10 +43,10 @@ func (p *LightGalleryParser) Open(parent ast.Node, reader text.Reader, pc parser return nil, parser.NoChildren } - return &LightGalleryBlock{Location: loc}, parser.NoChildren + return &GLightboxBlock{Location: loc}, parser.NoChildren } -func (p *LightGalleryParser) Continue(node ast.Node, reader text.Reader, pc parser.Context) parser.State { +func (p *GLightboxParser) Continue(node ast.Node, reader text.Reader, pc parser.Context) parser.State { line, segment := reader.PeekLine() if len(line) == 0 || segment.Len() == 0 { return parser.Continue | parser.NoChildren @@ -58,7 +58,7 @@ func (p *LightGalleryParser) Continue(node ast.Node, reader text.Reader, pc pars return parser.Close } - gallery := node.(*LightGalleryBlock) + gallery := node.(*GLightboxBlock) parts := bytes.SplitN(trimmed, []byte{'|'}, 2) url := bytes.TrimSpace(parts[0]) @@ -68,7 +68,7 @@ func (p *LightGalleryParser) Continue(node ast.Node, reader text.Reader, pc pars caption = bytes.TrimSpace(parts[1]) } - gallery.Images = append(gallery.Images, LightGalleryImage{ + gallery.Images = append(gallery.Images, GLightboxImage{ URL: string(url), Caption: caption, }) @@ -76,13 +76,13 @@ func (p *LightGalleryParser) Continue(node ast.Node, reader text.Reader, pc pars return parser.Continue | parser.NoChildren } -func (p *LightGalleryParser) Close(node ast.Node, reader text.Reader, pc parser.Context) { +func (p *GLightboxParser) Close(node ast.Node, reader text.Reader, pc parser.Context) { } -func (p *LightGalleryParser) CanInterruptParagraph() bool { +func (p *GLightboxParser) CanInterruptParagraph() bool { return true } -func (p *LightGalleryParser) CanAcceptIndentedLine() bool { +func (p *GLightboxParser) CanAcceptIndentedLine() bool { return false } diff --git a/internal/lightgallery/block.go b/internal/lightgallery/block.go deleted file mode 100644 index 8eb7c9e..0000000 --- a/internal/lightgallery/block.go +++ /dev/null @@ -1,31 +0,0 @@ -package lightgallery - -import ( - "time" - - "github.com/yuin/goldmark/ast" -) - -// LightGalleryBlock represents a light gallery block in the AST -type LightGalleryBlock struct { - ast.BaseBlock - Images []LightGalleryImage - Location *time.Location -} - -type LightGalleryImage struct { - URL string - Caption []byte -} - -var KindLightGalleryBlock = ast.NewNodeKind("LightGalleryBlock") - -// Dump implements ast.Node.Dump -func (n *LightGalleryBlock) Dump(source []byte, level int) { - ast.DumpHelper(n, source, level, nil, nil) -} - -// Kind implements ast.Node.Kind -func (n *LightGalleryBlock) Kind() ast.NodeKind { - return KindLightGalleryBlock -} diff --git a/internal/lightgallery/html_renderer.go b/internal/lightgallery/html_renderer.go deleted file mode 100644 index c2f785e..0000000 --- a/internal/lightgallery/html_renderer.go +++ /dev/null @@ -1,145 +0,0 @@ -package lightgallery - -import ( - "bytes" - "fmt" - "math/rand" - "strings" - "time" - - "github.com/yuin/goldmark" - "github.com/yuin/goldmark/ast" - "github.com/yuin/goldmark/renderer" - "github.com/yuin/goldmark/renderer/html" - "github.com/yuin/goldmark/util" -) - -type LightGalleryHTMLRenderer struct { - html.Config - md goldmark.Markdown -} - -func NewLightGalleryHTMLRenderer(opts ...html.Option) renderer.NodeRenderer { - r := &LightGalleryHTMLRenderer{ - Config: html.NewConfig(), - md: goldmark.New( - goldmark.WithRendererOptions( - html.WithHardWraps(), - html.WithXHTML(), - ), - ), - } - for _, opt := range opts { - opt.SetHTMLOption(&r.Config) - } - return r -} - -func (r *LightGalleryHTMLRenderer) RegisterFuncs(reg renderer.NodeRendererFuncRegisterer) { - reg.Register(KindLightGalleryBlock, r.renderLightGallery) -} - -func (r *LightGalleryHTMLRenderer) renderLightGallery(w util.BufWriter, source []byte, n ast.Node, entering bool) (ast.WalkStatus, error) { - if entering { - gallery := n.(*LightGalleryBlock) - - if len(gallery.Images) == 0 { - return ast.WalkContinue, nil - } - - galleryID := generateDivId(8) - - 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 id="lg-%s" class="inline-gallery-container relative ml-auto mr-auto"></div> - <hr class="border-t-3 border-dotted border-main-dark mt-1 mb-2 w-[80%%] ml-auto mr-auto"> -</div>`, galleryID)) - - var dynamicElements []string - for _, img := range gallery.Images { - imageUrlSegments := strings.Split(img.URL, ".") - imageUrlWithoutExt := strings.Join(imageUrlSegments[:len(imageUrlSegments)-1], ".") - imageUrlParts := strings.Split(imageUrlWithoutExt, "/") - imageNameParts := strings.Split(imageUrlParts[len(imageUrlParts)-1], "-") - - var captionBuf bytes.Buffer - captionHTML := img.Caption - if err := r.md.Convert(img.Caption, &captionBuf); err == nil { - captionHTML = captionBuf.Bytes() - captionHTML = bytes.TrimPrefix(captionHTML, []byte("<p>")) - captionHTML = bytes.TrimSuffix(captionHTML, []byte("</p>\n")) - captionHTML = bytes.TrimSuffix(captionHTML, []byte("</p>")) - } - - dayDate, _ := time.Parse("20060102 150405", imageNameParts[len(imageNameParts)-2]+" "+imageNameParts[len(imageNameParts)-1]) - dayDate = dayDate.In(gallery.Location) - dynamicElements = append(dynamicElements, fmt.Sprintf(`{ - src: - "https://f003.backblazeb2.com/file/sayana-photos/full/%s", - downloadUrl: - "https://f003.backblazeb2.com/file/sayana-photos/full/%s", - alt: "%s", - responsive: "https://f003.backblazeb2.com/file/sayana-photos/webp-320p/%s.webp 384, https://f003.backblazeb2.com/file/sayana-photos/webp-560p/%s.webp 672, https://f003.backblazeb2.com/file/sayana-photos/webp-800p/%s.webp 960, https://f003.backblazeb2.com/file/sayana-photos/webp-1200p/%s.webp 1440, https://f003.backblazeb2.com/file/sayana-photos/webp-1600p/%s.webp 1920", - thumb: - "https://f003.backblazeb2.com/file/sayana-photos/webp-320p/%s.webp", - subHtml: `+"`"+`<div class="flex flex-row light-gallery-captions"> - <p class="grow !text-base/[1] text-left font-spectral text-main-dark">%s</p> - <p class="!text-base/[1] text-right font-spectral text-secondary">%s</p> - </div>`+"`"+` - }`, img.URL, img.URL, util.EscapeHTML(captionHTML), imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, captionHTML, dayDate.Format("2006-01-02 15:04:05 -07:00"))) - } - - w.WriteString(fmt.Sprintf(` -<script> -function createLightGallery%s() { - const $lgContainer = document.getElementById('lg-%s'); - const config = { - container: $lgContainer, - dynamic: true, - dynamicEl: [%s], - width: "100%%", - height: "50vmin", - hash: false, - closable: false, - showMaximizeIcon: true, - appendSubHtmlTo: ".lg-sub-html", - isMobile: () => false, - slideDelay: 0, - plugins: [lgZoom, lgThumbnail], - thumbWidth: calculateVmin(10), - thumbHeight: "10vmin", - thumbMargin: 4 - }; - const inlineGallery = lightGallery($lgContainer, config); - - setTimeout(() => { - inlineGallery.openGallery(); - }, 200); - - galleryMap.set(inlineGallery, createLightGallery%s); -} - -document.addEventListener('htmx:afterRequest', (e) => { - if (e.detail.xhr.status == 404 || e.detail.successful != true) { - return console.error(e); - } - if (e.detail.target.id == 'general-page-body') { - createLightGallery%s(); - } -}, {once: true}); -</script>`, galleryID, galleryID, strings.Join(dynamicElements, ","), galleryID, galleryID)) - } - - return ast.WalkContinue, nil -} - -func generateDivId(length int) string { - const charset = "abcdefghijklmnopqrstuvwxyz" - seededRand := rand.New(rand.NewSource(time.Now().UnixNano())) // Seed with current time - b := make([]byte, length) - for i := range b { - b[i] = charset[seededRand.Intn(len(charset))] - } - return string(b) -} @@ -12,7 +12,7 @@ import ( "github.com/SayaAndy/saya-today-web/config" "github.com/SayaAndy/saya-today-web/internal/b2" "github.com/SayaAndy/saya-today-web/internal/factgiver" - "github.com/SayaAndy/saya-today-web/internal/lightgallery" + "github.com/SayaAndy/saya-today-web/internal/glightbox" "github.com/SayaAndy/saya-today-web/internal/router" "github.com/SayaAndy/saya-today-web/internal/tailwind" "github.com/SayaAndy/saya-today-web/locale" @@ -32,7 +32,7 @@ import ( var ( md = goldmark.New( goldmark.WithExtensions( - lightgallery.NewLightGalleryExtension(), + glightbox.NewGLightboxExtension(), tailwind.NewTailwindExtension(), ), goldmark.WithParserOptions( diff --git a/static/input.css b/static/input.css index 51c3c30..36d17b2 100644 --- a/static/input.css +++ b/static/input.css @@ -247,10 +247,6 @@ a:hover { background-size: calc(var(--squares-and-triangles-background-width-coef) * 1vw) calc(var(--squares-and-triangles-background-height-coef) * 1vw); } -body:has(.lg-container:not([class~="lg-inline"])) #sidebar { - display: none !important; -} - .logo-custom { width: 3.5vw; height: 20vw; @@ -346,142 +342,25 @@ body:has(.lg-container:not([class~="lg-inline"])) #sidebar { transform: scale(1.1); } -.lg-backdrop { - background-color: var(--background-light-color); - opacity: 0.8 !important; -} - -.lg-container:not([class~="lg-inline"]) .lg-outer { - width: 90%; - height: 90%; - margin: 5dvh 5dvw; -} - -.lg-thumb-outer { - background-color: var(--background-light-color) !important; - opacity: 0.8 !important; -} - -.lg-prev { - background-color: var(--background-light-color); - color: var(--main-dark-color); -} - -.lg-next { - background-color: var(--background-light-color); - color: var(--main-dark-color); -} - -.lg-counter { - color: var(--main-dark-color); - font-family: 'Spectral'; - font-size: 1vmax; - padding-top: 0; - height: 1vmax; -} - -.lg-container:not([class~="lg-inline"]) .lg-counter { - font-size: 2vmax; - height: 2vmax; -} - -.lg-content { - top: 2.5vmax !important; - bottom: calc(10vmin + 5vmax) !important; -} - -.lg-outer[class~="lg-single-item"] .lg-content { - bottom: 5vmax !important; -} - -.lg-thumb-item { - width: 10vmin !important; - height: 10vmin !important; -} - -.lg-container:not([class~="lg-inline"]) .lg-content { - top: 4vmax !important; -} - -.lg-toolbar .lg-icon, -.lg-content .lg-icon { - padding: 0 0.7vmax; - font-size: 1.5vmax !important; - height: 1.5vmax; - width: auto; - color: var(--main-dark-color); -} - -.lg-container:not([class~="lg-inline"]) .lg-toolbar .lg-icon, -.lg-container:not([class~="lg-inline"]) .lg-content .lg-icon { - font-size: 3vmax !important; - height: 3vmax; -} - -.lg-prev { - left: 0 !important; -} - -.lg-next { - right: 0 !important; +.grid-item, .grid-sizer { + width: 50%; } -.lg-toolbar .lg-icon:hover { - color: var(--main-medium-color); -} - -.lg-toolbar .lg-icon { - font-size: 1.5vmax !important; - color: var(--main-dark-color); -} - -.lg-content .lg-icon:hover { - color: var(--main-medium-color); -} - -.lg-sub-html { - padding: 0.7vmin 1.25vmin !important; -} - -.inline-gallery-container { - width: 80%; - height: 70vmin; -} - -.light-gallery-captions { - p { - transform: translate3d(0, 0, 0px); - transition-delay: 500ms; - opacity: 1; +@media (width >= 32rem) { + .grid-item, .grid-sizer { + width: 33%; } } -.lg-slide-progress { - .light-gallery-captions { - h4 { - transform: translate3d(-60px, 0, 0px); - } - - p { - transform: translate3d(60px, 0, 0px); - } - - h4, - p { - opacity: 0; - } +@media (width >= 40rem) { + .grid-item, .grid-sizer { + width: 25%; } } -.lg-current { - &.lg-slide-progress { - .light-gallery-captions { - - h4, - p { - transition-delay: 0ms; - } - } +@media (width >= 48rem) { + .grid-item, .grid-sizer { + width: 20%; } } @@ -535,8 +414,8 @@ body[data-theme~="ram"] .leaflet-tile { background-size: calc(var(--squares-and-triangles-background-width-coef) * 1.6vh) calc(var(--squares-and-triangles-background-height-coef) * 1.6vh); } - .inline-gallery-container { - width: 100%; + .ar-lt-0\.8\:bg-background-light { + background-color: var(--background-light-color); } .logo-custom { diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html index 5d84649..88c5de5 100644 --- a/views/layouts/general-page.html +++ b/views/layouts/general-page.html @@ -7,10 +7,8 @@ <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Patua+One&display=swap" rel="stylesheet"> - <link rel="stylesheet" href="https://f003.backblazeb2.com/file/sayana-static/libs/lightgallery/2.8.3/css/lightgallery.min.css"> - <link rel="stylesheet" href="https://f003.backblazeb2.com/file/sayana-static/libs/lightgallery/2.8.3/css/lg-zoom.min.css"> - <link rel="stylesheet" href="https://f003.backblazeb2.com/file/sayana-static/libs/lightgallery/2.8.3/css/lg-thumbnail.min.css"> <link rel="stylesheet" href="https://f003.backblazeb2.com/file/sayana-static/libs/leaflet/1.9.4/leaflet.css"> + <link rel="stylesheet" href="https://f003.backblazeb2.com/file/sayana-static/libs/glightbox/3.3.0/css/glightbox.min.css"> <link href="/output.css" rel="stylesheet"> </head> @@ -26,6 +24,8 @@ }; </script> + <script src="https://f003.backblazeb2.com/file/sayana-static/libs/glightbox/3.3.0/js/glightbox.min.js"></script> + <script> function sfc32(a, b, c, d) { return function() { @@ -208,10 +208,9 @@ </div> <script src="https://f003.backblazeb2.com/file/sayana-static/libs/htmx/2.0.6/htmx.min.js"></script> - <script src="https://f003.backblazeb2.com/file/sayana-static/libs/lightgallery/2.8.3/lightgallery.min.js"></script> - <script src="https://f003.backblazeb2.com/file/sayana-static/libs/lightgallery/2.8.3/plugins/lg-zoom.min.js"></script> - <script src="https://f003.backblazeb2.com/file/sayana-static/libs/lightgallery/2.8.3/plugins/lg-thumbnail.min.js"></script> <script src="https://f003.backblazeb2.com/file/sayana-static/libs/leaflet/1.9.4/leaflet.js"></script> + <script src="https://f003.backblazeb2.com/file/sayana-static/libs/imagesloaded/5.0.0/imagesloaded.pkgd.min.js"></script> + <script src="https://f003.backblazeb2.com/file/sayana-static/libs/masonry-layout/4.2.2/masonry.pkgd.min.js"></script> <div id="general-page-bottom-embeds" class="flex" hx-get="/api/v1/general-page/bottom-embeds{{ if .QueryString }}?{{ .QueryString }}{{ end }}" hx-trigger="load" hx-target="this" hx-swap="innerHTML"> diff --git a/views/pages/blog-catalogue.html b/views/pages/blog-catalogue.html index faa6588..05a7bc5 100644 --- a/views/pages/blog-catalogue.html +++ b/views/pages/blog-catalogue.html @@ -1,7 +1,7 @@ {{ define "body" }} <div class="flex flex-row ar-lt-0.8:flex-col text-base h-[100%]"> <form hx-get="/api/v1/blog-search" hx-vals='{"lang": "{{ .Lang }}"}' hx-target=".blog-cards" hx-swap="innerHTML" - class="tags-list ar-gt-0.8:min-w-[10dvh] ar-gt-0.8:max-w-[20dvh] ar-gt-0.8:w-fit ar-lt-0.8:w-[100%] ar-lt-0.8:max-h-[30%] flex shrink-0 flex-col ar-gt-0.8:mr-6 bg-background-light inset-shadow"> + class="tags-list ar-gt-0.8:min-w-[10dvh] ar-gt-0.8:max-w-[20dvh] ar-gt-0.8:w-fit ar-lt-0.8:w-[100%] ar-lt-0.8:max-h-[30%] flex shrink-0 flex-col ar-gt-0.8:mr-6 bg-background-dark ar-lt-0.8:bg-background-light inset-shadow"> <div class="flex flex-col overflow-y-auto"> <fieldset> <legend class="font-bold w-[100%] text-center">{{ .L.BlogSearch.TagsHeader }}</legend> |