jekyll-picture-tag-ng 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 3a3bd675a4d3cc241525f392330a1c83bb216ea3a0b493af4c6c962e64443719
+  data.tar.gz: b97828fb4b03cffe94b235a6ee09212b2d9f12c0c8bbd24ecbc1772809edebf6
+SHA512:
+  metadata.gz: b3aafd32911452696625b1f5cff39b86bfe707e3caa7d41b94a2172834c0d229884d5517b44bb7c7da13985e8e2a6164727fb3680f03100ba024bb3317df6be2
+  data.tar.gz: 8720af12c5eaa95d89edd1ce3300611c8d1037b3b9ff2cadccd8d9548b9190127b8541c36a3675a98b61fbda0eae27b1dc5668c85985053563646f82f2f8960b

data/.rubocop.yml

@@ -0,0 +1,25 @@
+AllCops:
+  TargetRubyVersion: 2.6
+
+Style/StringLiterals:
+  Enabled: true
+  EnforcedStyle: double_quotes
+
+Style/StringLiteralsInInterpolation:
+  Enabled: true
+  EnforcedStyle: double_quotes
+
+Layout/LineLength:
+  Max: 120
+
+Metrics/MethodLength:
+  Enabled: false
+
+Metrics/AbcSize:
+  Enabled: false
+
+Naming/MethodParameterName:
+  Enabled: false
+
+Naming/FileName:
+  Enabled: false

data/Gemfile

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+source "https://rubygems.org"
+
+# Specify your gem's dependencies in jekyll-picture_tag.gemspec
+gemspec
+
+gem "rake", "~> 13.0"
+
+gem "rubocop", "~> 1.21"
+
+gem "jekyll", "~> 4.3"
+
+gem "kramdown", "~> 2.4"

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023 pcouy
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,73 @@
+# Jekyll Picture Tag NG
+
+This plugin will automatically generate variants of your pictures on build, and change the Kramdown rendering to use the variants with HTML picture tags when including pictures from markdown.
+
+## Installation
+
+Install the gem and add to the application's Gemfile by executing:
+
+    $ bundle add jekyll-picture-tag-ng
+
+If bundler is not being used to manage dependencies, install the gem by executing:
+
+    $ gem install jekyll-picture-tag-ng
+
+Additionally, you will need [ImageMagick](https://imagemagick.org/) installed on the system you're using to build your website in order to generate the picture variations. On Debian/Ubuntu systems, you can execute:
+
+    $ sudo apt-get install imagemagick
+
+After installing, update your `_config.yml` to include the plugin :
+
+```
+plugins:   [other-plugins, jekyll-picture-tag-ng]
+```
+
+### Using with GitHub Pages
+
+If you're using GitHub Pages to deploy your site, you'll need to use a custom action to be able to use this plugin and install ImageMagick. You can create such GitHub action by browsing to `https://github.com/{YOUR/REPO}/new/main?filename=.github%2Fworkflows%2Fjekyll.yml&workflow_template=pages%2Fjekyll`. You will need to add the following lines as a step for the build job of your GitHub action (before the `jekyll build` command) :
+
+```
+- name: Install imagemagick
+  run: sudo apt-get update && sudo apt-get install imagemagick
+```
+
+After adding the custom action to your repository, you'll need to update the repository settings on GitHub : go to the "Pages" section and change the "Source" setting from "Deploy from a branch" to "GitHub Actions".
+
+## Usage
+
+By installing the plugin and activating it, `jekyll build` and `jekyll serve` commands will perform an additional step to generate several versions of your `jpeg` and `webp` files : for each of these files in the source directory, and each version defined, a file will be output in the `img/{version}` directory of the rendered website.
+
+When using the default markdown syntax for including pictures (`![Alt text](PICTURE_URL)`) with the Kramdown renderer, `<picture>` tags with appropriate `<source>` children tags will be output.
+
+When working locally, it is recommended to use the `--incremental` option which will prevent Jekyll from re-generating all the picture versions (can take quite some time) every time you save a file. However, there is a catch : when using `--incremental`, if you edit your configuration file to change the output formats and build again, your pages will not be updated with the appropriate `<source>` tags for the new versions.
+
+### Configuration
+
+Configuration is done in the `_config.yml` of your website, under the `picture_tag_ng` variable :
+
+```yaml
+picture_tag_ng:
+  background_color: FFFFFF
+  picture_versions:
+    m: 700
+    s: 400
+```
+
+The example above is equivalent to the defaults.
+
+- `background_color` is the color used to replace transparency when converting from `webp` to `jpeg`
+- `picture_versions` maps version names to target widths in pixels. The default configuration above produces output files 700px wide in `img/m/` and 400px wide in `img/s/`.
+
+## Development
+
+After checking out the repo, run `bin/setup` to install dependencies. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
+
+To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and the created tag, and push the `.gem` file to [rubygems.org](https://rubygems.org).
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/pcouy/jekyll-picture-tag-ng.
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+require "bundler/gem_tasks"
+require "rubocop/rake_task"
+
+RuboCop::RakeTask.new
+
+task default: :rubocop

data/lib/jekyll-picture-tag-ng/version.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module Jekyll
+  module PictureTag
+    VERSION = "0.1.0"
+  end
+end

data/lib/jekyll-picture-tag-ng.rb

@@ -0,0 +1,168 @@
+# frozen_string_literal: true
+
+require "jekyll"
+require "kramdown"
+require_relative "jekyll-picture-tag-ng/version"
+
+module Jekyll
+  # Override default static file to make some instance variables readable
+  class StaticFile
+    attr_reader :site, :dest, :dir, :name
+  end
+
+  module PictureTag
+    CONFIG = {
+      "picture_versions" => {
+        "s" => "400",
+        "m" => "700"
+      },
+      "background_color" => "FFFFFF"
+    }.freeze
+
+    class Error < StandardError; end
+
+    # Class that holds generated variants of pictures
+    class OutImageFile < StaticFile
+      def initialize(site, orig_static_file, version, pictype)
+        super(site, site.source, orig_static_file.dir, orig_static_file.name)
+        @version = version
+        @picture_dim = picture_versions[@version]
+        @pictype = pictype
+        @collection = nil
+      end
+
+      def config
+        @config ||= CONFIG.merge(@site.config["picture_tag_ng"] || {})
+      end
+
+      def picture_versions
+        config["picture_versions"]
+      end
+
+      def picture?
+        extname =~ /(\.jpg|\.jpeg|\.webp)$/i
+      end
+
+      def destination(dest)
+        output_dir = File.join("img", @version, @dir)
+        output_basename = @site.in_dest_dir(@site.dest, File.join(output_dir, "#{basename}.#{@pictype}"))
+        FileUtils.mkdir_p(File.dirname(output_dir))
+        @destination ||= {}
+        @destination[dest] ||= output_basename
+      end
+
+      def write(*args)
+        Jekyll.logger.debug "write : #{args} Modified : #{modified?}"
+        super(*args)
+      end
+
+      def popen_args(dest_path)
+        args = ["convert", @path, "-resize", "#{@picture_dim}x>"]
+        if @pictype == "jpg"
+          args.concat ["-background", "##{@config["background_color"]}",
+                       "-flatten", "-alpha", "off"]
+        end
+        args.push dest_path
+      end
+
+      def copy_file(dest_path)
+        Jekyll.logger.debug "copy_file : #{path} -> #{dest_path}"
+        p = IO.popen(popen_args(dest_path))
+        p.close
+        File.utime(self.class.mtimes[path], self.class.mtimes[path], dest_path)
+      end
+    end
+
+    # Will generate the picture variants
+    class PicsGenerator < Generator
+      safe true
+      priority :lowest
+
+      def generate(site)
+        @config ||= CONFIG.merge(site.config["picture_tag_ng"] || {})
+        @picture_versions = @config["picture_versions"]
+        new_statics = []
+        site.static_files.filter { |f| f.extname =~ /(\.jpg|\.jpeg|\.webp)$/i }.each do |f|
+          @config["picture_versions"].each do |v, _s|
+            img_f = OutImageFile.new(site, f, v, "jpg")
+            new_statics << img_f
+            img_f = OutImageFile.new(site, f, v, "webp")
+            new_statics << img_f
+          end
+        end
+
+        new_statics.each { |f| site.static_files << f }
+      end
+    end
+  end
+end
+
+Jekyll::Hooks.register :site, :after_init do |site|
+  Kramdown::Converter::JEKYLL_SITE = site
+end
+
+module Kramdown
+  module Parser
+    # Override Kramdown parser
+    class Kramdown
+      def add_link(el, href, title, alt_text = nil, ial = nil)
+        el.options[:ial] = ial
+        update_attr_with_ial(el.attr, ial) if ial
+        if el.type == :a
+          el.attr["href"] = href
+        else
+          el.attr["src"] = href
+          el.attr["alt"] = alt_text
+          el.attr["loading"] = el.attr["loading"] || "lazy"
+          el.children.clear
+        end
+        el.attr["title"] = title if title
+        @tree.children << el
+      end
+
+      require "kramdown/parser/kramdown"
+    end
+  end
+
+  module Converter
+    # Override Kramdown HTML converter
+    class Html
+      def site_config
+        @site_config ||= Jekyll::PictureTag::CONFIG.merge(JEKYLL_SITE.config["picture_tag_ng"] || {})
+      end
+
+      def picture_versions
+        site_config["picture_versions"]
+      end
+
+      def convert_img(el, _indent)
+        require "cgi"
+        res = "<picture>"
+        new_src = el.attr["src"]
+        if File.extname(el.attr["src"]) =~ /(\.jpg|\.jpeg|\.webp)$/i
+          picture_versions.each_with_index do |(version, geometry), index|
+            src_base = File.join(
+              "/img",
+              version,
+              File.dirname(el.attr["src"]).split("/").map do |x|
+                x.gsub(" ", "%20")
+              end.join("/"),
+              File.basename(el.attr["src"], File.extname(el.attr["src"])).gsub(" ", "%20")
+            )
+            if index == picture_versions.size - 1
+              media = ""
+              new_src = "#{src_base}.jpg"
+            else
+              media = "media=\"(max-width: #{geometry}px)\""
+            end
+            res += "<source #{media} srcset=\"#{src_base}.webp\" type=\"image/webp\">"
+            res += "<source #{media} srcset=\"#{src_base}.jpg\" type=\"image/jpeg\">"
+          end
+        end
+        el.attr["src"] = new_src
+        res += "<img#{html_attributes(el.attr)}>"
+        res += "</picture>"
+      end
+    end
+  end
+end

data/sig/jekyll/picture_tag.rbs

@@ -0,0 +1,6 @@
+module Jekyll
+  module PictureTag
+    VERSION: String
+    # See the writing guide of rbs: https://github.com/ruby/rbs#guides
+  end
+end

metadata

@@ -0,0 +1,115 @@
+--- !ruby/object:Gem::Specification
+name: jekyll-picture-tag-ng
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- pcouy
+autorequire:
+bindir: exe
+cert_chain: []
+date: 2023-04-10 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: jekyll
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: kramdown
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '13.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '13.0'
+- !ruby/object:Gem::Dependency
+  name: rubocop
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.21'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.21'
+description: |-
+  This plugin will auto-generate alternative versions of your jpg and webp files. For each specified
+    version, a jpeg and a webp version will be generated. When including images in markdown documents, the HTML `picture`
+    tag will be used to display the appropriate version using media queries.
+email:
+- contact@pierre-couy.dev
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".rubocop.yml"
+- Gemfile
+- LICENSE.txt
+- README.md
+- Rakefile
+- lib/jekyll-picture-tag-ng.rb
+- lib/jekyll-picture-tag-ng/version.rb
+- sig/jekyll/picture_tag.rbs
+homepage: https://github.com/pcouy/jekyll-picture-tag-ng
+licenses:
+- MIT
+metadata:
+  allowed_push_host: https://rubygems.org
+  homepage_uri: https://github.com/pcouy/jekyll-picture-tag-ng
+  source_code_uri: https://github.com/pcouy/jekyll-picture-tag-ng
+  changelog_uri: https://github.com/pcouy/jekyll-picture-tag-ng/main/CHANGELOG.md
+post_install_message:
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 2.6.0
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.3.25
+signing_key:
+specification_version: 4
+summary: Replace the default Kramdown rendering of pictures to use auto-generated
+  alternatives
+test_files: []