jekyll-vibrantjs 1.0.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: e22b638bd2a77a8eb1a6554dcc9555ca59680c43
+  data.tar.gz: ccdbd507f74cf8056e800c82d75d8eaf6a5ed592
+SHA512:
+  metadata.gz: e69828ef28a95bc56a1509c4f20483dd26a6d6437246227a7f483bea4decc52b73625d3e020ac255001b3b193df36fb709c7c95283032db211d32cfae8377718
+  data.tar.gz: c4a322c6be0575f395de5ef43a4777bc8c7d14aafd21a9f5d68636074691cca92244029ff055eb939db181540ec3130f8f01a39b6268b59e9e4635f58d74c329

data/.gitignore

@@ -0,0 +1,34 @@
+*.gem
+*.rbc
+/.config
+/coverage/
+/InstalledFiles
+/pkg/
+/spec/reports/
+/spec/examples.txt
+/test/tmp/
+/test/version_tmp/
+/tmp/
+
+# Used by dotenv library to load environment variables.
+# .env
+
+## Documentation cache and generated files:
+/.yardoc/
+/_yardoc/
+/doc/
+/rdoc/
+
+## Environment normalization:
+/.bundle/
+/vendor/bundle
+/lib/bundler/man/
+
+# for a library or gem, you might want to ignore these files since the code is
+# intended to run in multiple environments; otherwise, check them in:
+Gemfile.lock
+.ruby-version
+.ruby-gemset
+
+# unless supporting rvm < 1.11.0 or doing something fancy, ignore this:
+.rvmrc

data/LICENSE.md

@@ -0,0 +1,26 @@
+# DON'T BE A DICK PUBLIC LICENSE
+
+> Version 1.1, December 2016
+
+> Copyright (C) 2019 WarrantyNowVoid.com
+ 
+ Everyone is permitted to copy and distribute verbatim or modified
+ copies of this license document.
+
+> DON'T BE A DICK PUBLIC LICENSE
+> TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
+
+ 1. Do whatever you like with the original work, just don't be a dick.
+
+     Being a dick includes - but is not limited to - the following instances:
+
+   1a. Outright copyright infringement - Don't just copy the original work/works and change the name.  
+   1b. Selling the unmodified original with no work done what-so-ever, that's REALLY being a dick.  
+   1c. Modifying the original work to contain hidden harmful content. That would make you a PROPER dick.  
+
+ 2. If you become rich through modifications, related works/services, or supporting the original work,
+ share the love. Only a dick would make loads off this work and not buy the original work's 
+ creator(s) a pint.
+ 
+ 3. Code is provided with no warranty. Using somebody else's code and bitching when it goes wrong makes 
+ you a DONKEY dick. Fix the problem yourself. A non-dick would submit the fix back or submit a [bug report](https://www.chiark.greenend.org.uk/~sgtatham/bugs.html)

data/README.md

@@ -0,0 +1,134 @@
+# Jekyll Vibrantjs
+
+Generate a set of CSS override rules from a template based on the prominent colors from a given image.
+
+## Why?
+
+Doesn't Vibrantjs have an in-browser library that can do all this in real time? Yes, but with Jekyll we have an opportunity to do all the work to generate the entire static site before even deploying it to the web. So if we're using these colors to theme static pages, why *wouldn't* we take advantage of that, rather than potentially putting all that work on the browser, eating up users' batteries, or even showing the un-themed version for a few seconds before processing is completed.
+
+## Prerequisites
+
+Requires `node-vibrant` installed (<https://github.com/akfish/node-vibrant/>).
+
+### Installing `node-vibrant` in your jekyll project 
+
+If you have an existing `package.json`, just add it there and run `npm install`. Otherwise, at the root level of your project, run `npm install node-vibrant` (and remember to add `node_modules` to your `.gitignore` file and check in the new `package-lock.json`).
+
+## Installation
+
+(https://jekyllrb.com/docs/plugins/installation/)
+
+One of two options:
+
+### Bundler Config
+:warning: **If using bundler with a vendor prefix, this is the required method**
+
+1. In your `Gemfile`, add the `jekyll_plugins` group if it doesn't already exist, and add `jekyll-vibrantjs` to it. For example: 
+
+  ```ruby
+  group :jekyll_plugins do
+    gem "jekyll-vibrantjs"
+  end
+  ```
+
+2. Tell bundler to install any plugins with
+
+  ```
+  $ bundle install
+  ```
+
+
+### Jekyll Config
+
+1. In your `_config.yml`, add the `plugins` key if it doesn't already exist, and add a value of `jekyll-vibrantjs`. For example:
+
+	```yaml
+	plugins: 
+	  - jekyll-vibrantjs
+	```
+
+2. Install this gem
+
+  ```
+  $ gem install jekyll-vibrantjs
+  ```
+
+## Usage
+
+### Tag
+
+Wherever you want to generate the set of CSS rules, add the `vibrantjs` tag with a path (relative to the Jekyll project root) to the image you want colors extracted from.
+
+As a string:
+
+```
+{% vibrantjs "assets/img/mycoolphoto.jpg" %}
+```
+
+From frontmatter:
+
+```
+{% vibrantjs post.image.feature %}
+```
+
+Or just a variable:
+
+```
+{% assign the_image = "assets/pictures_of_butts/butt.png" %}
+...
+{% vibrantjs the_image %}
+```
+
+### CSS Output
+
+At build time, this tag will be replaced with CSS using the colors extracted from the given image. The default CSS template will generate a style tag containing override (using `!important`) class rules for each of the six extracted colors to be used as a CSS `color` property or `background-color`, including `:hover` states. For example:
+
+```html
+<style type="text/css">
+  /* background-color */
+  .background-color-vibrant{ background-color: rgba(124, 76, 36, 1) !important; }
+  .background-color-light-vibrant{ background-color: rgba(252, 252, 204, 1) !important; }
+  .background-color-dark-vibrant{ background-color: rgba(4, 52, 100, 1) !important; }
+  .background-color-muted{ background-color: rgba(104, 132, 164, 1) !important; }
+  .background-color-light-muted{ background-color: rgba(190, 190, 157, 1) !important; }
+  .background-color-dark-muted{ background-color: rgba(63, 63, 61, 1) !important; }
+  /* background-color :hover */
+  .hover-background-color-vibrant:hover{ background-color: rgba(124, 76, 36, 1) !important; }
+  .hover-background-color-light-vibrant:hover{ background-color: rgba(252, 252, 204, 1) !important; }
+  .hover-background-color-dark-vibrant:hover{ background-color: rgba(4, 52, 100, 1) !important; }
+  .hover-background-color-muted:hover{ background-color: rgba(104, 132, 164, 1) !important; }
+  .hover-background-color-light-muted:hover{ background-color: rgba(190, 190, 157, 1) !important; }
+  .hover-background-color-dark-muted:hover{ background-color: rgba(63, 63, 61, 1) !important; }
+  /* color */
+  .color-vibrant{ color: rgba(124, 76, 36, 1) !important; }
+  .color-light-vibrant{ color: rgba(252, 252, 204, 1) !important; }
+  .color-dark-vibrant{ color: rgba(4, 52, 100, 1) !important; }
+  .color-muted{ color: rgba(104, 132, 164, 1) !important; }
+  .color-light-muted{ color: rgba(190, 190, 157, 1) !important; }
+  .color-dark-muted{ color: rgba(63, 63, 61, 1) !important; }
+  /* color :hover */
+  .hover-color-vibrant:hover{ color: rgba(124, 76, 36, 1) !important; }
+  .hover-color-light-vibrant:hover{ color: rgba(252, 252, 204, 1) !important; }
+  .hover-color-dark-vibrant:hover{ color: rgba(4, 52, 100, 1) !important; }
+  .hover-color-muted:hover{ color: rgba(104, 132, 164, 1) !important; }
+  .hover-color-light-muted:hover{ color: rgba(190, 190, 157, 1) !important; }
+  .hover-color-dark-muted:hover{ color: rgba(63, 63, 61, 1) !important; }
+</style>
+```
+
+Use these classes in your HTML to dynamically change these colors for some particular image source.
+
+### Custom Template
+
+You can specify a custom template by adding a file named `_includes/vibrantjs-css.html` in your jekyll project. All six colors' rgb values (ex: `rgba(104, 132, 164, 1)`) are available as template variables with the prefix "rgb" to use like `{{ rgbDarkVibrant }}`.
+
+### Colors
+
+Six colors are available (see <https://jariz.github.io/vibrant.js/> for examples):
+
+- Vibrant
+- LightVibrant
+- DarkVibrant
+- Muted
+- LightMuted
+- DarkMuted

data/jekyll-vibrantjs.gemspec

@@ -0,0 +1,17 @@
+# coding: utf-8
+lib = File.expand_path("../lib", __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require "jekyll-vibrantjs/version"
+Gem::Specification.new do |spec|
+  spec.name          = "jekyll-vibrantjs"
+  spec.summary       = "Extract image colors to CSS"
+  spec.description   = "Jekyll plugin to generate CSS overrides based on Vibrant.js colors extracted from a given image"
+  spec.version       = Jekyll::VibrantJS::VERSION
+  spec.authors       = ["Nick Pettazzoni"]
+  spec.email         = ["pettazz@gmail.com"]
+  spec.homepage      = "https://github.com/warrantynowvoid/jekyll-vibrantjs"
+  spec.licenses      = ["Nonstandard"]
+  spec.files         = `git ls-files -z`.split("\x0").reject { |f| f.match(%r!^(test|spec|features)/!) }
+  spec.require_paths = ["lib"]
+  spec.add_dependency "jekyll", "~> 3.0"
+end

data/lib/jekyll-vibrantjs.rb

@@ -0,0 +1,9 @@
+require "open3"
+require "jekyll"
+require "jekyll-vibrantjs/jekyll-vibrantjs-tag"
+require "jekyll-vibrantjs/version"
+
+module Jekyll
+  module VibrantJS
+  end
+end

data/lib/jekyll-vibrantjs/call-vibrant.js

@@ -0,0 +1,18 @@
+var Vibrant = require('node-vibrant')
+
+const imagePath = process.argv[2];
+let v = new Vibrant(imagePath, {quality: 1});
+v.getPalette((err, palette) => {
+  console.log('{');
+  for(let swatch in palette){
+    console.log(`"${swatch}" => "${toRGBAString(palette[swatch].getRgb())}",`);
+  }
+  console.log('}');
+});
+
+const toRGBAString = (colorArr) => {
+  return 'rgba(' + 
+          colorArr[0] + ', ' +
+          colorArr[1] + ', ' +
+          colorArr[2] + ', 1)';
+}

data/lib/jekyll-vibrantjs/jekyll-vibrantjs-tag.rb

@@ -0,0 +1,48 @@
+module Jekyll
+  module VibrantJS
+    class VibrantJSTag < Liquid::Tag
+
+      def initialize(tagName, image_arg, tokens)
+        super
+        @image_arg = image_arg
+      end
+
+      def render(context)
+        # if we pass in something like "post.image.feature" instead of a path,
+        # the variable name gets passed in as a string, so we can look it up in the context
+        image_path = "#{context[@image_arg.strip]}"
+
+        if File.exist?(image_path)
+          script_path = File.expand_path('./call-vibrant.js', File.dirname(__FILE__))
+          node_modules_path = File.join Dir.pwd, "node_modules"
+
+          stdout, status = Open3.capture2({"NODE_PATH" => node_modules_path}, 'node', script_path, image_path)
+          
+          raise "Failed to call vibrantjs" unless status.success?
+        else
+          raise "Given image file `#{image_path}` doesn't exist"
+        end
+
+        @palette = eval(stdout)
+        
+        tmpl_path = File.join Dir.pwd, "_includes", "vibrantjs-css.html"
+        unless File.exist?(tmpl_path)
+          tmpl_path = File.expand_path('./vibrantjs-css.html', File.dirname(__FILE__))
+        end
+
+        tmpl = File.read tmpl_path
+        site = context.registers[:site]
+        tmpl = (Liquid::Template.parse tmpl).render site.site_payload.merge!({
+          "rgbVibrant" => @palette["Vibrant"],
+          "rgbLightVibrant" => @palette["LightVibrant"],
+          "rgbDarkVibrant" => @palette["DarkVibrant"],
+          "rgbMuted" => @palette["Muted"],
+          "rgbLightMuted" => @palette["LightMuted"],
+          "rgbDarkMuted" => @palette["DarkMuted"]
+        })
+      end
+
+      Liquid::Template.register_tag "vibrantjs", self
+    end
+  end
+end

data/lib/jekyll-vibrantjs/version.rb

@@ -0,0 +1,5 @@
+module Jekyll
+  module VibrantJS
+    VERSION = "1.0.0"
+  end
+end

data/lib/jekyll-vibrantjs/vibrantjs-css.html

@@ -0,0 +1,30 @@
+  <style type="text/css">
+      /* background-color */
+      .background-color-vibrant{ background-color: {{ rgbVibrant }} !important; }
+      .background-color-light-vibrant{ background-color: {{ rgbLightVibrant }} !important; }
+      .background-color-dark-vibrant{ background-color: {{ rgbDarkVibrant }} !important; }
+      .background-color-muted{ background-color: {{ rgbMuted }} !important; }
+      .background-color-light-muted{ background-color: {{ rgbLightMuted }} !important; }
+      .background-color-dark-muted{ background-color: {{ rgbDarkMuted }} !important; }
+      /* background-color :hover */
+      .hover-background-color-vibrant:hover{ background-color: {{ rgbVibrant }} !important; }
+      .hover-background-color-light-vibrant:hover{ background-color: {{ rgbLightVibrant }} !important; }
+      .hover-background-color-dark-vibrant:hover{ background-color: {{ rgbDarkVibrant }} !important; }
+      .hover-background-color-muted:hover{ background-color: {{ rgbMuted }} !important; }
+      .hover-background-color-light-muted:hover{ background-color: {{ rgbLightMuted }} !important; }
+      .hover-background-color-dark-muted:hover{ background-color: {{ rgbDarkMuted }} !important; }
+      /* color */
+      .color-vibrant{ color: {{ rgbVibrant }} !important; }
+      .color-light-vibrant{ color: {{ rgbLightVibrant }} !important; }
+      .color-dark-vibrant{ color: {{ rgbDarkVibrant }} !important; }
+      .color-muted{ color: {{ rgbMuted }} !important; }
+      .color-light-muted{ color: {{ rgbLightMuted }} !important; }
+      .color-dark-muted{ color: {{ rgbDarkMuted }} !important; }
+      /* color :hover */
+      .hover-color-vibrant:hover{ color: {{ rgbVibrant }} !important; }
+      .hover-color-light-vibrant:hover{ color: {{ rgbLightVibrant }} !important; }
+      .hover-color-dark-vibrant:hover{ color: {{ rgbDarkVibrant }} !important; }
+      .hover-color-muted:hover{ color: {{ rgbMuted }} !important; }
+      .hover-color-light-muted:hover{ color: {{ rgbLightMuted }} !important; }
+      .hover-color-dark-muted:hover{ color: {{ rgbDarkMuted }} !important; }
+  </style>

metadata

@@ -0,0 +1,68 @@
+--- !ruby/object:Gem::Specification
+name: jekyll-vibrantjs
+version: !ruby/object:Gem::Version
+  version: 1.0.0
+platform: ruby
+authors:
+- Nick Pettazzoni
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2019-06-11 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: jekyll
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.0'
+description: Jekyll plugin to generate CSS overrides based on Vibrant.js colors extracted
+  from a given image
+email:
+- pettazz@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".gitignore"
+- LICENSE.md
+- README.md
+- jekyll-vibrantjs.gemspec
+- lib/jekyll-vibrantjs.rb
+- lib/jekyll-vibrantjs/call-vibrant.js
+- lib/jekyll-vibrantjs/jekyll-vibrantjs-tag.rb
+- lib/jekyll-vibrantjs/version.rb
+- lib/jekyll-vibrantjs/vibrantjs-css.html
+homepage: https://github.com/warrantynowvoid/jekyll-vibrantjs
+licenses:
+- Nonstandard
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.6.14
+signing_key: 
+specification_version: 4
+summary: Extract image colors to CSS
+test_files: []