middleman-social_image 0.0.2 → 0.0.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b385845fc4206a82deb572478bead5cfe8eed70c74757bf128e611179987c310
-  data.tar.gz: 84bdf82a6bfe4314c73322d2ae664a802cf3c90788e0af26a2750cb7496cb56b
+  metadata.gz: 6903e2e4c9c370bcff55abbc8ffd6a6d2333b67db7d3fe127b6ebb0b4d3b1ec9
+  data.tar.gz: a4b1388cdd36533812451638ecb7651c40ef898bdf3d9f6e714c7b82304a29b2
 SHA512:
-  metadata.gz: 0cf692ac57d02ba0f7c69009cc365ced16a8f9b75d3809b70e1d8e319c0f4542065fae4aa5dcc1e85c34f3c5960c14e75b292b7465debb82dcc9c33b2af309bc
-  data.tar.gz: f68d00fa0cf0ff4ead068b2baac8f0a1be7ca00ce7d72c51e2d18f362ed37e733aa01bb2e586e415abd79eb075c70fb9491f750deb70330db154447834c358a7
+  metadata.gz: 1da14d580fce03713d103ab310067911ff16030e56334cf287797ed9a859ad798dabd4cfdb1906464d39a552d4787a10c069d67489242c6e3fe51343800989b0
+  data.tar.gz: 523f65bd90f08997969ea286454551566657fa3b189856e12e0ce2b4b12d533a55c00ee240e4a129a676b9cc98015db15e2d98b3529028ad473d5445700df432

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
 
@@ -25,17 +31,21 @@ Optionally, you can configure this extension with the following (defaults are sh
 ```ruby
 activate :social_image do |social_image|
   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.always_generate = true # Always regenerate images. Takes a long time, but ensures any changes are reflected.
+  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,42 @@
+require "middleman-social_image/capybara"
+class Middleman::SocialImage::Converter
+  def initialize(app, window_size, selector, always_generate, base_url)
+    @app = app
+    @window_size = window_size
+    @selector = selector
+    @always_generate = always_generate
+    @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)
+    if File.exist?(image_path) && !@always_generate
+      @app.logger.debug "== social_image: skipping #{resource.path} as already in cache"
+    else
+      @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
+  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,10 +1,64 @@
 require 'middleman-core'
-require 'middleman-social_image/commands'
 
 class Middleman::SocialImage::Extension < ::Middleman::Extension
   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 :always_generate, true
+  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.always_generate, 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.2'.freeze
+    VERSION = '0.0.7'.freeze
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: middleman-social_image
 version: !ruby/object:Gem::Version
-  version: 0.0.2
+  version: 0.0.7
 platform: ruby
 authors:
 - Paul McMahon
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2020-05-12 00:00:00.000000000 Z
+date: 2020-06-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: middleman-core
@@ -67,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,55 +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
-        require "capybara"
-        app = ::Middleman::Application.new do
-          config[:mode]              = :config
-          config[:watcher_disable]   = true
-        end
-        options = app.extensions[:social_image].options
-        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 << "--window-size=#{options.window_size}"
-            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
-        session = Capybara::Session.new(:selenium_chrome_headless)
-
-        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 "Skipping #{image_path} as already generated"
-            else
-              say "Generating #{image_path}"
-              FileUtils.mkdir_p(File.dirname(image_path))
-              url = File.join(options.base_url, resource.url)
-              session.visit(url)
-              session.save_screenshot(image_path)
-            end
-          end
-        end
-      end
-    end
-
-    Base.register(Middleman::Cli::SocialImage, 'social_image', 'social_image [options]', 'Generates social images.')
-  end
-end