Merge pull request #835 from cantino/site-icons

Declare the site icons in various sizes

Gemfile

@@ -76,6 +76,7 @@ gem 'jsonpath', '~> 0.5.6'
 gem 'kaminari', '~> 0.16.1'
 gem 'kramdown', '~> 1.3.3'
 gem 'liquid', '~> 2.6.1'
+gem 'mini_magick'
 gem 'mysql2', '~> 0.3.16'
 gem 'multi_xml'
 gem 'nokogiri', '~> 1.6.4'

Gemfile.lock

@@ -252,6 +252,7 @@ GEM
       thread_safe (~> 0.3, >= 0.3.1)
     method_source (0.8.2)
     mime-types (2.5)
+    mini_magick (4.2.3)
     mini_portile (0.6.2)
     minitest (5.5.1)
     mqtt (0.3.1)
@@ -533,6 +534,7 @@ DEPENDENCIES
   kaminari (~> 0.16.1)
   kramdown (~> 1.3.3)
   liquid (~> 2.6.1)
+  mini_magick
   mqtt
   multi_xml
   mysql2 (~> 0.3.16)

app/views/layouts/application.html.erb

@@ -9,6 +9,19 @@
     <%= stylesheet_link_tag    "application", :media => "all" %>
     <%= javascript_include_tag "application" %>
     <%= csrf_meta_tags %>
+    <link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
+    <link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
+    <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
+    <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
+    <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
+    <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
+    <link rel="icon" type="image/vnd.microsoft.icon" href="/favicon.ico" sizes="16x16">
+    <link rel="icon" type="image/png" href="/android-chrome-48x48.png" sizes="48x48">
+    <link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
+    <link rel="manifest" href="/manifest.json">
     <%= yield(:ace_editor_script) %>
     <%= yield(:head) %>
   </head>

lib/tasks/icon.rake

@@ -0,0 +1,104 @@
+ICONS_DIR      = 'public'
+ORIGINAL_IMAGE = 'media/huginn-icon-square.svg'
+
+desc "Generate site icons from #{ORIGINAL_IMAGE}"
+task :icons => 'icon:all'
+
+namespace :icon do
+  # iOS
+  task :all => :ios
+
+  [
+    57, 114,
+    60, 120, 180,
+    72, 144,
+    76, 152,
+  ].each do |width|
+    sizes = '%1$dx%1$d' % width
+    filename = "apple-touch-icon-#{sizes}.png"
+    icon = File.join(ICONS_DIR, filename)
+
+    file icon => ORIGINAL_IMAGE do |t|
+      puts "Generating #{t.name}"
+      convert_image t.source, t.name, width: width
+    end
+
+    task :ios => icon
+  end
+
+  # Android
+  task :all => :android
+
+  android_icons = [
+    36, 72, 144,
+    48, 96, 192,
+  ].map do |width|
+    sizes = '%1$dx%1$d' % width
+    filename = "android-chrome-#{sizes}.png" % width
+    icon = File.join(ICONS_DIR, filename)
+
+    file icon => ORIGINAL_IMAGE do |t|
+      puts "Generating #{t.name}"
+      convert_image t.source, t.name, width: width, round: true
+    end
+
+    task :android => icon
+
+    {
+      src: "/#{filename}",
+      sizes: sizes,
+      type: 'image/png',
+      density: (width / 48.0).to_s,
+    }
+  end
+
+  manifest = File.join(ICONS_DIR, 'manifest.json')
+
+  file manifest => __FILE__ do |t|
+    puts "Generating #{t.name}"
+    require 'json'
+    json = {
+      name: 'Huginn',
+      icons: android_icons
+    }
+    File.write(t.name, JSON.pretty_generate(json))
+  end
+
+  task :android => manifest
+end
+
+require 'mini_magick'
+
+def convert_image(source, target, width: nil, round: false)
+  ext = target[/(?<=\.)[^.]+\z/] || 'png'
+  original = MiniMagick::Image.open(source)
+
+  result = original
+  result.format ext
+
+  if width
+    result.thumbnail '%1$dx%1$d>' % width
+  else
+    width = result[:width]
+  end
+
+  if round
+    radius = (Rational(80, 512) * width).round
+
+    mask = MiniMagick::Image.create(ext) { |tmp| result.write(tmp) }
+
+    mask.mogrify do |image|
+      image.alpha 'transparent'
+      image.background 'none'
+      image.fill 'white'
+      image.draw 'roundrectangle 0,0,%1$d,%1$d,%2$d,%2$d' % [width, radius]
+    end
+
+    result = result.composite(mask) do |image|
+      image.alpha 'set'
+      image.compose 'DstIn'
+    end
+  end
+
+  result.write(target)
+end

public/manifest.json

@@ -0,0 +1,41 @@
+{
+  "name": "Huginn",
+  "icons": [
+    {
+      "src": "/android-chrome-36x36.png",
+      "sizes": "36x36",
+      "type": "image/png",
+      "density": "0.75"
+    },
+    {
+      "src": "/android-chrome-48x48.png",
+      "sizes": "48x48",
+      "type": "image/png",
+      "density": "1.0"
+    },
+    {
+      "src": "/android-chrome-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "density": "1.5"
+    },
+    {
+      "src": "/android-chrome-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "density": "2.0"
+    },
+    {
+      "src": "/android-chrome-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "density": "3.0"
+    },
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "density": "4.0"
+    }
+  ]
+}