jekyll-og-image 2.0.0 → 2.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ea51d4a05adcc40de23c17b92e31139f154176500960782aa592864c71cbd334
-  data.tar.gz: a31cc539176deac7ad1e8fd0dea3b4fd45efd906a02d439766e8df82d80adceb
+  metadata.gz: 7498d6e0fca6a90a0c70efb97a4514293b396e20af0900cfa5c734d88ed2cbf0
+  data.tar.gz: fea25610cb98a2b2954440c796800087a5379142b796c503ac7822034950fb17
 SHA512:
-  metadata.gz: 5e3929c8ddee908ae78375186bacffab40da5813432d4a563ab4f61b5767b011cf69959842a0e2f05f4b6d899029d08aec3c9d531154162ef4de6cb2a4ba4c99
-  data.tar.gz: 2470a7946363160ebfebc258c5326089976b91a620d2bde2edc35c76149eec1a6d6f0d739812e8917e96b1910fa13a53c7c9e15198688207ebaef5f61a04cce2
+  metadata.gz: b6177ac6d1493b968a2eb2d33a13f84429d90be409839d2e08407a20e8b4296a5e9a50dc38d630f867ad113a931efb6fd9d6302d4a5732a167b82aec0e08dfa2
+  data.tar.gz: 3661a2e8dcb52b274d73d2ef713bc6fa365b9a3102bc652098bf7759e0babe3b6c253133fafdcc3c7c0ef6d57272da47c78d1d937ac111efa1abff4231d25860

data/README.md

@@ -4,7 +4,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)
+[![Tests](https://github.com/igor-alexandrov/jekyll-og-image/actions/workflows/tests.yml/badge.svg?branch=main)](https://github.com/igor-alexandrov/jekyll-og-image/actions/workflows/tests.yml)
 
 ## Installation
 
@@ -103,6 +103,8 @@ The following configuration options are available:
 * `header` – The header configuration options:
   * `font_family` – The font family of the header text. Default: `Helvetica, Bold`
   * `color` – The color of the header text. Default: `#2f313d`
+  * `prefix` – Text to prepend to the title. Default: `""`
+  * `suffix` – Text to append to the title. Default: `""`
 
 * `content` – The content configuration options:
   * `font_family` – The font family of the content text. Default: `Helvetica, Regular`
@@ -114,7 +116,18 @@ The following configuration options are available:
 
 * `domain` – The domain name to use in the image. Default: `nil`
 
-* `image` – Path to the image to use as the logo. Default: `nil`
+* `image` – Logo/image configuration options. Can be a string (legacy format) or an object with the following options:
+  * `path` – Path to the image file. **Note: Use JPEG format for best compatibility. PNG images with transparency may not render correctly.** Default: `nil`
+  * `width` – The width of the logo in pixels. Default: `150`
+  * `height` – The height of the logo in pixels. Default: `150`
+  * `radius` – The radius for rounded corners on the logo. Default: `50`
+  * `position` – The position of the logo as `{x, y}` coordinates. Default: `{x: 80, y: 100}`
+  * `gravity` – The gravity anchor for logo positioning (nw, n, ne, w, e, sw, s, se). Default: `ne`
+
+* `metadata` – The metadata configuration options:
+  * `fields` – Array of metadata fields to display. Available options: `"date"`, `"tags"`, or any custom front matter field. Default: `["date", "tags"]`
+  * `separator` – Text to separate multiple metadata fields. Default: `" • "`
+  * `date_format` – Date format string for the date field. Default: `"%B %d, %Y"`
 
 ## Examples
 
@@ -216,6 +229,36 @@ og_image:
 
 ![Example 4](examples/4.png)
 
+### Custom Metadata and Logo Size
+
+```yaml
+# _config.yml
+og_image:
+  domain: "igor.works"
+  image:
+    path: "/assets/images/logo.png"
+    width: 100
+    height: 100
+    radius: 20
+    position:
+      x: 60
+      y: 60
+  header:
+    prefix: "📖 "
+    suffix: " - My Blog"
+  metadata:
+    fields: ["author", "date", "reading_time"]
+    separator: " | "
+    date_format: "%d %B %Y"
+```
+
+This configuration:
+- Adjusts the logo size to 100x100px with less rounded corners
+- Adds a book emoji prefix and " - My Blog" suffix to titles
+- Shows author, date, and reading_time in the metadata section
+- Uses a pipe separator between metadata fields
+- Formats dates as "15 February 2024"
+
 
 ## Contributing
 

data/lib/jekyll_og_image/configuration.rb

@@ -9,8 +9,8 @@ class JekyllOgImage::Configuration
     end
   end
 
-  Header = Data.define(:font_family, :color) do
-    def initialize(font_family: "Helvetica, Bold", color: "#2f313d")
+  Header = Data.define(:font_family, :color, :prefix, :suffix) do
+    def initialize(font_family: "Helvetica, Bold", color: "#2f313d", prefix: "", suffix: "")
       super
     end
   end
@@ -28,6 +28,18 @@ class JekyllOgImage::Configuration
     end
   end
 
+  Image = Data.define(:path, :width, :height, :radius, :position, :gravity) do
+    def initialize(path: nil, width: 150, height: 150, radius: 50, position: { x: 80, y: 100 }, gravity: :ne)
+      super
+    end
+  end
+
+  Metadata = Data.define(:fields, :separator, :date_format) do
+    def initialize(fields: [ "date", "tags" ], separator: " • ", date_format: "%B %d, %Y")
+      super
+    end
+  end
+
   def initialize(raw_config)
     @raw_config = raw_config
   end
@@ -86,7 +98,14 @@ class JekyllOgImage::Configuration
   end
 
   def image
-    @raw_config["image"]
+    if @raw_config["image"].is_a?(String)
+      # Legacy support: if image is just a string, convert it to the new format
+      Image.new(path: @raw_config["image"])
+    elsif @raw_config["image"]
+      Image.new(**Jekyll::Utils.symbolize_hash_keys(@raw_config["image"]))
+    else
+      Image.new
+    end
   end
 
   def domain
@@ -100,4 +119,9 @@ class JekyllOgImage::Configuration
   def margin_bottom
     80 + (border_bottom&.width || 0)
   end
+
+
+  def metadata
+    @raw_config["metadata"] ? Metadata.new(**Jekyll::Utils.symbolize_hash_keys(@raw_config["metadata"])) : Metadata.new
+  end
 end

data/lib/jekyll_og_image/generator.rb

@@ -49,6 +49,8 @@ class JekyllOgImage::Generator < Jekyll::Generator
         Jekyll.logger.info "Jekyll Og Image:", "Skipping image generation for #{relative_image_path} as it already exists." if config.verbose?
       end
 
+      register_static_file(site, base_output_dir, image_filename, config) if File.exist?(absolute_image_path)
+
       item.data["image"] ||= {
         "path" => relative_image_path,
         "width" => JekyllOgImage.config.canvas.width,
@@ -74,6 +76,21 @@ class JekyllOgImage::Generator < Jekyll::Generator
     end
   end
 
+  def register_static_file(site, base_output_dir, image_filename, config)
+    relative_path = File.join("/", base_output_dir, image_filename)
+    return if site.static_files.any? { |file| file.relative_path == relative_path }
+
+    static_file = Jekyll::StaticFile.new(
+      site,
+      site.source,
+      base_output_dir,
+      image_filename
+    )
+
+    site.static_files << static_file
+    Jekyll.logger.info "Jekyll Og Image:", "Added #{base_output_dir}/#{image_filename} to static files" if config.verbose?
+  end
+
   def generate_image_for_document(site, item, path, base_config)
     config = base_config.merge!(item.data["og_image"] || {})
 
@@ -81,10 +98,9 @@ class JekyllOgImage::Generator < Jekyll::Generator
 
     canvas = generate_canvas(site, config)
     canvas = add_border_bottom(canvas, config) if config.border_bottom
-    canvas = add_image(canvas, File.read(File.join(site.config["source"], config.image))) if config.image
+    canvas = add_image(canvas, File.read(File.join(site.config["source"], config.image.path)), config) if config.image.path
     canvas = add_header(canvas, item, config)
-    canvas = add_publish_date(canvas, item, config)
-    canvas = add_tags(canvas, item, config) if item.data["tags"]&.any?
+    canvas = add_metadata(canvas, item, config)
     canvas = add_domain(canvas, item, config) if config.domain
 
     canvas.save(path)
@@ -109,61 +125,107 @@ class JekyllOgImage::Generator < Jekyll::Generator
     )
   end
 
-  def add_image(canvas, image)
-    canvas.image(image,
-      gravity: :ne,
-      width: 150,
-      height: 150,
-      radius: 50
-    ) { |_canvas, _text| { x: 80, y: 100 } }
+  def add_image(canvas, image_data, config)
+    image_config = config.image
+    canvas.image(image_data,
+      gravity: image_config.gravity,
+      width: image_config.width,
+      height: image_config.height,
+      radius: image_config.radius
+    ) { |_canvas, _text| { x: image_config.position[:x], y: image_config.position[:y] } }
   end
 
   def add_header(canvas, item, config)
     title = item.data["title"] || "Untitled"
-    canvas.text(title,
-      width: config.image ? 870 : 1040,
+    full_title = "#{config.header.prefix}#{title}#{config.header.suffix}"
+
+    # Calculate available width for header text to avoid overlap with image
+    header_width = if config.image.path
+      # Canvas width - left margin - right margin - image width - spacing
+      # 1200 - 80 - 80 - image_width - 30 (spacing)
+      1040 - config.image.width - 30
+    else
+      1040
+    end
+
+    canvas.text(full_title,
+      width: header_width,
       color: config.header.color,
       dpi: 400,
       font: config.header.font_family
     ) { |_canvas, _text| { x: 80, y: 100 } }
   end
 
-  def add_publish_date(canvas, item, config)
-    return canvas unless item.respond_to?(:date) && item.date
+  def add_metadata(canvas, item, config)
+    metadata_text = metadata_text_for(item, config)
+    return canvas if metadata_text.empty?
 
-    date = item.date.strftime("%B %d, %Y")
-    y_pos = (item.data["tags"]&.any? ? config.margin_bottom + 50 : config.margin_bottom)
+    metadata_width = metadata_width_for(config)
 
-    canvas.text(date,
+    canvas.text(metadata_text,
       gravity: :sw,
+      width: metadata_width,
       color: config.content.color,
       dpi: 150,
       font: config.content.font_family
-    ) { |_canvas, _text| { x: 80, y: y_pos } }
+    ) { |_canvas, _text| { x: 80, y: config.margin_bottom } }
   end
 
-  def add_tags(canvas, item, config)
-    tags_list = item.data["tags"]
-    return canvas unless tags_list.is_a?(Array) && tags_list.any?
+  def metadata_text_for(item, config)
+    metadata_parts = []
+    metadata_width = metadata_width_for(config)
 
-    tags = tags_list.map { |tag| "##{tag}" }.join(" ")
+    config.metadata.fields.each do |field|
+      metadata_value = metadata_value_for(item, field, config)
+      next if metadata_value.nil? || metadata_value.empty?
 
-    canvas.text(tags,
-      gravity: :sw,
-      color: config.content.color,
-      dpi: 150,
-      font: config.content.font_family
-    ) { |_canvas, _text| { x: 80, y: config.margin_bottom } }
+      if field == "description"
+        candidate_text = (metadata_parts + [ metadata_value ]).join(config.metadata.separator)
+        next unless metadata_text_fits_single_line?(candidate_text, metadata_width, config)
+      end
+
+      metadata_parts << metadata_value
+    end
+
+    metadata_parts.join(config.metadata.separator)
   end
 
-  def add_domain(canvas, item, config)
-    y_pos = if item.data["tags"]&.any?
-              config.margin_bottom + 50
-              # rubocop:disable Layout/ElseAlignment # Disabled due to RuboCop error in v3.3.0
-            else
-              # rubocop:enable Layout/ElseAlignment
-              config.margin_bottom
+  def metadata_value_for(item, field, config)
+    case field
+    when "date"
+      item.respond_to?(:date) && item.date ? item.date.strftime(config.metadata.date_format) : nil
+    when "tags"
+      return nil unless item.data["tags"]&.is_a?(Array) && item.data["tags"].any?
+
+      item.data["tags"].map { |tag| "##{tag}" }.join(" ")
+    else
+      # Support custom fields from front matter
+      item.data[field]&.to_s
     end
+  end
+
+  def metadata_width_for(config)
+    config.domain ? 600 : 1040
+  end
+
+  def metadata_text_fits_single_line?(text, metadata_width, config)
+    options = {
+      width: metadata_width,
+      dpi: 150,
+      font: config.content.font_family,
+      align: :low
+    }
+    options[:wrap] = :word if Vips.at_least_libvips?(8, 14)
+
+    single_line_height = Vips::Image.text("Ay", **options).height
+    rendered_height = Vips::Image.text(text, **options).height
+
+    rendered_height <= (single_line_height * 1.6)
+  end
+
+
+  def add_domain(canvas, _item, config)
+    y_pos = config.margin_bottom
 
     canvas.text(config.domain,
       gravity: :se,

data/lib/jekyll_og_image/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-og-image
 version: !ruby/object:Gem::Version
-  version: 2.0.0
+  version: 2.1.0
 platform: ruby
 authors:
 - Igor Alexandrov
@@ -130,7 +130,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.6.7
+rubygems_version: 4.0.3
 specification_version: 4
 summary: Jekyll plugin to generate GitHub-style open graph images
 test_files: []