| -rw-r--r-- | internal/glightbox/html_renderer.go | 59 | ||||
| -rw-r--r-- | static/input.css | 93 |
2 files changed, 14 insertions, 138 deletions
diff --git a/internal/glightbox/html_renderer.go b/internal/glightbox/html_renderer.go index 44fbd4c..3da98eb 100644 --- a/internal/glightbox/html_renderer.go +++ b/internal/glightbox/html_renderer.go @@ -4,14 +4,11 @@ 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" @@ -19,36 +16,22 @@ import ( type GLightboxHTMLRenderer struct { html.Config - md goldmark.Markdown - anchorMatchRe *regexp.Regexp + md goldmark.Markdown } func NewGLightboxHTMLRenderer(opts ...html.Option) renderer.NodeRenderer { r := &GLightboxHTMLRenderer{ Config: html.NewConfig(), md: goldmark.New( - 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), - ), - ), + goldmark.WithRendererOptions( + html.WithHardWraps(), + html.WithXHTML(), ), ), } 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 } @@ -103,14 +86,8 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte, } } - 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 %s grid-item-%s p-1" + <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> <picture> <source media="(width < 640px)" srcset="https://f003.backblazeb2.com/file/sayana-photos/webp-320p/%s.webp" /> @@ -120,9 +97,7 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte, <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)) + </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(` @@ -135,7 +110,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 mx-auto"> + <div class="grid masonry-grid-%s"> <div class="grid-sizer grid-sizer-%s"></div> %s </div> @@ -145,33 +120,23 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte, w.WriteString(fmt.Sprintf(` <script> var lightbox_%s = GLightbox({ - selector: '.glightbox-%s', - moreLength: 0 + selector: '.glightbox-%s' }); var msnry_%s = new Masonry('.masonry-grid-%s', { itemSelector: '.grid-item-%s', columnWidth: '.grid-sizer-%s', - percentPosition: true, - horizontalOrder: true + percentPosition: true }); var imgLoad_%s_timer; - var imgLoad_%s = imagesLoaded('.masonry-grid-%s'); + var imgLoad_%s = imagesLoaded('.masonry-grid-%s', () => msnry_%s.layout()); - function initMasonryLayout_%s() { + imgLoad_%s.on('progress', function() { 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, galleryID, galleryID, galleryID, 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/static/input.css b/static/input.css index a983460..8080d13 100644 --- a/static/input.css +++ b/static/input.css @@ -122,12 +122,12 @@ html { --squares-and-triangles-background-height-coef: 15; } -a, .linklike { +a { color: var(--main-medium-color) !important; text-decoration: underline; } -a:hover, .linklike:hover { +a:hover { color: var(--main-light-color) !important; } @@ -327,74 +327,10 @@ a:hover, .linklike:hover { transform: scale(1.1); } -.grid-tooltip { - position: relative; - display: inline-block; - box-shadow: inset 0rem 0rem 0.5rem var(--main-light-color); - transition: box-shadow 0.5s ease-in-out; -} - -.grid-tooltip:hover { - box-shadow: none; -} - -.grid-tooltip-text { - visibility: hidden; - opacity: 0; - transition: opacity 0.5s; - width: 100%; - top: 100%; - background-color: var(--background-dark-color); - color: var(--main-dark-color); - text-align: center; - padding: 0.25rem 0.25rem; - margin-top: 0.25rem; - border-radius: 0.5rem; - position: absolute; - z-index: 15; -} - -.grid-tooltip:hover .grid-tooltip-text { - visibility: visible; - opacity: 1; -} - -.grid-tooltip-text::after { - content: " "; - position: absolute; - bottom: 100%; - left: 50%; - margin-left: -0.25rem; - border-width: 0.25rem; - border-style: solid; - border-color: transparent transparent var(--background-dark-color) transparent; -} - .grid-item, .grid-sizer { - position: relative; - display: inline-block; width: 50%; } -.grid-item-index { - visibility: visible; - opacity: 1; - transition: opacity 0.5s; - top: 0%; - left: 0%; - background-color: var(--main-light-color); - color: var(--background-dark-color); - text-align: center; - padding: 0.25rem 0.25rem; - position: absolute; - z-index: 14; -} - -.grid-item:hover .grid-item-index { - visibility: hidden; - opacity: 0; -} - .grid-item-2x { width: 100%; } @@ -429,31 +365,6 @@ a:hover, .linklike:hover { } } -.goverlay { - background: color-mix(in srgb, var(--background-light-color) 50%, transparent) !important; - backdrop-filter: blur(1rem); - -webkit-backdrop-filter: blur(1rem); -} - -.glightbox-clean .gslide-description { - background: color-mix(in srgb, var(--background-dark-color) 50%, transparent) !important; - backdrop-filter: blur(1rem); - -webkit-backdrop-filter: blur(1rem); -} - -.glightbox-clean .gslide-title { - font-family: var(--font-spectral) !important; - font-weight: 600 !important; - color: var(--main-light-color) !important; -} - -.glightbox-clean .gslide-desc { - font-size: 1rem !important; - font-family: var(--font-spectral) !important; - font-weight: 400; - color: var(--main-medium-color) !important; -} - .map-container .leaflet-container { width: 100% !important; height: 100% !important; |