active_storage-blurhash 0.1.1 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9687ba74613e9674476132209feb5a9d3c69f03b2afe424fca8c36d57cb37fa4
-  data.tar.gz: 8a0aa6d0e954c745ec410ac0826444170b9d336b00d2fba503ab16422ff7471f
+  metadata.gz: fba342284d825997b007b2c6211737e52c9074eca393c1f9566698c3a37bf179
+  data.tar.gz: 33f2ba27eaf2b54b21e4510414014deb2f2f864aef17524788d70db61e355420
 SHA512:
-  metadata.gz: d7972f70cc32ebe1ac99e9d812c953f65645e0450deb4b7e55b5afd7521ad84ca96f126cf7cf7173c894517e9c254b0686ce6c3a92c858cfed8a38be0af71b39
-  data.tar.gz: a7811a663e82d96b0342316f468a4f2ee1c7eff85d6701d28f64a21e574c3c0fe3e32c71838ab8e3bff968dbd0b7f09ff7d1d68f87ea1f921634511bcfc53691
+  metadata.gz: '08daf2c1486f453fda2275c1c86038d93925aab11154a97136489c2fd48867e21b71d83ff40946d999b89694ac50ed95b14c8358c3230231d511a7fb2509c879'
+  data.tar.gz: 6c7f1be0ef09d472455e2afd570d42f62b65535d62c862323941d45142cce5cc0843c2214e3150dc5259bada9bf3e2d8f302668fdced8d58ae915fa28652c1ae

data/README.md

@@ -1,8 +1,9 @@
 # ActiveStorage::Blurhash
 
-A [blurhash](https://blurha.sh/) integration for images stored in ActiveStorage. 
+A [blurhash](https://blurha.sh/) integration for images stored in ActiveStorage.
 
 ## Motivation
+
 Elimination of layout shift and speeding up First/Largest Contentful Paint are among the primary goals for improving Core Web Vitals. For both scenarios, lazy loading images while displaying a temporary Blurhash before swapping it out for the actual image is a great way to enhance the loading experience and perceived performance.
 
 ## Usage
@@ -25,26 +26,35 @@ This will create a wrapper `<div>` containing a `<canvas>` that is going to be p
 
 Make sure to run the install generator and backfill any existing attachments (see below). New attachments should be automatically analyzed to include the blurhash metadata.
 
-
 ## Installation
-Add this line to your application's Gemfile:
+
+Add the library to your application's Gemfile:
 
 ```ruby
 gem "active_storage-blurhash"
 ```
 
+You will also need to add the "image_processing" gem to your Gemfile:
+
+```ruby
+gem "image_processing"
+```
+
 And then execute:
+
 ```bash
 $ bundle
 ```
 
-
 Install the JavaScript packages and blurhash snippet:
 
 ```bash
 $ bin/rails g active_storage:blurhash:install
 ```
 
+> [!IMPORTANT]  
+> Consider that, to make everything work, you need [libvips](https://github.com/janko/image_processing/blob/master/doc/vips.md) or [MiniMagick](https://github.com/janko/image_processing/blob/master/doc/minimagick.md) installed on your system.
+
 ## Backfilling
 
 Chances are you already have a large assortment of ActiveStorage attachments. In this case, we can help you out with a backfill rake task that re-analyzes all existing image blobs:
@@ -62,16 +72,18 @@ $ BATCH_SIZE=50 bin/rails active_storage_blurhash:backfill
 Note that for each blob an `AnalyzeJob` will be appended to your job processor queue.
 
 ## License
+
 The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
 
 ## Other gems & packages
 
- - [`avo`](https://github.com/avo-hq/avo) - Build Content management systems with Ruby on Rails
- - [`class_variants`](https://github.com/avo-hq/class_variants) - Easily configure styles and apply them as classes. Very useful when you're implementing Tailwind CSS components and call them with different states.
- - [`stimulus-confetti`](https://github.com/avo-hq/stimulus-confetti) - The easiest way to add confetti to your StimulusJS app
+- [`avo`](https://github.com/avo-hq/avo) - Build Content management systems with Ruby on Rails
+- [`class_variants`](https://github.com/avo-hq/class_variants) - Easily configure styles and apply them as classes. Very useful when you're implementing Tailwind CSS components and call them with different states.
+- [`prop_initializer`](https://github.com/avo-hq/prop_initializer) - A flexible tool for defining properties on Ruby classes.
+- [`stimulus-confetti`](https://github.com/avo-hq/stimulus-confetti) - The easiest way to add confetti to your StimulusJS app
 
 ## Try Avo ⭐️
 
-If you enjoyed this gem try out Avo. It helps developers build internal tools, admins, CMSes, CRMs, and any other type of business apps 10x faster on top of Ruby on Rails.
+If you enjoyed this gem try out [Avo](https://github.com/avo-hq/avo). It helps developers build Internal Tools, Admin Panels, CMSes, CRMs, and any other type of Business Apps 10x faster on top of Ruby on Rails.
 
-[![](https://github.com/avo-hq/avo/raw/main/public/avo-assets/logo-on-white.png)](https://github.com/avo-hq/avo)
+[![](https://github.com/avo-hq/avo/raw/main/public/avo-assets/logo-on-white.png)](https://github.com/avo-hq/avo)

data/app/helpers/blurhash_image_helper.rb~

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module BlurhashImageHelper
+  def blurhash_image_tag(source, options = {})
+    case source
+    when String
+      # if a URL is passed, we have to manually re-hydrate the blob from it
+      path_parameters = Rails.application.routes.recognize_path(source)
+      blob = ActiveStorage::Blob.find_signed!(path_parameters[:signed_blob_id] || path_parameters[:signed_id])
+    when ActiveStorage::Blob
+      blob = source
+    when ActiveStorage::Attached::One
+      blob = source.blob
+    when ActiveStorage::VariantWithRecord
+      blob = source.blob
+      size = source.variation.transformations[:resize]
+    end
+
+    blurhash = blob.metadata["blurhash"]
+    size ||= "#{blob.metadata["width"]}x#{blob.metadata["height"]}"
+
+    if !!blurhash
+      options[:loading] = "lazy"
+      options[:size] = size
+
+      wrapper_class = options.delete(:wrapper_class)
+      canvas_class = options.delete(:canvas_class)
+      tag.div class: wrapper_class, data: {blurhash: blurhash}, style: "position: relative" do
+        image_tag(source, options) + tag.canvas(style: "position: absolute; inset: 0; transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;", class: canvas_class)
+      end
+    else
+      image_tag(source, options)
+    end
+  rescue ActionController::RoutingError
+    image_tag(source, options)
+  end
+end

data/lib/active_storage/blurhash/analyzer/image_magick.rb~

@@ -0,0 +1,8 @@
+module ActiveStorage
+  module Blurhash
+    module Analyzer
+      class ImageMagick
+      end
+    end
+  end
+end

data/lib/active_storage/blurhash/analyzer/vips.rb~

@@ -0,0 +1,8 @@
+module ActiveStorage
+  module Blurhash
+    module Analyzer
+      class Vips < ActiveStorage::Analyzer::ImageAnalyzer::Vips
+      end
+    end
+  end
+end

data/lib/active_storage/blurhash/analyzer.rb~

@@ -0,0 +1,9 @@
+module ActiveStorage
+  module Blurhash
+    class Analyzer < ActiveStorage::Analyzer::ImageAnalyzer
+      def metadata
+        super
+      end
+    end
+  end
+end

data/lib/active_storage/blurhash/analyzing.rb~

@@ -0,0 +1,9 @@
+module ActiveStorage
+  module Blurhash
+    module Analyzing
+      def metadata
+        super.merge({foo: :bar})
+      end
+    end
+  end
+end

data/lib/active_storage/blurhash/engine.rb~

@@ -0,0 +1,6 @@
+module ActiveStorage
+  module Blurhash
+    class Engine < ::Rails::Engine
+    end
+  end
+end

data/lib/active_storage/blurhash/thumbnail/image_magick.rb~

@@ -0,0 +1,19 @@
+module ActiveStorage
+  module Blurhash
+    module Thumbnail
+      class ImageMagick
+        delegate_missing_to :@thumbnail
+
+        def initialize(image)
+          @thumbnail = MiniMagick::Image.new(
+            ImageProcessing::MiniMagick.source(image.path).resize_to_limit(200, 200).call
+          )
+        end
+
+        def pixels
+          @thumbnail.get_pixels.flatten
+        end
+      end
+    end
+  end
+end

data/lib/active_storage/blurhash/thumbnail/vips.rb~

@@ -0,0 +1,19 @@
+module ActiveStorage
+  module Blurhash
+    module Thumbnail
+      class Vips
+        delegate_missing_to :@thumbnail
+
+        def initialize(image)
+          @thumbnail = MiniMagick::Image.open(
+            ImageProcessing::MiniMagick.source(image.path).resize_to_limit(200, 200).call.path
+          )
+        end
+
+        def pixels
+          @thumbnail.get_pixels.flatten
+        end
+      end
+    end
+  end
+end

data/lib/active_storage/blurhash/version.rb

@@ -1,5 +1,5 @@
 module ActiveStorage
   module Blurhash
-    VERSION = "0.1.1"
+    VERSION = "0.1.2"
   end
 end

data/lib/active_storage/blurhash.rb~

@@ -0,0 +1,8 @@
+require "active_storage/blurhash/version"
+require "active_storage/blurhash/engine"
+
+module ActiveStorage
+  module Blurhash
+    # Your code goes here...
+  end
+end

data/lib/generators/active_storage/blurhash/install/USAGE~

@@ -0,0 +1,8 @@
+Description:
+    Explain the generator
+
+Example:
+    bin/rails generate install Thing
+
+    This will create:
+        what/will/it/create

data/lib/generators/active_storage/blurhash/install/install_generator.rb

@@ -2,7 +2,7 @@ class ActiveStorage::Blurhash::InstallGenerator < Rails::Generators::Base
   source_root File.expand_path("templates", __dir__)
 
   def install_javascript_deps
-    if File.exist? Rails.root.join("config", "importmap.rb")
+    if importmap_present?
       say "Pinning blurhash"
       run "bin/importmap pin blurhash"
     else
@@ -15,7 +15,23 @@ class ActiveStorage::Blurhash::InstallGenerator < Rails::Generators::Base
     directory "javascript", "app/javascript/blurhash"
   end
 
+  def pin_blurhash_javascript
+    if importmap_present?
+      append_to_file "config/importmap.rb", 'pin "active_storage_blurhash", to: "blurhash/index.js"' + "\n"
+    end
+  end
+
   def append_to_main_javascript_entrypoint
-    append_to_file "app/javascript/application.js", "import \"./blurhash\";\n"
+    if importmap_present?
+      append_to_file "app/javascript/application.js", "import \"active_storage_blurhash\";\n"
+    else
+      append_to_file "app/javascript/application.js", "import \"./blurhash\";\n"
+    end
+  end
+
+  private
+
+  def importmap_present?
+    File.exist? Rails.root.join("config", "importmap.rb")
   end
 end

data/lib/generators/active_storage/blurhash/install/install_generator.rb~

@@ -0,0 +1,3 @@
+class ActiveStorage::Blurhash::InstallGenerator < Rails::Generators::NamedBase
+  source_root File.expand_path("templates", __dir__)
+end

data/lib/generators/active_storage/blurhash/install/templates/javascript/index.js~

@@ -0,0 +1,79 @@
+import { decode } from "blurhash";
+
+window.ActiveStorageBlurhash = {
+  observer: new MutationObserver((mutationList, observer) => {
+    mutationList.forEach(({ type, target, addedNodes, attributeName }) => {
+      switch (type) {
+        case "childList":
+          if (addedNodes.length === 0) return;
+
+          Array.from(addedNodes)
+            .filter((node) => {
+              try {
+                return "blurhash" in node.dataset;
+              } catch (e) {
+                return false;
+              }
+            })
+            .forEach((node) => {
+              window.ActiveStorageBlurhash.renderAndLoad(node);
+            });
+          break;
+        case "attributes":
+          window.ActiveStorageBlurhash.renderAndLoad(target);
+          break;
+      }
+    });
+  }),
+  renderAndLoad(wrapper) {
+    const image = wrapper.querySelector("img");
+
+    // the image might already be completely loaded. In this case we need to do nothing
+    if (image.complete) return;
+
+    // if the image comes in with empty dimensions, we can't assign canvas data
+    if (image.width === 0 || image.height === 0) return;
+
+    const width = image.width;
+    const height = image.height;
+
+    const canvas = wrapper.querySelector("canvas");
+
+    canvas.width = width;
+    canvas.height = height;
+
+    const pixels = decode(wrapper.dataset.blurhash, width, height);
+    const ctx = canvas.getContext("2d");
+    const imageData = ctx.createImageData(width, height);
+    imageData.data.set(pixels);
+    ctx.putImageData(imageData, 0, 0);
+
+    const swap = () => {
+      canvas.style.opacity = "0";
+    };
+
+    if (image.complete) {
+      // the image might already have been loaded
+      swap();
+    } else {
+      // else we need to wait for it to load
+      image.onload = swap;
+    }
+  },
+};
+
+document.addEventListener("turbo:load", () => {
+  document.querySelectorAll("div[data-blurhash]").forEach((wrapper) => {
+    window.ActiveStorageBlurhash.renderAndLoad(wrapper);
+  });
+
+  window.ActiveStorageBlurhash.observer.disconnect();
+  window.ActiveStorageBlurhash.observer.observe(document.body, {
+    subtree: true,
+    childList: true,
+    attributes: true,
+    attributeFilter: ["data-blurhash"],
+  });
+});
+
+document.addEventListner("turbo:before-cache", () => {});

data/lib/tasks/active_storage/blurhash_tasks.rake~

@@ -0,0 +1,4 @@
+# desc "Explaining what the task does"
+# task :active_storage_blurhash do
+#   # Task goes here
+# end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: active_storage-blurhash
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.1.2
 platform: ruby
 authors:
 - Julian Rubisch
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-08-22 00:00:00.000000000 Z
+date: 2024-12-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: activestorage
@@ -148,19 +148,32 @@ files:
 - Rakefile
 - app/assets/config/active_storage_blurhash_manifest.js
 - app/helpers/blurhash_image_helper.rb
+- app/helpers/blurhash_image_helper.rb~
 - config/routes.rb
 - lib/active_storage-blurhash.rb
+- lib/active_storage/blurhash.rb~
+- lib/active_storage/blurhash/analyzer.rb~
 - lib/active_storage/blurhash/analyzer/image_magick.rb
+- lib/active_storage/blurhash/analyzer/image_magick.rb~
 - lib/active_storage/blurhash/analyzer/vips.rb
+- lib/active_storage/blurhash/analyzer/vips.rb~
 - lib/active_storage/blurhash/analyzing.rb
+- lib/active_storage/blurhash/analyzing.rb~
 - lib/active_storage/blurhash/engine.rb
+- lib/active_storage/blurhash/engine.rb~
 - lib/active_storage/blurhash/thumbnail/image_magick.rb
+- lib/active_storage/blurhash/thumbnail/image_magick.rb~
 - lib/active_storage/blurhash/thumbnail/vips.rb
+- lib/active_storage/blurhash/thumbnail/vips.rb~
 - lib/active_storage/blurhash/version.rb
 - lib/generators/active_storage/blurhash/install/USAGE
+- lib/generators/active_storage/blurhash/install/USAGE~
 - lib/generators/active_storage/blurhash/install/install_generator.rb
+- lib/generators/active_storage/blurhash/install/install_generator.rb~
 - lib/generators/active_storage/blurhash/install/templates/javascript/index.js
+- lib/generators/active_storage/blurhash/install/templates/javascript/index.js~
 - lib/tasks/active_storage/blurhash_tasks.rake
+- lib/tasks/active_storage/blurhash_tasks.rake~
 homepage: https://github.com/avo-hq/active_storage-blurhash
 licenses:
 - MIT
@@ -182,7 +195,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.4.10
+rubygems_version: 3.5.19
 signing_key:
 specification_version: 4
 summary: Use blurhashes to lazy load ActiveStorage images