middleman-social_image 0.0.1 → 0.0.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fb0b030a5107566244948ab289a30177c59bd5d5754022fc32d816507b7540fe
-  data.tar.gz: 63da5dd031a4a50a2df41f05ad10816e5c0b7853a823d4a10850df693ae24ccd
+  metadata.gz: 4b33a5a00bdde76bcf00c4c872bcc525e691874adf5bd95a12d92e52f38974e4
+  data.tar.gz: 992ac18e68e3f25e9f9bd8c1ef0b3af7a253e75aef05a442b63ed6278a769323
 SHA512:
-  metadata.gz: 4eb79e1af1523f4fd77a616d108a8b53440c3122690a98c338cb8a164ea4262a9726b8686314b5ffa15d8b18604cd9ffb1b11f3db516f7f597146fb2823db4f9
-  data.tar.gz: 99c2d6ebaad6d2a4dbaa1e03c6ed2d903411183137b612e710ccc134bc5367c1f63a6418ddf020811679d57194302e9d807995093fcf76b89698fddf5ca7dfcd
+  metadata.gz: 86ea9bb9a3bb9759e770e1633058c2390594096d182fd68b221c3e67abf0b8fa95800cce97ac0b3eb23a2dc1623cc3c89e451be6b11a12a80c0faa50bb2cff44
+  data.tar.gz: ab6aaf979d769b23ec82ee5d056fd7d6f604b7f298d088472b4ef32a824602ba58555e2f867ff53d466f93f44b978b5ca9e3b42f325c6f7fa4f2e66dbf98e668

data/.gitignore

@@ -9,3 +9,4 @@
 
 # rspec failure tracking
 .rspec_status
+Gemfile.lock

data/README.md

@@ -1,6 +1,12 @@
 # Middleman::SocialImage
 
-Use HTML and CSS to dynamically generate static images for Open Graph (Facebook, LinkedIn) and Twitter cards in a Middleman application. Image is generated by using Google Chrome in headless mode to screenshot a page served by middleman. Originally created for [tokyodev](https://www.tokyodev.com/), which lists internationally-friendly software developer jobs in Japan.
+Use HTML and CSS to generate images when building your Middleman site. The intended use case is for generating images for use with [the Open Graph protocol](https://ogp.me/), which will be included when someone shares your page on Facebook, Twitter, etc.
+
+Example of an image generated with this extension:
+
+![](https://www.tokyodev.com/2020/05/29/generating-social-images-with-static-site-generators/social-image-714b5c6e.png)
+
+For more background, see [generating social images with static site generators](https://www.tokyodev.com/2020/05/29/generating-social-images-with-static-site-generators/).
 
 ## Installation
 
@@ -24,19 +30,21 @@ Optionally, you can configure this extension with the following (defaults are sh
 
 ```ruby
 activate :social_image do |social_image|
-  social_image.path_to_chrome = '/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome' # Command to execute chrome
   social_image.window_size = '1200,600' # The size of the screenshot
-  social_image.base_url = 'http://localhost:4567/' # Base URL of running middleman server
-  social_image.base_asset_dir = 'assets/images/social-images' # Where to save the generated images
-  social_image.social_image_url_pattern = %r{(/social-image)/$}  # Screenshot URLs matching this pattern
-  social_image.social_image_url_substitution, '\1.png' # When generating screenshots, replace URLs matching social_image_url_pattern with this
+  social_image.selector = 'body > *' # Used to test that the social image url has loaded properly. The more specific this is, the better the chance of catching errors.
+  social_image.parallel = true # Generate images in parallel.
+  social_image.base_url = "http://localhost:4567/" # When building the site, fetch against this URL.
 end
 ```
 
-Create a HTML page in your middleman app that contains the HTML you want to be rendered. The URL for this should match the social_image_url_pattern (so by default, ending with `/social-image/`).
-
-Start up the middleman server with `bundle exec middleman server`
+Create a HTML page in your middleman app that contains the HTML you want to be rendered. Add `social_image: true` to the page's front matter to indicate it is the source for a social image. You can also add it as an option if you're using a proxy page like the following.
 
-Run the `bundle exec middleman social_image` command to generate images from any URLs matching social_image_url_pattern. The image will be saved to a location matching the URL of the resource used to generate it, with the social_image_url_substitution applied, in the base_asset_dir. So with the default settings, if for instance you had created a page at `/examples/social-image/`, this image would be saved at `assets/images/social-images/examples/social-image.png`.
+``` ruby
+["tom", "dick", "harry"].each do |name|
+  proxy "/social-image/#{name}.html", "/templates/social-image.html", social_image: true, locals: { name: name }
+end
+```
 
 You can now refer to this image as normal within your middleman application.
+
+In preview mode, you don't need any other special setup. However, to generate the images in build, you also need to be running the preview server. While you can use `bundle exec middleman server`, using a concurrent server like puma can speed up the generation incredibly. To do this, you'll need to [create a config.ru file](https://middlemanapp.com/basics/start-new-site/#config-ru).

data/lib/middleman-social_image.rb

@@ -3,6 +3,5 @@ require 'middleman-social_image/version'
 
 Middleman::Extensions.register :social_image do
   require "middleman-social_image/extension"
-  require 'middleman-social_image/commands'
   Middleman::SocialImage::Extension
 end

data/lib/middleman-social_image/capybara.rb

@@ -0,0 +1,12 @@
+require "capybara"
+Capybara.server = :webrick
+Capybara.register_driver :selenium_chrome_headless do |app|
+  Capybara::Selenium::Driver.load_selenium
+  browser_options = ::Selenium::WebDriver::Chrome::Options.new.tap do |opts|
+    opts.args << '--headless'
+    opts.args << '--disable-gpu' if Gem.win_platform?
+    opts.args << '--disable-site-isolation-trials'
+    opts.args << '--hide-scrollbars'
+  end
+  Capybara::Selenium::Driver.new(app, browser: :chrome, options: browser_options)
+end

data/lib/middleman-social_image/converter.rb

@@ -0,0 +1,37 @@
+require "middleman-social_image/capybara"
+class Middleman::SocialImage::Converter
+  def initialize(app, window_size, selector, base_url)
+    @app = app
+    @window_size = window_size
+    @selector = selector
+    @base_url = base_url
+  end
+
+  def image_path(resource)
+    File.join(@app.root, "tmp/middleman-social_image", resource.path.sub(".html", ".png"))
+  end
+
+  def convert(resource)
+    image_path = image_path(resource)
+    @app.logger.debug "== social_image: converting #{resource.path}"
+    session.visit(File.join(@base_url, resource.url))
+    raise "#{resource.url} did not contain '#{@selector}'." unless session.has_selector?(@selector)
+    FileUtils.mkdir_p(File.dirname(image_path))
+    session.save_screenshot(image_path)
+  end
+
+  private
+
+  def session
+    @session ||= begin
+      if @app.server?
+        rack_app = ::Middleman::Rack.new(@app).to_app
+        session = Capybara::Session.new(:selenium_chrome_headless, rack_app)
+      else
+        session = Capybara::Session.new(:selenium_chrome_headless)
+      end
+      session.current_window.resize_to(*@window_size.split(","))
+      session
+    end
+  end
+end

data/lib/middleman-social_image/extension.rb

@@ -1,11 +1,63 @@
 require 'middleman-core'
-require 'middleman-social_image/commands'
 
 class Middleman::SocialImage::Extension < ::Middleman::Extension
-  option :path_to_chrome, '/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome'
   option :window_size, '1200,600'
-  option :base_url, 'http://localhost:4567/'
-  option :base_asset_dir, 'assets/images/social-images'
-  option :social_image_url_pattern, %r{(/social-image)/$}
-  option :social_image_url_substitution, '\1.png'
+  option :selector, "body > *"
+  option :parallel, true
+  option :base_url, "http://localhost:4567/"
+
+  def initialize(app, options_hash={}, &block)
+    super
+    require "middleman-social_image/converter"
+    require "middleman-social_image/resource"
+    @converter = Middleman::SocialImage::Converter.new(app, options.window_size, options.selector, options.base_url)
+  end
+
+  def manipulate_resource_list(resources)
+    if app.build?
+      manipulate_resource_list_for_build(resources)
+    else
+      manipulate_resource_list_for_preview(resources)
+    end
+  end
+
+  private
+
+  def social_image_source_resources
+    app.sitemap.resources.select {|resource| resource.options[:social_image] || resource.data[:social_image] }
+  end
+
+  def path_for_source_resource(resource)
+    resource.path.sub(".html", ".png")
+  end
+
+  def manipulate_resource_list_for_build(resources)
+    convert_resource = proc do |resource|
+      @converter.convert(resource)
+    end
+    if options.parallel
+      ::Parallel.each(social_image_source_resources, &convert_resource)
+    else
+      social_image_source_resources.each(&convert_resource)
+    end
+    social_image_resources = social_image_source_resources.map do |resource|
+      Middleman::Sitemap::Resource.new(
+        @app.sitemap,
+        path_for_source_resource(resource),
+        @converter.image_path(resource)
+      )
+    end
+    resources + social_image_resources - social_image_source_resources
+  end
+
+  def manipulate_resource_list_for_preview(resources)
+    resources + social_image_source_resources.map do |resource|
+      Middleman::SocialImage::Resource.new(
+        @app.sitemap,
+        path_for_source_resource(resource),
+        @converter,
+        resource
+      )
+    end
+  end
 end

data/lib/middleman-social_image/resource.rb

@@ -0,0 +1,12 @@
+class Middleman::SocialImage::Resource < ::Middleman::Sitemap::Resource
+  def initialize(store, path, converter, base_resource)
+    super(store, path)
+    @converter = converter
+    @base_resource = base_resource
+  end
+
+  def render(*)
+    @converter.convert(@base_resource)
+    File.read(@converter.image_path(@base_resource))
+  end
+end

data/lib/middleman-social_image/version.rb

@@ -1,5 +1,5 @@
 module Middleman
   module SocialImage
-    VERSION = '0.0.1'.freeze
+    VERSION = '0.0.6'.freeze
   end
 end

data/middleman-social_image.gemspec

@@ -22,4 +22,8 @@ Gem::Specification.new do |spec|
   spec.bindir        = "exe"
   spec.executables   = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
   spec.require_paths = ["lib"]
+
+  spec.add_dependency( "middleman-core", [ ">= 4.0.0" ] )
+  spec.add_dependency( "capybara" )
+  spec.add_dependency( "selenium-webdriver" )
 end

metadata

@@ -1,15 +1,57 @@
 --- !ruby/object:Gem::Specification
 name: middleman-social_image
 version: !ruby/object:Gem::Version
-  version: 0.0.1
+  version: 0.0.6
 platform: ruby
 authors:
 - Paul McMahon
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2020-05-08 00:00:00.000000000 Z
-dependencies: []
+date: 2020-06-01 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: middleman-core
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 4.0.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 4.0.0
+- !ruby/object:Gem::Dependency
+  name: capybara
+  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: selenium-webdriver
+  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'
 description: 
 email:
 - paul@tokyodev.com
@@ -25,8 +67,10 @@ files:
 - bin/console
 - bin/setup
 - lib/middleman-social_image.rb
-- lib/middleman-social_image/commands.rb
+- lib/middleman-social_image/capybara.rb
+- lib/middleman-social_image/converter.rb
 - lib/middleman-social_image/extension.rb
+- lib/middleman-social_image/resource.rb
 - lib/middleman-social_image/version.rb
 - middleman-social_image.gemspec
 homepage: https://github.com/pwim/middleman-social_image

data/lib/middleman-social_image/commands.rb

@@ -1,39 +0,0 @@
-require 'middleman-cli'
-
-module Middleman
-  module Cli
-    class SocialImage < Thor::Group
-      include Thor::Actions
-
-      check_unknown_options!
-
-      namespace :social_image
-
-      def self.exit_on_failure?
-        true
-      end
-
-      def social_image
-        app = ::Middleman::Application.new do
-          config[:mode]              = :config
-          config[:watcher_disable]   = true
-        end
-        options = app.extensions[:social_image].options
-        app.sitemap.resources.each do |resource|
-          if resource.url =~ options.social_image_url_pattern
-            image_path = File.join(app.source_dir, options.base_asset_dir, resource.url.sub(options.social_image_url_pattern, options.social_image_url_substitution))
-            if File.exists?(image_path)
-              say "Image for #{resource.url} already generated, skipping."
-            else
-              FileUtils.mkdir_p(File.dirname(image_path))
-              url = File.join(options.base_url, resource.url)
-              run "#{options.path_to_chrome}  --headless --disable-gpu --screenshot=#{image_path} --window-size=#{options.window_size} #{url}"
-            end
-          end
-        end
-      end
-    end
-
-    Base.register(Middleman::Cli::SocialImage, 'social_image', 'social_image [options]', 'Generates social images.')
-  end
-end