jekyll-inline-external-svg 1.1.1

data/README.md

@@ -0,0 +1,94 @@
+# jekyll-inline-external-svg
+
+SVG optimizer and inliner for jekyll (with support for external SVG images)
+
+This liquid tag will let you inline SVG images in your jekyll sites. It will add `{%svg %}` to `Liquid::Tag`.
+
+## Installation
+
+Run `gem install jekyll-inline-external-svg` or add `gem "jekyll-inline-external-svg", "~>0.0.1", github: "bih/jekyll-inline-external-svg"` to your **Gemfile**.
+
+Then in your **_config.yml** :
+
+```
+gems:
+  - jekyll-inline-external-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 :
+
+```
+    {% svg /path/to/square.svg width=24 foo="bar" %}
+    {% svg /path/to/square.svg width=24 foo="bar" is_external="true" %}
+```
+
+Jekyll will include the svg file in your output HTML like this :
+
+```
+<svg width=24 foo="bar" version="1.1" id="square" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 24 24" >
+  <rect width="20" height="20" x="2" y="2" />
+</svg>
+```
+
+**Note** : You will generally want to set the width/height of your SVG or a `style` attribute, but anything can be passed through.
+
+Paths with a space should be quoted :
+
+```
+{% svg "/path/to/foo bar.svg" %}
+# or :
+{% svg '/path/to/foo bar.svg' %}
+```
+Otherwise anything after the first space will be considered an attribute.
+
+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 :
+
+```
+    {% svg "/path/to/foo.svg" %}
+    {% svg "path/to/foo.svg"  %}
+```
+
+Should resolve to `/your/site/source/path/to/foo.svg`. As jekyll prevents you from getting out of the source dir, `/../drawing.svg` will also resolve to `./drawing.svg`.
+
+
+## Safety
+
+In [safe mode](https://jekyllrb.com/docs/plugins/) (ie. on github pages), the plugin will be disabled as it's not yet trusted. However it should be "safe" as defined by [Jekyll](https://jekyllrb.com/docs/plugins/) (ie. no arbitrary code execution).
+
+Some processing is done to remove useless data :
+
+- metadata
+- comments
+- unused groups
+- Other filters from [svg_optimizer](https://github.com/fnando/svg_optimizer)
+- default size
+
+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/Rakefile

@@ -0,0 +1,5 @@
+require "rspec/core/rake_task"
+
+RSpec::Core::RakeTask.new(:spec)
+
+task :default => :spec

data/jekyll-inline-external-svg.gemspec

@@ -0,0 +1,27 @@
+# coding: utf-8
+
+Gem::Specification.new do |spec|
+  spec.name        = "jekyll-inline-external-svg"
+  spec.summary     = "A SVG Inliner for Jekyll"
+  spec.description = <<-EOF
+  A Liquid tag to inline and optimize internal/external SVG images in your HTML
+  Supports custom DOM Attributes parameters and variables interpretation.
+  EOF
+  spec.version     = "1.1.1"
+  spec.authors     = ["Sebastien DUMETZ"]
+  spec.email       = "s.dumetz@holusion.com"
+  spec.homepage    = "https://github.com/bih/jekyll-inline-external-svg"
+  spec.licenses    = ["GPL-3.0"]
+
+  spec.files         = `git ls-files -z`.split("\x0")
+  spec.executables   = spec.files.grep(%r!^bin/!) { |f| File.basename(f) }
+  spec.test_files    = spec.files.grep(%r!^(test|spec|features)/!)
+  spec.require_paths = ["lib"]
+
+  spec.add_dependency "jekyll", "~> 3.3"
+  spec.add_dependency 'svg_optimizer', "0.1.0"
+
+  spec.add_development_dependency "rspec", "~> 3.6"
+  spec.add_development_dependency "rake", "~>12.0"
+  spec.add_development_dependency "bundler", "~> 1.15"
+end

data/lib/jekyll-inline-external-svg.rb

@@ -0,0 +1,145 @@
+require "nokogiri"
+require 'svg_optimizer'
+require 'jekyll/liquid_extensions'
+require 'open-uri'
+
+PLUGINS_BLACKLIST = [
+  SvgOptimizer::Plugins::CleanupId,
+]
+
+PLUGINS = SvgOptimizer::DEFAULT_PLUGINS.delete_if {|plugin|
+  PLUGINS_BLACKLIST.include? plugin
+}
+
+
+module Jekyll
+  module Tags
+    class JekyllInlineSvg < Liquid::Tag
+      #import lookup_variable function
+      # https://github.com/jekyll/jekyll/blob/master/lib/jekyll/liquid_extensions.rb
+      include Jekyll::LiquidExtensions
+
+      # For interpoaltion, look for liquid variables
+      VARIABLE = /\{\{\s*([\w]+\.?[\w]*)\s*\}\}/i
+
+      #Separate file path from other attributes
+      PATH_SYNTAX = %r!
+        ^(?<path>[^\s"']+|"[^"]+"|'[^']+')
+        (?<params>.*)
+      !x
+
+      # parse the first parameter in a string, giving :
+      #  [full_match, param_name, double_quoted_val, single_quoted_val, unquoted_val]
+      # The Regex works like :
+      # - first group
+      #    - match a group of characters that is alphanumeric, _ or -.
+      # - second group (non-capturing OR)
+      #    - match a double-quoted string
+      #    - match a single-quoted string
+      #    - match an unquoted string matching the set : [\w\.\-#]
+      PARAM_SYNTAX= %r!
+        ([\w-]+)\s*=\s*
+        (?:"([^"\\]*(?:\\.[^"\\]*)*)"|'([^'\\]*(?:\\.[^'\\]*)*)'|([\w\.\-#]+))
+      !x
+
+      def initialize(tag_name, markup, tokens)
+        super
+        @svg, @params = JekyllInlineSvg.parse_params(markup)
+      end
+
+      #lookup Liquid variables from markup in context
+      def interpolate(markup, context)
+        markup.scan VARIABLE do |variable|
+          markup = markup.sub(VARIABLE, lookup_variable(context, variable.first))
+        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(markup)
+        matched = markup.strip.match(PATH_SYNTAX)
+        if !matched
+          raise SyntaxError, <<~END
+          Syntax Error in tag 'highlight' while parsing the following markup:
+          #{markup}
+          Valid syntax: svg <path> [property=value]
+          END
+        end
+        path = matched["path"].sub(%r!^["']!,"").sub(%r!["']$!,"").strip
+        params = matched["params"].strip
+        return path, params
+      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 add_file_to_dependency(site, path, context)
+        if context.registers[:page] && context.registers[:page].key?("path")
+          site.regenerator.add_dependency(
+            site.in_source_dir(context.registers[:page]["path"]),
+            path
+          )
+        end
+      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))
+        return unless svg_file
+        add_file_to_dependency(site,svg_file, context)
+        #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
+        if params.key? "is_external"
+          file = open(svg_file).read
+        else
+          file = File.open(svg_file, "rb").read
+        end
+        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
+end
+Liquid::Template.register_tag('svg', Jekyll::Tags::JekyllInlineSvg)

data/spec/fixtures/_config.yml

@@ -0,0 +1,9 @@
+timezone: UTC
+
+defaults:
+  -
+    scope:
+      path: ""
+      type: page
+    values:
+      layout: default

data/spec/fixtures/_layouts/default.html

@@ -0,0 +1,4 @@
+---
+---
+THIS IS MY LAYOUT
+{{ content }}

data/spec/fixtures/files/square.svg

@@ -0,0 +1,6 @@
+
+<?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

@@ -0,0 +1,38 @@
+---
+svgname: square
+svgclass: hello
+---
+Hello world
+<div id="base">
+{% 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="attributes">
+  {% svg files/square.svg  role="navigation" data-foo="bar" fill="#ffffff" stroke=#000000 %}
+</div>
+<div id="path">
+  <label>Resolve relative and absolute paths to site's source</label>
+  {% svg files/square.svg %}
+  {% svg /files/square.svg %}
+</div>
+
+<div id="jail">
+  <label>Resolve relative and absolute paths to site's source</label>
+  {% svg /../files/square.svg %}
+  {% svg ../files/square.svg %}
+</div>
+
+<div id="interpret">
+  <label>Interpret embedded variables</label>
+  {% 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

@@ -0,0 +1,129 @@
+# encoding: UTF-8
+
+require 'spec_helper'
+require "nokogiri"
+
+describe(Jekyll::Tags::JekyllInlineSvg) do
+
+  def read(f)
+    File.read(dest_dir(f))
+  end
+  # return an array of the page's svgs
+  def parse(f)
+    Nokogiri::HTML(read(f))
+  end
+
+  describe "#parse_params" do
+    it "parse XML root parameters" do
+      svg, params = Jekyll::Tags::JekyllInlineSvg.parse_params("/path/to/foo size=40 style=\"hello\"")
+      expect(svg).to eq("/path/to/foo")
+      expect(params).to eq("size=40 style=\"hello\"")
+    end
+    it "accepts double quoted path" do
+      svg, params = Jekyll::Tags::JekyllInlineSvg.parse_params("\"/path/to/foo space\"")
+      expect(svg).to eq("/path/to/foo space")
+    end
+    it "accepts single quoted path" do
+      svg, params = Jekyll::Tags::JekyllInlineSvg.parse_params("'/path/to/foo space'")
+      expect(svg).to eq("/path/to/foo space")
+    end
+    it "strip leading and trailing spaces" do
+      svg, params = Jekyll::Tags::JekyllInlineSvg.parse_params(" /path/to/foo ")
+      expect(svg).to eql("/path/to/foo")
+    end
+    # required when a variable is defined with leading/trailing space then embedded.
+    it "strip in-quote leading and trailing spaces" do
+      svg, params = Jekyll::Tags::JekyllInlineSvg.parse_params("'/path/to/foo '")
+      expect(svg).to eql("/path/to/foo")
+    end
+    it "keep Liquid variables" do
+      svg, params = Jekyll::Tags::JekyllInlineSvg.parse_params("/path/to/{{foo}}")
+      expect(svg).to eql("/path/to/{{foo}}")
+    end
+    it "don't parse parameters" do
+      svg, params = Jekyll::Tags::JekyllInlineSvg.parse_params("'/path/to/foo space' id='bar' style=\"hello\"")
+      expect(params).to eq("id='bar' style=\"hello\"")
+    end
+    it "raise error on invalid syntax" do
+      expect {Jekyll::Tags::JekyllInlineSvg.parse_params("")}.to raise_error (SyntaxError)
+    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("")
+
+        expect(data[2].get_attribute("width")).to eql("24")
+      end
+      it "keep attributes" do
+        data = @data.css("#attributes").css("svg")
+        expect(data).to be_truthy
+        expect(data[0].get_attribute("role")).to eql("navigation")
+        expect(data[0].get_attribute("data-foo")).to eql("bar")
+        expect(data[0].get_attribute("fill")).to eql("#ffffff")
+        expect(data[0].get_attribute("stroke")).to eql("#000000")
+      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