Client creates favicon on 404, express no longer creates favicons.

client/client.coffee

@@ -300,9 +300,21 @@ $ ->
       wiki.resolutionContext = context
 
       if site?
-        $(pageElement).append "<h1><a href=\"//#{site}\"><img src = \"/remote/#{site}/favicon.png\" height = \"32px\"></a> #{page.title}</h1>"
+        $(pageElement)
+          .append "<h1><a href=\"//#{site}\"><img src = \"/remote/#{site}/favicon.png\" height = \"32px\"></a> #{page.title}</h1>"
       else
-        $(pageElement).append "<h1><a href=\"/\"><img src = \"/favicon.png\" height = \"32px\"></a> #{page.title}</h1>"
+        $(pageElement)
+          .append(
+            $("<h1 />").append(
+              $("<a />").attr('href', '/').append(
+                $("<img>")
+                  .error((e) ->
+                    getPlugin('favicon', (plugin) ->
+                      plugin.create()))
+                  .attr('class', 'favicon')
+                  .attr('src', '/favicon.png')
+                  .attr('height', '32px')
+              ), " #{page.title}"))
 
       [storyElement, journalElement, footerElement] = ['story', 'journal', 'footer'].map (className) ->
         $("<div />").addClass(className).appendTo(pageElement)

client/plugins/favicon.coffee

@@ -0,0 +1,57 @@
+# ** favicon.coffee **
+# This is a brute force port of Ward's favicon.rb,
+# and could do with some refactoring by someone
+# who knows the canvas api, but it would be better
+# to move favicon generation to the client side.  This
+# could serve as a basis for that with enough refactoring.
+
+# Utility functions
+hsltorgb = (h, s, l) ->
+  h = (h % 360) / 360
+  m2 = l * (s + 1)
+  m1 = ((l * 2) - m2)
+  hue = (num) ->
+    if num < 0
+      num += 1
+    else if num > 1
+      num -= 1
+    if (num * 6) < 1
+      m1 + (m2 - m1) * num * 6
+    else if (num * 2) < 1
+      m2
+    else if (num * 3) < 2
+      m1 + (m2 - m1) * (2/3 - num) * 6
+    else
+      m1
+  [(hue(h+1/3)*255), (hue(h) * 255), (hue(h - 1/3) * 255)]
+
+
+
+window.plugins.favicon =
+  create: ->
+    $('body').append(
+      $('<canvas />').attr('width', 32).attr('height', 32).attr('id', 'favmaker').attr('display', 'none').hide()
+    )
+    canvas = document.getElementById('favmaker')
+    ctx = canvas.getContext('2d')
+    light = hsltorgb(Math.random() * 360, .78, .50)
+    dark = hsltorgb(Math.random() * 360, .78, .25)
+    angle = 2 * (Math.random() - 0.5)
+    sin = Math.sin angle
+    cos = Math.cos angle
+    scale = (Math.abs(sin) + Math.abs(cos))
+    colprep = (col, p) ->
+      Math.floor(light[col]*p + dark[col]*(1-p))%255
+    for x in [0..31]
+      for y in [0..31]
+        p = if sin >= 0 then sin * x + cos * y else -sin * (31 - x) + cos * y
+        p = p / 31 / scale
+        ctx.fillStyle = "rgba(#{colprep(0, p)}, #{colprep(1, p)}, #{colprep(2, p)}, 1)"
+        ctx.fillRect(x, y, 1, 1)
+    fav = canvas.toDataURL()
+    $('#favicon').attr('href', fav)
+    $('.favicon').attr('src', fav)
+    $.post('/favicon.png', {image: fav}, (data) ->
+      console.log data
+    )
+

client/plugins/favicon.js

@@ -0,0 +1,62 @@
+(function() {
+  var hsltorgb;
+
+  hsltorgb = function(h, s, l) {
+    var hue, m1, m2;
+    h = (h % 360) / 360;
+    m2 = l * (s + 1);
+    m1 = (l * 2) - m2;
+    hue = function(num) {
+      if (num < 0) {
+        num += 1;
+      } else if (num > 1) {
+        num -= 1;
+      }
+      if ((num * 6) < 1) {
+        return m1 + (m2 - m1) * num * 6;
+      } else if ((num * 2) < 1) {
+        return m2;
+      } else if ((num * 3) < 2) {
+        return m1 + (m2 - m1) * (2 / 3 - num) * 6;
+      } else {
+        return m1;
+      }
+    };
+    return [hue(h + 1 / 3) * 255, hue(h) * 255, hue(h - 1 / 3) * 255];
+  };
+
+  window.plugins.favicon = {
+    create: function() {
+      var angle, canvas, colprep, cos, ctx, dark, fav, light, p, scale, sin, x, y;
+      $('body').append($('<canvas />').attr('width', 32).attr('height', 32).attr('id', 'favmaker').attr('display', 'none').hide());
+      canvas = document.getElementById('favmaker');
+      ctx = canvas.getContext('2d');
+      light = hsltorgb(Math.random() * 360, .78, .50);
+      dark = hsltorgb(Math.random() * 360, .78, .25);
+      angle = 2 * (Math.random() - 0.5);
+      sin = Math.sin(angle);
+      cos = Math.cos(angle);
+      scale = Math.abs(sin) + Math.abs(cos);
+      colprep = function(col, p) {
+        return Math.floor(light[col] * p + dark[col] * (1 - p)) % 255;
+      };
+      for (x = 0; x <= 31; x++) {
+        for (y = 0; y <= 31; y++) {
+          p = sin >= 0 ? sin * x + cos * y : -sin * (31 - x) + cos * y;
+          p = p / 31 / scale;
+          ctx.fillStyle = "rgba(" + (colprep(0, p)) + ", " + (colprep(1, p)) + ", " + (colprep(2, p)) + ", 1)";
+          ctx.fillRect(x, y, 1, 1);
+        }
+      }
+      fav = canvas.toDataURL();
+      $('#favicon').attr('href', fav);
+      $('.favicon').attr('src', fav);
+      return $.post('/favicon.png', {
+        image: fav
+      }, function(data) {
+        return console.log(data);
+      });
+    }
+  };
+
+}).call(this);

server/express/lib/favicon.coffee

@@ -1,91 +0,0 @@
-# ** favicon.coffee **
-# This is a brute force port of Ward's favicon.rb,
-# and could do with some refactoring by someone
-# who knows the canvas api, but it would be better
-# to move favicon generation to the client side.  This
-# could serve as a basis for that with enough refactoring.
-
-Canvas = require('canvas')
-fs = require('fs')
-mkdirp = require('mkdirp')
-path = require('path')
-
-itself = {}
-
-# Utility functions
-hsltorgb = (h, s, l) ->
-  h = (h % 360) / 360
-  m2 = l * (s + 1)
-  m1 = ((l * 2) - m2)
-  hue = (num) ->
-    if num < 0
-      num += 1
-    else if num > 1
-      num -= 1
-    if (num * 6) < 1
-      m1 + (m2 - m1) * num * 6
-    else if (num * 2) < 1
-      m2
-    else if (num * 3) < 2
-      m1 + (m2 - m1) * (2/3 - num) * 6
-    else
-      m1
-  [(hue(h+1/3)*255), (hue(h) * 255), (hue(h - 1/3) * 255)]
-
-
-create = (loc, cb) ->
-  canvas = new Canvas(32, 32)
-  ctx = canvas.getContext('2d')
-  out = fs.createWriteStream(loc)
-  stream = canvas.createPNGStream()
-  stream.on('data', (chunk) ->
-    out.write(chunk)
-  )
-  stream.on('end', () ->
-    console.log('saved png')
-    setTimeout( ->
-      cb(loc)
-    , 100
-    )
-  )
-  light = hsltorgb(Math.random() * 360, .78, .50)
-  dark = hsltorgb(Math.random() * 360, .78, .25)
-  angle = 2 * (Math.random() - 0.5)
-  sin = Math.sin angle
-  cos = Math.cos angle
-  scale = (Math.abs(sin) + Math.abs(cos))
-  colprep = (col, p) ->
-    Math.floor(light[col]*p + dark[col]*(1-p))%255
-  for x in [0..31]
-    for y in [0..31]
-      p = if sin >= 0 then sin * x + cos * y else -sin * (31 - x) + cos * y
-      p = p / 31 / scale
-      ctx.fillStyle = "rgba(#{colprep(0, p)}, #{colprep(1, p)}, #{colprep(2, p)}, 1)"
-      ctx.fillRect(x, y, 1, 1)
-
-# Exported functions
-
-itself.get = (loc, cb) ->
-  path.exists(loc, (exists) ->
-    if exists
-      cb(loc)
-    else
-      locroot = path.dirname(loc)
-      path.exists(locroot, (exists) ->
-        if exists
-          create(loc, cb)
-        else
-          mkdirp(locroot, 0777, ->
-            create(loc, cb)
-          )
-      )
-  )
-
-if path.basename(process.argv[1]) is 'favicon.coffee'
-  # If run from the command line, create a favicon.png in provided loc or cwd and exit
-  create(process.argv[2] or "#{__dirname}/favicon.png", (loc) ->
-    require('child_process').spawn('chromium', ["#{loc}"])
-  )
-
-
-module.exports = itself

server/express/lib/server.coffee

@@ -16,7 +16,6 @@ module.exports = exports = (argv) ->
   path = require('path')
   http = require('http')
   hbs = require('hbs')
-  favicon = require('./favicon.coffee')
   random = require('./random_id.coffee')
   passportImport = require('passport')
   OpenIDstrat = require('passport-openid').Strategy
@@ -245,10 +244,24 @@ module.exports = exports = (argv) ->
   )
 
   ###### Favicon Routes
-  # Local favicons are handled by the favicon module.
+  # If favLoc doesn't exist send 404 and let the client
+  # deal with it.
+  favLoc = path.join(argv.status, 'favicon.png')
   app.get('/favicon.png', (req,res) ->
-    favicon.get(path.join(argv.status, "favicon.png"), (loc) ->
-      res.sendfile(loc)
+    res.sendfile(favLoc)
+  )
+
+  app.post('/favicon.png', (req, res) ->
+    favicon = req.body.image.replace(///^data:image/png;base64,///, "")
+    buf = new Buffer(favicon, 'base64')
+    path.exists(favLoc, (exists) ->
+      if exists
+        res.send('Favicon Exists!')
+      else
+        fs.writeFile(favLoc, buf, (e) ->
+          if e then throw e
+          res.send('Favicon Saved')
+        )
     )
   )
 
@@ -336,12 +349,7 @@ module.exports = exports = (argv) ->
 
   # Get and post routes to logout.  The post one is the only one that
   # gets used from client, but the get logout route seemed useful as well.
-  app.post('/logout', (req, res) ->
-    req.logout()
-    res.redirect('index')
-  )
-
-  app.get('/logout', (req, res) ->
+  app.all('/logout', (req, res) ->
     req.logout()
     res.redirect('index')
   )

server/express/package.json

@@ -6,7 +6,6 @@
     "coffee-script": ">=1.2.0",
     "express": ">= 2.5.1",
     "mkdirp": ">= 0.0.1",
-    "canvas": ">= 0.0.1",
     "optimist": ">= 0.0.1",
     "passport": ">= 0.0.1",
     "passport-openid": ">= 0.0.1",

server/express/views/static.html

@@ -4,7 +4,7 @@
     <title>Smallest Federated Wiki</title>
     <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'>
     <meta content='width=device-width, height=device-height, initial-scale=1.0, user-scalable=no' name='viewport'>
-    <link href='/favicon.png' rel='icon' type='image/png'>
+    <link id='favicon' href='/favicon.png' rel='icon' type='image/png'>
     <link href='/style.css' rel='stylesheet' type='text/css'>
     <script src='/js/jquery-1.7.1.min.js' type='text/javascript'></script>
     <script src='/js/jquery-ui-1.8.16.custom.min.js' type='text/javascript'></script>