Created CSS sprites from all non-animated images using http://draeton.github.io/stitches/ for now (let’s see if necessary to implement in build process)

build/client/main.less

@@ -3,3 +3,10 @@
 @import "node_modules/uikit/themes/almost-flat/form-password";
 
 @import (inline) "node_modules/codemirror/lib/codemirror.css";
+
+@import "./sprites";
+
+.av-sprite {
+  display: inline-block;
+  vertical-align: middle;
+}

build/client/sprites.less

@@ -0,0 +1,139 @@
+.stitches-av-sprite(@x: 0, @y: 0, @width: 0, @height: 0) {
+    background-position: @x @y;
+    width: @width;
+    height: @height;
+}
+
+.av-sprite {
+    background-image: url(/static/img/spritesheet.png);
+    background-repeat: no-repeat;
+    display: block;
+
+    &.av-sprite-ant {
+        .stitches-av-sprite(-5px, -5px, 26px, 15px);
+    }
+
+    &.av-sprite-ant-icon {
+        .stitches-av-sprite(-41px, -5px, 16px, 16px);
+    }
+
+    &.av-sprite-ant-white {
+        .stitches-av-sprite(-67px, -5px, 26px, 15px);
+    }
+
+    &.av-sprite-bullet {
+        .stitches-av-sprite(-103px, -5px, 3px, 10px);
+    }
+
+    &.av-sprite-dot {
+        .stitches-av-sprite(-116px, -5px, 30px, 30px);
+    }
+
+    &.av-sprite-facebook {
+        .stitches-av-sprite(-156px, -5px, 15px, 15px);
+    }
+
+    &.av-sprite-facebook_round {
+        .stitches-av-sprite(-181px, -5px, 33px, 32px);
+    }
+
+    &.av-sprite-github {
+        .stitches-av-sprite(-224px, -5px, 30px, 30px);
+    }
+
+    &.av-sprite-gmail {
+        .stitches-av-sprite(-264px, -5px, 30px, 30px);
+    }
+
+    &.av-sprite-google {
+        .stitches-av-sprite(-304px, -5px, 15px, 15px);
+    }
+
+    &.av-sprite-google_round {
+        .stitches-av-sprite(-329px, -5px, 33px, 32px);
+    }
+
+    &.av-sprite-headbg {
+        .stitches-av-sprite(-372px, -5px, 3px, 52px);
+    }
+
+    &.av-sprite-helma {
+        .stitches-av-sprite(-385px, -5px, 41px, 24px);
+    }
+
+    &.av-sprite-hop {
+        .stitches-av-sprite(-436px, -5px, 124px, 25px);
+    }
+
+    &.av-sprite-linkedin {
+        .stitches-av-sprite(-570px, -5px, 30px, 30px);
+    }
+
+    &.av-sprite-manage {
+        .stitches-av-sprite(-610px, -5px, 50px, 13px);
+    }
+
+    &.av-sprite-menu {
+        .stitches-av-sprite(-610px, -28px, 36px, 13px);
+    }
+
+    &.av-sprite-pixel {
+        .stitches-av-sprite(-670px, -5px, 1px, 1px);
+    }
+
+    &.av-sprite-recent {
+        .stitches-av-sprite(-5px, -51px, 123px, 13px);
+    }
+
+    &.av-sprite-rss {
+        .stitches-av-sprite(-681px, -5px, 16px, 16px);
+    }
+
+    &.av-sprite-rss_round {
+        .stitches-av-sprite(-656px, -31px, 33px, 32px);
+    }
+
+    &.av-sprite-sandbox {
+        .stitches-av-sprite(-385px, -45px, 189px, 68px);
+    }
+
+    &.av-sprite-smallchaos {
+        .stitches-av-sprite(-138px, -73px, 107px, 29px);
+    }
+
+    &.av-sprite-smallstraight {
+        .stitches-av-sprite(-255px, -73px, 107px, 24px);
+    }
+
+    &.av-sprite-stackoverflow {
+        .stitches-av-sprite(-584px, -73px, 30px, 30px);
+    }
+
+    &.av-sprite-status {
+        .stitches-av-sprite(-624px, -73px, 48px, 13px);
+    }
+
+    &.av-sprite-tumblr {
+        .stitches-av-sprite(-5px, -96px, 30px, 30px);
+    }
+
+    &.av-sprite-twitter {
+        .stitches-av-sprite(-45px, -96px, 30px, 30px);
+    }
+
+    &.av-sprite-twitter {
+        .stitches-av-sprite(-156px, -31px, 15px, 15px);
+    }
+
+    &.av-sprite-twitter_round {
+        .stitches-av-sprite(-85px, -96px, 33px, 33px);
+    }
+
+    &.av-sprite-webloghead {
+        .stitches-av-sprite(-5px, -139px, 700px, 53px);
+    }
+
+    &.av-sprite-xmlbutton {
+        .stitches-av-sprite(-624px, -96px, 36px, 14px);
+    }
+}

code/Images/Images.js

@@ -122,29 +122,48 @@ Images.prototype.user_action = function() {
  */
 Images.Default = new function() {
   var Image = function(name, description) {
-    var dir = new helma.File(app.appsProperties['static'], 'sites/www');
-    var image = new helma.Image(new helma.File(dir, name));
-    this.__defineGetter__('parent', function() {return root});
+    var dir = new helma.File(app.appsProperties['static'], 'img');
+    var image, isSprite = false;
+    try {
+      image = new helma.Image(new helma.File(dir, name));
+    } catch (ex) {
+      image = new helma.Image(new helma.File(dir, 'spritesheet.png'));
+      isSprite = true;
+    }
+    this.__defineGetter__('parent', function () { return root; });
     this.name = this.fileName = name;
     this.description = description;
     this.width = image.width;
     this.height = image.height;
     this.getUrl = function () {
-      // Cannot use global.Image.getUrl() here because these images are
-      // located in the top-level of the static directory.
-      return root.getStaticUrl(name);
+      return app.appsProperties.staticMountpoint + '/img/' + name;
     }
-    this.render_macro = global.Image.prototype.render_macro;
+    this.render_macro = isSprite ? function () {
+      var shortName = this.name.substr(0, this.name.lastIndexOf('.'));
+      res.write("<i class='av-sprite av-sprite-" + shortName + "'></i>");
+    } : global.Image.prototype.render_macro;
     this.thumbnail_macro = global.Image.prototype.thumbnail_macro;
     return this;
   }
 
   var images = {};
-  var add = function(name, description) {
+
+  function add(name, description) {
     images[name] = new Image(name, description);
     return;
   }
 
+  function isSprite(name) {
+    return !{
+      'big.gif': true,
+      'dot.gif': true,
+      'marquee.gif': true,
+      'pixel.gif': true,
+      'smallanim.gif': true,
+      'smalltrans.gif': true
+    }[name];
+  }
+
   add('ant.png', 'Ant');
   add('ant-icon.png', 'Tiny Ant');
   add('big.gif', String.EMPTY);
@@ -163,6 +182,7 @@ Images.Default = new function() {
   add('smallchaos.gif', 'Made with Antville');
   add('smallstraight.gif', 'Made with Antville');
   add('smalltrans.gif', 'Made with Antville');
+  add('spritesheet.png', 'Antville Sprite Sheet');
   add('status.gif', 'status');
   add('webloghead.gif', 'Antville');
   add('xmlbutton.gif', 'XML version of this page');

code/Root/$Root.skin

@@ -284,10 +284,11 @@ div.skin div.title {
    text-decoration: none !important;
 }
 
-.connect img {
-   padding: 2px 0;
+.connect i {
+   margin: -2px;
    vertical-align: middle;
    opacity: .3;
+   transform: scale(0.7);
 }
 
 .helma-debug-line /*:has(script)*/ {

code/Site/Site.skin

@@ -182,7 +182,8 @@ $(function () {
       width: 262px;
       height: 53px;
       margin-left: -40px;
-      background: url('<% image /webloghead.gif url %>');
+      background: url('<% image /spritesheet.png url %>');
+      background-position: 5px -139px;
    }
 
    .av-header-bg-offset {
@@ -195,6 +196,7 @@ $(function () {
       top: 7px;
       height: 38px;
       background: url('<% image /dot.gif url %>');
+      background-position-x: 1px;
    }
 
    .av-title {

static/sites/www/package.json

@@ -1,19 +0,0 @@
-{
-  "name": "antville",
-  "version": "1.5.0",
-  "description": "Antville is an open source project aimed at the development of a simple site hosting system with many advanced features.",
-  "main": "main.js",
-  "devDependencies": {
-    "jquery-browserify": "^1.8.1",
-    "minifyify": "^3.0.10"
-  },
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://code.google.com/p/antville/"
-  },
-  "author": "Tobi Schäfer <interface@p3k.org>",
-  "license": "Apache 2"
-}