svg_hearts_you 0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 1cfb040951e1ad1f610d820f53eb70c852634209
+  data.tar.gz: 0cd23ef733ce5f3ee4f20eb8bf57846ba23d3bab
+SHA512:
+  metadata.gz: 1c03eca824b4cb992e1ce10f1e07386959e30951c0ab1b42b274a97920e9dff8c223fecdc843f278c391892d6f5da5bc283e203d9a2a850407c24e92577611fd
+  data.tar.gz: 06e1dd0fbf5b5383d019cf3346d7b37f5f2d4d1899b5c124b1082b215410083f8275f8e993812d9514569b4c4af7a6ae76d01d8431a441bc737526e4d0019a50

data/.gitignore

@@ -0,0 +1,22 @@
+*.gem
+*.rbc
+.bundle
+.config
+.yardoc
+Gemfile.lock
+InstalledFiles
+_yardoc
+coverage
+doc/
+lib/bundler/man
+pkg
+rdoc
+spec/reports
+test/tmp
+test/version_tmp
+tmp
+*.bundle
+*.so
+*.o
+*.a
+mkmf.log

data/.rspec

@@ -0,0 +1 @@
+--color

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in svg_hearts_you.gemspec
+gemspec

data/LICENSE.txt

@@ -0,0 +1,22 @@
+Copyright (c) 2015 Nathanael Beisiegel
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,265 @@
+<img src="https://cloud.githubusercontent.com/assets/1911028/5623119/0145adf6-951c-11e4-922b-026db7584cd6.png" width="170px" height="228">
+
+# SVG ❤’s You
+
+SVG that you can target with CSS is really great for icons and fun illustrations, but it can be a big headache to get into the DOM from a file made in an editor. It becomes even more clumsy when you want to tweak that file back in a vector image editor and then have to re-copy everything back into the appropriate places. I got sick of doing this, so I created this gem to help include SVG files at the view level.
+
+**SVG ❤’s You** provides methods to help inline, symbolize, and externally `<use>` SVG files. It pulls in files and parses them so that you can still edit them and simply refresh the page to see the updated SVG code in your browser.
+
+Seriously, stop copy/pasting SVG text.
+
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```
+gem 'svg_hearts_you'
+```
+
+And then execute:
+
+```
+$ bundle
+```
+
+Or install on your machine with:
+
+```
+$ gem install svg_hearts_you
+```
+
+## Configuration
+
+In a Rails app, **SVG ❤’s You** is already configured to use the app's  `image_paths` by default. In Middleman, **SVG ❤’s You** uses `images_dir` by
+default.
+
+If you are in another environment or want to add custom search paths, you can configure the gem by the adding to the svg_paths array in the gem's configuration like so:
+
+```
+SvgHeartsYou.configure do |config|
+  config.svg_paths << '/some/path/here'
+  # or
+  config.svg_paths += ['/one/path', '/two/path']
+end
+```
+
+
+
+## Usage
+
+**SVG ❤’s You** provides the following helper methods. These methods are automatically exposed to views in Rails and Middleman. In other environments, use the class methods on the SvgHeartsYou module (i.e. `SvgHeartsYou.svg_use 'hello'`).
+
+---
+
+### `svg_inline(filename, options={})`
+
+Quickly inline a svg from a given file. It searches the configured `svg_paths` for a filename, otherwise throws a runtime error on file not found. Any attributes provided are placed as attributes on the `<svg>` tag.
+
+#### Usage (ERB)
+
+```
+<%= svg_inline 'circle', id: 'my-pretty-circle', class: 'logo' %>
+```
+
+#### Output
+
+```
+<svg id="my-pretty-circle" class="logo" (existing attributes in file...)>
+   <!-- Contents of circle.svg file -->
+</svg>
+```
+
+---
+
+### `svg_symbol(filenames, options={})`
+
+Takes a single filename (string) or list of filenames (list of strings) and converts all the given svg files into symbols within one svg tag. This is useful for reuse in the document with the `<use>` tag (see `svg_use` below). Chris Coyier wrote a [very useful guide](http://css-tricks.com/svg-symbol-good-choice-icons/) about using symbols.
+
+Takes a hash of parameters. The specified keys in the hash change behavior, all
+other keys are added as parameters to the parent `<svg>` tag.
+
+* `:folder` — If set to true, the method will look for a folder(s) and symbolize
+  all svg files within it(them). Each symbol tag will have the `id` attribute
+  set to the original file name of each svg file.
+* `:each` — If this is set to a hash, all key-value pairs passed in will appear
+  as attributes on each `<symbol>` tag.
+* `&block` — A block can be supplied that is given an `attributes` object that
+  contains the attributes for each symbol tag. Any modifications to this hash
+  will be output to the final `<symbol>` tag. See example #4 below.
+
+
+#### Usage (ERB)
+
+```
+<!-- 1 -->
+<%= svg_symbol 'circle', class: 'shapes' %>
+
+<!-- 2 -->
+<%= svg_symbol ['circle', 'square'], class: 'shapes', each: {class: 'shape'} %>
+
+<!-- 3 -->
+<!-- folder contains circle.svg, square.svg, and triangle.svg -->
+<%= svg_symbol 'all-my-shapes', folder: true %>
+
+<!-- 4 -->
+<%= svg_symbol 'all-my-shapes', folder: true do |attributes| %>
+  <% attributes[:class] = 'shape' %>
+  <% attributes[:id] = attributes[:id] + '-logo' %>
+<% end %>
+```
+
+#### Output
+
+```
+<!-- 1 -->
+<svg class="shapes">
+  <symbol id="circle" (existing attributes on circle.svg <svg> tag...)>
+    <!-- Contents of circle.svg file -->
+  </symbol>
+</svg>
+
+
+<!-- 2 -->
+<svg class="shapes">
+  <symbol id="circle" class="shape" ...)>
+    <!-- Contents of circle.svg file -->
+  </symbol>
+  <symbol id="square" class="shape" ...)>
+    <!-- Contents of square.svg file -->
+  </symbol>
+</svg>
+
+<!-- 3 -->
+<svg>
+  <symbol id="circle" ...>
+    <!-- Contents of circle.svg file -->
+  </symbol>
+  <symbol id="square" ...>
+    <!-- Contents of square.svg file -->
+  </symbol>
+  <symbol id="triangle" ...>
+    <!-- Contents of triangle.svg file -->
+  </symbol>
+</svg>
+
+
+<!-- 4 -->
+<svg>
+  <symbol id="circle-logo" class="shape" ...>
+    <!-- Contents of circle.svg file -->
+  </symbol>
+  <symbol id="square-logo" class="shape" ...>
+    <!-- Contents of square.svg file -->
+  </symbol>
+  <symbol id="triangle-logo" class="shape" ...>
+    <!-- Contents of triangle.svg file -->
+  </symbol>
+</svg>
+```
+
+
+
+---
+
+### `svg_use(id, options={})`
+
+Helper method to use a previously defined symbol by using it's id (typically it's filename unless you modified it). You can also target symbols in external files, which is great for cacheablility. Unfortunately, IE and old Android browsers can't handle `<use>` tags with external sources, but [there's a polyfill for that](https://github.com/jonathantneal/svg4everybody). Chris Coyier [covered this in more detail](http://css-tricks.com/svg-use-external-source/).
+
+
+#### Usage (ERB)
+
+```
+<!-- 1 & 2 -->
+<%= svg_use 'circle', class: 'logo' %>
+<!-- or -->
+<%= svg_use '#circle', class: 'logo' %>
+
+<!-- 3 -->
+<%= svg_use 'my-external-symbols.svg#circle' %>
+
+```
+
+#### Output
+
+```
+<!-- 1 & 2 -->
+<svg class="logo" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <use xlink:href="#circle">
+</svg>
+
+<!-- 3 -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <use xlink:href="my-external-symbols.svg#circle">
+</svg>
+```
+
+---
+
+## Thoughts, some use cases, and further reading
+
+If you have got this far and haven't seen Chris Coyier's articles on using SVG
+for icons as symbols, I recommend looking at them.
+
+1. http://css-tricks.com/svg-symbol-good-choice-icons/
+1. http://css-tricks.com/svg-use-external-source/
+1. http://css-tricks.com/gotchas-on-getting-svg-into-production/
+
+If you are like me and don't want to think,  `svg_inline` is dead simple to inline a file into the page. This gives you the most control and is the simplest to understand. The big drawback is that it can be a lot of markup to copy into your document that can't be cached. Best to use this if you need absolute control over some illustration with CSS.
+
+If you are going to reuse the same icon on a page, take advantage of svg `<symbol>`. It allows you to reuse the same SVG content multiple times without
+the bloat of copying the same markup. The `svg_symbol` and `svg_use` functions should make this pretty simple. CSS styling does have a few gotchas when you
+are using `<use>`, so make sure to see [CSS tricks article about all the gotchas](http://css-tricks.com/gotchas-on-getting-svg-into-production/).
+
+
+
+
+Even better—make an external file with each svg file as a symbol. The `svg_symbol` function can be used with sprockets to prep a file of
+symbols (that can be externally used with the `<use>` tag.
+
+You can create a new svg file that will be dynamically generated with ERB. For
+example, a file named `my-symbols.svg.erb` with the following contents
+
+```
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<%= svg_symbol ['each', 'folder', 'and/subfolder'], folder: true %>
+```
+
+creates one main file with symbols for each SVG file that can be used externally, like so:
+
+```
+<%= svg_use 'my-symbols.svg#circle' %>
+```
+
+This is pretty simple once it's set up, but unfortunately it needs [a polyfill](https://github.com/jonathantneal/svg4everybody)
+to work with IE and old Android browsers.
+
+
+## Contributing
+
+### Basics
+
+1. [Fork it]( https://github.com/pknb/svg_hearts_you/fork )
+1. Create your feature branch (`git checkout -b my-new-feature`)
+1. Commit your changes (`git commit -am 'Add some feature'`)
+1. Push to the branch (`git push -u origin my-new-feature`)
+1. When finished, [squash commits (easiest into new branch)](https://github.com/ginatrapani/todo.txt-android/wiki/Squash-All-Commits-Related-to-a-Single-Issue-into-a-Single-Commit)
+    * Example (*from feature branch*)
+        * `git checkout -b 'my-new-feature-squashed'`
+        * `git rebase -i HEAD~#` (Squash # commits, changing # to real value)
+        * Push up the new branch
+1. Create a new Pull Request with squashed branch
+
+**Make sure** all tests pass with `bundle exec rake test`, and add appropriate
+tests for whatever additions you add. Currently Middleman functionality is
+tested through cucumber features and fixtures, taking advantage of step
+definitions in `middleman-core`. Unit tests and rails feature tests are in
+`spec`. The rails features use a dummy rails app for testing under
+`spec/rails/dummy`. If you want to just try stuff out in the console, there is
+a rake tast that loads the gem definition into an `irb` session. Just run
+`bundle exec rake console`.
+
+There is no formal style guide, but please try to stick with the current code
+style—2 space indents, only one new line at end of file, etc.

data/Rakefile

@@ -0,0 +1,46 @@
+#!/usr/bin/env rake
+
+#!/usr/bin/env rake
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+APP_RAKEFILE = File.expand_path("../spec/rails/dummy/Rakefile", __FILE__)
+load 'rails/tasks/engine.rake'
+
+require 'rdoc/task'
+require 'rspec/core'
+require 'rspec/core/rake_task'
+
+# RDoc::Task.new(:rdoc) do |rdoc|
+#   rdoc.rdoc_dir = 'rdoc'
+#   rdoc.title    = 'SvgHeartsYou'
+#   rdoc.options << '--line-numbers'
+#   rdoc.rdoc_files.include('README.rdoc')
+#   rdoc.rdoc_files.include('lib/**/*.rb')
+# end
+
+Bundler::GemHelper.install_tasks
+
+# Dir[File.join(File.dirname(__FILE__), 'tasks/**/*.rake')].each {|f| load f }
+
+require 'cucumber/rake/task'
+
+Cucumber::Rake::Task.new(:cucumber, 'Run features that should pass') do |task|
+  task.cucumber_opts = '--color --tags ~@wip --strict --format pretty'
+end
+
+desc "Run all specs in spec directory (excluding plugin specs)"
+RSpec::Core::RakeTask.new(:spec => 'app:db:test:prepare') do |task|
+  task.rspec_opts = ['--color']
+end
+
+desc "Open an irb session preloaded with this library"
+task :console do
+  sh "irb -rubygems -I lib -r svg_hearts_you.rb"
+end
+
+task :default => :spec
+task :test => [:spec, :cucumber]

data/features/middleman.feature

@@ -0,0 +1,19 @@
+Feature: SvgHeartsYou gem in a middleman app
+
+  Scenario: Configuring gem with SvgHeartsYou config block
+    Given the Server is running at "middleman-svg_hearts_you-config-style"
+    When I go to "/index.html"
+    Then I should see "<svg"
+    Then reset SvgHeartsYou configuration
+
+  Scenario: Configuring gem with Middleman extension
+    Given the Server is running at "middleman-extension-config-style"
+    When I go to "/index.html"
+    Then I should see "<svg"
+    Then reset SvgHeartsYou configuration
+
+  Scenario: Configuring gem with Middleman extension
+    Given the Server is running at "middleman-extension-default-config"
+    When I go to "/index.html"
+    Then I should see "<svg"
+    Then reset SvgHeartsYou configuration

data/features/step_definitions/steps.rb

@@ -0,0 +1,3 @@
+Then /^reset SvgHeartsYou configuration$/ do
+  SvgHeartsYou.reset
+end

data/features/support/env.rb

@@ -0,0 +1,8 @@
+PROJECT_ROOT_PATH = File.dirname(File.dirname(File.dirname(__FILE__)))
+require 'middleman-core'
+require 'middleman-core/step_definitions'
+
+# require 'codeclimate-test-reporter'
+# CodeClimate::TestReporter.start
+
+require File.join(PROJECT_ROOT_PATH, 'lib', 'svg_hearts_you')

data/fixtures/middleman-extension-config-style/config.rb

@@ -0,0 +1 @@
+activate :svg_hearts_you, svg_paths: File.join(PROJECT_ROOT_PATH, 'fixtures', 'middleman-extension-config-style', 'source')

data/fixtures/middleman-extension-config-style/source/circle.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="100" height="100" viewBox="0, 0, 100, 100">
+  <g id="Layer_1">
+    <path d="M50,100 C22.386,100 0,77.614 0,50 C0,22.386 22.386,0 50,-0 C77.614,-0 100,22.386 100,50 C100,77.614 77.614,100 50,100 z" fill="#4B5A65"/>
+  </g>
+</svg>

data/fixtures/middleman-extension-config-style/source/index.html.erb

@@ -0,0 +1,2 @@
+<h1>Test</h1>
+<%= svg_inline 'circle.svg' %>

data/fixtures/middleman-extension-default-config/config.rb

@@ -0,0 +1 @@
+activate :svg_hearts_you

data/fixtures/middleman-extension-default-config/source/images/circle.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="100" height="100" viewBox="0, 0, 100, 100">
+  <g id="Layer_1">
+    <path d="M50,100 C22.386,100 0,77.614 0,50 C0,22.386 22.386,0 50,-0 C77.614,-0 100,22.386 100,50 C100,77.614 77.614,100 50,100 z" fill="#4B5A65"/>
+  </g>
+</svg>

data/fixtures/middleman-extension-default-config/source/index.html.erb

@@ -0,0 +1,2 @@
+<h1>Test</h1>
+<%= svg_inline 'circle.svg' %>

data/fixtures/middleman-svg_hearts_you-config-style/config.rb

@@ -0,0 +1,6 @@
+activate :svg_hearts_you
+
+SvgHeartsYou.configure do |config|
+  # binding.pry
+  config.svg_paths << File.join(PROJECT_ROOT_PATH, 'fixtures', 'middleman-svg_hearts_you-config-style', 'source')
+end