Permalink
Browse files

init

  • Loading branch information...
sindresorhus committed Feb 7, 2014
0 parents commit 585c9584551aaa5e3aa229fdf8796d0e16016c93
Showing with 291 additions and 0 deletions.
  1. +12 −0 .editorconfig
  2. +1 −0 .gitattributes
  3. +1 −0 .gitignore
  4. +19 −0 .jshintrc
  5. +3 −0 .travis.yml
  6. +73 −0 cli.js
  7. +10 −0 fixture.txt
  8. +41 −0 index.js
  9. +49 −0 package.json
  10. +73 −0 readme.md
  11. BIN screenshot-output.png
  12. BIN screenshot.png
  13. +9 −0 test.js
@@ -0,0 +1,12 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = tab
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
@@ -0,0 +1 @@
+* text=auto
@@ -0,0 +1 @@
+node_modules
@@ -0,0 +1,19 @@
+{
+ "node": true,
+ "esnext": true,
+ "bitwise": true,
+ "camelcase": true,
+ "curly": true,
+ "eqeqeq": true,
+ "immed": true,
+ "indent": 4,
+ "newcap": true,
+ "noarg": true,
+ "quotmark": "single",
+ "regexp": true,
+ "undef": true,
+ "unused": true,
+ "strict": true,
+ "trailing": true,
+ "smarttabs": true
+}
@@ -0,0 +1,3 @@
+language: node_js
+node_js:
+ - '0.10'
73 cli.js
@@ -0,0 +1,73 @@
+#!/usr/bin/env node
+'use strict';
+var fs = require('fs');
+var nopt = require('nopt');
+var chalk = require('chalk');
+var pageres = require('./index');
+
+function showHelp() {
+ console.log('');
+ console.log('Get screenshots of websites in different resolutions.');
+ console.log('');
+ console.log(chalk.underline('Usage'));
+ console.log(' pageres <url> [<url> ...] --sizes <resolution>,[<resolution>,...]');
+ console.log(' pageres <url> [<url> ...] --file <filepath>');
+ console.log('');
+ console.log(chalk.underline('Example'));
+ console.log(' pageres todomvc.com yeoman.io --sizes 1366x768,1600x900');
+ console.log('');
+ console.log('If --sizes is not specified it will fall back to the ten most popular screen resolutions according to w3counter.');
+ console.log('');
+ console.log('The <filepath> file should be formatted to have one <resolution> on each line.');
+}
+
+var opts = nopt({
+ help: Boolean,
+ version: Boolean,
+ sizes: String,
+ file: String
+}, {
+ h: '--help',
+ v: '--version',
+ s: '--sizes',
+ f: '--file'
+});
+
+var urls = opts.argv.remain;
+var sizes = opts.sizes.split(',');
+
+//TODO: keep me up to date: http://www.w3counter.com/globalstats.php
+var defRes = '1366x768 1024x768 1280x800 1920x1080 1440x900 768x1024 1280x1024 1600x900 320x480 320x568';
+
+if (opts.help) {
+ return showHelp();
+}
+
+if (opts.version) {
+ return console.log(require('./package').version);
+}
+
+if (urls.length === 0) {
+ console.error(chalk.yellow('Specify at least one url'));
+ return showHelp();
+}
+
+if (!sizes) {
+ if (opts.file) {
+ sizes = fs.readFileSync(opts.file, 'utf8').trim().split('\n');
+ } else {
+ console.log('Neither ' + chalk.underline('--sizes') + ' nor ' + chalk.underline('--file') + ' specified. Falling back to the ten most popular screen resolutions according to w3counter as of January 2014:\n' + defRes);
+ sizes = defRes.split(' ');
+ }
+}
+
+pageres(urls, sizes, function (err) {
+ if (err) {
+ throw new Error(chalk.red('' + err.message));
+ }
+
+ var u = urls.length;
+ var s = sizes.length;
+
+ console.log(chalk.green('\n✓ Successfully generated %d screenshots from %d %s and %d %s'), u * s, u, (u === 1 ? 'url' : 'urls'), s, (s === 1 ? 'resolution': 'resolutions'));
+});
@@ -0,0 +1,10 @@
+1920x1080
+1366x768
+1440x900
+1680x1050
+1280x800
+1920x1200
+1280x1024
+1600x900
+2560x1440
+768x1024
@@ -0,0 +1,41 @@
+'use strict';
+var webshot = require('webshot');
+var eachAsync = require('each-async');
+var slugifyUrl = require('slugify-url');
+
+function generateSizes(url, sizes, cb) {
+ eachAsync(sizes, function (el, i, next) {
+ // strip `www.` and convert to valid filename
+ var filenameUrl = slugifyUrl(url.replace(/^(?:https?:\/\/)?www\./, ''));
+ var filename = filenameUrl + '-' + el + '.png';
+ var dim = el.split('x');
+ var options = {
+ windowSize: {
+ width: dim[0],
+ height: dim[1]
+ },
+ shotSize: {
+ width: 'window',
+ height: 'all'
+ }
+ };
+
+ webshot(url.toLowerCase(), filename, options, next);
+ }, cb);
+}
+
+module.exports = function (urls, sizes, cb) {
+ cb = cb || function () {};
+
+ if (urls.length === 0) {
+ return cb(new Error('`urls` required'));
+ }
+
+ if (sizes.length === 0) {
+ return cb(new Error('`sizes` required'));
+ }
+
+ eachAsync(urls, function (url, i, next) {
+ generateSizes(url, sizes, next);
+ }, cb);
+};
@@ -0,0 +1,49 @@
+{
+ "name": "pageres",
+ "version": "0.0.0",
+ "description": "Get screenshots of websites in different resolutions",
+ "license": "MIT",
+ "repository": "sindresorhus/pageres",
+ "bin": {
+ "pageres": "cli.js"
+ },
+ "author": {
+ "name": "Sindre Sorhus",
+ "email": "sindresorhus@gmail.com",
+ "url": "http://sindresorhus.com"
+ },
+ "engines": {
+ "node": ">=0.10.0"
+ },
+ "scripts": {
+ "test": "mocha"
+ },
+ "files": [
+ "index.js",
+ "cli.js"
+ ],
+ "keywords": [
+ "page",
+ "website",
+ "site",
+ "web",
+ "url",
+ "resolution",
+ "size",
+ "screenshot",
+ "screen",
+ "responsive",
+ "cli"
+ ],
+ "dependencies": {
+ "each-async": "~0.1.2",
+ "chalk": "~0.4.0",
+ "nopt": "~2.1.2",
+ "webshot": "~0.10.0",
+ "slugify": "~0.1.0",
+ "slugify-url": "~1.0.1"
+ },
+ "devDependencies": {
+ "mocha": "*"
+ }
+}
@@ -0,0 +1,73 @@
+# pageres [![Build Status](https://travis-ci.org/sindresorhus/pageres.png?branch=master)](https://travis-ci.org/sindresorhus/pageres)
+
+> Get screenshots of the websites in different resolutions
+
+A good way to make sure your sites are responsive.
+
+![](screenshot.png)
+
+![](screenshot-output.png)
+
+
+## CLI app
+
+### Install
+
+```
+npm install --global pageres
+```
+
+### Usage
+
+```
+$ pageres --help
+
+Get screenshots of websites in different resolutions.
+
+Usage
+ pageres <url> [<url> ...] --sizes <resolution>,[<resolution>,...]
+ pageres <url> [<url> ...] --file <filepath>
+
+Example
+ pageres todomvc.com yeoman.io --sizes 1366x768,1600x900
+
+If --sizes is not specified it will fall back to the ten most popular screen resolutions according to w3counter.
+
+The <filepath> file should be formatted to have one <resolution> on each line.
+```
+
+
+## Programmatic API
+
+### Install
+
+```
+npm install --save pageres
+```
+
+### Example
+
+```js
+var pageres = require('pageres');
+
+pageres(['todomvc.com'], ['1366x768', '1600x900'], function () {
+ console.log('done');
+});
+```
+
+
+## Google Analytics screen resolutions
+
+You can use the most popular resolutions for your site with `pageres` by following these steps:
+
+- In Google Analytics go to the site for which you want screen resolutions
+- Select `Audience` => `Technology` => `Browser & OS`
+- Click the `Screen Resolution` link in the middle of the screen
+- Click the `Export` button at the top, then `Google Spreadsheets`, and select yes for importing
+- Select all the resolutions and copy them into a new file and save it
+- In your terminal run: `pageres website.com --file file-from-above-step.txt`
+
+
+## License
+
+MIT © [Sindre Sorhus](http://sindresorhus.com)
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,9 @@
+'use strict';
+var assert = require('assert');
+var pageres = require('./index');
+
+//TODO !!
+it('should ', function (cb) {
+ assert(true);
+ cb();
+});

0 comments on commit 585c958

Please sign in to comment.