initial

.gitignore

@@ -0,0 +1 @@
+node_modules

README.md

@@ -0,0 +1,65 @@
+
+# review
+
+Uses phantomjs to get screenshots of your running sites in different resolutions.
+
+![preview](http://f.cl.ly/items/3T2k0x0N0M0T3y1j2Y1c/Screen%20Shot%202013-01-14%20at%2011.38.41%20PM.png)
+
+## usage
+
+```bash
+$ npm install -g review
+$ review --sites='{"google":"http://google.com","facebook":"http://facebook.com"}' --resolutions='["1440x900","1280x1024"]' --port 3000
+$ # or check
+$ review --usage
+```
+
+And as library:
+
+```bash
+$ npm install review
+```
+
+```js
+var review = require('review')
+
+var sites = {
+  'google' : 'http://google.com',
+  'facebook' : 'http://facebook.com',
+  'github' : 'https://github.com'
+}
+
+var resolutions = [
+  '1280x1024', '1900x1600', '800x600'
+]
+
+review()
+  .title('My Review')
+  .sites(sites)
+  .resolutions(resolutions)
+  .listen(3000)
+
+// review returns an express request handler
+```
+
+## requirements
+
+You need to have phantomjs installed, get it via
+
+```bash
+$ brew install phantomjs
+```
+
+or check [phantomjs.org](http://phantomjs.org/)
+
+## license
+
+(MIT)
+
+Copyright (c) 2012 Julian Gruber <[email protected]>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

bin/review.js

@@ -0,0 +1,31 @@
+#!/usr/bin/env node
+
+var review = require('..')
+var optimist = require('optimist')
+
+var argv = optimist
+  .usage('Host review\nUsage: $0 [options]\n\nExample: review --sites=\'{"google":"http://google.com"}\'')
+  .describe('port', 'Port to listen on')
+  .default('port', 4000)
+  .alias('p', 'port')
+  .describe('title', 'Title of the review')
+  .default('title', 'Review')
+  .alias('t', 'title')
+  .describe('sites', 'Sites as JSON Object of strings')
+  .alias('s', 'sites')
+  .describe('resolutions', 'Resolutions as JSON Array of strings')
+  .alias('r', 'resolutions')
+  .default('resolutions', '["1200x800"]')
+  .describe('help', 'Print usage instructions')
+  .alias('h', 'help')
+  .argv
+
+if (argv.help || !argv.sites) return optimist.showHelp()
+
+review()
+  .title(argv.title)
+  .sites(JSON.parse(argv.sites))
+  .resolutions(JSON.parse(argv.resolutions))
+  .listen(argv.port, function () {
+    console.log('-> Review on port ' + argv.port)
+  })

index.js

@@ -0,0 +1 @@
+module.exports = require('./lib/review')

lib/review.js

@@ -0,0 +1,77 @@
+var express = require('express')
+
+module.exports = review
+
+function review (title, sites, resolutions) {
+  var title = 'Review'
+  var sites = {}
+  var resolutions = ['1200x800']
+
+  var app = express()
+
+  app.set('view engine', 'jade')
+  app.use(express.static(__dirname + '/../public'))
+
+  /**
+   * setters
+   */
+
+  app.title = function (_title) {
+    title = _title
+    return this
+  }
+
+  app.sites = function (_sites) {
+    sites = _sites
+    return this
+  }
+
+  app.resolutions = function (_resolutions) {
+    resolutions = _resolutions
+    return this
+  }
+
+  /**
+   * routes
+   */
+
+  app.get('/', function (req, res) {
+    if (!sites) return res.status(500).end('sites not set')
+
+    var maxWidth = resolutions.reduce(function (prev, cur) {
+      return cur.split('x')[0] > prev.split('x')[0]
+        ? cur
+        : prev
+    })
+
+    var maxWidth = resolutions.reduce(function (prev, cur) {
+      prev = typeof prev == 'string'
+        ? parseInt(prev.split('x')[0], 10)
+        : prev
+      cur = parseInt(cur.split('x')[0], 10)
+      if (prev > cur) return prev
+      else return cur
+    })
+
+    // add class
+    var _resolutions = resolutions.map(function (resolution) {
+      var width = parseInt(resolution.split('x')[0], 10)
+
+      return {
+        name : resolution,
+        width : (width / maxWidth * 100) + '%',
+        maxWidth : width + 'px'
+      }
+    })
+
+    res.render('index', {
+      title : title,
+      sites : sites,
+      resolutions : _resolutions
+    })
+  })
+
+  app.use('/snapshot', require('./snapshot'))
+
+  return app
+}

lib/snapshot.js

@@ -0,0 +1,23 @@
+var express = require('express')
+var spawn = require('child_process').spawn
+
+var app = module.exports = express()
+
+var script = __dirname + '/../script/rasterize.js'
+
+app.get('/:url/:resolution', function (req, res, next) {
+  res.set('Content-Type', 'image/png')
+  var ps = spawn(
+    'phantomjs', [script, req.params.url, req.params.resolution]
+  )
+
+  ps.on('error', next)
+
+  var chunks = []
+  ps.stdout.on('data', function (chunk) {
+    chunks.push(chunk)
+  })
+  ps.on('exit', function () {
+    res.send(new Buffer(chunks.join(''), 'base64'))
+  })
+})

package.json

@@ -0,0 +1,25 @@
+{
+  "name": "review",
+  "version": "0.0.0",
+  "description": "Regression testing visual review tool",
+  "main": "index.js",
+  "repository": "git://github.com/juliangruber/review",
+  "keywords": [
+    "review",
+    "regression",
+    "visual",
+    "phantomjs",
+    "testing",
+    "test"
+  ],
+  "bin": {
+    "review": "./bin/review.js"
+  },
+  "author": "Julian Gruber <[email protected]>",
+  "license": "MIT",
+  "dependencies": {
+    "optimist": "~0.3.5",
+    "jade": "~0.28.1",
+    "express": "~3.0.6"
+  }
+}

public/app.js

@@ -0,0 +1,50 @@
+var images = Array.prototype.slice.apply(document.querySelectorAll('img'))
+var info = document.querySelector('#info')
+var loading = document.querySelector('#loading')
+
+var loaded = 0
+var reloads = 0
+
+/**
+ * loading indicator
+ */
+
+var iv = setInterval(function () {
+  if (loaded == images.length) return clearInterval(iv)
+
+  loading.innerHTML += '.'
+  if (loading.innerHTML == '....') loading.innerHTML = ''
+}, 500)
+
+info.innerHTML = '0 / ' + images.length + ' loaded'
+
+/**
+ * reload
+ */
+
+images.forEach(function (image) {
+  image.addEventListener('click', function () {
+    reloads++
+    var oldSrc = image.src + ''
+    image.src = '/empty.jpg'
+    setTimeout(function () {
+      image.src = oldSrc
+      image.src += oldSrc.match(/\?/)
+        ? '&'
+        : '?'
+      image.src += 'reload'
+    }, 1000)
+  })
+})
+
+/**
+ * loading status
+ */
+
+images.forEach(function (image) {
+  image.addEventListener('load', function () {
+    loaded = ++loaded - reloads
+    info.innerHTML = loaded + ' / ' + images.length + ' loaded'
+    if (loaded == images.length) info.innerHTML = 'all loaded'
+  })
+})

public/style.css

@@ -0,0 +1,34 @@
+body {
+  font : 20px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
+  padding : 20px 40px;
+}
+
+h1 span, h2 span {
+  color : lightgray;
+}
+
+h1 span {
+  font-weight : normal;
+  font-size : 40%;
+  color : lightblue;
+}
+
+#info {
+  margin-left : 1em;
+}
+
+img {
+          box-shadow: 2px 2px 25px rgba(0, 0, 0, 0.80);
+     -moz-box-shadow: 2px 2px 25px rgba(0, 0, 0, 0.80);
+  -webkit-box-shadow: 2px 2px 25px rgba(0, 0, 0, 0.80);
+}
+
+img:hover {
+  cursor : pointer;
+}
+
+p { font-size : 75%; }
+
+.big { width : 100%; max-width : 1900px; }
+.medium { width : 87%; max-width : 1660px; }
+.small { width : 67%; max-width : 1280px; }

script/rasterize.js

@@ -0,0 +1,20 @@
+var page = require('webpage').create()
+var args = require('system').args
+
+var url = args[1]
+var resolution = args[2]
+var width = resolution.split('x')[0]
+var height = resolution.split('y')[0]
+
+page.viewportSize = {
+  width : resolution.split('x')[0],
+  height : resolution.split('x')[1]
+}
+
+page.open(url, function (status) {
+  if (status !== 'success') throw 'Unable to load'
+  window.setTimeout(function () {
+    console.log(page.renderBase64('PNG'))
+    phantom.exit()
+  }, 10000)
+})

views/index.jade

@@ -0,0 +1,22 @@
+!!!
+html
+  head
+    title= title
+    link(rel='stylesheet',href='/style.css')
+  body
+    h1= title
+      span#info  be patient
+      span#loading
+
+    p Be patient, images will start appearing after 10s. Click an image to reload.
+
+    each url, title in sites
+      each resolution in resolutions
+        h2= title
+          span  #{resolution.name}
+        img(
+          src='/snapshot/#{encodeURIComponent(url)}/#{resolution.name}/',
+          style="width:#{resolution.width}; max-width:#{resolution.maxWidth}"
+        )
+
+    script(src="/app.js")