active_storage-blurhash 0.1.0 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b2017d1770807244bbd6a7c5478f4ecb59a5f13ee5b7eb5a086c2f09856973f0
-  data.tar.gz: 9f086097d1d55813b5c0edae2e221a9470af3260e442622ca294c05646fcf48e
+  metadata.gz: fba342284d825997b007b2c6211737e52c9074eca393c1f9566698c3a37bf179
+  data.tar.gz: 33f2ba27eaf2b54b21e4510414014deb2f2f864aef17524788d70db61e355420
 SHA512:
-  metadata.gz: 0e47a24da41f183e833387d0d2d03eac0c22dfb032044a333e328be4f04d41c79d638966adc0af9672e30ec5bd464c08e44a595d4e9d45b322891d2f20723578
-  data.tar.gz: 4700ccb58f8bc1e8e0b93e8f7207a09e3ebac00e0773fe8675fa2f88489fe2c4c2ff852c22a68b41670cb7db30559d1b056b3b19ef864cd11d7cfd33102e79d0
+  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,4 +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.
+- [`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](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)

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.0"
+    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.0
+  version: 0.1.2
 platform: ruby
 authors:
 - Julian Rubisch
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-08-21 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.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