jekyll-image-links 0.2.0 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8c93aabbb9cd425deaacd65bb022a89262b8799957d6817e58cd1a3ada3d640c
-  data.tar.gz: fe69971d43751442a622ed8571760f0ed5ebce7f74aca6bfa13942e9ec6b4521
+  metadata.gz: a9d85919e65b8d1b2cf32c8d1ffccc9b149f8d84e7950020f5d291e0262dee60
+  data.tar.gz: f933adffe5a1970b78669ae40edd0f5595342c01e43e7f1f53c50072a1f5236b
 SHA512:
-  metadata.gz: 6e741d3e37b158ee40f071ea3fe8a833427e4a7321df076e3ecedb68ed6b67e48449be4764c105179364dc15c0c6465617bbbaedf123d8dc3e54e5bd6959196a
-  data.tar.gz: a74db4de8774eea228b99baca8a3d237807bd7167aa5c1e242798a6c9ec693e29905eba853563c2711c09ed78f3d15bcb97673abe1e2dc3e86306849003214fb
+  metadata.gz: 4454cc915358b308486232099c78a6db594d6c86318e4608cf490ba9a2b6de954a76f276c0e2b91a61127115535ca1eb550ab901a2218cd42be86acd5b7ac83d
+  data.tar.gz: 59a5bbac2e96705896e0ddbcedefe36b215f3fc6fbe541c562b4e3a3b91f8f604df03fd0570daf86bcc0898059715eae29a22fb95c7c489457c27a603ff6e76f

data/assets/jekyll-image-links/image_links.js

@@ -17,42 +17,140 @@
     return !!getHoverPopup();
   }
 
+  function logError(message, error) {
+    if (error) console.error(`[jil] ${message}`, error);
+    else console.error(`[jil] ${message}`);
+  }
+
+  function reportMapProblems(img, mapData) {
+    const src = mapData.src || img.getAttribute("src") || "image map";
+    const width = Number(mapData.width);
+    const height = Number(mapData.height);
+
+    if (!width || !height) {
+      logError(`${src}: map data is missing width or height`);
+    }
+
+    const regions = mapData.regions;
+    if (!Array.isArray(regions) || regions.length === 0) {
+      logError(`${src}: map data has no regions`);
+    }
+
+    const checkSize = () => {
+      const naturalWidth = img.naturalWidth;
+      const naturalHeight = img.naturalHeight;
+      if (!naturalWidth || !naturalHeight) {
+        logError(`${src}: image failed to load`);
+        return;
+      }
+      if (!width || !height) return;
+      if (naturalWidth === width && naturalHeight === height) return;
+      logError(`${src}: image is ${naturalWidth}×${naturalHeight} but map data is ${width}×${height}`);
+    };
+
+    img.addEventListener("error", () => {
+      logError(`${src}: image failed to load`);
+    });
+
+    if (img.complete) checkSize();
+    else img.addEventListener("load", checkSize);
+
+    (regions || []).forEach((region, index) => {
+      const name = region.title || region.href || `region ${index + 1}`;
+      const points = region.points;
+      if (!region.href) logError(`${src}: "${name}" is missing href`);
+      if (!Array.isArray(points) || points.length < 3) {
+        logError(`${src}: "${name}" needs at least 3 points`);
+        return;
+      }
+      if (!width || !height) return;
+
+      const xs = points.map((point) => point[0]);
+      const ys = points.map((point) => point[1]);
+      const outside = xs.some((x) => x < 0 || x > width) || ys.some((y) => y < 0 || y > height);
+      if (!outside) return;
+      logError(
+        `${src}: "${name}" is outside ${width}×${height} (x ${Math.min(...xs)}–${Math.max(...xs)}, y ${Math.min(...ys)}–${Math.max(...ys)})`
+      );
+    });
+  }
+
   function init() {
-    document.querySelectorAll("[data-jil-map]").forEach(initMapHost);
+    document.querySelectorAll("img.jil-map-image[data-jil-regions]").forEach((img) => {
+      if (img.closest("[data-jil-map]")) return;
+      logError(
+        `${img.getAttribute("src") || "image"} was not enhanced (${img.getAttribute("data-jil-regions")})`
+      );
+    });
+
+    document.querySelectorAll("[data-jil-map]").forEach((host) => {
+      try {
+        initMapHost(host);
+      } catch (error) {
+        logError(`Failed to init ${host.id || "image map"}`, error);
+      }
+    });
   }
 
   function initMapHost(host) {
     if (host.dataset.jilReady === "true") return;
     host.dataset.jilReady = "true";
 
-    const mapData = JSON.parse(host.dataset.jilMap);
+    let mapData;
+    try {
+      mapData = JSON.parse(host.dataset.jilMap);
+    } catch (error) {
+      logError(`Invalid map JSON on ${host.id || "image map"}`, error);
+      return;
+    }
+
     const inline = host.dataset.jilInline !== "false";
     const viewer = host.dataset.jilViewer !== "false";
     const labels = host.dataset.jilLabels === "true";
     const img = host.querySelector(".jil-map-image");
 
-    if (!img) return;
+    if (!img) {
+      logError(`${mapData.src || host.id || "image map"}: missing .jil-map-image`);
+      return;
+    }
 
+    reportMapProblems(img, mapData);
     if (labels) renderLabels(host, mapData, img);
     if (inline) bindInlineClicks(host, mapData, img);
     if (viewer) addViewerButton(host, mapData);
   }
 
+  function bindOverlayGeometry(overlay, host, mapData, img) {
+    const update = () => {
+      const geom = getMapGeometry(img, mapData);
+      if (!geom || !geom.width || !geom.height) return;
+      overlay.style.left = `${geom.offsetX}px`;
+      overlay.style.top = `${geom.offsetY}px`;
+      overlay.style.width = `${geom.width}px`;
+      overlay.style.height = `${geom.height}px`;
+    };
+
+    if (img.complete) update();
+    img.addEventListener("load", update);
+    window.addEventListener("resize", update);
+    if (typeof ResizeObserver !== "undefined") {
+      const observer = new ResizeObserver(update);
+      observer.observe(host);
+      observer.observe(img);
+    }
+  }
+
   function renderLabels(host, mapData, img) {
     const overlay = document.createElement("div");
     overlay.className = "jil-label-layer";
     host.appendChild(overlay);
+    bindOverlayGeometry(overlay, host, mapData, img);
 
     const update = () => {
       overlay.innerHTML = "";
       const geom = getMapGeometry(img, mapData);
       if (!geom || !geom.width || !geom.height) return;
 
-      overlay.style.left = `${geom.offsetX}px`;
-      overlay.style.top = `${geom.offsetY}px`;
-      overlay.style.width = `${geom.width}px`;
-      overlay.style.height = `${geom.height}px`;
-
       mapData.regions.forEach((region) => {
         const center = polygonCenter(region.points);
         if (!center) return;
@@ -329,6 +427,9 @@
       state.image = image;
       fitZoom();
     };
+    image.onerror = () => {
+      logError(`${mapData.src || "viewer image"}: viewer image failed to load`);
+    };
     image.src = mapData.src;
 
     return {
@@ -354,13 +455,22 @@
     const jhp = useHoverPopup() ? getHoverPopup() : null;
     if (jhp) {
       event.preventDefault();
-      await jhp.openLink({
-        href: region.href,
-        title: region.title || region.label || region.href,
-        clientX: event.clientX,
-        clientY: event.clientY,
-        isPermanent: true,
-      });
+      try {
+        await jhp.openLink({
+          href: region.href,
+          title: region.title || region.label || region.href,
+          clientX: event.clientX,
+          clientY: event.clientY,
+          isPermanent: true,
+        });
+      } catch (error) {
+        logError(`Failed to open ${region.href}`, error);
+      }
+      return;
+    }
+
+    if (!region.href) {
+      logError("Region is missing href");
       return;
     }
 
@@ -478,7 +588,10 @@
   }
 
   function start() {
-    if (!document.querySelector(ROOT_SELECTOR)) return;
+    if (!document.querySelector(ROOT_SELECTOR)) {
+      logError("image_links.js loaded without data-jil-root");
+      return;
+    }
 
     const run = () => init();
 

data/lib/jekyll/image_links/hooks.rb

@@ -17,7 +17,10 @@ module Jekyll
             html = MapRenderer.enhance_html(html, site: site, page: doc, cfg: cfg)
             doc.output = inject_assets(html, assets_path: assets_path, site: site, cfg: cfg)
           rescue StandardError => e
-            Jekyll.logger.warn("jekyll-image-links:", "Failed to process #{doc.relative_path}: #{e.class}: #{e.message}")
+            Jekyll.logger.error(
+              "jekyll-image-links:",
+              "Failed to process #{doc.relative_path}: #{e.class}: #{e.message}"
+            )
           end
         end
       end

data/lib/jekyll/image_links/map_renderer.rb

@@ -23,7 +23,7 @@ module Jekyll
           html = html.gsub(PORTABLE_FIGURE) do |figure_html|
             enhance_portable_markup(figure_html, site: site, page: page, cfg: cfg)
           rescue StandardError => e
-            Jekyll.logger.warn("jekyll-image-links:", "Failed to enhance portable figure: #{e.message}")
+            log_error("#{page_label(page)} #{markup_context(figure_html)}: #{e.class}: #{e.message}")
             figure_html
           end
 
@@ -32,7 +32,7 @@ module Jekyll
 
             enhance_portable_markup(image_html, site: site, page: page, cfg: cfg)
           rescue StandardError => e
-            Jekyll.logger.warn("jekyll-image-links:", "Failed to enhance portable image map: #{e.message}")
+            log_error("#{page_label(page)} #{markup_context(image_html)}: #{e.class}: #{e.message}")
             image_html
           end
         end
@@ -170,6 +170,8 @@ module Jekyll
             "title" => title,
             "regions" => normalize_regions(regions, site: site, page: page, liquid_context: liquid_context),
           }
+          warn_if_regions_out_of_bounds!(map_data["regions"], width, height, src)
+          warn_if_image_dimensions_differ!(site, page, attrs["src"], width, height)
 
           render_interactive(
             map_data,
@@ -300,6 +302,170 @@ module Jekyll
           end
         end
 
+        def warn_if_regions_out_of_bounds!(regions, width, height, src)
+          regions.each do |region|
+            points = region["points"] || []
+            next if points.empty?
+
+            xs = points.map { |point| point[0] }
+            ys = points.map { |point| point[1] }
+            outside = xs.any? { |x| x.negative? || x > width } || ys.any? { |y| y.negative? || y > height }
+            next unless outside
+
+            name = region["title"] || region["href"]
+            log_error(
+              "#{src}: region \"#{name}\" is outside #{width}×#{height} (x #{xs.min}–#{xs.max}, y #{ys.min}–#{ys.max})"
+            )
+          end
+        end
+
+        def warn_if_image_dimensions_differ!(site, page, src, width, height)
+          path = local_image_path(site, page, src)
+          if path.nil?
+            log_error("#{src}: image file not found") unless remote_url?(src)
+            return
+          end
+
+          actual = read_image_size(path)
+          return unless actual
+
+          actual_width, actual_height = actual
+          return if actual_width == width && actual_height == height
+
+          log_error("#{src}: image file is #{actual_width}×#{actual_height} but map data is #{width}×#{height}")
+        end
+
+        def local_image_path(site, page, src)
+          return nil if src.to_s.strip.empty? || remote_url?(src)
+
+          path = src.to_s
+          baseurl = site.baseurl.to_s
+          baseurl = "" if baseurl == "/"
+          path = path.delete_prefix(baseurl) if !baseurl.empty? && (path == baseurl || path.start_with?("#{baseurl}/"))
+
+          candidates = [path]
+          if !path.start_with?("/") && page&.respond_to?(:relative_path) && page.relative_path
+            candidates << File.join(File.dirname(page.relative_path), path)
+          end
+
+          candidates.each do |candidate|
+            full_path = Jekyll.sanitized_path(site.source, candidate)
+            return full_path if File.file?(full_path)
+          end
+          nil
+        end
+
+        def remote_url?(src)
+          src.to_s.start_with?("http://", "https://", "data:")
+        end
+
+        def read_image_size(path)
+          File.open(path, "rb") do |file|
+            header = file.read(32)
+            return nil unless header && header.bytesize >= 24
+
+            header = header.b
+            if header.start_with?("\x89PNG\r\n\x1A\n".b)
+              return [header[16, 4].unpack1("N"), header[20, 4].unpack1("N")]
+            end
+            if header.start_with?("GIF87a".b, "GIF89a".b)
+              return header[6, 4].unpack("v2")
+            end
+            if header.start_with?("RIFF".b) && header[8, 4] == "WEBP".b
+              return read_webp_size(file, header)
+            end
+            return read_jpeg_size(file) if header.start_with?("\xFF\xD8".b)
+          end
+          nil
+        rescue StandardError => e
+          log_error("#{path}: could not read image dimensions: #{e.class}: #{e.message}")
+          nil
+        end
+
+        def read_webp_size(file, header)
+          format = header[12, 4]
+          if format == "VP8X".b
+            file.seek(24)
+            data = file.read(6)
+            return nil unless data&.bytesize == 6
+
+            bytes = data.bytes
+            width = 1 + (bytes[0] | (bytes[1] << 8) | (bytes[2] << 16))
+            height = 1 + (bytes[3] | (bytes[4] << 8) | (bytes[5] << 16))
+            [width, height]
+          elsif format == "VP8 ".b
+            file.seek(26)
+            data = file.read(4)
+            return nil unless data&.bytesize == 4
+
+            width = data[0, 2].unpack1("v") & 0x3fff
+            height = data[2, 2].unpack1("v") & 0x3fff
+            [width, height]
+          elsif format == "VP8L".b
+            file.seek(21)
+            data = file.read(4)
+            return nil unless data&.bytesize == 4
+
+            b0, b1, b2, b3 = data.bytes
+            width = 1 + (((b1 & 0x3F) << 8) | b0)
+            height = 1 + (((b3 & 0x0F) << 10) | (b2 << 2) | ((b1 & 0xC0) >> 6))
+            [width, height]
+          end
+        end
+
+        def read_jpeg_size(file)
+          file.seek(2)
+          loop do
+            byte = file.read(1)
+            return nil unless byte == "\xFF".b
+
+            marker = nil
+            loop do
+              byte = file.read(1)
+              return nil unless byte
+              next if byte == "\xFF".b
+
+              marker = byte.ord
+              break
+            end
+            next if marker == 0xD8 || marker == 0xD9
+            return nil if marker == 0xDA
+
+            length_bytes = file.read(2)
+            return nil unless length_bytes&.bytesize == 2
+
+            length = length_bytes.unpack1("n")
+            return nil if length < 2
+
+            if [0xC0, 0xC1, 0xC2, 0xC3, 0xC5, 0xC6, 0xC7, 0xC9, 0xCA, 0xCB, 0xCD, 0xCE, 0xCF].include?(marker)
+              data = file.read(5)
+              return nil unless data&.bytesize == 5
+
+              _precision, height, width = data.unpack("Cnn")
+              return [width, height]
+            end
+
+            file.seek(length - 2, IO::SEEK_CUR)
+          end
+        end
+
+        def page_label(page)
+          return page.relative_path if page.respond_to?(:relative_path) && page.relative_path
+          return page.path if page.respond_to?(:path) && page.path
+
+          "page"
+        end
+
+        def markup_context(markup)
+          src = markup[/src="([^"]*)"/, 1]
+          regions = markup[/data-jil-regions="([^"]*)"/, 1]
+          [regions, src].compact.reject(&:empty?).join(" ")
+        end
+
+        def log_error(message)
+          Jekyll.logger.error("jekyll-image-links:", message)
+        end
+
         def validate_dimensions!(width, height, src)
           unless width.positive? && height.positive?
             raise ArgumentError, "image_map requires native width and height in the YAML file or numeric width/height attributes"

data/lib/jekyll/image_links/tags.rb

@@ -15,14 +15,22 @@ module Jekyll
         cfg = (site.config["image_links"] || {})
         regions_body = @attrs["file"] ? nil : super
 
-        figure = MapRenderer.render_portable_figure(
-          @attrs,
-          site: site,
-          page: context.registers[:page],
-          liquid_context: context,
-          cfg: cfg,
-          regions_body: regions_body
-        )
+        begin
+          figure = MapRenderer.render_portable_figure(
+            @attrs,
+            site: site,
+            page: context.registers[:page],
+            liquid_context: context,
+            cfg: cfg,
+            regions_body: regions_body
+          )
+        rescue StandardError => e
+          page = context.registers[:page]
+          page_label = page.respond_to?(:relative_path) ? page.relative_path : "page"
+          src = @attrs["src"] || @attrs["file"]
+          Jekyll.logger.error("jekyll-image-links:", "#{page_label} #{src}: #{e.class}: #{e.message}")
+          raise
+        end
 
         <<~HTML
           {::nomarkdown}

data/lib/jekyll/image_links/version.rb

@@ -1,5 +1,5 @@
 module Jekyll
   module ImageLinks
-    VERSION = "0.2.0"
+    VERSION = "0.3.0"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-image-links
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.3.0
 platform: ruby
 authors:
 - directsun