metalsmith-colors

A Metalsmith plugin that generated colors for documents.

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