Code Monkey home page Code Monkey logo

jekyll-geo-pattern's Introduction

Geo Pattern Plugin

A liquid tag for Jekyll to generate an SVG/Base64 geo pattern. Based on https://github.com/jasonlong/geo_pattern.

Build Status

Setting up

Add the following to your site's _config.yml file

gems:
  - jekyll-geo-pattern

Usage

You can choose to generate either a Base64 encoded string:

{% base64_geo_pattern text="Mastering Markdown" %}

Or, an SVG image:

{% svg_geo_pattern text="Mastering Markdown"} %}

Note that you provide parameter as regular attribues. You must have at least the text key. The geopattern is generated from this text.

You can also pass in the other options from the geo_pattern library:

{% base64_geo_pattern text"Some title" base_color="#fc0"} %}
{% svg_geo_pattern text="Another title" generator="sine_waves"} %}

With the Base64 pattern, you can generate something like this as a visual element:

<div style="background-image: url(data:image/svg+xml;base64,{% base64_geo_pattern text="Mastering Markdown" %});"></div>

jekyll-geo-pattern's People

Contributors

gjtorikian avatar sillygwailo avatar

Stargazers

 avatar Florent Viel avatar Quinn Rohlf avatar Harald Haesler avatar Shu Uesugi avatar  avatar

Watchers

 avatar James Cloos avatar  avatar

Forkers

jasonlong

jekyll-geo-pattern's Issues

Specifying base colors with all integers causes errors

@gjtorikian I found that when specifying a base_color that was all integers (#246642) while alphanumeric (#ab6642) works fine. I initially thought this was a problem in geo_pattern itself, but it seems to work fine there.

Here is an example:

{% base64_geo_pattern text=page.title base_color="#963636" %}

The error is coming from the color gem being used by geo_pattern. It looks like it thinks the color is a Fixnum and not a String.

Liquid Exception: undefined method `scan' for 963636:Fixnum in _layouts/article.html
[Listen warning]: Change block raise an execption: undefined method `scan' for 963636:Fixnum
Backtrace:
    /Users/jason/github/guides/vendor/gems/ruby/2.0.0/gems/color-1.5.1/lib/color/rgb.rb:40:in `from_html'
    /Users/jason/github/guides/vendor/gems/ruby/2.0.0/gems/geo_pattern-1.1.0/lib/geo_pattern/pattern.rb:67:in `generate_background'
    /Users/jason/github/guides/vendor/gems/ruby/2.0.0/gems/geo_pattern-1.1.0/lib/geo_pattern/pattern.rb:44:in `initialize'
    /Users/jason/github/guides/vendor/gems/ruby/2.0.0/gems/geo_pattern-1.1.0/lib/geo_pattern.rb:7:in `new'
    /Users/jason/github/guides/vendor/gems/ruby/2.0.0/gems/geo_pattern-1.1.0/lib/geo_pattern.rb:7:in `generate'
    /Users/jason/github/guides/vendor/gems/ruby/2.0.0/gems/jekyll-geo-pattern-0.2.1/lib/jekyll-geo-pattern.rb:64:in `render'
    /Users/jason/github/guides/vendor/gems/ruby/2.0.0/gems/liquid-2.5.4/lib/liquid/block.rb:106:in `block in render_all'
    /Users/jason/github/guides/vendor/gems/ruby/2.0.0/gems/liquid-2.5.4/lib/liquid/block.rb:93:in `each'
    /Users/jason/github/guides/vendor/gems/ruby/2.0.0/gems/liquid-2.5.4/lib/liquid/block.rb:93:in `render_all'
    /Users/jason/github/guides/vendor/gems/ruby/2.0.0/gems/liquid-2.5.4/lib/liquid/block.rb:82:in `render'
    /Users/jason/github/guides/vendor/gems/ruby/2.0.0/gems/liquid-2.5.4/lib/liquid/template.rb:124:in `render'
    /Users/jason/github/guides/vendor/gems/ruby/2.0.0/gems/liquid-2.5.4/lib/liquid/template.rb:132:in `render!'
    /Users/jason/github/guides/vendor/gems/ruby/2.0.0/gems/jekyll-1.3.1/lib/jekyll/convertible.rb:88:in `render_liquid'
    /Users/jason/github/guides/vendor/gems/ruby/2.0.0/gems/jekyll-1.3.1/lib/jekyll/convertible.rb:122:in `render_all_layouts'
    /Users/jason/github/guides/vendor/gems/ruby/2.0.0/gems/jekyll-1.3.1/lib/jekyll/convertible.rb:158:in `do_layout'
    /Users/jason/github/guides/vendor/gems/ruby/2.0.0/gems/jekyll-1.3.1/lib/jekyll/page.rb:115:in `render'
    /Users/jason/github/guides/vendor/gems/ruby/2.0.0/gems/jekyll-1.3.1/lib/jekyll/site.rb:241:in `block in render'
    /Users/jason/github/guides/vendor/gems/ruby/2.0.0/gems/jekyll-1.3.1/lib/jekyll/site.rb:240:in `each'
    /Users/jason/github/guides/vendor/gems/ruby/2.0.0/gems/jekyll-1.3.1/lib/jekyll/site.rb:240:in `render'
    /Users/jason/github/guides/vendor/gems/ruby/2.0.0/gems/jekyll-1.3.1/lib/jekyll/site.rb:39:in `process'
    /Users/jason/github/guides/vendor/gems/ruby/2.0.0/gems/jekyll-1.3.1/lib/jekyll/command.rb:18:in `process_site'
    /Users/jason/github/guides/vendor/gems/ruby/2.0.0/gems/jekyll-1.3.1/lib/jekyll/commands/build.rb:53:in `block in watch'
    /Users/jason/github/guides/vendor/gems/ruby/2.0.0/gems/listen-1.3.1/lib/listen/listener.rb:252:in `call'
    /Users/jason/github/guides/vendor/gems/ruby/2.0.0/gems/listen-1.3.1/lib/listen/listener.rb:252:in `on_change'
    /Users/jason/github/guides/vendor/gems/ruby/2.0.0/gems/listen-1.3.1/lib/listen/listener.rb:290:in `block in initialize_adapter'
    /Users/jason/github/guides/vendor/gems/ruby/2.0.0/gems/listen-1.3.1/lib/listen/adapter.rb:252:in `call'
    /Users/jason/github/guides/vendor/gems/ruby/2.0.0/gems/listen-1.3.1/lib/listen/adapter.rb:252:in `report_changes'
    /Users/jason/github/guides/vendor/gems/ruby/2.0.0/gems/listen-1.3.1/lib/listen/adapter.rb:321:in `poll_changed_directories'
    /Users/jason/github/guides/vendor/gems/ruby/2.0.0/gems/listen-1.3.1/lib/listen/adapter.rb:297:in `block in start_poller'

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.