Add screenshot generator for themes (and screenshots themselves)

Gemfile

@@ -15,3 +15,7 @@ gem "wdm", "~> 0.1.0", :platforms => [:mswin, :mingw]
 
 # Windows does not come with time zone data
 gem "tzinfo-data", platforms: [:mswin, :mingw]
+
+gem "capybara"
+gem "poltergeist"
+gem "mini_magick"

Gemfile.lock

@@ -7,9 +7,16 @@ GEM
       minitest (~> 5.1)
       thread_safe (~> 0.1)
       tzinfo (~> 1.1)
+    capybara (2.4.4)
+      mime-types (>= 1.16)
+      nokogiri (>= 1.3.3)
+      rack (>= 1.0.0)
+      rack-test (>= 0.5.4)
+      xpath (~> 2.0)
     celluloid (0.16.0)
       timers (~> 4.0.0)
     chunky_png (1.3.4)
+    cliver (0.3.2)
     coderay (1.1.0)
     coffee-script (2.3.0)
       coffee-script-source
@@ -89,17 +96,27 @@ GEM
       sprockets (~> 2.12.1)
       sprockets-helpers (~> 1.1.0)
       sprockets-sass (~> 1.3.0)
+    mime-types (2.4.3)
+    mini_magick (4.1.0)
+    mini_portile (0.6.2)
     minitest (5.5.1)
     multi_json (1.11.0)
     net-sftp (2.1.2)
       net-ssh (>= 2.6.5)
     net-ssh (2.9.2)
+    nokogiri (1.6.6.2)
+      mini_portile (~> 0.6.0)
     padrino-helpers (0.12.5)
       i18n (~> 0.6, >= 0.6.7)
       padrino-support (= 0.12.5)
       tilt (~> 1.4.1)
     padrino-support (0.12.5)
       activesupport (>= 3.1)
+    poltergeist (1.6.0)
+      capybara (~> 2.1)
+      cliver (~> 0.3.1)
+      multi_json (~> 1.0)
+      websocket-driver (>= 0.2.0)
     pry (0.10.1)
       coderay (~> 1.1.0)
       method_source (~> 0.8.1)
@@ -136,14 +153,22 @@ GEM
     uglifier (2.7.1)
       execjs (>= 0.3.0)
       json (>= 1.8.0)
+    websocket-driver (0.5.3)
+      websocket-extensions (>= 0.1.0)
+    websocket-extensions (0.1.2)
+    xpath (2.0.0)
+      nokogiri (~> 1.3)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
+  capybara
   middleman (~> 3.3.10)
   middleman-deploy (~> 1.0)
   middleman-livereload (~> 3.1.0)
   middleman-pry (~> 0.0.4)
+  mini_magick
+  poltergeist
   tzinfo-data
   wdm (~> 0.1.0)

config.rb

@@ -1,3 +1,4 @@
+require 'lib/screenshot_generator'
 ###
 # Compass
 ###
@@ -55,6 +56,8 @@ set :images_dir, 'images'
 
 # Build-specific configuration
 configure :build do
+  activate :screenshot_generator
+
   # For example, change the Compass output style for deployment
   # activate :minify_css
 

data/themes.yml

@@ -1,84 +1,63 @@
 -
   :name: 'Aubergine'
   :colors: '#4D394B,#3E313C,#4C9689,#FFFFFF,#3E313C,#FFFFFF,#38978D,#EB4D5C'
-  :image_url: 'https://slack.global.ssl.fastly.net/cd60/img/themes/default-thumb.png'
 -
   :name: 'Base16 Eighties Light'
   :colors: '#F2F0EC,#E8E6DF,#F2777A,#FFFFFF,#515151,#515151,#99CC99,#66CCCC'
-  :image_url:
 -
   :name: 'Base16 Eighties Dark'
   :colors: '#393939,#2D2D2D,#F2777A,#FFFFFF,#515151,#D3D0C8,#99CC99,#66CCCC'
-  :image_url:
 -
   :name: 'Base16 Tomorrow Night'
   :colors: '#191A1C,#282A2E,#B6BC68,#FFFFFF,#363B41,#959896,#80A2BE,#C26161'
-  :image_url:
 -
   :name: 'Citrus'
   :colors: '#507800,#94AF63,#FFEA00,#507800,#94AF63,#FFFFFF,#F7FF00,#FF9900'
-  :image_url:
 -
   :name: 'Choco Mint'
   :colors: '#544538,#42362B,#5DB09D,#FFFFFF,#4A3C30,#FFFFFF,#FFFFFF,#5DB09D'
-  :image_url: 'https://slack.global.ssl.fastly.net/1fc1/img/themes/chocolate-thumb.png'
 -
   :name: 'DigitalOcean'
   :colors: '#3686BE,#215F8B,#7DB461,#FFFFFF,#2E3234,#FFFFFF,#7DB461,#215F8B'
-  :image_url:
 -
   :name: 'Hoth'
   :colors: '#F8F8FA,#F8F8FA,#CAD1D9,#FFFFFF,#FFFFFF,#383F45,#60D156,#FF8669'
-  :image_url: 'https://slack.global.ssl.fastly.net/969d/img/themes/hoth-thumb.png'
 -
   :name: 'Juice Bar'
   :colors: '#86A34E,#94AF63,#FFFFFF,#6D8B42,#94AF63,#FFFFFF,#FFB10A,#DFA044'
-  :image_url:
 -
   :name: 'Monokai'
   :colors: '#222222,#2F2F2F,#F92772,#FFFFFF,#A6E22D,#FFFFFF,#66D9EF,#BE84F2'
-  :image_url:
 -
   :name: 'Monument'
   :colors: '#0D7E83,#076570,#F79F66,#FFFFFF,#D37C71,#FFFFFF,#F79F66,#F15340'
-  :image_url: 'https://slack.global.ssl.fastly.net/1fc1/img/themes/monument-thumb.png'
 -
   :name: 'Ochin'
   :colors: '#303E4D,#2C3849,#6698C8,#FFFFFF,#4A5664,#FFFFFF,#94E864,#78AF8F'
-  :image_url: 'https://slack.global.ssl.fastly.net/8239/img/themes/ocean-thumb.png'
 -
   :name: 'Solarized'
   :colors: '#FDF6E3,#EEE8D5,#93A1A1,#FDF6E3,#EEE8D5,#657B83,#2AA198,#DC322F'
-  :image_url:
 -
   :name: 'Solarized Dark'
   :colors: '#073642,#002B36,#B58900,#FDF6E3,#CB4B16,#FDF6E3,#2AA198,#DC322F'
-  :image_url:
 -
   :name: 'Son of Obsidian'
   :colors: '#293134,#2F393C,#293134,#93C763,#2F393C,#81969A,#EC7600,#EC7600'
-  :image_url:
 -
   :name: 'Stark Contrast'
   :colors: '#000000,#A51C24,#FFFFFF,#0320FF,#A5A5A5,#FFFFFF,#FFFFFF,#FFFF00'
-  :image_url:
 -
   :name: 'Summer Craze'
   :colors: '#B300B3,#23A61C,#FFFFFF,#C400FF,#FF2EFF,#000000,#F7FF00,#F7FF00'
-  :image_url:
 -
   :name: 'Tron'
   :colors: '#000000,#000000,#1EB8EB,#000000,#1EB8EB,#FFFFFF,#1EB8EB,#1EB8EB'
-  :image_url:
 -
   :name: 'WameIn'
   :colors: '#BB6A76,#AD5B67,#62B791,#FFFFFF,#A5516A,#FFFFFF,#68F798,#694464'
-  :image_url:
 -
   :name: 'Wegman'
   :colors: '#E3DAE6,#B49FC2,#5A30B0,#FDF6E3,#EEE8D5,#594275,#B358BF ,#BD72CC'
-  :image_url:
 -
   :name: 'Work Hard'
   :colors: '#4D5250,#444A47,#D39B46,#FFFFFF,#434745,#FFFFFF,#99D04A,#DB6668'
-  :image_url: 'https://slack.global.ssl.fastly.net/3197/img/themes/workhard-thumb.png'

lib/screenshot.rb

@@ -0,0 +1,48 @@
+require 'middleman'
+require 'capybara'
+require 'capybara/poltergeist'
+require 'mini_magick'
+
+class Screenshot
+  include Capybara::DSL
+  attr_accessor :theme, :theme_name
+
+  def self.prepare
+    Capybara.register_driver :poltergeist do |app|
+      Capybara::Poltergeist::Driver.new(app, window_size: [1280, 768])
+    end
+    Capybara.default_driver = :poltergeist
+    Capybara.app = ::Middleman::Application.server.inst do
+      set :root, File.expand_path(File.join(File.dirname(__FILE__), '..'))
+      set :environment, :development
+      set :show_exceptions, false
+    end
+  end
+
+  def initialize(theme_name)
+    @theme_name = theme_name
+    @theme = theme_name.parameterize.underscore
+  end
+
+  def generate_theme_image
+    puts "Generating image for theme #{theme_name}"
+    visit '/'
+    within ".theme_#{theme}" do
+      choose 'sidebar_theme_rd'
+    end
+    sleep 1
+    file = Tempfile.new([theme, ".png"])
+    begin
+      page.save_screenshot(file.path, full: true)
+
+      MiniMagick::Tool::Convert.new do |convert|
+        convert << file.path
+        convert.crop '220x220+0+0'
+        convert << "source/images/theme/#{theme}.png"
+      end
+    ensure
+      file.close
+      file.unlink
+    end
+  end
+end

lib/screenshot_generator.rb

@@ -0,0 +1,20 @@
+require 'lib/screenshot'
+
+class ScreenshotGenerator < ::Middleman::Extension
+  include Capybara::DSL
+
+  def initialize(app, options_hash={}, &block)
+    super
+    app.before_build do |builder|
+      Screenshot.prepare
+      data = YAML.load_file('data/themes.yml')
+      data.each do |theme|
+        Screenshot.new(theme[:name]).generate_theme_image
+      end
+      puts "Hello World"
+      # builder.run './my_deploy_script.sh'
+    end
+  end
+end
+
+::Middleman::Extensions.register(:screenshot_generator, ScreenshotGenerator)

source/index.html.erb

@@ -3,8 +3,9 @@ title: Slack Themes
 ---
 
 <% data.themes.each do |theme| %>
-<label class="radio theme_label">
+<% theme_slug = theme[:name].parameterize.underscore %>
-    <img src="<%= theme[:image_url] %>" class="theme_thumb"><br>
+<label class="radio theme_label theme_<%= theme[:name].parameterize.underscore %>">
+    <img src="/images/theme/<%= theme_slug %>.png" class="theme_thumb"><br>
     <input name="sidebar_theme_rd" type="radio" value="<%= theme[:colors] %>" ng-model="theme" ng-change="setTheme()"> <%= theme[:name] %>
 </label>
 <% end %>