A month ago, when talking about Monkeyman to a friend, I just realized how happy I was with my current web site publishing approach. After my first Monkeyman-produced post, I started modifying a couple of things a bit, to make it better aligned with what I needed. Enough to spend some time capturing it in a post.
From SCAML to actual file
In the first version of Monkeyman that I created, every .scaml file would automatically be turned into an .html file. That seemed pretty reasonable, until I started feeling the urge to create an RSS feed for my blog posts. I could create an feed.scaml file that had all the right data, but Monkeyman would still consider it to be an HTML file, and set the contenttype and the file extension accordingly . Annoying.
So, I changed the mechanism a little. Instead of automatically considering the result of every SCAML file to be an HTML file, Monkeyman will now just drop the .scaml extension.
feed.rss.scaml ⇒ feed.rss
Originally, I did have support for a Java based alternative for SASS, called ZUSS. But everybody uses LESS, so I added that as well.
I had a bunch of images in a directory, and wanted to publish those, and have one overview page with the thumbnails. First of all, I needed a way to resize the actual images to a smaller size to have the overview page. But then, on every page corresponding to an image, I also needed to have a link to an even smaller image, to make sure Facebook would grab something sensible for the summary message they normally display.
I couldn’t just add a new filter that would automatically change every image into something of a smaller size, since - you see - that would take out the image with the original resolution. So I needed something less destructive. And I didn’t want images to be resized to just any size: I wanted them to be resized to a size that I could configure.
In order to get this, I first made sure that there was a place to register components that would take the resources generated, and generate additional resources from those. But then how would I tell Monkeyman that I wanted the original image resized to a certain size? One way to solve it would be to have placeholder files that would point to the original file and specify a size. Sounded complicated, and like a lot of work. So I didn’t do it.
Instead, I wrote something that captures HTML files produced by Monkeyman, inspects them, and extracts image references from them. Let’s just say it finds an image named
foo-231x23.png. In that case, this is what it will do:
- Check if this is the name of a resource Monkeyman already knows about. In that case, there is nothing left to do. Monkeyman will already be able to deliver that file.
- If that file does not exist, but a file named ‘foo.png’ does exist, then it will resize it to fit in a box of that size, making sure the entire image fits in that box. (Which might introduce some whitespace.)
- In case the path is
foo-242x45!.png, it will make sure the entire area is filled, clipping off the overflowing areas.
- In case the path is
foo-323x_.png, it will make sure the width is changed to the given width. The underscore is a wildcard, basically not imposing any constraint on what it could be as long as the width is identical to the given width.
So, this picture (
monkeymaniac-_x180.jpg) fits a box that is 180 pixels high.
This picture (
monkeymaniac-180x_.jpg) fits a box that is 180 pixels wide.
And this picture (
monkeymaniac-180x180!.jpg) fills a 180 by 180 pixel bounding box, cropping off the edges.
So I added another component. One that - if it notices
.js.coffee files - automatically adds the transpiled versions of those files as well. It does require that you have CoffeeScript installed though. It doesn't bundle the tools itself.
Monkeyman is producing a lot of new resources. It will report that on the commandline, but sometimes it is a little hard to tell what is inside the virtual folder structure it creates. If you start Monkeyman with the
-d switch, you will be able to tell that. (Every folder gets a directory listing.)
You can download the latest version here.