big updat:

- update dependencies
- add webp support and webp conversion for profile images

node_modules/gif.js/site/config.json

@@ -0,0 +1,22 @@
+{
+  "locals": {
+    "name": "gif.js",
+    "url": "http://jnordberg.github.io/gif.js",
+    "description": "Full-featured JavaScript GIF encoder that runs in your browser.",
+    "keywords": "gif, encoder, animation, browser, unicorn",
+    "version": "3"
+  },
+  "baseUrl": "/gif.js/",
+  "require": {
+    "hljs": "highlight.js"
+  },
+  "nunjucks": {
+    "autoescape": false
+  },
+  "plugins": [
+    "wintersmith-browserify",
+    "wintersmith-less",
+    "wintersmith-nunjucks",
+    "./plugins/jsignore.coffee"
+  ]
+}

node_modules/gif.js/site/contents/code.md

@@ -0,0 +1,23 @@
+
+```javascript
+var gif = new GIF({
+  workers: 2,
+  quality: 10
+});
+
+// add a image element
+gif.addFrame(imageElement);
+
+// or a canvas element
+gif.addFrame(canvasElement, {delay: 200});
+
+// or copy the pixels from a canvas context
+gif.addFrame(ctx, {copy: true});
+
+gif.on('finished', function(blob) {
+  window.open(URL.createObjectURL(blob));
+});
+
+gif.render();
+
+```

node_modules/gif.js/site/contents/index.json

@@ -0,0 +1,3 @@
+{
+  "template": "index.html"
+}

node_modules/gif.js/site/contents/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:

node_modules/gif.js/site/contents/scripts/main.coffee

@@ -0,0 +1,109 @@
+require 'browsernizr/test/css/rgba'
+require 'browsernizr/test/css/transforms3d'
+Modernizr = require 'browsernizr'
+
+require './vendor/mootools.js'
+
+async = require 'async'
+ready = require './vendor/ready.js'
+
+now = window.performance?.now?.bind(window.performance) or Date.now
+
+# fallback for browsers not supporting createObjectURL
+blobURLSupport = window.URL?.createObjectURL?
+buildDataURL = do ->
+  charMap = {}
+  charMap[i] = String.fromCharCode(i) for i in [0...256]
+  return (data) ->
+    str = ''
+    for i in [0...data.length]
+      str += charMap[data[i]]
+    return 'data:image/gif;base64,' + btoa(str)
+
+loadImage = (src, callback) ->
+  img = new Image()
+  img.onload = ->
+    callback null, img
+  img.onerror = ->
+    callback new Error "Could load #{ src }"
+  img.src = src
+
+setupDemo = (element) ->
+  element.getElements('.hover-buttons li').addEvents
+    mouseenter: -> element.addClass @className
+    mouseleave: -> element.removeClass @className
+
+  qslider = element.getElement '.quality input'
+  qvalue = element.getElement '.quality span'
+  renderimg = element.getElement 'img.render'
+  logel = element.getElement 'pre'
+
+  gif = new GIF
+    debug: true
+    quality: 10
+    workers: 2
+
+  startTime = null
+  gif.on 'start', ->
+    startTime = now()
+
+  gif.on 'finished', (blob, data) ->
+    if blobURLSupport
+      renderimg.src = URL.createObjectURL(blob)
+    else
+      renderimg.src = buildDataURL(data)
+    delta = now() - startTime
+    logel.set 'text', "Rendered #{ images.length } frame(s) at q#{ gif.options.quality } in #{ delta.toFixed(2) }ms"
+
+  gif.on 'progress', (p) ->
+    logel.set 'text', "Rendering #{ images.length } frame(s) at q#{ gif.options.quality }... #{ Math.round(p * 100) }%"
+
+  images = element.getElements('img.original').map (img) -> img.src
+  async.map images, loadImage, (error, images) ->
+    throw error if error?
+    gif.addFrame image, {delay: 500, copy: true} for image in images
+    gif.render()
+
+  qslider.addEvent 'change', ->
+    val = 31 - parseInt qslider.value
+    qvalue.set 'text', val
+    gif.setOption 'quality', val
+    gif.abort()
+    gif.render()
+
+  (element.getElement '.dither select')?.addEvent 'change', ->
+    gif.setOption 'dither', if @value is 'None' then false else @value
+    gif.abort()
+    gif.render()
+
+  delay = element.getElement '.delay'
+  if delay?
+    delay.getElement('input').addEvent 'change', ->
+      value = parseInt this.value
+      delay.getElement('.value').set 'text', value + 'ms'
+      for frame in gif.frames
+        frame.delay = value
+      gif.abort()
+      gif.render()
+
+  repeat = element.getElement '.repeat'
+  if repeat?
+    repeat.getElement('input').addEvent 'change', ->
+      value = parseInt this.value
+      value = -1 if value is 0
+      value = 0 if value is 21
+      switch value
+        when 0
+          txt = 'forever'
+        when -1
+          txt = 'none'
+        else
+          txt = value
+      repeat.getElement('.value').set 'text', txt
+      gif.setOption 'repeat', value
+      gif.abort()
+      gif.render()
+
+ready ->
+  for demo in document.body.querySelectorAll '.demo'
+    setupDemo demo

node_modules/gif.js/site/contents/scripts/vendor/ready.js

@@ -0,0 +1,54 @@
+/*!
+  * domready (c) Dustin Diaz 2012 - License MIT
+  */
+!function (name, context, definition) {
+  if (typeof module != 'undefined') module.exports = definition()
+  else if (typeof define == 'function' && typeof define.amd == 'object') define(definition)
+  else context[name] = definition()
+}('domready', this, function (ready) {
+
+  var fns = [], fn, f = false
+    , doc = document
+    , testEl = doc.documentElement
+    , hack = testEl.doScroll
+    , domContentLoaded = 'DOMContentLoaded'
+    , addEventListener = 'addEventListener'
+    , onreadystatechange = 'onreadystatechange'
+    , readyState = 'readyState'
+    , loaded = /^loade|c/.test(doc[readyState])
+
+  function flush(f) {
+    loaded = 1
+    while (f = fns.shift()) f()
+  }
+
+  doc[addEventListener] && doc[addEventListener](domContentLoaded, fn = function () {
+    doc.removeEventListener(domContentLoaded, fn, f)
+    flush()
+  }, f)
+
+
+  hack && doc.attachEvent(onreadystatechange, fn = function () {
+    if (/^c/.test(doc[readyState])) {
+      doc.detachEvent(onreadystatechange, fn)
+      flush()
+    }
+  })
+
+  return (ready = hack ?
+    function (fn) {
+      self != top ?
+        loaded ? fn() : fns.push(fn) :
+        function () {
+          try {
+            testEl.doScroll('left')
+          } catch (e) {
+            return setTimeout(function() { ready(fn) }, 50)
+          }
+          fn()
+        }()
+    } :
+    function (fn) {
+      loaded ? fn() : fns.push(fn)
+    })
+})

node_modules/gif.js/site/contents/styles/main.less

@@ -0,0 +1,188 @@
+
+@import 'vendor/reset';
+@import 'vendor/elements';
+
+@background: #d4d4d4;
+@text: #131313;
+
+html, body {
+  min-height: 100%;
+}
+
+body {
+  font-family: 'Helvetica Neue', Helvetica, sans-serif;
+  font-size: 21px;
+  color: @text;
+  margin: 0;
+  .gradient(@background, @background, lighten(@background, 20%));
+}
+
+h1 {
+  font-size: 2.6em;
+  margin-bottom: 0.5em;
+}
+
+p {
+  margin-bottom: 1em;
+}
+
+h2 {
+  font-size: 1.6em;
+  margin-bottom: 0.8em;
+  margin-top: 1.2em;
+}
+
+header {
+  padding-top: 1em;
+  h1 {
+    overflow: hidden;
+    text-indent: -100%;
+    background: url(../images/logo.gif);
+    width: 600px;
+    height: 288px;
+  }
+}
+
+footer {
+  text-align: center;
+  font-size: 0.8em;
+  padding: 10em 1em 1em;
+  font-style: italic;
+  &, a {
+    text-decoration: none;
+    color: #505050;
+  }
+}
+
+header, footer, .wrap {
+  width: 600px;
+  margin: 0 auto;
+}
+
+.demo, .demo pre {
+  font-family: Menlo, monospace;
+  font-size: 18px;
+}
+
+.demo {
+  position: relative;
+  background: #fff;
+  width: 600px;
+  margin: 0 auto;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  margin-bottom: 2em;
+  .hover-buttons {
+    position: absolute;
+    top: 0;
+    right: 0;
+    li {
+      font-size: 14px;
+      opacity: 0.6;
+      background: #000;
+      background: rgba(0, 0, 0, 0.4);
+      color: #fff;
+      float: left;
+      padding: 10px 12px 9px;
+      border-bottom-right-radius: 4px;
+      border-bottom-left-radius: 4px;
+      margin-right: 10px;
+      cursor: default;
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+  .images {
+    height: 392px;
+    img {
+      display: none;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 600px;
+      height: 392px;
+      &.render {
+        display: block;
+        background: #fff url(../images/loading.gif) no-repeat center center;
+      }
+    }
+  }
+
+  &.original .images img.original {
+    display: block;
+  }
+  &.reference .images img.reference {
+    display: block;
+  }
+
+  .controls {
+    padding: 10px;
+    p {
+      line-height: 1.3;
+      margin: 0;
+    }
+    label {
+      display: inline-block;
+      min-width: 80px;
+    }
+    pre {
+      margin-top: 10px;
+    }
+
+  }
+}
+
+/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
+.tomorrow-comment, pre .comment, pre .title {
+  color: #8e908c;
+}
+
+.tomorrow-red, pre .variable, pre .attribute, pre .tag, pre .regexp, pre .ruby .constant, pre .xml .tag .title, pre .xml .pi, pre .xml .doctype, pre .html .doctype, pre .css .id, pre .css .class, pre .css .pseudo {
+  color: #c82829;
+}
+
+.tomorrow-orange, pre .number, pre .preprocessor, pre .built_in, pre .literal, pre .params, pre .constant {
+  color: #f5871f;
+}
+
+.tomorrow-yellow, pre .ruby .class .title, pre .css .rules .attribute {
+  color: #eab700;
+}
+
+.tomorrow-green, pre .string, pre .value, pre .inheritance, pre .header, pre .ruby .symbol, pre .xml .cdata {
+  color: #718c00;
+}
+
+.tomorrow-aqua, pre .css .hexcolor {
+  color: #3e999f;
+}
+
+.tomorrow-blue, pre .function, pre .python .decorator, pre .python .title, pre .ruby .function .title, pre .ruby .title .keyword, pre .perl .sub, pre .javascript .title, pre .coffeescript .title {
+  color: #4271ae;
+}
+
+.tomorrow-purple, pre .keyword, pre .javascript .function {
+  color: #8959a8;
+}
+
+pre code {
+  display: block;
+  background: white;
+  color: #4d4d4c;
+  padding: 0.5em;
+}
+
+pre.src code {
+  font-size: 0.7em;
+  overflow: auto;
+}
+
+pre .coffeescript .javascript,
+pre .javascript .xml,
+pre .tex .formula,
+pre .xml .javascript,
+pre .xml .vbscript,
+pre .xml .css,
+pre .xml .cdata {
+  opacity: 0.5;
+}

node_modules/gif.js/site/contents/styles/vendor/elements.less

@@ -0,0 +1,156 @@
+//---------------------------------------------------
+//  LESS Elements 0.9
+//---------------------------------------------------
+//  A set of useful LESS mixins
+//  More info at: http://lesselements.com
+//---------------------------------------------------
+
+.gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) {
+  background: @color;
+  background: -webkit-gradient(linear,
+                               left bottom,
+                               left top,
+                               color-stop(0, @start),
+                               color-stop(1, @stop));
+  background: -ms-linear-gradient(bottom,
+                                  @start,
+                                  @stop);
+  background: -moz-linear-gradient(center bottom,
+                                   @start 0%,
+                                   @stop 100%);
+  background: -o-linear-gradient(@stop,
+                                 @start);
+  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@stop,@start));
+}
+.bw-gradient(@color: #F5F5F5, @start: 0, @stop: 255) {
+  background: @color;
+  background: -webkit-gradient(linear,
+                               left bottom,
+                               left top,
+                               color-stop(0, rgb(@start,@start,@start)),
+                               color-stop(1, rgb(@stop,@stop,@stop)));
+  background: -ms-linear-gradient(bottom,
+                                  rgb(@start,@start,@start) 0%,
+                                  rgb(@stop,@stop,@stop) 100%);
+  background: -moz-linear-gradient(center bottom,
+                                   rgb(@start,@start,@start) 0%,
+                                   rgb(@stop,@stop,@stop) 100%);
+  background: -o-linear-gradient(rgb(@stop,@stop,@stop),
+                                 rgb(@start,@start,@start));
+  filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",rgb(@stop,@stop,@stop),rgb(@start,@start,@start)));
+}
+.bordered(@top-color: #EEE, @right-color: #EEE, @bottom-color: #EEE, @left-color: #EEE) {
+  border-top: solid 1px @top-color;
+  border-left: solid 1px @left-color;
+  border-right: solid 1px @right-color;
+  border-bottom: solid 1px @bottom-color;
+}
+.drop-shadow(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1) {
+  -webkit-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
+  -moz-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
+  box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
+}
+.rounded(@radius: 2px) {
+  -webkit-border-radius: @radius;
+  -moz-border-radius: @radius;
+  border-radius: @radius;
+}
+.border-radius(@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {
+  -webkit-border-top-right-radius: @topright;
+  -webkit-border-bottom-right-radius: @bottomright;
+  -webkit-border-bottom-left-radius: @bottomleft;
+  -webkit-border-top-left-radius: @topleft;
+  -moz-border-radius-topright: @topright;
+  -moz-border-radius-bottomright: @bottomright;
+  -moz-border-radius-bottomleft: @bottomleft;
+  -moz-border-radius-topleft: @topleft;
+  border-top-right-radius: @topright;
+  border-bottom-right-radius: @bottomright;
+  border-bottom-left-radius: @bottomleft;
+  border-top-left-radius: @topleft;
+  .background-clip(padding-box);
+}
+.opacity(@opacity: 0.5) {
+  -moz-opacity: @opacity;
+  -khtml-opacity: @opacity;
+  -webkit-opacity: @opacity;
+  opacity: @opacity;
+  @opperc: @opacity * 100;
+  -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=@{opperc})";
+  filter: ~"alpha(opacity=@{opperc})";
+}
+.transition-duration(@duration: 0.2s) {
+  -moz-transition-duration: @duration;
+  -webkit-transition-duration: @duration;
+  -o-transition-duration: @duration;
+  transition-duration: @duration;
+}
+.transform(...) {
+  -webkit-transform: @arguments;
+  -moz-transform: @arguments;
+  -o-transform: @arguments;
+  -ms-transform: @arguments;
+  transform: @arguments;
+}
+.rotation(@deg:5deg){
+  .transform(rotate(@deg));
+}
+.scale(@ratio:1.5){
+  .transform(scale(@ratio));
+}
+.transition(@duration:0.2s, @ease:ease-out) {
+  -webkit-transition: all @duration @ease;
+  -moz-transition: all @duration @ease;
+  -o-transition: all @duration @ease;
+  transition: all @duration @ease;
+}
+.inner-shadow(@horizontal:0, @vertical:1px, @blur:2px, @alpha: 0.4) {
+  -webkit-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
+  -moz-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
+  box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
+}
+.box-shadow(@arguments) {
+  -webkit-box-shadow: @arguments;
+  -moz-box-shadow: @arguments;
+  box-shadow: @arguments;
+}
+.box-sizing(@sizing: border-box) {
+  -ms-box-sizing: @sizing;
+  -moz-box-sizing: @sizing;
+  -webkit-box-sizing: @sizing;
+  box-sizing: @sizing;
+}
+.user-select(@argument: none) {
+  -webkit-user-select: @argument;
+  -moz-user-select: @argument;
+  -ms-user-select: @argument;
+  user-select: @argument;
+}
+.columns(@colwidth: 250px, @colcount: 0, @colgap: 50px, @columnRuleColor: #EEE, @columnRuleStyle: solid, @columnRuleWidth: 1px) {
+  -moz-column-width: @colwidth;
+  -moz-column-count: @colcount;
+  -moz-column-gap: @colgap;
+  -moz-column-rule-color: @columnRuleColor;
+  -moz-column-rule-style: @columnRuleStyle;
+  -moz-column-rule-width: @columnRuleWidth;
+  -webkit-column-width: @colwidth;
+  -webkit-column-count: @colcount;
+  -webkit-column-gap: @colgap;
+  -webkit-column-rule-color: @columnRuleColor;
+  -webkit-column-rule-style: @columnRuleStyle;
+  -webkit-column-rule-width: @columnRuleWidth;
+  column-width: @colwidth;
+  column-count: @colcount;
+  column-gap: @colgap;
+  column-rule-color: @columnRuleColor;
+  column-rule-style: @columnRuleStyle;
+  column-rule-width: @columnRuleWidth;
+}
+.translate(@x:0, @y:0) {
+  .transform(translate(@x, @y));
+}
+.background-clip(@argument: padding-box) {
+  -moz-background-clip: @argument;
+  -webkit-background-clip: @argument;
+  background-clip: @argument;
+}

node_modules/gif.js/site/contents/styles/vendor/reset.less

@@ -0,0 +1,45 @@
+// http://meyerweb.com/eric/tools/css/reset/
+// v2.0 | 20110126
+// License: none (public domain)
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  vertical-align: baseline;
+}
+// HTML5 display-role reset for older browsers
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol, ul {
+  list-style: none;
+}
+blockquote, q {
+  quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}

node_modules/gif.js/site/contents/tests/canvas.coffee

@@ -0,0 +1,65 @@
+require '../scripts/vendor/mootools.js'
+ready = require '../scripts/vendor/ready.js'
+
+num_frames = 20
+width = 600
+height = 300
+text = 'HYPNO TOAD'
+textSize = 70
+
+now = window.performance?.now?.bind(window.performance) or Date.now
+
+rgb = (rgb...) -> "rgb(#{ rgb.map((v) -> Math.floor(v * 255)).join(',') })"
+hsl = (hsl...) ->
+  hsl = hsl.map (v, i) -> if i is 0 then v * 360 else "#{ v * 100 }%"
+  return "hsl(#{ hsl.join(',') })"
+
+ready ->
+  canvas = document.createElement 'canvas'
+  canvas.width = width
+  canvas.height = height
+
+  startTime = null
+  ctx = canvas.getContext '2d'
+  info = document.id 'info'
+
+  gif = new GIF
+    workers: 4
+    workerScript: '/gif.js/gif.worker.js'
+    width: width
+    height: height
+
+  gif.on 'start', -> startTime = now()
+
+  gif.on 'progress', (p) -> info.set 'text', Math.round(p * 100)+'%'
+
+  gif.on 'finished', (blob) ->
+    img = document.id 'result'
+    img.src = URL.createObjectURL(blob)
+    delta = now() - startTime
+    info.set 'text', """
+      100%
+      #{ (delta / 1000).toFixed 2 }sec
+      #{ (blob.size / 1000).toFixed 2 }kb
+    """
+
+  ctx.font = "bold #{ textSize }px Helvetica"
+  ctx.textAlign = 'center'
+  ctx.textBaseline = 'middle'
+  ctx.lineWidth = 3
+  w2 = width / 2
+  h2 = height / 2
+  for i in [0...num_frames]
+    p = i / (num_frames - 1)
+    grad = ctx.createRadialGradient w2, h2, 0, w2, h2, w2
+    grad.addColorStop 0, hsl p, 1, 0.5
+    grad.addColorStop 1, hsl (p + 0.2) % 1, 1, 0.4
+    ctx.fillStyle = grad
+    ctx.fillRect 0, 0, width, height
+    ctx.fillStyle = hsl (p + 0.5) % 1, 1, 0.7
+    ctx.strokeStyle = hsl (p + 0.8) % 1, 1, 0.9
+    ctx.fillText text, w2, h2
+    ctx.strokeText text, w2, h2
+    gif.addFrame ctx, {copy: true, delay: 20}
+
+  gif.render()

node_modules/gif.js/site/contents/tests/canvas.md

@@ -0,0 +1,10 @@
+---
+title: Canvas rendering
+script: canvas.coffee
+template: test.html
+---
+
+<p id="info">Loading...</p>
+
+<img id="result">
+

node_modules/gif.js/site/contents/tests/video.coffee

@@ -0,0 +1,70 @@
+require '../scripts/vendor/mootools.js'
+ready = require '../scripts/vendor/ready.js'
+now = window.performance?.now?.bind(window.performance) or Date.now
+
+ready ->
+  info = document.id 'info'
+  video = document.id 'video'
+  button = document.id 'go'
+  sample = document.id 'sample'
+
+  gif = new GIF
+    workers: 4
+    workerScript: '/gif.js/gif.worker.js'
+    width: 600
+    height: 337
+
+  startTime = null
+  sampleInterval = null
+
+  sampleUpdate = ->
+    sampleInterval = parseInt sample.value
+    gif.abort()
+    document.id('info').set 'text', """
+      ready to start with a sample interval of #{ sampleInterval }ms
+    """
+
+  video.addEventListener 'canplay', ->
+    button.disabled = false
+    sample.disabled = false
+    sampleUpdate()
+
+  sample.addEvent 'change', sampleUpdate
+
+  button.addEvent 'click', ->
+    video.pause()
+    video.currentTime = 0
+    gif.abort()
+    gif.frames = []
+    video.play()
+
+  gif.on 'start', -> startTime = now()
+
+  gif.on 'progress', (p) ->
+    info.set 'text', "rendering: #{ Math.round(p * 100) }%"
+
+  gif.on 'finished', (blob) ->
+    img = document.id 'result'
+    img.src = URL.createObjectURL(blob)
+    delta = now() - startTime
+    info.set 'text', """
+      done in
+      #{ (delta / 1000).toFixed 2 }sec,
+      size #{ (blob.size / 1000).toFixed 2 }kb
+    """
+
+  # this might not be the best approach to capturing
+  # html video, but i but i can't seek since my dev server
+  # doesn't support http byte requests
+  timer = null
+  capture = ->
+    info.set 'html', "capturing at #{ video.currentTime }"
+    gif.addFrame video, {copy: true, delay: sampleInterval}
+
+  video.addEventListener 'play', ->
+    clearInterval timer
+    timer = setInterval capture, sampleInterval
+
+  video.addEventListener 'ended', ->
+    clearInterval timer
+    gif.render()

node_modules/gif.js/site/contents/tests/video.md

@@ -0,0 +1,20 @@
+---
+title: Video to GIF
+script: video.coffee
+template: test.html
+---
+
+<p>
+  <input disabled id="sample" type="range" step="1" min="20" max="500" value="100">
+  <button id="go" disabled>Do it!</button>
+</p>
+
+<p id="info">Loading...</p>
+
+<video id="video" width="600">
+  <source src="clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.'>
+  <source src="clip.ogv" type='video/ogg; codecs="theora, vorbis"'>
+</video>
+
+<img id="result">
+

node_modules/gif.js/site/package.json

@@ -0,0 +1,11 @@
+{
+  "private": true,
+  "dependencies": {
+    "wintersmith-browserify": "*",
+    "wintersmith-less": "*",
+    "wintersmith-nunjucks": "*",
+    "browsernizr": "*",
+    "async": "~0.2.8",
+    "highlight.js": "~7.3.0"
+  }
+}

node_modules/gif.js/site/plugins/jsignore.coffee

@@ -0,0 +1,4 @@
+module.exports = (env, callback) ->
+  # hack to have browserify ignore the symlinked gif.js
+  env.registerContentPlugin 'files', 'gif.*js', env.plugins.StaticFile
+  callback()

node_modules/gif.js/site/templates/index.html

@@ -0,0 +1,152 @@
+{% extends 'layout.html' %}
+
+{% block scripts %}
+  <script src="gif.js?v={{ version }}"></script>
+  <script src="scripts/main.js?v={{ version }}"></script>
+{% endblock %}
+
+{% block body %}
+
+  <h2>Usage</h2>
+  {{ contents['code.md'].html }}
+
+  <h2>Demo</h2>
+
+  <p>
+    GIF images are generated in the background using web workers. Hover the original and reference
+    tabs to see respective image.
+  </p>
+
+  <p>
+    Reference images are rendered with photoshop cs6 using the perceptual setting with no dither.
+  </p>
+
+  <div class="demo">
+    <div class="images">
+      <img class="render">
+      <img class="original" src="images/test/anim1.jpg">
+      <img class="original" src="images/test/anim2.jpg">
+      <img class="original" src="images/test/anim3.jpg">
+      <img class="original" src="images/test/anim4.jpg">
+      <img class="reference" src="images/test/anim-ref.gif">
+    </div>
+    <ul class="hover-buttons">
+      <li class="original">Original</li>
+      <li class="reference">Reference</li>
+    </ul>
+    <div class="controls">
+      <p class="quality">
+        <label>Quality</label>
+        <input type="range" step="1" min="1" max="30" value="20">
+        <span class="value">10</span>
+      </p>
+      <p class="delay">
+        <label>Delay</label>
+        <input type="range" step="1" min="0" max="1000" value="500">
+        <span class="value">500ms</span>
+      </p>
+      <p class="repeat">
+        <label>Repeat</label>
+        <input type="range" step="1" min="0" max="21" value="21">
+        <span class="value">forever</span>
+      </p>
+      <p class="dither">
+        <label>Dither</label>
+        <select>
+          <option selected>None</option>
+          <option>Atkinson</option>
+          <option>Atkinson-serpentine </option>
+          <option>FalseFloydSteinberg</option>
+          <option>FalseFloydSteinberg-serpentine</option>
+          <option>FloydSteinberg</option>
+          <option>FloydSteinberg-serpentine</option>
+          <option>Stucki</option>
+          <option>Stucki-serpentine</option>
+        </select>
+      </p>
+      <p class="info">
+        <pre>Loading...</pre>
+      </p>
+    </div>
+  </div>
+
+  <div class="demo">
+    <div class="images">
+      <img class="render">
+      <img class="original" src="images/test/test1-orig.jpg">
+      <img class="reference" src="images/test/test1-ref.gif">
+    </div>
+    <ul class="hover-buttons">
+      <li class="original">Original</li>
+      <li class="reference">Reference</li>
+    </ul>
+    <div class="controls">
+      <p class="quality">
+        <label>Quality</label>
+        <input type="range" step="1" min="1" max="30" value="20">
+        <span class="value">10</span>
+      </p>
+      <p class="dither">
+        <label>Dither</label>
+        <select>
+          <option selected>None</option>
+          <option>Atkinson</option>
+          <option>Atkinson-serpentine </option>
+          <option>FalseFloydSteinberg</option>
+          <option>FalseFloydSteinberg-serpentine</option>
+          <option>FloydSteinberg</option>
+          <option>FloydSteinberg-serpentine</option>
+          <option>Stucki</option>
+          <option>Stucki-serpentine</option>
+        </select>
+      </p>
+      <p class="info">
+        <pre>Loading...</pre>
+      </p>
+    </div>
+  </div>
+
+  <div class="demo">
+    <div class="images">
+      <img class="render">
+      <img class="original" src="images/test/test3-orig.png">
+      <img class="reference" src="images/test/test3-ref.gif">
+    </div>
+    <ul class="hover-buttons">
+      <li class="original">Original</li>
+      <li class="reference">Reference</li>
+    </ul>
+    <div class="controls">
+      <p class="quality">
+        <label>Quality</label>
+        <input type="range" step="1" min="1" max="30" value="20">
+        <span class="value">10</span>
+      </p>
+      <p class="dither">
+        <label>Dither</label>
+        <select>
+          <option selected>None</option>
+          <option>Atkinson</option>
+          <option>Atkinson-serpentine </option>
+          <option>FalseFloydSteinberg</option>
+          <option>FalseFloydSteinberg-serpentine</option>
+          <option>FloydSteinberg</option>
+          <option>FloydSteinberg-serpentine</option>
+          <option>Stucki</option>
+          <option>Stucki-serpentine</option>
+        </select>
+      </p>
+      <p class="info">
+        <pre>Loading...</pre>
+      </p>
+    </div>
+  </div>
+
+  <h2>Other tests</h2>
+  <ul>
+  {% for test in contents.tests._.pages %}
+    <li><a href="{{ test.url }}">{{ test.title }}</a></li>
+  {% endfor %}
+  </ul>
+
+{% endblock %}

node_modules/gif.js/site/templates/layout.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html class="no-js">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <title>{{ name }}</title>
+  <meta name="description" content="{{ description }}">
+  <meta name="keywords" content="{{ keywords }}">
+  <meta name="viewport" content="width=device-width">
+  <meta property="og:title" content="{{ name }}">
+  <meta property="og:url" content="{{ url }}">
+  <meta property="og:description" content="{{ description }}">
+  <meta property="og:type" content="website">
+  <link rel="stylesheet" href="{{ env.config.baseUrl }}styles/main.css">
+  <script>
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+    ga('create', 'UA-41063995-1', 'jnordberg.github.io');
+    ga('send', 'pageview');
+  </script>
+  {% block scripts %}{% endblock %}
+</head>
+<body>
+  <header>
+    <h1>gif.js</h1>
+    <p>{{ description }}</p>
+    <p class="github"><a href="https://github.com/jnordberg/gif.js">Download &amp; Docs on GitHub</a></p>
+  </header>
+  <div class="wrap">
+    {% block body %}{% endblock %}
+  </div>
+  <footer>
+    <a href="https://creativecommons.org/licenses/by-sa/3.0/">&copy;&copy;</a> 2013
+    <a href="http://johan-nordberg.com/">Johan Nordberg</a>
+  </footer>
+</body>
+</html>

node_modules/gif.js/site/templates/test.html

@@ -0,0 +1,19 @@
+{% extends 'layout.html' %}
+
+{% set script = contents.tests[page.metadata.script] %}
+
+{% block scripts %}
+  <script src="{{ env.config.baseUrl }}gif.js?v={{ version }}"></script>
+  <script src="{{ script.url }}?v={{ version }}"></script>
+{% endblock %}
+
+{% block body %}
+<h2>{{ page.title }}</h2>
+<div class="test">
+  {{ page.html }}
+</div>
+<h2>Source</h2>
+<pre class="src">
+  <code>{{ hljs.highlightAuto(script.source).value }}</code>
+</pre>
+{% endblock %}