metalsmith-colors
v0.0.1
Published
A Metalsmith plugin that generates colors for documents
Downloads
1
Maintainers
Readme
#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