middleman-inline_svg 0.1.1 → 0.1.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (8) hide show
  1. checksums.yaml +4 -4
  2. data/LICENSE.md +21 -0
  3. data/README.md +122 -0
  4. data/lib/middleman-inline_svg/inline_svg.rb +6 -8
  5. data/lib/middleman-inline_svg/middleman-inline_svg.rb +11 -3
  6. data/middleman-inline_svg.gemspec +1 -1
  7. data/test/middleman-inline_svg/inline_svg_test.rb +4 -4
  8. metadata +3 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 2b1a85d31921e16243ef81d9922f15d7d473977c486a672b724b0cf2cd96b7a6
4
- data.tar.gz: d405a91fc7d9738e8e24eb347233b5018918cf75949808835284c57b5632fbfb
3
+ metadata.gz: fc7f910f04d36f40f840fe8763c4928479d1b813524474126db64d06b9206bcd
4
+ data.tar.gz: 60d2fefe630776965dad8d7c054cde4e21f12b5726690fe2e98d776af401399c
5
5
  SHA512:
6
- metadata.gz: 25cac6fc7106c5ba23dfbea1f775b082cd6475270570ee6b23d44ff9485c22250a32fa203ba15f3e68ca09e15d783c72ee24f0833607fe3f763f996e731a38cd
7
- data.tar.gz: 28d907dca651358cb5a507f18da4cd0c72fc3c387ac6fbc2a86193fc3545488d0ae4b118aaf33e5517e4c69be157c7ad0fe98c37d49b58790206ec6b5a41316a
6
+ metadata.gz: 8f05e76a64e501344404bb71812e51883d23a28c514582587ddc4252fc6bdd28e5183e4ff75a56d2e4a5a4372d5d305cfc9bd8db26e6dc17b82250e2490daed6
7
+ data.tar.gz: c8350aedb7f092f1a187a06b9a4ba554ccd01bb2b8f30742d824cf1e74f77dbe0cedc8614513638013de2391c4219b403696f30a3e1722c944cdba50e898874d
data/LICENSE.md ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright © 2017 Daniel Barber, Tyson Gach and thoughtbot, inc.
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
data/README.md CHANGED
@@ -2,3 +2,125 @@
2
2
 
3
3
  [![CircleCI](https://circleci.com/gh/thoughtbot/middleman-inline_svg.svg?style=svg)](https://circleci.com/gh/thoughtbot/middleman-inline_svg)
4
4
 
5
+ A [Middleman] extension that enables the inlining of SVG's. This gives us the
6
+ ability to style those SVG's using standard CSS.
7
+
8
+ ## Installation
9
+
10
+ 1. Add middleman-inline_svg to your `Gemfile`:
11
+
12
+ ```ruby
13
+ gem "middleman-inline_svg"
14
+ ```
15
+
16
+ 1. Install the gem:
17
+
18
+ ```bash
19
+ bundle install
20
+ ```
21
+
22
+ 1. Activate the extension in `config.rb`:
23
+
24
+ ```ruby
25
+ activate :inline_svg
26
+ ```
27
+
28
+ ## Usage
29
+
30
+ `middleman-inline_svg` provides an `inline_svg` helper that you can use in your
31
+ templates. Using it will inline your SVG markup directly into the HTML enabling
32
+ you to style it with CSS.
33
+
34
+ Given the following SVG file named `ruby.svg`:
35
+
36
+ ```xml
37
+ <?xml version="1.0" encoding="UTF-8"?>
38
+ <svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
39
+ <g id="ruby" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
40
+ <!-- ... -->
41
+ </g>
42
+ </svg>
43
+ ```
44
+
45
+ And the following code in a Middleman template:
46
+
47
+ ```erb
48
+ <a>
49
+ <%= inline_svg "ruby.svg" %> Ruby
50
+ </a>
51
+ ```
52
+
53
+ Middleman will output the following:
54
+
55
+ ```html
56
+ <a>
57
+ <svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
58
+ <g id="ruby" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
59
+ <!-- ... -->
60
+ </g>
61
+ </svg>
62
+ Ruby
63
+ </a>
64
+ ```
65
+
66
+ It's possible to specify a title for the SVG. And any other options passed will
67
+ be rendered as attributes on the `<svg/>` element. Adding a title to your SVG
68
+ will improve accessibility.
69
+
70
+ ```erb
71
+ <a>
72
+ <%= inline_svg "ruby.svg",
73
+ title: "Ruby logo",
74
+ class: "ruby-logo",
75
+ role: "img" %>
76
+ Ruby
77
+ </a>
78
+ ```
79
+
80
+ ```html
81
+ <a>
82
+ <svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="ruby-logo" role="img">
83
+ <title>Ruby logo</title>
84
+ <g id="ruby" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
85
+ <!-- ... -->
86
+ </g>
87
+ </svg>
88
+ Ruby
89
+ </a>
90
+ ```
91
+
92
+ Underscores are translated into hyphens in the output.
93
+
94
+ ```erb
95
+ <a>
96
+ <%= inline_svg "ruby.svg",
97
+ title: "Ruby logo",
98
+ class: "ruby-logo",
99
+ aria_hidden: true %>
100
+ Ruby
101
+ </a>
102
+ ```
103
+
104
+ ```html
105
+ <a>
106
+ <svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true">
107
+ <g id="ruby" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
108
+ <!-- ... -->
109
+ </g>
110
+ </svg>
111
+ Ruby
112
+ </a>
113
+ ```
114
+
115
+ ## Configuration
116
+
117
+ You can configure the default attributes/title in the Middleman `config.rb` file
118
+ when the extension is activated:
119
+
120
+ ```ruby
121
+ activate :inline_svg do |config|
122
+ config.defaults = {
123
+ role: img
124
+ }
125
+ end
126
+ ```
data/lib/middleman-inline_svg/inline_svg.rb CHANGED
@@ -1,16 +1,16 @@
1
1
  require "nokogiri"
2
2
 
3
3
  class InlineSVG
4
- attr_reader :file_name, :options, :title
4
+ attr_reader :file, :options, :title
5
5
 
6
- def initialize(file_name, options = {})
7
- @file_name = file_name
6
+ def initialize(file, options = {})
7
+ @file = file
8
8
  @title = options.delete(:title)
9
9
  @options = options
10
10
  end
11
11
 
12
12
  def to_html
13
- doc = asset_doc(file_name)
13
+ doc = asset_doc(file)
14
14
  svg = doc.at_css("svg")
15
15
 
16
16
  if title
@@ -34,9 +34,7 @@ class InlineSVG
34
34
  svg.prepend_child(title_node)
35
35
  end
36
36
 
37
- def asset_doc(file_name)
38
- File.open(file_name) do |f|
39
- ::Nokogiri::XML(f)
40
- end
37
+ def asset_doc(file)
38
+ ::Nokogiri::XML(file)
41
39
  end
42
40
  end
data/lib/middleman-inline_svg/middleman-inline_svg.rb CHANGED
@@ -3,17 +3,25 @@ require "middleman-inline_svg/inline_svg"
3
3
  class MiddlemanInlineSVG < ::Middleman::Extension
4
4
  expose_to_template :inline_svg
5
5
 
6
+ option :defaults, {}, "Default options for the svg"
7
+
6
8
  def initialize(app, options_hash = {}, &block)
7
9
  super
8
10
  end
9
11
 
10
- def inline_svg(file_name, options = {})
11
- InlineSVG.new(asset_file(file_name), options).to_html
12
+ def inline_svg(file_name, opts = {})
13
+ opts = options.defaults.merge(opts)
14
+
15
+ InlineSVG.new(asset_file(file_name), opts).to_html
12
16
  end
13
17
 
14
18
  private
15
19
 
16
20
  def asset_file(file_name)
17
- File.join(app.config[:source], app.config[:images_dir], file_name)
21
+ File.open(File.join(file_path, file_name))
22
+ end
23
+
24
+ def file_path
25
+ File.join(app.config[:source], app.config[:images_dir])
18
26
  end
19
27
  end
data/middleman-inline_svg.gemspec CHANGED
@@ -4,7 +4,7 @@ $:.push File.expand_path("lib", __dir__)
4
4
 
5
5
  Gem::Specification.new do |s|
6
6
  s.name = "middleman-inline_svg"
7
- s.version = "0.1.1"
7
+ s.version = "0.1.2"
8
8
  s.platform = Gem::Platform::RUBY
9
9
  s.authors = ["Daniel Barber", "Tyson Gach"]
10
10
  s.email = ["github@danbarber.me", "tyson@thoughtbot.com"]
data/test/middleman-inline_svg/inline_svg_test.rb CHANGED
@@ -5,7 +5,7 @@ require_relative "../../lib/middleman-inline_svg/inline_svg"
5
5
  class TestInlineSVG < Minitest::Test
6
6
  def test_it_adds_a_title
7
7
  new_svg = InlineSVG.new(
8
- "test/fixtures/circle.svg",
8
+ File.open("test/fixtures/circle.svg"),
9
9
  title: "Circle",
10
10
  ).to_html
11
11
 
@@ -20,7 +20,7 @@ class TestInlineSVG < Minitest::Test
20
20
 
21
21
  def test_it_adds_a_class
22
22
  new_svg = InlineSVG.new(
23
- "test/fixtures/circle.svg",
23
+ File.open("test/fixtures/circle.svg"),
24
24
  class: "circle",
25
25
  ).to_html
26
26
 
@@ -35,7 +35,7 @@ class TestInlineSVG < Minitest::Test
35
35
 
36
36
  def test_it_adds_multiple_attributes
37
37
  new_svg = InlineSVG.new(
38
- "test/fixtures/circle.svg",
38
+ File.open("test/fixtures/circle.svg"),
39
39
  class: "circle",
40
40
  role: "img",
41
41
  id: "circle",
@@ -52,7 +52,7 @@ class TestInlineSVG < Minitest::Test
52
52
 
53
53
  def test_it_transforms_attribute_names
54
54
  new_svg = InlineSVG.new(
55
- "test/fixtures/circle.svg",
55
+ File.open("test/fixtures/circle.svg"),
56
56
  aria_hidden: true,
57
57
  ).to_html
58
58
 
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: middleman-inline_svg
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.1
4
+ version: 0.1.2
5
5
  platform: ruby
6
6
  authors:
7
7
  - Daniel Barber
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2018-04-10 00:00:00.000000000 Z
12
+ date: 2018-04-30 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: middleman-core
@@ -50,6 +50,7 @@ files:
50
50
  - ".circleci/config.yml"
51
51
  - ".gitignore"
52
52
  - Gemfile
53
+ - LICENSE.md
53
54
  - README.md
54
55
  - Rakefile
55
56
  - features/support/env.rb