bridgetown-inline-svg 1.0.0

data/README.md

@@ -0,0 +1,139 @@
+<h1 align="center">Welcome to bridgetown-inline-svg 👋</h1>
+<p>
+  <a href="LICENSE" target="_blank">
+    <img alt="License: GPL-3.0" src="https://img.shields.io/github/license/andrewmcodes/bridgetown-inline-svg" />
+  </a>
+  <a href="https://badge.fury.io/rb/bridgetown-inline-svg"><img src="https://badge.fury.io/rb/bridgetown-inline-svg.svg" alt="Gem Version" height="18"></a>
+  <a href="https://depfu.com"><img src="https://badges.depfu.com/badges/54fe87f2b14868b7c6e69aa0322e3764/status.svg" alt="Depfu"></a>
+  <a href="https://depfu.com/github/andrewmcodes/bridgetown-inline-svg?project_id=14094"><img src="https://badges.depfu.com/badges/54fe87f2b14868b7c6e69aa0322e3764/count.svg" alt="Depfu"></a>
+  <a href="https://codeclimate.com/github/andrewmcodes/bridgetown-inline-svg/maintainability"><img src="https://api.codeclimate.com/v1/badges/f9756d6568f43c7a407b/maintainability" /></a>
+  <a href="https://www.codacy.com/manual/andrewmcodes/bridgetown-inline-svg?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=andrewmcodes/bridgetown-inline-svg&amp;utm_campaign=Badge_Grade"><img src="https://app.codacy.com/project/badge/Grade/caad1b16367242ff973fe2e977985364" alt="Codacy Badge"></a>
+  <a href='https://coveralls.io/github/andrewmcodes/bridgetown-inline-svg?branch=main'><img src='https://coveralls.io/repos/github/andrewmcodes/bridgetown-inline-svg/badge.svg?branch=main' alt='Coverage Status' /></a>
+  <img alt="Tests" src="https://github.com/andrewmcodes/bridgetown-inline-svg/workflows/Tests/badge.svg" />
+  <img alt="Linters" src="https://github.com/andrewmcodes/bridgetown-inline-svg/workflows/Linters/badge.svg" />
+</p>
+
+> SVG optimizer and inliner for Bridgetown
+
+- [Installation](#installation)
+  - [Optional configuration options](#optional-configuration-options)
+- [Usage](#usage)
+  - [Optimizations](#optimizations)
+- [Author](#author)
+- [Contributing](#contributing)
+- [Show your support](#show-your-support)
+- [Acknowledgement](#acknowledgement)
+- [License](#license)
+
+## Installation
+
+Run this command to add this plugin to your site's Gemfile:
+
+```shell
+bundle add bridgetown-inline-svg -g bridgetown_plugins
+```
+
+or add the following to your `Gemfile`:
+
+```ruby
+group :bridgetown_plugins do
+  gem "bridgetown-inline-svg", "~> 0.0.1"
+end
+```
+
+### Optional configuration options
+
+Optimization is opt-in and can be enabled by adding this to your `bridgetown.config.yml`
+
+```
+svg:
+  optimize: true
+```
+
+## Usage
+
+Use the Liquid tag in your pages :
+
+```liquid
+{% svg /path/to/square.svg width=24 foo="bar" %}
+```
+
+Bridgetown will include the svg file in your output HTML like this :
+
+```html
+<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 :
+
+```liquid
+{% 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 :
+
+```liquid
+{% 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 Bridgetown's `src` directory. So both:
+
+```liquid
+{% svg "/path/to/foo.svg" %}
+{% svg "path/to/foo.svg"  %}
+```
+
+Should resolve to `/your/site/src/path/to/foo.svg`.
+
+### Optimizations
+
+Some processing is done to remove useless data when enabled:
+
+- 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.
+
+## Author
+
+👤 **Andrew Mason**
+
+* Website: https://www.andrewm.codes
+* Twitter: [@andrewmcodes](https://twitter.com/andrewmcodes)
+* Github: [@andrewmason](https://github.com/andrewmason)
+
+## Contributing
+
+Contributions, issues and feature requests are welcome!<br />Feel free to check [issues page](https://github.com/andrewmcodes/bridgetown-inline-svg/issues). You can also take a look at the [contributing guide](https://github.com/andrewmcodes/bridgetown-inline-svg/blob/main/CONTRIBUTING.md).
+
+## Show your support
+
+Give a ⭐️ if this project helped you!
+
+## Acknowledgement
+
+This project was initially forked from [jekyll-inline-svg](https://github.com/sdumetz/jekyll-inline-svg).
+
+## License
+
+Copyright © 2017-2020 [Sebastien Dumetz](https://github.com/sdumetz)
+Copyright © 2020 [Andrew Mason](https://github.com/andrewmcodes)
+
+The following code is a derivative work of the code from the [jekyll-inline-svg](https://github.com/sdumetz/jekyll-inline-svg) project, which is licensed GPLv3. This code therefore is also licensed under the terms of the GNU Public License, verison 3.
+
+<a href="https://app.fossa.com/projects/git%2Bgithub.com%2Fandrewmcodes%2Fbridgetown-inline-svg?ref=badge_large" alt="FOSSA Status"><img src="https://app.fossa.com/api/projects/git%2Bgithub.com%2Fandrewmcodes%2Fbridgetown-inline-svg.svg?type=large"/></a>

data/Rakefile

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+require "bundler/gem_tasks"
+require "rspec/core/rake_task"
+
+RSpec::Core::RakeTask.new(:spec)
+
+task default: :spec

data/SECURITY.md

@@ -0,0 +1,14 @@
+# Security Policy
+
+## Supported Versions
+
+Security backports will be provided for some previous release series if needed.
+
+| Version | Supported          |
+| ------- | ------------------ |
+| 0.0.x   | :white_check_mark: |
+
+
+## Reporting a Vulnerability
+
+If you find a security issue with this gem, please open an issue, or email [Andrew Mason](mailto:andrew@andrewm.codes).

data/_README.md

@@ -0,0 +1,5 @@
+# bridgetown-inline-svg
+
+SVG optimizer and inliner for [Bridgetown](https://www.bridgetownrb.com)
+
+This liquid tag will let you inline SVG images in your bridgetown sites. It will add `{%svg %}` to `Liquid::Tag`.

data/bin/check

@@ -0,0 +1,3 @@
+#!/bin/bash
+
+bin/checks/standardrb

data/bin/checks/standardrb

@@ -0,0 +1,4 @@
+#!/bin/bash
+
+echo "== Checking StandardRb =="
+bundle exec standardrb --format=progress

data/bin/console

@@ -0,0 +1,14 @@
+#!/usr/bin/env ruby
+
+require "bundler/setup"
+require "dev_api"
+
+# You can add fixtures and/or initialization code here to make experimenting
+# with your gem easier. You can also use a different console, if you like.
+
+# (If you use this, don't forget to add pry to your Gemfile!)
+# require "pry"
+# Pry.start
+
+require "irb"
+IRB.start(__FILE__)

data/bin/format

@@ -0,0 +1,3 @@
+#!/bin/bash
+
+bin/formatters/standardrb

data/bin/formatters/standardrb

@@ -0,0 +1,4 @@
+#!/bin/bash
+
+echo "== StandardRb =="
+bundle exec standardrb --fix --format=progress

data/bin/rspec

@@ -0,0 +1,29 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+#
+# This file was generated by Bundler.
+#
+# The application 'rspec' is installed as part of a gem, and
+# this file is here to facilitate running it.
+#
+
+require "pathname"
+ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
+  Pathname.new(__FILE__).realpath)
+
+bundle_binstub = File.expand_path("../bundle", __FILE__)
+
+if File.file?(bundle_binstub)
+  if File.read(bundle_binstub, 300) =~ /This file was generated by Bundler/
+    load(bundle_binstub)
+  else
+    abort("Your `bin/bundle` was not generated by Bundler, so this binstub cannot run.
+Replace `bin/bundle` by running `bundle binstubs bundler --force`, then run this command again.")
+  end
+end
+
+require "rubygems"
+require "bundler/setup"
+
+load Gem.bin_path("rspec-core", "rspec")

data/bin/setup

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+set -euo pipefail
+IFS=$'\n\t'
+set -vx
+
+bundle install
+
+# Do any other automated setup that you need to do here

data/bin/standardrb

@@ -0,0 +1,29 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+#
+# This file was generated by Bundler.
+#
+# The application 'standardrb' is installed as part of a gem, and
+# this file is here to facilitate running it.
+#
+
+require "pathname"
+ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
+  Pathname.new(__FILE__).realpath)
+
+bundle_binstub = File.expand_path("../bundle", __FILE__)
+
+if File.file?(bundle_binstub)
+  if File.read(bundle_binstub, 300) =~ /This file was generated by Bundler/
+    load(bundle_binstub)
+  else
+    abort("Your `bin/bundle` was not generated by Bundler, so this binstub cannot run.
+Replace `bin/bundle` by running `bundle binstubs bundler --force`, then run this command again.")
+  end
+end
+
+require "rubygems"
+require "bundler/setup"
+
+load Gem.bin_path("standard", "standardrb")

data/bridgetown-inline-svg.gemspec

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+require_relative "lib/bridgetown-inline-svg/version"
+
+Gem::Specification.new do |spec|
+  spec.name = "bridgetown-inline-svg"
+  spec.version = BridgetownInlineSvg::VERSION
+  spec.authors = ["Andrew Mason"]
+  spec.email = ["andrewmcodes@protonmail.com"]
+
+  spec.summary = "A SVG Inliner for Bridgetown"
+  spec.description = <<-EOF
+  A Liquid tag to inline and optimize SVG images in your HTML
+  Supports custom DOM Attributes parameters and variables interpretation.
+  EOF
+  spec.homepage = "https://github.com/andrewmcodes/bridgetown-inline-svg"
+  spec.license = "GPL-3.0"
+
+  spec.metadata = {
+    "bug_tracker_uri" => "#{spec.homepage}/issues",
+    "changelog_uri" => "#{spec.homepage}/blob/main/CHANGELOG.md",
+    "documentation_uri" => spec.homepage.to_s,
+    "homepage_uri" => spec.homepage.to_s,
+    "source_code_uri" => spec.homepage.to_s
+  }
+
+  spec.files = `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|script|spec|features|frontend)/}) }
+  spec.test_files = spec.files.grep(%r{^spec/})
+  spec.require_paths = ["lib"]
+
+  spec.required_ruby_version = ">= 2.5.0"
+
+  spec.add_dependency "bridgetown", ">= 0.15", "< 2.0"
+  spec.add_dependency "svg_optimizer", "~> 0.2.5"
+
+  spec.add_development_dependency "nokogiri", "~> 1.6"
+end

data/lib/bridgetown-inline-svg.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+require "bridgetown"
+
+module BridgetownInlineSvg
+  autoload :SvgTag, "bridgetown-inline-svg/svg-tag"
+end
+
+Liquid::Template.register_tag("svg", BridgetownInlineSvg::SvgTag)

data/lib/bridgetown-inline-svg/svg-tag.rb

@@ -0,0 +1,142 @@
+require "nokogiri"
+require "svg_optimizer"
+require "bridgetown-core/liquid_extensions"
+
+PLUGINS_BLOCKLIST = [
+  SvgOptimizer::Plugins::CleanupId
+]
+
+PLUGINS = SvgOptimizer::DEFAULT_PLUGINS.delete_if { |plugin|
+  PLUGINS_BLOCKLIST.include? plugin
+}
+
+module BridgetownInlineSvg
+  class SvgTag < Liquid::Tag
+    # import lookup_variable function
+    # https://github.com/bridgetownrb/bridgetown/blob/main/bridgetown-core/lib/bridgetown-core/liquid_extensions.rb
+    include Bridgetown::LiquidExtensions
+
+    # For interpoaltion, look for liquid variables
+    VARIABLE = /\{\{\s*([\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 = BridgetownInlineSvg::SvgTag.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
+      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)
+      unless 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
+      [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) {
+        def self.set(p)
+          @@params = p
+        end
+
+        def process
+          @@params.each { |key, val| xml.root.set_attribute(key, val) }
+          xml
+        end
+      }
+      mod.set(params)
+      mod
+    end
+
+    def add_file_to_dependency(site, path, context)
+      if 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 = Bridgetown.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") && !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.root.to_xml
+      end
+      xml
+    end
+  end
+end