0.0.1 • Published 9 years ago

metalsmith-colors v0.0.1

Weekly downloads
2
License
AGPL-3.0
Repository
github
Last release
9 years ago

#metalsmith-colors

A Metalsmith plugin that generated colors for documents.

Build Status Dependencies License

##Use

$ npm install metalsmith-colors

Then in your build script:

Metalsmith  = require 'metalsmith'
markdown    = require 'metalsmith-markdown'
collections = require 'metalsmith-collections'
colors      = require 'metalsmith-colors'

Metalsmith(__dirname)
.use( do markdown )
.use( collections({
  'posts':
    'pattern': 'posts/*'
    'sortBy': 'date'
    'reverse': yes
}) )
.use( colors({
  'key': 'posts'
  'colors': [ '#0088f3', '#1abc9c' ]
}) )
.build(do done)

We need to know the order in which the documents should be colored. In the example you can see us applying the markdown-collections plugin which sorts all blog posts by date and makes them available under posts key. Our plugin then requires us to pass this key as an option.

To specify the color range, pass in an a tuple of colors.

Finally, the color key is available to us on each post.

<ul id="posts">
{% for post in posts %}
  <li>
    <h2><a href="/{{ post.path }}" style="color:{{ post.color }}">{{ post.title }}</a></h2>
    <div class="date">{{ post.date | date('F jS, Y') }}</div>
  </li>
{% endfor %}
</ul>

##Source

d3 = require 'd3'

module.exports = (opts) ->
  opts ?= {}
  opts.key ?= 'posts'
  opts.colors ?= [ '#000', '#FFF' ]

  (files, metalsmith, done) ->
    docs = metalsmith.data[opts.key]

    color = d3.scale.linear()
    .domain([ 0, docs.length - 1 ])
    .interpolate(d3.interpolateRgb)
    .range(opts.colors)

    ( doc.color = color i for doc, i in docs )

    do done