jekyll-og-image 1.0.3 → 1.0.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e885b900b05e7a8b46a221a0850e682815081837e102044dfa02141d5c86b41c
-  data.tar.gz: 7665d1a4ce49f9a422d1823513f1c6a5cc4a0bbb7e532904288ad3777e95129d
+  metadata.gz: 9fc4622681cf9b4953d6cbd7de3b661ebd217de44c08205656e395386b14e4c9
+  data.tar.gz: 26b864c6981a1b353de1e8e97de690870e2f2d9c531d56dac1bf97bc2efc0cde
 SHA512:
-  metadata.gz: abf1c34206e4f72af335710c9c2d3178039057208b8a123d640e2a270bb48e19c1a205c8ce41e18a0bc2b5d58b2c8bc33a37a5052d706d44d9b6035548a0e62e
-  data.tar.gz: e08fb4973bacb416395934631f63b8d4e293fa73d6e7a360b1126d4403851e73084aa6443ab979b1070a090faebb4919a27d2d61c0461fd156f3e82a28a5179f
+  metadata.gz: 7285bbd3562d0e2fa67a1f92c639d2ffa505e73d0d6b58c705217e8e7eefbb5930b9c01fec2c5d267f3448cd012e76ed5f2748b639d62bde290d796ab87d31d8
+  data.tar.gz: beb92471fe217bc7c105fb3924940fee58031306cf628aac36ff8a4b61841ebaee406c8a85ce6aa903563fe3ca8dd489d68d0b3018f9797e77cb76da209d08ef

data/README.md

@@ -2,6 +2,7 @@
 
 A Jekyll plugin to automatically generate open graph images for posts.
 
+[![Gem Version](https://badge.fury.io/rb/jekyll-og-image.svg)](https://badge.fury.io/rb/jekyll-og-image)
 [![Lint](https://github.com/igor-alexandrov/jekyll-og-image/actions/workflows/lint.yml/badge.svg?branch=main)](https://github.com/igor-alexandrov/jekyll-og-image/actions/workflows/lint.yml)
 [![Specs](https://github.com/igor-alexandrov/jekyll-og-image/actions/workflows/specs.yml/badge.svg?branch=main)](https://github.com/igor-alexandrov/jekyll-og-image/actions/workflows/specs.yml)
 
@@ -46,6 +47,7 @@ og_image:
 ```yaml
 og_image:
   output_dir: "assets/images/og"
+  image: "/assets/images/igor.jpeg"
   domain: "igor.works"
   border_bottom:
     width: 20

data/lib/jekyll_og_image/config.rb

@@ -5,12 +5,15 @@ require "anyway_config"
 class JekyllOgImage::Config < Anyway::Config
   attr_config output_dir: "assets/images/og"
   attr_config force: false
+  attr_config :image
   attr_config :domain
   attr_config border_bottom: {
     width: 20,
     fill: [ "#211F1F", "#F4CBB2", "#AD5C51", "#9CDAF1", "#7DBBE6" ]
   }
 
+  coerce_types image: { type: :string }
+
   coerce_types border_bottom: {
     width: { type: :integer },
     fill: { type: :string, array: true }

data/lib/jekyll_og_image/element/base.rb

@@ -1,6 +1,8 @@
 # frozen_string_literal: true
 
 class JekyllOgImage::Element::Base
+  VALID_GRAVITY = %i[nw ne sw se].freeze
+
   private
 
   def hex_to_rgb(input)
@@ -13,4 +15,26 @@ class JekyllOgImage::Element::Base
       raise ArgumentError, "Unknown input #{input.inspect}"
     end
   end
+
+  def validate_gravity!
+    unless VALID_GRAVITY.include?(@gravity)
+      raise ArgumentError, "Invalid gravity: #{@gravity.inspect}"
+    end
+  end
+
+  def composite_with_gravity(canvas, overlay, x, y)
+    if gravity_nw?
+      canvas.composite(overlay, :over, x: [ x ], y: [ y ]).flatten
+    elsif gravity_ne?
+      x = canvas.width - overlay.width - x
+      canvas.composite(overlay, :over, x: [ x ], y: [ y ]).flatten
+    elsif gravity_sw?
+      y = canvas.height - overlay.height - y
+      canvas.composite(overlay, :over, x: [ x ], y: [ y ]).flatten
+    elsif gravity_se?
+      x = canvas.width - overlay.width - x
+      y = canvas.height - overlay.height - y
+      canvas.composite(overlay, :over, x: [ x ], y: [ y ]).flatten
+    end
+  end
 end

data/lib/jekyll_og_image/element/border.rb

@@ -4,43 +4,57 @@ class JekyllOgImage::Element::Border < JekyllOgImage::Element::Base
   class Part < Data.define(:rgb, :width, :height, :offset)
   end
 
-  def initialize(canvas, size, position: :bottom, fill: "#000000")
-    @canvas = canvas
+  def initialize(size, position: :bottom, fill: "#000000")
     @size = size
     @position = position
     @fill = fill
 
     validate_position!
+  end
 
-    @border = Vips::Image.black(*dimensions)
+  def apply_to(canvas, &block)
+    border = Vips::Image.black(*dimensions(canvas))
 
-    parts.each.with_index do |part, index|
-      border = Vips::Image.black(part.width, part.height).ifthenelse([ 0, 0, 0 ], part.rgb)
+    parts(canvas).each.with_index do |part, index|
+      image = Vips::Image.black(part.width, part.height).ifthenelse([ 0, 0, 0 ], part.rgb)
 
       if vertical?
-        @border = @border.composite(border, :over, x: [ 0 ], y: [ part.offset ]).flatten
+        border = border.composite(image, :over, x: [ 0 ], y: [ part.offset ]).flatten
       else
-        @border = @border.composite(border, :over, x: [ part.offset ], y: [ 0 ]).flatten
+        border = border.composite(image, :over, x: [ part.offset ], y: [ 0 ]).flatten
       end
     end
-  end
 
-  def apply(&block)
-    result = block.call(@canvas, @border) if block_given?
+    result = block.call(canvas, border) if block_given?
+
     x, y = result ? [ result.fetch(:x, 0), result.fetch(:y, 0) ] : [ 0, 0 ]
 
     if vertical?
-      x = @position == :left ? x : @canvas.width - @size - x
-      @canvas.composite(@border, :over, x: [ x ], y: [ 0 ]).flatten
+      x = @position == :left ? x : canvas.width - @size - x
+      canvas.composite(border, :over, x: [ x ], y: [ 0 ]).flatten
     else
-      y = @position == :top ? y : @canvas.height - @size - y
-      @canvas.composite(@border, :over, x: [ 0 ], y: [ y ]).flatten
+      y = @position == :top ? y : canvas.height - @size - y
+      canvas.composite(border, :over, x: [ 0 ], y: [ y ]).flatten
     end
   end
 
-  def parts
+  private
+
+  def hex_to_rgb(hex)
+    hex.match(/#(..)(..)(..)/)[1..3].map { |x| x.hex }
+  end
+
+  def dimensions(canvas)
+    if vertical?
+      [ @size, canvas.height ]
+    else
+      [ canvas.width, @size ]
+    end
+  end
+
+  def parts(canvas)
     if @fill.is_a?(Array)
-      width, height = vertical? ? [ @size, (@canvas.height / @fill.size) ] : [ (@canvas.width / @fill.size), @size ]
+      width, height = vertical? ? [ @size, (canvas.height / @fill.size) ] : [ (canvas.width / @fill.size), @size ]
 
       @fill.map.with_index do |item, index|
         Part.new(
@@ -51,26 +65,12 @@ class JekyllOgImage::Element::Border < JekyllOgImage::Element::Base
         )
       end
     else
-      length = vertical? ? @canvas.height : @canvas.width
+      length = vertical? ? canvas.height : canvas.width
 
       [ Part.new(rgb: hex_to_rgb(@fill), length: length, offset: 0) ]
     end
   end
 
-  private
-
-  def hex_to_rgb(hex)
-    hex.match(/#(..)(..)(..)/)[1..3].map { |x| x.hex }
-  end
-
-  def dimensions
-    if vertical?
-      [ @size, @canvas.height ]
-    else
-      [ @canvas.width, @size ]
-    end
-  end
-
   def vertical?
     @position == :left || @position == :right
   end

data/lib/jekyll_og_image/element/canvas.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+require "vips"
+
+class JekyllOgImage::Element::Canvas < JekyllOgImage::Element::Base
+  def initialize(width, height, color: "#ffffff")
+    @canvas = Vips::Image.black(width, height).ifthenelse([ 0, 0, 0 ], hex_to_rgb(color))
+  end
+
+  def image(source, **opts, &block)
+    image = JekyllOgImage::Element::Image.new(source, **opts)
+    @canvas = image.apply_to(@canvas, &block)
+
+    self
+  end
+
+  def text(message, **opts, &block)
+    text = JekyllOgImage::Element::Text.new(message, **opts)
+    @canvas = text.apply_to(@canvas, &block)
+
+    self
+  end
+
+  def border(width, **opts, &block)
+    border = JekyllOgImage::Element::Border.new(width, **opts)
+    @canvas = border.apply_to(@canvas, &block)
+
+    self
+  end
+
+  def save(filename)
+    @canvas.write_to_file(filename)
+  end
+end

data/lib/jekyll_og_image/element/image.rb

@@ -1,33 +1,64 @@
 # frozen_string_literal: true
 
-require "vips"
-
 class JekyllOgImage::Element::Image < JekyllOgImage::Element::Base
-  def initialize(width, height, color: "#ffffff")
-    @canvas = Vips::Image.black(width, height).ifthenelse([ 0, 0, 0 ], hex_to_rgb(color))
+  def initialize(source, gravity: :nw, width:, height:, radius:)
+    @gravity = gravity
+    @source = source
+    @width = width
+    @height = height
+    @radius = radius
+
+    validate_gravity!
   end
 
-  def text(message, **opts, &block)
-    text = JekyllOgImage::Element::Text.new(
-      @canvas, message, **opts
-    )
+  def apply_to(canvas, &block)
+    image = Vips::Image.new_from_buffer(@source, "")
+    image = round_corners(image) if @radius
+
+    result = block.call(canvas, image) if block_given?
+
+    if @width && @height
+      ratio = calculate_ratio(image, @width, @height, :min)
+      image = image.resize(ratio)
+    end
 
-    @canvas = text.apply(&block)
+    x, y = result ? [ result.fetch(:x, 0), result.fetch(:y, 0) ] : [ 0, 0 ]
 
-    self
+    composite_with_gravity(canvas, image, x, y)
   end
 
-  def border(width, position: :bottom, fill: "#000000")
-    @canvas = JekyllOgImage::Element::Border.new(
-      @canvas, width,
-      position: position,
-      fill: fill
-    ).apply
+  private
+
+  VALID_GRAVITY.each do |gravity|
+    define_method("gravity_#{gravity}?") do
+      @gravity == gravity
+    end
+  end
+
+  def round_corners(image)
+    mask = %(
+      <svg viewBox="0 0 #{image.width} #{image.height}">
+        <rect
+          rx="#{@radius}"
+          ry="#{@radius}"
+          x="0"
+          y="0"
+          width="#{image.width}"
+          height="#{image.height}"
+          fill="#fff"
+        />
+      </svg>
+    )
 
-    self
+    mask = Vips::Image.new_from_buffer(mask, "")
+    image.bandjoin mask[3]
   end
 
-  def save(filename)
-    @canvas.write_to_file(filename)
+  def calculate_ratio(image, width, height, mode)
+    if mode == :min
+      [ width.to_f / image.width, height.to_f / image.height ].min
+    else
+      [ width.to_f / image.width, height.to_f / image.height ].max
+    end
   end
 end

data/lib/jekyll_og_image/element/text.rb

@@ -1,45 +1,36 @@
 # frozen_string_literal: true
 
 class JekyllOgImage::Element::Text < JekyllOgImage::Element::Base
-  VALID_GRAVITY = %i[nw ne sw se].freeze
-
-  def initialize(canvas, message, gravity: :nw, width: nil, dpi: nil, color: "#000000", font: nil)
-    @canvas = canvas
+  def initialize(message, gravity: :nw, width: nil, dpi: nil, color: "#000000", font: nil)
+    @message = message
     @gravity = gravity
+    @width = width
+    @dpi = dpi
+    @color = color
+    @font = font
 
     validate_gravity!
+  end
 
-    text = Vips::Image.text(message,
-      font: font,
-      width: width,
-      dpi: dpi,
+  def apply_to(canvas, &block)
+    text = Vips::Image.text(@message,
+      font: @font,
+      width: @width,
+      dpi: @dpi,
       wrap: :word,
       align: :low
     )
 
-    @text = text
-      .new_from_image(hex_to_rgb(color))
+    text = text
+      .new_from_image(hex_to_rgb(@color))
       .copy(interpretation: :srgb)
       .bandjoin(text)
-  end
 
-  def apply(&block)
-    result = block.call(@canvas, @text) if block_given?
+    result = block.call(canvas, text) if block_given?
+
     x, y = result ? [ result.fetch(:x, 0), result.fetch(:y, 0) ] : [ 0, 0 ]
 
-    if gravity_nw?
-      @canvas.composite(@text, :over, x: [ x ], y: [ y ]).flatten
-    elsif gravity_ne?
-      x = @canvas.width - @text.width - x
-      @canvas.composite(@text, :over, x: [ x ], y: [ y ]).flatten
-    elsif gravity_sw?
-      y = @canvas.height - @text.height - y
-      @canvas.composite(@text, :over, x: [ x ], y: [ y ]).flatten
-    elsif gravity_se?
-      x = @canvas.width - @text.width - x
-      y = @canvas.height - @text.height - y
-      @canvas.composite(@text, :over, x: [ x ], y: [ y ]).flatten
-    end
+    composite_with_gravity(canvas, text, x, y)
   end
 
   private
@@ -49,10 +40,4 @@ class JekyllOgImage::Element::Text < JekyllOgImage::Element::Base
       @gravity == gravity
     end
   end
-
-  def validate_gravity!
-    unless VALID_GRAVITY.include?(@gravity)
-      raise ArgumentError, "Invalid gravity: #{@gravity.inspect}"
-    end
-  end
 end

data/lib/jekyll_og_image/generator.rb

@@ -35,37 +35,49 @@ class JekyllOgImage::Generator < Jekyll::Generator
   def generate_image_for_post(site, post, path)
     date = post.date.strftime("%B %d, %Y")
 
-    image = JekyllOgImage::Element::Image.new(1200, 600)
+    canvas = JekyllOgImage::Element::Canvas.new(1200, 600)
       .border(JekyllOgImage.config.border_bottom["width"],
         position: :bottom,
         fill: JekyllOgImage.config.border_bottom["fill"]
       )
-      .text(post.data["title"], width: 1040, color: "#2f313d", dpi: 500, font: "Helvetica, Bold") do |_canvas, _text|
-        {
-          x: 80,
-          y: 100
-        }
-      end
-      .text(date, gravity: :sw, color: "#535358", dpi: 150, font: "Helvetica, Regular") do |_canvas, _text|
-        {
-          x: 80,
-          y: post.data["tags"].any? ? 150 : 100
-        }
-      end
+
+    if JekyllOgImage.config.image
+      canvas = canvas.image(
+        File.read(File.join(site.config["source"], JekyllOgImage.config.image)),
+        gravity: :ne,
+        width: 150,
+        height: 150,
+        radius: 50
+      ) { |_canvas, _text| { x: 80, y: 100 } }
+    end
+
+    canvas = canvas.text(post.data["title"],
+      width: JekyllOgImage.config.image ? 870 : 1040,
+      color: "#2f313d",
+      dpi: 400,
+      font: "Helvetica, Bold"
+    ) { |_canvas, _text| { x: 80, y: 100 } }
+
+    canvas = canvas.text(date,
+      gravity: :sw,
+      color: "#535358",
+      dpi: 150,
+      font: "Helvetica, Regular"
+    ) { |_canvas, _text| { x: 80, y: post.data["tags"].any? ? 150 : 100 } }
 
     if post.data["tags"].any?
       tags = post.data["tags"].map { |tag| "##{tag}" }.join(" ")
 
-      image = image.text(tags, gravity: :sw, color: "#535358", dpi: 150, font: "Helvetica, Regular") do |_canvas, _text|
-        {
-          x: 80,
-          y: 100
-        }
-      end
+      canvas = canvas.text(tags,
+        gravity: :sw,
+        color: "#535358",
+        dpi: 150,
+        font: "Helvetica, Regular"
+      ) { |_canvas, _text| { x: 80, y: 100 } }
     end
 
     if JekyllOgImage.config.domain
-      image = image.text(JekyllOgImage.config.domain, gravity: :se, color: "#535358", dpi: 150, font: "Helvetica, Regular") do |_canvas, _text|
+      canvas = canvas.text(JekyllOgImage.config.domain, gravity: :se, color: "#535358", dpi: 150, font: "Helvetica, Regular") do |_canvas, _text|
         {
           x: 80,
           y: post.data["tags"].any? ? 150 : 100
@@ -73,6 +85,6 @@ class JekyllOgImage::Generator < Jekyll::Generator
       end
     end
 
-    image.save(path)
+    canvas.save(path)
   end
 end

data/lib/jekyll_og_image/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module JekyllOgImage
-  VERSION = "1.0.3"
+  VERSION = "1.0.5"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-og-image
 version: !ruby/object:Gem::Version
-  version: 1.0.3
+  version: 1.0.5
 platform: ruby
 authors:
 - Igor Alexandrov
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-02-05 00:00:00.000000000 Z
+date: 2024-02-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll-seo-tag
@@ -108,6 +108,7 @@ files:
 - lib/jekyll_og_image/config.rb
 - lib/jekyll_og_image/element/base.rb
 - lib/jekyll_og_image/element/border.rb
+- lib/jekyll_og_image/element/canvas.rb
 - lib/jekyll_og_image/element/image.rb
 - lib/jekyll_og_image/element/text.rb
 - lib/jekyll_og_image/generator.rb