jekyll-inline-svg 0.0.2 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 54bf469b224e7c7af5dd5168fa7f417cde9aefe8
-  data.tar.gz: 6419acd66b53406b7d62633a11fb6e439a5c9945
+  metadata.gz: 5f7ec02900a1781590f77c085955e691f67c2413
+  data.tar.gz: c85d53a5af01ba620036633997fbf3573143650d
 SHA512:
-  metadata.gz: e4ef60f184b0179b254afa2cb641a87b52d51dae78c6a87123aa1e3be9b3aa276f69fd81dd340f524ab1491d73387475be1eaf2df49bbe821627cefb225ec71d
-  data.tar.gz: 8692d77303fb7400b35705ced6a9bc1a7f654a976088777b6e6b544f5494542f6bb152be76e3dda94351e06edb60b467e8c5ed243e476840f29b36d452014c24
+  metadata.gz: e07e67d5aaf9eb24629a31dbaaa9b76e4224c8b6ef517967944fe1b784aff9180deb4d09d0542b9852d4a6f69104dda173d722e8b76628b051c0fac846a80f1d
+  data.tar.gz: 7c82653e38eaafd4f2dba396e8bc09fd06154318d14cc7609125d9cb9c077d564a051fb0ecbd5f8b6f6d89add676f942810b9bdd1c5e3dacf06d9a9043d5f984

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    jekyll-inline-svg (0.0.1)
+    jekyll-inline-svg (0.0.2)
       jekyll (~> 3.3)
       svg_optimizer (= 0.1.0)
 

data/README.md

@@ -15,6 +15,13 @@ gems:
   - jekyll-inline-svg
 ```
 
+Optimization is opt-in and can be enabled by adding this to your `_config.yml`
+
+```
+svg:
+  optimize: true
+```
+
 ## Usage
 
 Use the Liquid tag in your pages :
@@ -48,6 +55,9 @@ Liquid variables will be interpreted if enclosed in double brackets :
 {% assign size=40 %}
 {% svg "/path/to/{{site.foo-name}}.svg" width="{{size}}" %}
 ```
+`height` is automatically set to match `width` if omitted. It can't be left unset because IE11 won't use the viewport attribute to calculate the image's aspect ratio.
+
+
 
 Relative paths and absolute paths will both be interpreted from Jekyll's configured [source directory](https://jekyllrb.com/docs/configuration/). So both :
 
@@ -74,3 +84,10 @@ Some processing is done to remove useless data :
 If any important data gets removed, or the output SVG looks different from input, it's a bug. Please file an issue to this repository describing your problem.
 
 It does not perform any input validation on attributes. They will be appended as-is to the root node.
+
+## Motivations
+
+This has been creeated specifically to display svg icons in html pages.
+
+PNG/BMP sprites are clearly a no go in a world where "a screen" can be anything from 4" to 150", ranging from 480p to 4k. So what are our vector alternatives?
+Font-icons are [bad](https://cloudfour.com/thinks/seriously-dont-use-icon-fonts/). While **xlink** looks like an ideal solution, with an elegant : `<use xlink:href="/path/to/icons.svg#play"></use>`, it's badly supported in IE (up to ie11). And embedding SVGs in an `<img>` is not going to cut it. Inlined SVG icons, in my opinion, is the best option we got right now. It's also where the industry seems to be going, with big actors like [github](https://github.com/blog/2112-delivering-octicons-with-svg) starting to transition from font-icons to inlined SVG.

data/jekyll-inline-svg.gemspec

@@ -7,7 +7,7 @@ Gem::Specification.new do |spec|
   A Liquid tag to inline and optimize SVG images in your HTML
   Supports custom DOM Attributes parameters and variables interpretation.
   EOF
-  spec.version     = "0.0.2"
+  spec.version     = "1.0.0"
   spec.authors     = ["Sebastien DUMETZ"]
   spec.email       = "s.dumetz@holusion.com"
   spec.homepage    = "https://github.com/sdumetz/jekyll-inline-svg"

data/lib/jekyll-inline-svg.rb

@@ -1,21 +1,14 @@
+require "nokogiri"
 require 'svg_optimizer'
 require 'jekyll/liquid_extensions'
-class RemoveSize < SvgOptimizer::Plugins::Base
-  # remove "width" and "height" attributes
-  def process
-    xml.root.remove_attribute("height")
-    xml.root.remove_attribute("width")
-  end
-end
+
 PLUGINS_BLACKLIST = [
   SvgOptimizer::Plugins::CleanupId,
 ]
 
 PLUGINS = SvgOptimizer::DEFAULT_PLUGINS.delete_if {|plugin|
   PLUGINS_BLACKLIST.include? plugin
-}+[
-  RemoveSize
-]
+}
 
 
 module Jekyll
@@ -33,10 +26,13 @@ module Jekyll
         ^(?<path>[^\s"']+|"[^"]*"|'[^']*')
         (?<params>.*)
       !x
+      PARAM_SYNTAX= %r!
+        ([\w-]+)\s*=\s*
+        (?:"([^"\\]*(?:\\.[^"\\]*)*)"|'([^'\\]*(?:\\.[^'\\]*)*)'|([\w\.-]+))
+      !x
 
       def initialize(tag_name, input, tokens)
         super
-
         @svg, @params = JekyllInlineSvg.parse_params(input)
       end
 
@@ -47,23 +43,68 @@ module Jekyll
         end
         markup
       end
-
+      def split_params(markup, context)
+        params={}
+        while (match = PARAM_SYNTAX.match(markup))
+          markup = markup[match.end(0)..-1]
+          value = if match[2]
+            interpolate(match[2].gsub(%r!\\"!, '"'), context)
+          elsif match[3]
+            interpolate(match[3].gsub(%r!\\'!, "'"),context)
+          elsif match[4]
+            lookup_variable(context, match[4])
+          end
+          params[match[1]] = value
+        end
+        return params
+      end
       #Parse parameters. Returns : [svg_path, parameters]
       # Does not interpret variables as it's done at render time
       def self.parse_params(input)
         matched = input.strip.match(PATH_SYNTAX)
-        return matched["path"].gsub("\"","").gsub("'","").strip, matched["params"].strip
+        path = matched["path"].gsub("\"","").gsub("'","").strip
+        markup = matched["params"].strip
+        return path, markup
+      end
+      def fmt(params)
+        r = params.to_a.select{|v| v[1] != ""}.map {|v| %!#{v[0]}="#{v[1]}"!}
+        r.join(" ")
+      end
+      def create_plugin(params)
+        mod = Class.new(SvgOptimizer::Plugins::Base) do
+          def self.set (p)
+            @@params = p
+          end
+          def process
+            @@params.each {|key,val| xml.root.set_attribute(key,val)}
+            return xml
+          end
+        end
+        mod.set(params)
+        return mod
       end
       def render(context)
         #global site variable
         site = context.registers[:site]
         #check if given name is a variable. Otherwise use it as a file name
         svg_file = Jekyll.sanitized_path(site.source, interpolate(@svg,context))
-        params = interpolate(@params,context)
-
-        xml = File.open(svg_file, "rb")
-        optimized = SvgOptimizer.optimize(xml.read, PLUGINS)
-  	    "#{optimized.sub("<svg ","<svg #{params} ")}"
+        #replace variables with their current value
+        params = split_params(@params,context)
+        #because ie11 require to have a height AND a width
+        if params.key? "width" and ! params.key? "height"
+          params["height"] = params["width"]
+        end
+        #params = @params
+        file = File.open(svg_file, "rb").read
+        conf = lookup_variable(context,"site.svg")
+        if conf["optimize"] == true
+          xml = SvgOptimizer.optimize(file, [create_plugin(params)] + PLUGINS)
+        else
+          xml = Nokogiri::XML(file)
+          params.each {|key,val| xml.root.set_attribute(key,val)}
+          xml = xml.to_xml
+        end
+  	    return xml
       end
     end
   end

data/spec/fixtures/_config.yml

@@ -7,8 +7,3 @@ defaults:
       type: page
     values:
       layout: default
-  -
-    scope:
-      path: "static_files/excluded.pdf"
-    values:
-      sitemap: false

data/spec/fixtures/files/square.svg

@@ -2,4 +2,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 24 24" width="150" height="150">
   <rect width="20" height="20" x="2" y="2" />
+  <!-- comment -->
 </svg>

data/spec/fixtures/index.html

@@ -7,6 +7,12 @@ Hello world
 {% svg files/square.svg %}
 </div>
 
+<div id="height">
+{% svg files/square.svg  width=24 %}
+{% svg files/square.svg  width=24 height=48 %}
+{% svg files/square.svg  width=24 height="" %}
+</div>
+
 <div id="path">
   <label>Resolve relative and absolute paths to site's source</label>
   {% svg files/square.svg %}
@@ -24,3 +30,7 @@ Hello world
   {% svg /files/{{page.svgname}}.svg %}
   {% svg /files/square.svg id="name-{{page.svgname}}" class="class-{{page.svgclass}}" %}
 </div>
+
+<div id="optimize">
+  {% svg /files/{{page.svgname}}.svg data-foo="" %}
+</div>

data/spec/jekyll-inline-svg_spec.rb

@@ -45,50 +45,74 @@ describe(Jekyll::Tags::JekyllInlineSvg) do
       expect(params).to eq("id='bar' style=\"hello\"")
     end
   end
+  [
+    Jekyll.configuration({
+      "source"      => source_dir,
+      "destination" => dest_dir,
+      "url"         => "http://example.org",
+    }),
+    Jekyll.configuration({
+      "source"      => source_dir,
+      "destination" => dest_dir,
+      "url"         => "http://example.org",
+      "svg"         => { "optimize" => true}
+    })
+  ].each do |config|
+    is_opt = config["svg"] and config["svg"]["optimize"] == true
+    describe "Integration (with #{is_opt ? "" : "no"} optimisation)" do
+      before(:context) do
+        site = Jekyll::Site.new(config)
+        site.process
+        @data = parse("index.html")
+        @base = @data.css("#base").css("svg").first
+      end
+      it "render site" do
+        expect(File.exist?(dest_dir("index.html"))).to be_truthy
+      end
+      it "exports svg" do
+        data = @data.xpath("//svg")
+        expect(data).to be_truthy
+        expect(data.first).to be_truthy
+        expect(@base).to be_truthy
+        # Do not strip other width and height attributes
+      end
+      it "add a height if only width is given" do
+        data = @data.css("#height").css("svg")
+        expect(data).to be_truthy
+        expect(data[0].get_attribute("height")).to eql("24")
+        expect(data[0].get_attribute("width")).to eql("24")
+        # do not set height if given
+        expect(data[1].get_attribute("height")).to eql("48")
+        expect(data[1].get_attribute("width")).to eql("24")
+        #do not set height if forced to empty string
+        expect(data[2].get_attribute("height")).to is_opt ? be_falsy : eql("")
 
-  describe "Integration" do
-
-    before(:context) do
-      config = Jekyll.configuration({
-        "source"      => source_dir,
-        "destination" => dest_dir,
-        "url"         => "http://example.org",
-      })
-      site = Jekyll::Site.new(config)
-      site.process
-      @data = parse("index.html")
-      @base = @data.css("#base").css("svg").first
-    end
-    it "render site" do
-      expect(File.exist?(dest_dir("index.html"))).to be_truthy
-    end
-    it "exports svg" do
-      data = @data.xpath("//svg")
-      expect(data).to be_truthy
-      expect(data.first).to be_truthy
-      expect(@base).to be_truthy
-      expect(@base["width"]).to be_falsy #width property should be stripped
-      expect(@base["height"]).to be_falsy
-      # Do not strip other width and height attributes
-    end
-    it "parse relative paths" do
-      data = @data.css("#path").css("svg")
-      expect(data.size).to eq(2)
-      expect(data[0].to_html).to eq(data[1].to_html) #should use to_xml?
-    end
-    it "jails to Jekyll source" do
-      data = @data.css("#jail").css("svg")
-      ref = @base.to_xml
-      expect(data.size).to eq(2)
-      data.each{ |item| expect(item.to_xml).to eql(ref) }
-    end
-    it "interpret variables" do
-      data = @data.css("#interpret").css("svg")
-      ref = @base.to_xml
-      expect(data.size).to eq(2)
-      expect(data[0].to_xml).to eql(ref)
-      expect(data[1].get_attribute("id")).to eql("name-square")
-      expect(data[1].get_attribute("class")).to eql("class-hello")
+        expect(data[2].get_attribute("width")).to eql("24")
+      end
+      it "parse relative paths" do
+        data = @data.css("#path").css("svg")
+        expect(data.size).to eq(2)
+        expect(data[0].to_html).to eq(data[1].to_html) #should use to_xml?
+      end
+      it "jails to Jekyll source" do
+        data = @data.css("#jail").css("svg")
+        ref = @base.to_xml
+        expect(data.size).to eq(2)
+        data.each{ |item| expect(item.to_xml).to eql(ref) }
+      end
+      it "interpret variables" do
+        data = @data.css("#interpret").css("svg")
+        ref = @base.to_xml
+        expect(data.size).to eq(2)
+        expect(data[0].to_xml).to eql(ref)
+        expect(data[1].get_attribute("id")).to eql("name-square")
+        expect(data[1].get_attribute("class")).to eql("class-hello")
+      end
+      it "#{is_opt ? "do" : "do not"} optimize" do
+        data = @data.css("#optimize").css("svg")
+        expect(data.first.get_attribute("data-foo")).to  is_opt ? be_falsy : eql("")
+        expect(data.xpath("//comment()").first).to is_opt ? be_falsy : be_truthy
+      end
     end
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-inline-svg
 version: !ruby/object:Gem::Version
-  version: 0.0.2
+  version: 1.0.0
 platform: ruby
 authors:
 - Sebastien DUMETZ
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-08-22 00:00:00.000000000 Z
+date: 2017-08-31 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll