al_img_tools 1.0.0 → 1.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6f6550e1c0bb52d5441af3ff5694fe09b246860aaab960b27dffe8465d60a5d3
-  data.tar.gz: 797301afab6ee75d003251f6bbe9500863c87a0eb1f33df7f5375dd3c634f8f7
+  metadata.gz: d0b1285b1603c7d9106f5ad809554097f58c763bd7ae8efbfbfc0b2214a8d37e
+  data.tar.gz: 1a956fb012c2407646cc2a0d96d77f425ae939a0feee0f1608d46e54e58eb31e
 SHA512:
-  metadata.gz: 7dfcadad0d3e1d810e559f4e5cfa201cef6bd96584a40aff6bd5378fd486ef24a0067dc7d4285647f9a8b6fb634024eb98e941fc106826c429b8f05b95dd782d
-  data.tar.gz: 782ff6c34c4f358063421e707afe9635b82f0b667099c8138b1f3f6587c945335fb8bd578660ba7c322c2fe83b2fafb573f158309901fdc27fb04ecf7cdc44a2
+  metadata.gz: 7cd648a5aa7bc2f888453696ebed3bd551a20d16016bfdff92abdf7e41fa03fefaf7763230888ed1545095494ce532af9551910ea88dc5645e6e06d5a59a8241
+  data.tar.gz: 3a70c2754a6a415ac50be057efce129a546ce8743afba7dc3b646aab708a8b5450ec10cbcd48c7dc9107cf89697e5514ec4cdf1959d16a8528b782704b52ac19

data/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 1.0.2 - 2026-02-17
+
+- Finalized plugin-owned lightbox runtime by shipping a vanilla Lightbox2-compatible adapter path.
+- Ensured static asset generator picks up all plugin runtime assets under `lib/assets/al_img_tools/**`.
+- Added test coverage for adapter CSS/JS packaging contracts.
+- Reduced noisy static-file logging by treating unchanged asset copies as debug-level skips.
+
+## 1.0.1 - 2026-02-17
+
+- Replaced Lightbox2 CDN runtime dependency with a plugin-owned vanilla lightbox adapter.
+- Added plugin-owned lightbox adapter CSS/JS assets and static asset registration.
+- Removed jQuery dependency from medium zoom initialization.
+
 ## 0.1.0 - 2026-02-07
 
 - Initial gem release.

data/README.md

@@ -5,7 +5,7 @@ A Jekyll plugin that provides various image manipulation features for al-folio s
 ## Features
 
 - Image comparison sliders
-- Lightbox galleries
+- Lightbox-style galleries (vanilla adapter for `data-lightbox` markup)
 - Medium zoom
 - Image sliders
 - PhotoSwipe galleries
@@ -42,7 +42,7 @@ plugins:
 layout: page
 title: Gallery
 images:
-  lightbox2: true # Enable Lightbox2 gallery (or use `gallery: true`)
+  lightbox2: true # Enable lightbox adapter (or use `gallery: true`)
   compare: true # Enable image comparison slider
   slider: true # Enable image slider
   photoswipe: true # Enable PhotoSwipe gallery

data/lib/al_img_tools.rb

@@ -4,8 +4,8 @@ module AlImgTools
   # Directory structure constants
   PLUGIN_NAME = 'al_img_tools'
   ASSETS_DIR = 'assets'
+  CSS_DIR = 'css'
   JS_DIR = 'js'
-  JS_FILES = ['zoom.js', 'venobox-setup.js'].freeze
 
   # Custom StaticFile class to track when files are written
   class PluginStaticFile < Jekyll::StaticFile
@@ -15,7 +15,7 @@ module AlImgTools
         if result
           Jekyll.logger.info("AlImgTools:", "Successfully copied #{name} from #{path} to #{destination(dest)}")
         else
-          Jekyll.logger.error("AlImgTools:", "Failed to copy #{name} from #{path}")
+          Jekyll.logger.debug("AlImgTools:", "Skipped unchanged asset #{name} from #{path}")
         end
       end
     end
@@ -26,36 +26,14 @@ module AlImgTools
     priority :low
 
     def generate(site)
-      # Get the plugin's assets directory path - now includes the full desired structure
       plugin_lib_path = File.expand_path('.', __dir__)
-      Jekyll.logger.info("AlImgTools:", "Plugin lib directory: #{plugin_lib_path}")
-
-      # Register each JS file
-      JS_FILES.each do |js_file|
-        # Construct source path - now includes the full path structure we want in the output
-        source_path = File.join(plugin_lib_path, ASSETS_DIR, PLUGIN_NAME, JS_DIR, js_file)
-        Jekyll.logger.info("AlImgTools:", "Looking for source file: #{source_path}")
-
-        # Only add the file if it exists
-        if File.exist?(source_path)
-          # Create a static file with:
-          # - site: the Jekyll site instance
-          # - base: the base directory containing the file
-          # - dir: the directory relative to base (used to construct the destination path)
-          # - name: the file name
-          static_file = PluginStaticFile.new(
-            site,
-            plugin_lib_path,                            # base directory
-            File.join(ASSETS_DIR, PLUGIN_NAME, JS_DIR), # source dir relative to base
-            js_file                                     # filename
-          )
-
-          # The file will be copied to: _site/assets/al_img_tools/js/[filename]
-          site.static_files << static_file
-          Jekyll.logger.info("AlImgTools:", "Registered #{js_file} for copying to #{ASSETS_DIR}/#{PLUGIN_NAME}/#{JS_DIR}/")
-        else
-          Jekyll.logger.warn("AlImgTools:", "JavaScript file not found: #{source_path}")
-        end
+      assets_root = File.join(plugin_lib_path, ASSETS_DIR, PLUGIN_NAME)
+
+      Dir.glob(File.join(assets_root, '**', '*')).sort.each do |source_path|
+        next if File.directory?(source_path)
+
+        relative_dir = File.dirname(source_path).sub("#{plugin_lib_path}/", '')
+        site.static_files << PluginStaticFile.new(site, plugin_lib_path, relative_dir, File.basename(source_path))
       end
     end
   end
@@ -75,17 +53,6 @@ module AlImgTools
       },
       'version' => '8.0.6'
     },
-    'lightbox2' => {
-      'integrity' => {
-        'css' => 'sha256-uypRbsAiJcFInM/ndyI/JHpzNe6DtUNXaWEUWEPfMGo=',
-        'js' => 'sha256-A6jI5V9s1JznkWwsBaRK8kSeXLgIqQfxfnvdDOZEURY='
-      },
-      'url' => {
-        'css' => 'https://cdn.jsdelivr.net/npm/lightbox2@{{version}}/dist/css/lightbox.min.css',
-        'js' => 'https://cdn.jsdelivr.net/npm/lightbox2@{{version}}/dist/js/lightbox.min.js'
-      },
-      'version' => '2.11.5'
-    },
     'medium_zoom' => {
       'integrity' => {
         'js' => 'sha256-ZgMyDAIYDYGxbcpJcfUnYwNevG/xi9OHKaR/8GK+jWc='
@@ -174,8 +141,8 @@ module AlImgTools
       !!(images['lightbox2'] || images['gallery'])
     end
 
-    def asset_url(context, file_name)
-      "#{base_url(context)}/#{ASSETS_DIR}/#{PLUGIN_NAME}/#{JS_DIR}/#{file_name}"
+    def asset_url(context, file_name, dir = JS_DIR)
+      "#{base_url(context)}/#{ASSETS_DIR}/#{PLUGIN_NAME}/#{dir}/#{file_name}"
     end
 
     def library_url(library, asset_type)
@@ -212,12 +179,10 @@ module AlImgTools
 
       if lightbox_enabled?(images)
         output << <<~HTML
-          <!-- Lightbox2 -->
+          <!-- Lightbox adapter -->
           <link
             rel="stylesheet"
-            href="#{library_url('lightbox2', 'css')}"
-            integrity="#{library_integrity('lightbox2', 'css')}"
-            crossorigin="anonymous"
+            href="#{asset_url(context, 'lightbox2-adapter.css', CSS_DIR)}"
           >
         HTML
       end
@@ -304,12 +269,7 @@ module AlImgTools
 
       if lightbox_enabled?(images)
         output << <<~HTML
-          <script
-            defer
-            src="#{library_url('lightbox2', 'js')}"
-            integrity="#{library_integrity('lightbox2', 'js')}"
-            crossorigin="anonymous"
-          ></script>
+          <script defer src="#{asset_url(context, 'lightbox2-adapter.js')}"></script>
         HTML
       end
 

data/lib/assets/al_img_tools/css/lightbox2-adapter.css

@@ -0,0 +1,68 @@
+.al-lightbox-open {
+  overflow: hidden;
+}
+
+.al-lightbox-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1200;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.88);
+  padding: 2rem;
+}
+
+.al-lightbox-overlay.is-open {
+  display: flex;
+}
+
+.al-lightbox-figure {
+  margin: 0;
+  max-width: min(90vw, 1200px);
+  max-height: 90vh;
+  text-align: center;
+}
+
+.al-lightbox-image {
+  max-width: 100%;
+  max-height: calc(90vh - 3rem);
+  object-fit: contain;
+}
+
+.al-lightbox-caption {
+  margin-top: 0.75rem;
+  color: #f8f8f8;
+  font-size: 0.95rem;
+}
+
+.al-lightbox-close,
+.al-lightbox-nav {
+  position: absolute;
+  border: 0;
+  background: transparent;
+  color: #fff;
+  cursor: pointer;
+  line-height: 1;
+}
+
+.al-lightbox-close {
+  top: 1rem;
+  right: 1rem;
+  font-size: 2rem;
+}
+
+.al-lightbox-nav {
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 2.25rem;
+  padding: 0.5rem;
+}
+
+.al-lightbox-prev {
+  left: 0.75rem;
+}
+
+.al-lightbox-next {
+  right: 0.75rem;
+}

data/lib/assets/al_img_tools/js/lightbox2-adapter.js

@@ -0,0 +1,101 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const links = Array.from(document.querySelectorAll("a[data-lightbox]"));
+  if (!links.length) {
+    return;
+  }
+
+  const overlay = document.createElement("div");
+  overlay.className = "al-lightbox-overlay";
+  overlay.setAttribute("role", "dialog");
+  overlay.setAttribute("aria-modal", "true");
+  overlay.setAttribute("aria-label", "Image preview");
+  overlay.innerHTML = `
+    <button type="button" class="al-lightbox-close" aria-label="Close preview">&times;</button>
+    <button type="button" class="al-lightbox-nav al-lightbox-prev" aria-label="Previous image">&#10094;</button>
+    <figure class="al-lightbox-figure">
+      <img class="al-lightbox-image" alt="">
+      <figcaption class="al-lightbox-caption"></figcaption>
+    </figure>
+    <button type="button" class="al-lightbox-nav al-lightbox-next" aria-label="Next image">&#10095;</button>
+  `;
+  document.body.appendChild(overlay);
+
+  const image = overlay.querySelector(".al-lightbox-image");
+  const caption = overlay.querySelector(".al-lightbox-caption");
+  const closeBtn = overlay.querySelector(".al-lightbox-close");
+  const prevBtn = overlay.querySelector(".al-lightbox-prev");
+  const nextBtn = overlay.querySelector(".al-lightbox-next");
+
+  let currentGroup = [];
+  let currentIndex = 0;
+
+  const readCaption = (link) => {
+    return link.getAttribute("data-title") || link.querySelector("img")?.getAttribute("alt") || "";
+  };
+
+  const updateView = () => {
+    const link = currentGroup[currentIndex];
+    if (!link) {
+      return;
+    }
+    image.src = link.href;
+    image.alt = readCaption(link);
+    caption.textContent = readCaption(link);
+    prevBtn.disabled = currentGroup.length <= 1;
+    nextBtn.disabled = currentGroup.length <= 1;
+  };
+
+  const open = (group, index) => {
+    currentGroup = group;
+    currentIndex = index;
+    updateView();
+    overlay.classList.add("is-open");
+    document.body.classList.add("al-lightbox-open");
+  };
+
+  const close = () => {
+    overlay.classList.remove("is-open");
+    image.src = "";
+    document.body.classList.remove("al-lightbox-open");
+  };
+
+  const step = (delta) => {
+    if (currentGroup.length <= 1) {
+      return;
+    }
+    currentIndex = (currentIndex + delta + currentGroup.length) % currentGroup.length;
+    updateView();
+  };
+
+  links.forEach((link) => {
+    link.addEventListener("click", (event) => {
+      event.preventDefault();
+      const groupName = link.getAttribute("data-lightbox") || "__default";
+      const group = links.filter((candidate) => (candidate.getAttribute("data-lightbox") || "__default") === groupName);
+      const index = group.indexOf(link);
+      open(group, index < 0 ? 0 : index);
+    });
+  });
+
+  closeBtn.addEventListener("click", close);
+  prevBtn.addEventListener("click", () => step(-1));
+  nextBtn.addEventListener("click", () => step(1));
+  overlay.addEventListener("click", (event) => {
+    if (event.target === overlay) {
+      close();
+    }
+  });
+
+  document.addEventListener("keydown", (event) => {
+    if (!overlay.classList.contains("is-open")) {
+      return;
+    }
+    if (event.key === "Escape") {
+      close();
+    } else if (event.key === "ArrowLeft") {
+      step(-1);
+    } else if (event.key === "ArrowRight") {
+      step(1);
+    }
+  });
+});

data/lib/assets/al_img_tools/js/zoom.js

@@ -1,6 +1,9 @@
-// Initialize medium zoom.
-$(document).ready(function () {
-  medium_zoom = mediumZoom("[data-zoomable]", {
-    background: getComputedStyle(document.documentElement).getPropertyValue("--global-bg-color") + "ee", // + 'ee' for trasparency.
+document.addEventListener("DOMContentLoaded", () => {
+  if (typeof mediumZoom !== "function") {
+    return;
+  }
+  mediumZoom("[data-zoomable]", {
+    // Append alpha to theme background color to keep content visible under zoom.
+    background: `${getComputedStyle(document.documentElement).getPropertyValue("--global-bg-color")}ee`,
   });
-});
+});

metadata

@@ -1,14 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: al_img_tools
 version: !ruby/object:Gem::Version
-  version: 1.0.0
+  version: 1.0.2
 platform: ruby
 authors:
 - al-org
-autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-02-16 00:00:00.000000000 Z
+date: 1980-01-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -90,6 +89,8 @@ files:
 - LICENSE
 - README.md
 - lib/al_img_tools.rb
+- lib/assets/al_img_tools/css/lightbox2-adapter.css
+- lib/assets/al_img_tools/js/lightbox2-adapter.js
 - lib/assets/al_img_tools/js/venobox-setup.js
 - lib/assets/al_img_tools/js/zoom.js
 homepage: https://github.com/al-org-dev/al-img-tools
@@ -99,7 +100,6 @@ metadata:
   allowed_push_host: https://rubygems.org
   homepage_uri: https://github.com/al-org-dev/al-img-tools
   source_code_uri: https://github.com/al-org-dev/al-img-tools
-post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -114,8 +114,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.4.10
-signing_key:
+rubygems_version: 4.0.6
 specification_version: 4
 summary: Image interaction tags and assets for Jekyll
 test_files: []