jekyll-imgflow 0.2.0 → 0.3.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3b95efe6605d712e14895c4152a68b4b751eea6954416e428acbe96518bd4284
-  data.tar.gz: 434fc1985138599142a94d32dda9c986c63893c4acfc587e085d8e3486d700d4
+  metadata.gz: 2f902d95441ebd7a1c3a98200b140c2bf109343a79cf43700221a6cfec2902df
+  data.tar.gz: c89e222e5f37bb795f44ec7b6e3ecc865ca3fb66fefac0481ea31211f8fa7dfb
 SHA512:
-  metadata.gz: f588617884137bcf8054e2a1bce6489b9aebfe4829ce9a279bb65654871dd13d41df6e6f0e0a15ddeb7fb39b9f4f9776206a2f6ff16b83db6e11c82b76dd78ef
-  data.tar.gz: 480ba9208f2952793bff054b24b8f7e79a47de1b83d322d0f0f261242cbd8d01f4e532b0571397d4f0efb18c31f27867546ba987f51add3a664fb5b7049bcfb1
+  metadata.gz: cfc171eb11a3f533033671d2b8d8bfdc90bd3a9790bc9b764cf1ada4e58817179261419c80af2cd0eb2bc8c6bc1c130d754f31a0415664bd4262c43f0c3adb49
+  data.tar.gz: 1f92eb5e21c373a01e570bcaa843a51ccfd093655c46a64a4ae21248c9d4862d8cd6acac84830e2f1d023a8de4a8b8b2662bfbfe44e83c0a6a633c6eb23cc6d1

data/lib/jekyll-imgflow/config.rb

@@ -20,11 +20,12 @@ module JekyllImgFlow
     # Format used for the <img> fallback in <picture> elements.
     # All other formats in `formats` get <source> tags for browsers that support them.
     DEFAULT_FALLBACK_FORMAT = "jpg"
+    DEFAULT_IMAGE_MODAL = true
 
     attr_reader :site, :originals, :output, :input_formats, :sizes, :formats,
                 :quality, :backend_priority, :imgproxy_url,
                 :weserv_url, :flyimg_url,
-                :optimize_qualities, :fallback_format
+                :optimize_qualities, :fallback_format, :image_modal
 
     def initialize(site)
       shared = site.config["shared_images_configs"] || {}
@@ -40,6 +41,7 @@ module JekyllImgFlow
       @quality          = cfg["quality"] || DEFAULT_QUALITY
       @backend_priority = cfg["backend_priority"] || DEFAULT_BACKEND_PRIORITY
       @fallback_format  = cfg["fallback_format"] || DEFAULT_FALLBACK_FORMAT
+      @image_modal      = cfg.fetch("image_modal", DEFAULT_IMAGE_MODAL)
 
       @imgproxy_url = cfg["imgproxy_url"]
       @weserv_url       = cfg["weserv_url"]

data/lib/jekyll-imgflow/hooks.rb

@@ -47,6 +47,13 @@ module JekyllImgFlow
     end
   end
 
+  # Inject modal CSS/JS into pages that contain data-imgflow-modal triggers
+  %i[pages documents].each do |type|
+    Jekyll::Hooks.register type, :post_render do |doc|
+      doc.output = ModalAssets.inject(doc.output) if doc.output
+    end
+  end
+
   def self.cleanup_orphaned_images(site, manifest = nil)
     Jekyll.logger.info "🧹 ImgFlow: Checking for orphaned specialized images..."
 

data/lib/jekyll-imgflow/html_generator.rb

@@ -4,6 +4,8 @@ module JekyllImgFlow
   # Unified HTML Generator for all markup formats
   # Supports Picture Tag compatibility with multiple markup formats and attributes
   class HtmlGenerator
+    include ModalWrapper
+
     # Generate HTML based on markup format and attributes
     # @param results [Array<String>] Processed image paths
     # @param attributes [Hash] HTML attributes by element
@@ -47,6 +49,9 @@ module JekyllImgFlow
       # Wrap in link if specified
       html = wrap_with_link(html) if @attributes[:link]
 
+      # Wrap in modal trigger if enabled (only for HTML elements, not raw URLs)
+      html = wrap_with_modal(html) if modal_enabled? && html_element?
+
       # Wrap in parent container if specified
       html = wrap_with_parent(html) if @attributes[:parent]&.any?
 
@@ -77,7 +82,8 @@ module JekyllImgFlow
         a: attributes[:a] || {},
         parent: attributes[:parent] || {},
         alt: attributes[:alt],
-        link: attributes[:link]
+        link: attributes[:link],
+        modal: attributes[:modal]
       }
     end
 
@@ -89,7 +95,8 @@ module JekyllImgFlow
         a: {},
         parent: {},
         alt: nil,
-        link: nil
+        link: nil,
+        modal: nil
       }
     end
 

data/lib/jekyll-imgflow/imgflow_tag.rb

@@ -60,7 +60,8 @@ module Jekyll
       # Combine image path with preset markup. Keep the path quoted because
       # filenames may contain spaces.
       image_markup = if image_path.include?(" ")
-                       "\"#{image_path.gsub('"', '\\"')}\""
+                       escaped_path = image_path.gsub("\\") { "\\\\" }.gsub('"', '\\"')
+                       "\"#{escaped_path}\""
                      else
                        image_path
                      end
@@ -193,7 +194,8 @@ module Jekyll
         a: extract_prefixed_attrs(base_attrs, "a-"),
         parent: extract_prefixed_attrs(base_attrs, "parent-"),
         alt: base_attrs[:alt],
-        link: base_attrs[:link]
+        link: base_attrs[:link],
+        modal: base_attrs[:modal]
       }
     end
 

data/lib/jekyll-imgflow/modal_assets.rb

@@ -0,0 +1,107 @@
+# frozen_string_literal: true
+
+module JekyllImgFlow
+  # Inline CSS and JS for the image modal/lightbox feature.
+  # Injected by hooks.rb into pages that contain data-imgflow-modal triggers.
+  module ModalAssets
+    CSS = <<~CSS
+      .imgflow-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);
+      display:flex;align-items:center;justify-content:center;z-index:9999;
+      cursor:pointer;animation:imgflow-fade .15s ease-out}
+      .imgflow-modal-image{max-width:90vw;max-height:90vh;object-fit:contain;
+      cursor:auto;border-radius:4px;box-shadow:0 4px 30px rgba(0,0,0,.5)}
+      .imgflow-modal-close{position:absolute;top:1rem;right:1rem;
+      background:rgba(255,255,255,.2);border:none;color:#fff;font-size:2rem;
+      width:3rem;height:3rem;border-radius:50%;cursor:pointer;
+      display:flex;align-items:center;justify-content:center;line-height:1}
+      .imgflow-modal-close:hover{background:rgba(255,255,255,.4)}
+      @keyframes imgflow-fade{from{opacity:0}to{opacity:1}}
+    CSS
+
+    JS = <<~JS
+      (function(){
+      function openModal(src,alt){
+      var o=document.createElement('div');
+      o.className='imgflow-modal-overlay';
+      var i=document.createElement('img');
+      i.src=src;i.alt=alt||'';i.className='imgflow-modal-image';
+      var b=document.createElement('button');
+      b.className='imgflow-modal-close';b.setAttribute('aria-label','Close');
+      b.innerHTML='&times;';
+      o.appendChild(b);o.appendChild(i);document.body.appendChild(o);
+      function c(){document.body.removeChild(o);
+      document.removeEventListener('keydown',k);}
+      function k(e){if(e.key==='Escape')c();}
+      o.addEventListener('click',function(e){
+      if(e.target===o||e.target===b)c();});
+      document.addEventListener('keydown',k);}
+      document.addEventListener('click',function(e){
+      var t=e.target.closest('[data-imgflow-modal]');
+      if(!t)return;e.preventDefault();
+      openModal(t.getAttribute('href'),t.getAttribute('data-imgflow-alt'));});
+      })();
+    JS
+
+    def self.inject(html)
+      return html unless html&.include?("data-imgflow-modal")
+
+      style_tag = "<style>\n#{CSS}</style>"
+      script_tag = "<script>\n#{JS}</script>"
+
+      if html.include?("</head>")
+        html = html.sub("</head>", "#{style_tag}\n</head>")
+        html = html.sub("</body>", "#{script_tag}\n</body>") if html.include?("</body>")
+      elsif html.include?("</body>")
+        html = html.sub("</body>", "#{style_tag}\n#{script_tag}\n</body>")
+      else
+        html = "#{html}\n#{style_tag}\n#{script_tag}"
+      end
+
+      html
+    end
+  end
+
+  # Modal wrapping logic for HtmlGenerator — extracted to keep HtmlGenerator
+  # under the RuboCop class length limit.
+  module ModalWrapper
+    # Formats that produce raw URLs/srcsets (not wrappable HTML elements)
+    NON_HTML_FORMATS = %w[direct_url naked_srcset].freeze
+
+    # Check if the current markup format produces an HTML element
+    def html_element?
+      !NON_HTML_FORMATS.include?(@markup_format)
+    end
+
+    # Determine if modal behavior is enabled for this image
+    # Per-image modal:true/false overrides config default
+    # Modal is skipped when an explicit link is set
+    def modal_enabled?
+      return false if @attributes[:link]
+
+      modal_attr = @attributes[:modal]
+      return modal_attr.to_s == "true" if modal_attr
+
+      @config&.image_modal ? true : false
+    end
+
+    # Pick the best image path for the modal — prefer the fallback format
+    # (e.g. jpg) for maximum browser compatibility
+    def modal_image_path
+      fallback_ext = @config&.fallback_format ? ".#{@config.fallback_format}" : ".jpg"
+      fallback = @results.find { |r| File.extname(r).downcase == fallback_ext }
+      fallback || @results.last
+    end
+
+    # Wrap HTML in modal trigger anchor
+    def wrap_with_modal(html)
+      modal_href = html_path(modal_image_path)
+      return html unless modal_href
+
+      data_attrs = " data-imgflow-modal"
+      alt = @attributes[:alt]
+      data_attrs += " data-imgflow-alt=\"#{escape_attr_value(alt)}\"" if alt
+
+      "<a href=\"#{modal_href}\"#{data_attrs}>#{html}</a>"
+    end
+  end
+end

data/lib/jekyll-imgflow/parser.rb

@@ -9,7 +9,7 @@ module JekyllImgFlow
     # Define valid operation parameters and attribute types
     OPERATION_PARAMS = %i[width height ratio aspect_ratio quality format formats
                           optimize level watermark opacity position keep preset].freeze
-    HTML_ATTRIBUTES = %i[alt class title loading].freeze
+    HTML_ATTRIBUTES = %i[alt class title loading link modal].freeze
 
     # Simple operation mappings for single-parameter operations
     SIMPLE_OPERATIONS = {

data/lib/jekyll-imgflow/picture_tag_adaptor.rb

@@ -42,11 +42,11 @@ module JekyllImgFlow
     # @param picture_markup [String] Picture Tag markup like "{% picture hero image.jpg 16:9 --alt Text %}"
     # @return [Hash] Translation result with markup and attributes
     def translate_to_imgflow(picture_markup)
-      # Extract content between {% picture ... %}
-      match = picture_markup.match(/\{%\s*picture\s+(.+?)%\}/)
-      return { markup: "", attributes: {} } unless match
+      # Extract content between {% picture ... %} without a backtracking regex
+      content = extract_picture_content(picture_markup)
+      return { markup: "", attributes: {} } unless content
 
-      content = match[1].strip
+      content = content.strip
       return { markup: "", attributes: {} } if content.empty?
 
       # Parse arguments
@@ -75,6 +75,32 @@ module JekyllImgFlow
 
     private
 
+    def extract_picture_content(markup)
+      offset = 0
+      while (opening = markup.index("{%", offset))
+        cursor = skip_whitespace(markup, opening + 2)
+        if markup[cursor, 7] == "picture"
+          cursor += 7
+          if cursor < markup.length && whitespace?(markup[cursor])
+            cursor = skip_whitespace(markup, cursor)
+            closing = markup.index("%}", cursor)
+            return markup[cursor...closing] if closing
+          end
+        end
+        offset = opening + 2
+      end
+      nil
+    end
+
+    def skip_whitespace(markup, cursor)
+      cursor += 1 while cursor < markup.length && whitespace?(markup[cursor])
+      cursor
+    end
+
+    def whitespace?(character)
+      [" ", "\t", "\r", "\n"].include?(character)
+    end
+
     # Parse arguments handling quoted paths and attributes
     # @param content [String] Raw content
     # @return [Array] Parsed arguments

data/lib/jekyll-imgflow/providers/sharp.rb

@@ -79,7 +79,7 @@ module JekyllImgFlow
 
         format_op = @operations.find { |op| op[:type] == :format }
         quality_op = @operations.find { |op| op[:type] == :quality }
-        command_parts += ["-f", format_op[:format]] if format_op
+        command_parts += ["-f", sharp_format(format_op[:format])] if format_op
         command_parts += ["-q#{quality_op[:quality]}"] if quality_op
 
         if opacity && opacity < 1.0
@@ -142,7 +142,7 @@ module JekyllImgFlow
         quality_op = @operations.find { |op| op[:type] == :quality }
         alpha_op = @operations.find { |op| op[:type] == :alpha_opacity }
 
-        command_parts += ["-f", format_op[:format]] if format_op
+        command_parts += ["-f", sharp_format(format_op[:format])] if format_op
         command_parts += ["-q#{quality_op[:quality]}"] if quality_op
         if alpha_op
           alpha_value = (alpha_op[:opacity] * 255).round
@@ -200,7 +200,7 @@ module JekyllImgFlow
         quality_op = @operations.find { |op| op[:type] == :quality }
         alpha_op = @operations.find { |op| op[:type] == :alpha_opacity }
 
-        command_parts += ["-f", format_op[:format]] if format_op
+        command_parts += ["-f", sharp_format(format_op[:format])] if format_op
         command_parts += ["-q#{quality_op[:quality]}"] if quality_op
         if alpha_op
           alpha_value = (alpha_op[:opacity] * 255).round
@@ -209,6 +209,12 @@ module JekyllImgFlow
 
         command_parts.join(" ")
       end
+
+      # Sharp CLI calls JPEG "jpeg", while ImgFlow uses the standard "jpg"
+      # extension in generated filenames and public configuration.
+      def sharp_format(format)
+        format.to_s == "jpg" ? "jpeg" : format
+      end
     end
   end
 end

data/lib/jekyll-imgflow/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module JekyllImgFlow
-  VERSION = "0.2.0"
+  VERSION = "0.3.1"
 end

data/lib/jekyll-imgflow.rb

@@ -23,6 +23,7 @@ require_relative "jekyll-imgflow/provider_registry"
 require_relative "jekyll-imgflow/build_time_processor"
 require_relative "jekyll-imgflow/parser"
 require_relative "jekyll-imgflow/tags/tag_registry"
+require_relative "jekyll-imgflow/modal_assets"
 require_relative "jekyll-imgflow/html_generator"
 require_relative "jekyll-imgflow/imgflow_tag"
 require_relative "jekyll-imgflow/picture_tag_adaptor"

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-imgflow
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.3.1
 platform: ruby
 authors:
 - Svend Gundestrup
@@ -74,6 +74,7 @@ files:
 - lib/jekyll-imgflow/html_generator.rb
 - lib/jekyll-imgflow/imgflow_tag.rb
 - lib/jekyll-imgflow/manifest_manager.rb
+- lib/jekyll-imgflow/modal_assets.rb
 - lib/jekyll-imgflow/operation_processor.rb
 - lib/jekyll-imgflow/parser.rb
 - lib/jekyll-imgflow/path_resolver.rb