Merge pull request #870 from jmerle/sprites

Automatically generate spritesheets

Author: jmerle

Gemfile

@@ -22,6 +22,8 @@ group :app do
   gem 'browser'
   gem 'sass'
   gem 'coffee-script'
+  gem 'chunky_png'
+  gem 'sprockets-sass'
 end
 
 group :production do

Gemfile.lock

@@ -12,6 +12,7 @@ GEM
       erubi (>= 1.0.0)
       rack (>= 0.9.0)
     browser (2.5.3)
+    chunky_png (1.3.10)
     coderay (1.1.2)
     coffee-script (2.4.1)
       coffee-script-source
@@ -96,6 +97,8 @@ GEM
       rack (> 1, < 3)
     sprockets-helpers (1.2.1)
       sprockets (>= 2.2)
+    sprockets-sass (2.0.0.beta2)
+      sprockets (>= 2.0, < 4.0)
     strings (0.1.4)
       strings-ansi (~> 0.1.0)
       unicode-display_width (~> 1.4.0)
@@ -132,6 +135,7 @@ DEPENDENCIES
   activesupport (~> 5.2)
   better_errors
   browser
+  chunky_png
   coffee-script
   erubi
   html-pipeline
@@ -153,6 +157,7 @@ DEPENDENCIES
   sinatra-contrib
   sprockets
   sprockets-helpers
+  sprockets-sass
   thin
   thor
   tty-pager

assets/images/.gitignore

@@ -0,0 +1 @@
+sprites/**/*

assets/images/docs-1.png

@@ -1,7 +1,6 @@
-//= depend_on docs-1.png
-//= depend_on [email protected]
-//= depend_on docs-2.png
-//= depend_on [email protected]
+//= depend_on sprites/docs.png
+//= depend_on sprites/[email protected]
+//= depend_on sprites/docs.json
 
 /*!
  * Copyright 2013-2019 Thibaut Courouble and other contributors

assets/images/[email protected]

@@ -0,0 +1,43 @@
+<% manifest = JSON.parse(File.read('assets/images/sprites/docs.json')) %>
+
+%svg-icon {
+  display: inline-block;
+  vertical-align: top;
+  width: 1rem;
+  height: 1rem;
+  pointer-events: none;
+  fill: currentColor;
+}
+
+%doc-icon {
+  content: '';
+  display: block;
+  width: 1rem;
+  height: 1rem;
+  background-image: image-url('sprites/docs.png');
+  background-size: <%= manifest['icons_per_row'] %>rem <%= manifest['icons_per_row'] %>rem;
+}
+
+@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
+  %doc-icon { background-image: image-url('sprites/[email protected]'); }
+}
+
+html._theme-dark {
+  %darkIconFix {
+    filter: invert(100%) grayscale(100%);
+    -webkit-filter: invert(100%) grayscale(100%);
+  }
+}
+
+<%=
+  items = []
+
+  manifest['items'].each do |item|
+    rules = []
+    rules << "background-position: -#{item['col']}rem -#{item['row']}rem;"
+    rules << "@extend %darkIconFix !optional;" if item['dark_icon_fix']
+    items << "._icon-#{item['type']}:before { #{rules.join(' ')} }"
+  end
+
+  items.join('')
+ %>