acetate-folder

Acetate Folder

Custom Nunjucks tag that iterates over all the files in a folder.

Install

npm install acetate-folder --save

Use

In your acetate config, which usually resides at acetate.conf.js add the following to initialize the folder tag:

var folder = require('acetate-folder');

function config(acetate) {
  acetate.use(folder());
}

module.exports = config;

Now, in your templates, you can use the folder tag, passing it a glob pattern:

{% folder './*.svg' %}
  <div class="FILENAME">FILENAME</div>
{% endfolder %}

This will iterate over every file from your current folder (relative to where the acetate config is) with an extension of .svg. By default the tag doesn't show files that begin with ..

The code inside the {% folder %} tag will be repeated for each file in the folder. Every occurrence of FILENAME will be replaced by the filename of each file.

For example, if you had the following directory located at /fruit-pics:

.hidden.svg
bananas.svg
apples.svg
fruit.svg
sub-directory/

And you used the following folder tag:

{% folder './fruit-pics/*.svg' %}
  <div class="FILENAME">FILENAME</div>
{% endfolder %}

You'd have the following html when you built your site with Acetate:

<div class="apples">apples</div>
<div class="bananas">bananas</div>
<div class="fruit">fruit</div>

These are returned in alphabetical order with filenames that start with a capital letter being before lowercase filenames.

TODO

I think there are a number of options you could make configurable inside the tag itself, like:

• include directories
• include files beginning with .
• specify a sort order for results

Contributing

Pull requests are welcome! Just do your best to maintain the spaces, quotes, syntax, etc of the existing code and we should be good.