This repository has been archived by the owner. It is now read-only.
Permalink
Browse files

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

  • Loading branch information...
nrn committed Jan 30, 2012
1 parent f616b9b commit e706fd638687798d118cb84a83f9eb5e8eaffea6
View
@@ -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)
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
@@ -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
+ )
+
View
@@ -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);
@@ -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
@@ -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')
)
@@ -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",
@@ -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>

0 comments on commit e706fd6

Please sign in to comment.