better_image_tag 0.2.0

data/lib/better_image_tag/commands/convert_jpg_to_avif.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+module BetterImageTag
+  module Commands
+    class ConvertJpgToAvif
+      def self.call
+        new.call
+      end
+
+      def initialize
+        @jpgs_converted = 0
+      end
+
+      def call
+        ensure_avif_present!
+
+        jpg_assets.each do |jpg|
+          avif = jpg.gsub(/\.jpe?g\z/i, '.avif')
+          next if File.exist? avif
+
+          @jpgs_converted += 1 if system("avif -q 32 -e #{jpg} -o #{avif}")
+        end
+
+        puts "#{@jpgs_converted} jpgs converted to avif."
+      end
+
+      private
+
+      def ensure_avif_present!
+        return if avif_exists?
+
+        raise(
+          BetterImageTag::Errors::AvifNotFound,
+          "'avif' not found. Please install go-avif."
+        )
+      end
+
+      def avif_exists?
+        `which avif`
+        $CHILD_STATUS.success?
+      end
+
+      def jpg_assets
+        Dir.glob "#{asset_path}/**/*.{jpg,jpeg}"
+      end
+
+      def asset_path
+        BetterImageTag.configuration.images_path
+      end
+    end
+  end
+end

data/lib/better_image_tag/commands/convert_jpg_to_webp.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+module BetterImageTag
+  module Commands
+    class ConvertJpgToWebp
+      def self.call
+        new.call
+      end
+
+      def initialize
+        @jpgs_converted = 0
+      end
+
+      def call
+        ensure_convert_present!
+
+        jpg_assets.each do |jpg|
+          webp = jpg.gsub(/\.jpe?g\z/i, '.webp')
+          next if File.exist? webp
+
+          @jpgs_converted += 1 if system("convert #{jpg} #{webp}")
+        end
+
+        puts "#{@jpgs_converted} jpgs converted to webp."
+      end
+
+      private
+
+      def ensure_convert_present!
+        return if convert_exists?
+
+        raise(
+          BetterImageTag::Errors::ConvertNotFound,
+          "'convert' not found. Please install ImageMagick."
+        )
+      end
+
+      def convert_exists?
+        `which convert`
+        $CHILD_STATUS.success?
+      end
+
+      def jpg_assets
+        Dir.glob "#{asset_path}/**/*.{jpg,jpeg}"
+      end
+
+      def asset_path
+        BetterImageTag.configuration.images_path
+      end
+    end
+  end
+end

data/lib/better_image_tag/engine.rb

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+module BetterImageTag
+  class Engine < ::Rails::Engine
+  end
+end

data/lib/better_image_tag/errors.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module BetterImageTag
+  module Errors
+    class Error < StandardError; end
+
+    class MissingAltTag < Error; end
+    class EarlyLazyLoad < Error; end
+    class ConvertNotFound < Error; end
+    class AvifNotFound < Error; end
+    class FileNotFound < Error; end
+  end
+end

data/lib/better_image_tag/image_tag.rb

@@ -0,0 +1,172 @@
+# frozen_string_literal: true
+
+require 'fastimage'
+
+module BetterImageTag
+  class ImageTag
+    TRANSPARENT_GIF = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='
+
+    attr_reader :view_context, :options, :images, :tablet_options, :desktop_options
+    attr_accessor :image
+
+    def initialize(view_context, image, options = {})
+      @view_context = view_context
+      @image = with_protocol(image)
+      @images = []
+      @options = options.symbolize_keys
+
+      avif(@options[:avif]) if @options[:avif]
+      webp(@options[:webp]) if @options[:webp]
+      enforce_requirements
+    end
+
+    def with_size
+      return self if options[:width].present? || options[:height].present?
+      return self unless BetterImageTag.configuration.sizing_enabled
+
+      dims = cache("image_tag:with_size:#{image}") { FastImage.size(asset) }
+      options[:width] = dims&.first
+      options[:height] = dims&.last
+
+      self
+    end
+
+    # rubocop:disable Metrics/AbcSize
+    def lazy_load(enabled: true)
+      return self unless enabled
+
+      options[:class] = Array(options.fetch(:class, [])).join(' ')
+      options[:class] = "#{options[:class]} lazyload".strip
+      options[:data] = options[:data]
+                       .to_h
+                       .merge(src: view_context.image_path(image))
+
+      @image = TRANSPARENT_GIF
+
+      self
+    end
+    # rubocop:enable Metrics/AbcSize
+
+    def webp(url = nil)
+      lazy_load_last!
+      @images << (url || image.gsub(/\.[a-z]{2,}*\z/, '.webp'))
+      self
+    end
+
+    def avif(url = nil)
+      lazy_load_last!
+      @images << (url || image.gsub(/\.[a-z]{2,}*\z/, '.avif'))
+      self
+    end
+
+    def inline
+      @image = InlineData.new(@image).inline_data
+
+      self
+    end
+
+    def to_s
+      (svg_string || image_tag_string || picture_tag_string).html_safe
+    end
+
+    def picture_tag
+      result = view_context.image_tag(
+        image,
+        options.except(:webp, :avif).merge(use_super: true)
+      )
+      PictureTag.new(self, result)
+    end
+
+    def tablet_up(*tablet_options)
+      @tablet_options = tablet_options
+      self
+    end
+
+    def desktop_up(*desktop_options)
+      @desktop_options = desktop_options
+      self
+    end
+
+    private
+
+    def svg_string
+      return unless svg?
+
+      SvgTag.new(self).to_s
+    end
+
+    def image_tag_string
+      return if images.any? || tablet_options&.any? || desktop_options&.any?
+
+      view_context.image_tag(
+        image,
+        options.except(:webp, :avif).merge(super_options)
+      )
+    end
+
+    def picture_tag_string
+      picture_tag.to_s
+    end
+
+    def svg?
+      MimeMagic.by_magic(@image)&.type == 'image/svg+xml'
+    end
+
+    def super_options
+      if images.any?
+        { use_picture: true }
+      else
+        { use_super: true }
+      end
+    end
+
+    def lazy_load_last!
+      return unless image.match?(/^data:/)
+
+      raise EarlyLazyLoad, 'Run lazy_load as the last method in chain'
+    end
+
+    def with_protocol(image)
+      image.match?(%r{^//}) ? "https:#{image}" : image
+    end
+
+    def asset
+      @_asset ||= begin
+        if image.match?(%r{https?://}) || !Object.const_defined?(:Rails)
+          image
+        elsif not_compiled?
+          Rails.application.assets[image].filename
+        else
+          file = Rails.application.assets_manifest.assets[image]
+
+          if file.nil?
+            raise(
+              BetterImageTag::Errors::FileNotFound,
+              "Not found in asset manifest: #{image}"
+            )
+          end
+
+          File.join(Rails.application.assets_manifest.directory, file)
+        end
+      end
+    end
+
+    def not_compiled?
+      !!Rails.application.assets
+    end
+
+    def enforce_requirements
+      if BetterImageTag.configuration.require_alt_tags && options[:alt].blank?
+        raise Errors::MissingAltTag, "#{image} is missing an alt tag"
+      end
+    end
+
+    def cache(tag, &block)
+      return unless block
+
+      return block.call unless BetterImageTag.configuration.cache_sizing_enabled
+
+      Rails.cache.fetch tag, &block
+    end
+  end
+end

data/lib/better_image_tag/inline_data.rb

@@ -0,0 +1,102 @@
+# frozen_string_literal: true
+
+require 'mimemagic'
+require 'base64'
+require 'open-uri'
+
+module BetterImageTag
+  class InlineData
+    HTTP_ERRORS = [
+      EOFError,
+      Errno::ECONNRESET,
+      Errno::EINVAL,
+      Net::HTTPBadResponse,
+      Net::HTTPHeaderSyntaxError,
+      Net::ProtocolError,
+      Timeout::Error,
+      OpenSSL::SSL::SSLError,
+      OpenURI::HTTPError
+    ].freeze
+
+    CACHE_PREFIX = 'inline_data'
+
+    def self.inline_data(*args)
+      new(*args).inline_data
+    end
+
+    attr_reader :image
+
+    def initialize(image, local_file: false)
+      @image = image
+      @local_file = local_file
+    end
+
+    def inline_data
+      return image unless BetterImageTag.configuration.inlining_enabled
+
+      cache "#{CACHE_PREFIX}:#{image}" do
+        svg? ? contents : "data:#{content_type};base64,#{base64_contents}"
+      end
+    rescue *HTTP_ERRORS
+      image
+    end
+
+    private
+
+    def cache(tag, &block)
+      return unless block
+
+      unless BetterImageTag.configuration.cache_inlining_enabled
+        return block.call
+      end
+
+      Rails.cache.fetch tag, &block
+    end
+
+    def svg?
+      content_type == "image/svg+xml"
+    end
+
+    def content_type
+      MimeMagic.by_magic(contents).type
+    end
+
+    def base64_contents
+      Base64.strict_encode64 contents
+    end
+
+    # rubocop:disable Security/Open
+    def contents
+      @_contents ||= begin
+        if image.match?(%r{https?://})
+          URI.open(image).read
+        elsif local_file?
+          File.read(image)
+        elsif not_compiled?
+          Rails.application.assets[image].to_s
+        else
+          file = Rails.application.assets_manifest.assets[image]
+
+          if file.nil?
+            raise(
+              BetterImageTag::Errors::FileNotFound,
+              "Not found in asset manifest: #{image}"
+            )
+          end
+
+          path = File.join(Rails.application.assets_manifest.directory, file)
+          File.read(path)
+        end
+      end
+    end
+    # rubocop:enable Security/Open
+
+    def not_compiled?
+      !!Rails.application.assets
+    end
+
+    def local_file?
+      @local_file
+    end
+  end
+end

data/lib/better_image_tag/picture_tag.rb

@@ -0,0 +1,103 @@
+# frozen_string_literal: true
+
+require 'forwardable'
+
+module BetterImageTag
+  class PictureTag
+    attr_reader :image_tag, :default_image_tag, :sources, :srcset
+
+    extend Forwardable
+    def_delegators :image_tag, :image, :images, :view_context
+    def_delegators :view_context, :image_path
+    def_delegators :config, :tablet_breakpoint, :desktop_breakpoint
+
+    def initialize(image_tag, default_image_tag)
+      @image_tag = image_tag
+      @default_image_tag = default_image_tag
+      @sources = []
+    end
+
+    def to_s
+      output(:lazily) || output(:normally)
+    end
+
+    private
+
+    def config
+      BetterImageTag.configuration
+    end
+
+    def output(loading_style)
+      return if loading_style == :lazily && image != ImageTag::TRANSPARENT_GIF
+
+      @srcset = loading_style == :lazily ? 'data-srcset' : 'srcset'
+      css_class = css_class? ? %( class="#{css_classes}") : ''
+
+      populate_responsive_and_format_sources
+      populate_responsive_sources
+      populate_format_sources
+
+      <<~EOPICTURE
+        <picture#{css_class}>
+          <!--[if IE 9]><video style="display: none;"><![endif]-->
+          #{sources.join("\n  ")}
+          <!--[if IE 9]></video><![endif]-->
+          #{default_image_tag}
+        </picture>
+      EOPICTURE
+    end
+
+    def css_class?
+      image_tag.options[:class].present?
+    end
+
+    def css_classes
+      image_tag.options[:class].split(' ').map do |css_class|
+        css_class == 'lazyload' ? 'lazyload' : "#{css_class}--picture"
+      end.join(" ")
+    end
+
+    def populate_responsive_and_format_sources
+      if image_tag.tablet_options&.second
+        if image_tag.tablet_options.second[:avif]
+          @sources << %(<source media="(min-width: #{tablet_breakpoint})" type="image/avif" #{srcset}="#{image_path image_tag.tablet_options.second[:avif]}">)
+        end
+
+        if image_tag.tablet_options.second[:webp]
+          @sources << %(<source media="(min-width: #{tablet_breakpoint})" type="image/webp" #{srcset}="#{image_path image_tag.tablet_options.second[:webp]}">)
+        end
+      end
+
+      if image_tag.desktop_options&.second
+        if image_tag.desktop_options.second[:avif]
+          @sources << %(<source media="(min-width: #{desktop_breakpoint})" type="image/avif" #{srcset}="#{image_path image_tag.desktop_options.second[:avif]}">)
+        end
+
+        if image_tag.desktop_options.second[:webp]
+          @sources << %(<source media="(min-width: #{desktop_breakpoint})" type="image/webp" #{srcset}="#{image_path image_tag.desktop_options.second[:webp]}">)
+        end
+      end
+    end
+
+    def populate_format_sources
+      return if images.empty?
+
+      @sources += images.map do |image|
+        type = image.match?(/webp$/) ? 'webp' : 'avif'
+        %(<source type="image/#{type}" #{srcset}="#{image_path image}">)
+      end
+    end
+
+    def populate_responsive_sources
+      return if image_tag.tablet_options.blank? && image_tag.desktop_options.blank?
+
+      if image_tag.tablet_options
+        @sources << %(<source media="(min-width: #{tablet_breakpoint})" #{srcset}="#{image_path image_tag.tablet_options.first}">)
+      end
+
+      if image_tag.desktop_options
+        @sources << %(<source media="(min-width: #{desktop_breakpoint})" #{srcset}="#{image_path image_tag.desktop_options.first}">)
+      end
+    end
+  end
+end

data/lib/better_image_tag/railtie.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+require 'better_image_tag'
+require 'rails'
+
+module BetterImageTag
+  class Railtie < Rails::Railtie
+    railtie_name :better_image_tag
+
+    rake_tasks do
+      path = File.expand_path(__dir__)
+      Dir.glob("#{path}/tasks/**/*.rake").each { |f| load f }
+    end
+  end
+end

data/lib/better_image_tag/rspec.rb

@@ -0,0 +1,24 @@
+module BetterImageTag
+  module SpecHelpers
+    def disable_better_image_tag_sizing!
+      BetterImageTag.configuration.sizing_enabled = false
+    end
+
+    def disable_better_image_tag_inlining!
+      BetterImageTag.configuration.inlining_enabled = false
+    end
+  end
+
+  module ViewSpecHelpers
+    def better_image_tag(options = {})
+      view.send(:extend, BetterImageTag::ImageTaggable)
+
+      without_partial_double_verification do
+        allow(view.class).
+          to receive(:better_image_tag_options).
+          and_return(options)
+        allow(view).to receive(:view_context).and_return(view)
+      end
+    end
+  end
+end

data/lib/better_image_tag/svg_tag.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module BetterImageTag
+  class SvgTag
+    attr_reader :image_tag
+
+    def initialize(image_tag)
+      @image_tag = image_tag
+    end
+
+    def to_s
+      image_tag.image.gsub!(/^\<svg /, %(<svg height="#{height}" )) if height
+      image_tag.image.gsub!(/^\<svg /, %(<svg width="#{width}" )) if width
+
+      if css_class
+        image_tag.image.gsub!(/^\<svg /, %(<svg class="#{css_class}" ))
+      end
+
+      image_tag.image
+    end
+
+    private
+
+    def width
+      image_tag.options[:width]
+    end
+
+    def height
+      image_tag.options[:height]
+    end
+
+    def css_class
+      image_tag.options[:class]
+    end
+  end
+end

data/lib/better_image_tag/tasks/clear_inline_cache.rake

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+require 'better_image_tag/commands/clear_inline_cache'
+
+namespace :better_image_tag do
+  desc 'Clear cached inline data'
+  task :clear_inline_cache do
+    BetterImageTag::Commands::ClearInlineCache.call
+  end
+end

data/lib/better_image_tag/tasks/convert_jpgs.rake

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+require 'better_image_tag/commands/convert_jpg_to_webp'
+require 'better_image_tag/commands/convert_jpg_to_avif'
+
+namespace :better_image_tag do
+  desc 'Convert jpgs to webp'
+  task :convert_jpgs_to_webp do
+    BetterImageTag::Commands::ConvertJpgToWebp.call
+  end
+
+  desc 'Convert jpgs to avif'
+  task :convert_jpgs_to_avif do
+    BetterImageTag::Commands::ConvertJpgToAvif.call
+  end
+end

data/lib/better_image_tag/version.rb

@@ -0,0 +1,3 @@
+module BetterImageTag
+  VERSION = "0.2.0"
+end

data/lib/better_image_tag.rb

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+require 'better_image_tag/version'
+require 'better_image_tag/errors'
+require 'better_image_tag/picture_tag'
+require 'better_image_tag/svg_tag'
+require 'better_image_tag/image_tag'
+require 'better_image_tag/base_image_tag'
+require 'better_image_tag/inline_data'
+require_relative '../app/controllers/concerns/better_image_tag/image_taggable'
+require 'better_image_tag/railtie' if Object.const_defined?(:Rails)
+
+module BetterImageTag
+  class << self
+    attr_writer :configuration
+  end
+
+  def self.configuration
+    @configuration ||= Configuration.new
+  end
+
+  def self.configure
+    self.configuration ||= Configuration.new
+    yield(configuration)
+  end
+
+  class Configuration
+    attr_accessor(
+      :cache_inlining_enabled,
+      :cache_sizing_enabled,
+      :inlining_enabled,
+      :require_alt_tags,
+      :sizing_enabled,
+      :images_path,
+      :tablet_breakpoint,
+      :desktop_breakpoint
+    )
+
+    def initialize
+      @require_alt_tags = false
+      @cache_sizing_enabled = false
+      @cache_inlining_enabled = false
+      @inlining_enabled = true
+      @sizing_enabled = true
+      @tablet_breakpoint = '768px'
+      @desktop_breakpoint = '1280px'
+      @images_path = "#{rails_root}/app/assets/images"
+    end
+
+    private
+
+    def rails_root
+      Object.const_defined?(:Rails) ? Rails.root : '.'
+    end
+  end
+end