Update readme, switch to using electroshot to generate the screenshots
Mikito Takada
36
Makefile
|
|
@ -14,38 +14,20 @@ ifeq ($(UNAME), Darwin)
|
|||
open output/index.html
|
||||
endif
|
||||
|
||||
# Note: for fonts to render you need to download them first
|
||||
screenshots: build
|
||||
rm -f ./screenshots/*.png
|
||||
# Note: on OSX, run brew install ghostscript as well to get the fonts needed for montage
|
||||
screenshots:
|
||||
rm -f ./screenshots/*.jpg
|
||||
for name in `find ./output -mindepth 1 -maxdepth 1 -type d | sed -e 's/.\/output\///'` ; do \
|
||||
cutycapt --url=file://$(CURDIR)/output/$$name/index.html --out=./screenshots/$$name.png ; \
|
||||
convert ./screenshots/$$name.png -resize "800x" -crop 800x600+0+0 +repage ./screenshots/$$name-cropped.png ; \
|
||||
rm ./screenshots/$$name.png ; \
|
||||
mv ./screenshots/$$name-cropped.png ./screenshots/$$name.png ; \
|
||||
./node_modules/.bin/electroshot $(CURDIR)/output/$$name/index.html 800x600 --format jpg --quality 60 --force-device-scale-factor 1 --filename ./screenshots/$$name.jpg; \
|
||||
done
|
||||
rm ./screenshots/montage.png || true
|
||||
montage -tile 4x -label '%t' -geometry 120x120\>+20+5 ./screenshots/*.png ./screenshots/montage.png
|
||||
|
||||
phantomjs:
|
||||
rm -f ./screenshots/*.png
|
||||
for name in `find ./output -mindepth 1 -maxdepth 1 -type d | sed -e 's/.\/output\///'` ; do \
|
||||
phantomjs ./screenshots/screenshot.js --url=file://$(CURDIR)/output/$$name/index.html --out=./screenshots/$$name.png ; \
|
||||
convert ./screenshots/$$name.png -resize "800x" -crop 800x600+0+0 +repage ./screenshots/$$name-cropped.png ; \
|
||||
rm ./screenshots/$$name.png ; \
|
||||
mv ./screenshots/$$name-cropped.png ./screenshots/$$name.png ; \
|
||||
done
|
||||
rm ./screenshots/montage.png || true
|
||||
montage -tile 4x -label '%t' -geometry 120x120\>+20+5 ./screenshots/*.png ./screenshots/montage.png
|
||||
rm ./screenshots/montage.jpg || true
|
||||
montage -tile 4x -label '%t' -geometry 120x120\>+20+5 ./screenshots/*.jpg ./screenshots/montage.jpg
|
||||
|
||||
montage:
|
||||
rm ./screenshots/montage.png || true
|
||||
montage -tile 4x -label '%t' -geometry 120x120\>+20+5 ./screenshots/*.png ./screenshots/montage.png
|
||||
rm ./screenshots/montage.jpg || true
|
||||
montage -tile 4x -label '%t' -geometry 120x120\>+20+5 ./screenshots/*.jpg ./screenshots/montage.jpg
|
||||
|
||||
# Download google fonts for cutycapt
|
||||
get-fonts:
|
||||
node screenshots/font-download.js
|
||||
|
||||
.PHONY: build screenshots get-fonts montage
|
||||
.PHONY: build screenshots montage
|
||||
|
||||
lint:
|
||||
fixjsstyle $(GJSLINT) -r .
|
||||
|
|
|
|||
|
|
@ -39,6 +39,7 @@
|
|||
"yargs": "~3.27.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"electroshot": "~1.0.0",
|
||||
"file-fixture": "0.0.2",
|
||||
"mds-csv": "0.0.0"
|
||||
}
|
||||
|
|
|
|||
38
readme.md
|
|
@ -48,7 +48,7 @@ Create a markdown file and then convert it to html:
|
|||
|
||||
Try out different layouts by changing the `--layout` parameter; screenshots are at the bottom of this page.
|
||||
|
||||
|
||||
|
||||
|
||||
## generate-md CLI options
|
||||
|
||||
|
|
@ -386,75 +386,75 @@ I'd like to thank the following people for making CSS stylesheets available with
|
|||
|
||||
## Screenshots of the layouts
|
||||
|
||||
Note: these screenshots are generated via phantomjs, so they look worse than they do in a real browser because the font rendering is just bad and lacks webfont support. For example, WiTeX actually uses the Latin Modern Roman font from TeX but the screenshots show the fallback font.
|
||||
Thanks to [electroshot](https://github.com/mixu/electroshot), the screenshots now look about right (e.g. web fonts render correctly).
|
||||
|
||||
### github
|
||||
|
||||
|
||||
|
||||
|
||||
### witex
|
||||
|
||||
|
||||
|
||||
|
||||
### roryg-ghostwriter
|
||||
|
||||
|
||||
|
||||
|
||||
### mixu-bootstrap
|
||||
|
||||
|
||||
|
||||
|
||||
### mixu-bootstrap-2col
|
||||
|
||||
|
||||
|
||||
|
||||
### mixu-gray
|
||||
|
||||
|
||||
|
||||
|
||||
### jasonm23-dark
|
||||
|
||||
|
||||
|
||||
|
||||
### jasonm23-foghorn
|
||||
|
||||
|
||||
|
||||
|
||||
### jasonm23-markdown
|
||||
|
||||
|
||||
|
||||
|
||||
### jasonm23-swiss
|
||||
|
||||
|
||||
|
||||
|
||||
### markedapp-byword
|
||||
|
||||
|
||||
|
||||
|
||||
### mixu-book
|
||||
|
||||
|
||||
|
||||
|
||||
### mixu-page
|
||||
|
||||
|
||||
|
||||
|
||||
### mixu-radar
|
||||
|
||||
|
||||
|
||||
|
||||
### thomasf-solarizedcssdark
|
||||
|
||||
|
||||
|
||||
|
||||
### thomasf-solarizedcsslight
|
||||
|
||||
|
||||
|
||||
|
||||
### bootstrap3
|
||||
|
||||
|
||||
|
||||
|
||||
## Contributing new styles to markdown-styles
|
||||
|
||||
|
|
|
|||
|
After Width: | Height: | Size: 77 KiB |
|
Before Width: | Height: | Size: 84 KiB |
|
|
@ -1,34 +0,0 @@
|
|||
var https = require('https'),
|
||||
child_process = require('child_process');
|
||||
|
||||
https.get({
|
||||
hostname: 'api.github.com',
|
||||
port: 443,
|
||||
path: '/repos/w0ng/googlefontdirectory/contents/fonts',
|
||||
headers: { 'user-agent': 'nodejs'}
|
||||
}, function(res) {
|
||||
console.log('Got response: ' + res.statusCode);
|
||||
console.log(res.headers);
|
||||
var data = '';
|
||||
res.setEncoding('utf8');
|
||||
res.on('data', function(chunk) {
|
||||
data += chunk;
|
||||
});
|
||||
res.on('end', function() {
|
||||
var content = JSON.parse(data);
|
||||
|
||||
['Andika', 'Cantarell', 'DroidSansMono', 'Vollkorn', 'PT_Sans', 'Inconsolata'].forEach(function(font) {
|
||||
var items = content.filter(function(item) {
|
||||
return item.name.match(font);
|
||||
});
|
||||
console.log('# Run the following commands to get the fonts: ');
|
||||
items.forEach(function(item) {
|
||||
console.log('cd ~/.fonts && wget -N https://github.com/w0ng/googlefontdirectory/raw/master/' + item.path);
|
||||
});
|
||||
console.log('fc-cache -fv');
|
||||
});
|
||||
});
|
||||
|
||||
}).on('error', function(e) {
|
||||
console.log('Got error: ' + e.message);
|
||||
});
|
||||
|
After Width: | Height: | Size: 70 KiB |
|
Before Width: | Height: | Size: 81 KiB |
|
After Width: | Height: | Size: 67 KiB |
|
Before Width: | Height: | Size: 68 KiB |
|
After Width: | Height: | Size: 64 KiB |
|
Before Width: | Height: | Size: 86 KiB |
|
After Width: | Height: | Size: 72 KiB |
|
Before Width: | Height: | Size: 80 KiB |
|
After Width: | Height: | Size: 94 KiB |
|
Before Width: | Height: | Size: 95 KiB |
|
After Width: | Height: | Size: 78 KiB |
|
Before Width: | Height: | Size: 105 KiB |
|
After Width: | Height: | Size: 57 KiB |
|
Before Width: | Height: | Size: 173 KiB |
|
After Width: | Height: | Size: 66 KiB |
|
Before Width: | Height: | Size: 110 KiB |
|
After Width: | Height: | Size: 81 KiB |
|
Before Width: | Height: | Size: 85 KiB |
|
After Width: | Height: | Size: 87 KiB |
|
Before Width: | Height: | Size: 488 KiB |
|
After Width: | Height: | Size: 65 KiB |
|
Before Width: | Height: | Size: 230 KiB |
|
After Width: | Height: | Size: 71 KiB |
|
Before Width: | Height: | Size: 90 KiB |
|
After Width: | Height: | Size: 112 KiB |
|
Before Width: | Height: | Size: 623 KiB |
|
After Width: | Height: | Size: 60 KiB |
|
After Width: | Height: | Size: 50 KiB |
|
Before Width: | Height: | Size: 54 KiB |
|
|
@ -1,242 +0,0 @@
|
|||
var system = require('system');
|
||||
|
||||
/**
|
||||
* Checks if value is a javascript String
|
||||
*
|
||||
* @param mixed value
|
||||
* @return Boolean
|
||||
*/
|
||||
function isString(value) {
|
||||
'use strict';
|
||||
return isType(value, 'string');
|
||||
}
|
||||
/**
|
||||
* Checks if value is a javascript Number
|
||||
*
|
||||
* @param mixed value
|
||||
* @return Boolean
|
||||
*/
|
||||
function isNumber(value) {
|
||||
'use strict';
|
||||
return isType(value, 'number');
|
||||
}
|
||||
|
||||
/**
|
||||
* Shorthands for checking if a value is of the given type. Can check for
|
||||
* arrays.
|
||||
*
|
||||
* @param mixed what The value to check
|
||||
* @param String typeName The type name ("string", "number", "function", etc.)
|
||||
* @return Boolean
|
||||
*/
|
||||
function isType(what, typeName) {
|
||||
'use strict';
|
||||
if (typeof typeName !== 'string' || !typeName) {
|
||||
throw new Error('You must pass isType() a typeName string');
|
||||
}
|
||||
return betterTypeOf(what).toLowerCase() === typeName.toLowerCase();
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Object recursive merging utility.
|
||||
*
|
||||
* @param Object origin the origin object
|
||||
* @param Object add the object to merge data into origin
|
||||
* @param Object opts optional options to be passed in
|
||||
* @return Object
|
||||
*/
|
||||
function mergeObjects(origin, add, opts) {
|
||||
'use strict';
|
||||
|
||||
var options = opts || {},
|
||||
keepReferences = options.keepReferences;
|
||||
|
||||
if (phantom.casperEngine === 'slimerjs') {
|
||||
// Because of an issue in the module system of slimerjs (security membranes?)
|
||||
// constructor is undefined.
|
||||
// let's use an other algorithm
|
||||
return mergeObjectsInGecko(origin, add, options);
|
||||
}
|
||||
|
||||
for (var p in add) {
|
||||
if (add[p] && add[p].constructor === Object) {
|
||||
if (origin[p] && origin[p].constructor === Object) {
|
||||
origin[p] = mergeObjects(origin[p], add[p]);
|
||||
} else {
|
||||
origin[p] = keepReferences ? add[p] : clone(add[p]);
|
||||
}
|
||||
} else {
|
||||
origin[p] = add[p];
|
||||
}
|
||||
}
|
||||
return origin;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Provides a better typeof operator equivalent, able to retrieve the array
|
||||
* type.
|
||||
*
|
||||
* CAVEAT: this function does not necessarilly map to classical js "type" names,
|
||||
* notably a `null` will map to "null" instead of "object".
|
||||
*
|
||||
* @param mixed input
|
||||
* @return String
|
||||
* @see http://javascriptweblog.wordpress.com/2011/08/08/fixing-the-javascript-typeof-operator/
|
||||
*/
|
||||
function betterTypeOf(input) {
|
||||
'use strict';
|
||||
switch (input) {
|
||||
case undefined:
|
||||
return 'undefined';
|
||||
case null:
|
||||
return 'null';
|
||||
default:
|
||||
try {
|
||||
var type = Object.prototype.toString.call(input).match(/^\[object\s(.*)\]$/)[1].toLowerCase();
|
||||
if (type === 'object' &&
|
||||
phantom.casperEngine !== 'phantomjs' &&
|
||||
'__type' in input) {
|
||||
type = input.__type;
|
||||
}
|
||||
// gecko returns window instead of domwindow
|
||||
else if (type === 'window') {
|
||||
return 'domwindow';
|
||||
}
|
||||
return type;
|
||||
} catch (e) {
|
||||
return typeof input;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Extracts, normalize and organize PhantomJS CLI arguments in a dedicated
|
||||
* Object.
|
||||
*
|
||||
* @param array phantomArgs system.args value
|
||||
* @return Object
|
||||
*/
|
||||
function parse(phantomArgs) {
|
||||
'use strict';
|
||||
var extract = {
|
||||
args: [],
|
||||
options: {},
|
||||
raw: {
|
||||
args: [],
|
||||
options: {}
|
||||
},
|
||||
drop: function drop(what) {
|
||||
if (isNumber(what)) {
|
||||
// deleting an arg by its position
|
||||
this.args = this.args.filter(function _filter(arg, index) {
|
||||
return index !== what;
|
||||
});
|
||||
// raw
|
||||
if ('raw' in this) {
|
||||
this.raw.args = this.raw.args.filter(function _filter(arg, index) {
|
||||
return index !== what;
|
||||
});
|
||||
}
|
||||
} else if (isString(what)) {
|
||||
// deleting an arg by its value
|
||||
this.args = this.args.filter(function _filter(arg) {
|
||||
return arg !== what;
|
||||
});
|
||||
// deleting an option by its name (key)
|
||||
delete this.options[what];
|
||||
// raw
|
||||
if ('raw' in this) {
|
||||
this.raw.args = this.raw.args.filter(function _filter(arg) {
|
||||
return arg !== what;
|
||||
});
|
||||
delete this.raw.options[what];
|
||||
}
|
||||
} else {
|
||||
throw new Error('Cannot drop argument of type ' + typeof what);
|
||||
}
|
||||
},
|
||||
has: function has(what) {
|
||||
if (isNumber(what)) {
|
||||
return what in this.args;
|
||||
}
|
||||
if (isString(what)) {
|
||||
return what in this.options;
|
||||
}
|
||||
throw new Error('Unsupported cli arg tester ' + typeof what);
|
||||
},
|
||||
get: function get(what, def) {
|
||||
if (isNumber(what)) {
|
||||
return what in this.args ? this.args[what] : def;
|
||||
}
|
||||
if (isString(what)) {
|
||||
return what in this.options ? this.options[what] : def;
|
||||
}
|
||||
throw new Error('Unsupported cli arg getter ' + typeof what);
|
||||
}
|
||||
};
|
||||
phantomArgs.forEach(function _forEach(arg) {
|
||||
if (arg.indexOf('--') === 0) {
|
||||
// named option
|
||||
var optionMatch = arg.match(/^--(.*?)=(.*)/i);
|
||||
if (optionMatch) {
|
||||
extract.options[optionMatch[1]] = castArgument(optionMatch[2]);
|
||||
extract.raw.options[optionMatch[1]] = optionMatch[2];
|
||||
} else {
|
||||
// flag
|
||||
var flagMatch = arg.match(/^--(.*)/);
|
||||
if (flagMatch) {
|
||||
extract.options[flagMatch[1]] = extract.raw.options[flagMatch[1]] = true;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// positional arg
|
||||
extract.args.push(castArgument(arg));
|
||||
extract.raw.args.push(arg);
|
||||
}
|
||||
});
|
||||
extract.raw = mergeObjects(extract.raw, {
|
||||
drop: function() {
|
||||
return extract.drop.apply(extract, arguments);
|
||||
},
|
||||
has: extract.has,
|
||||
get: extract.get
|
||||
});
|
||||
return extract;
|
||||
}
|
||||
|
||||
/**
|
||||
* Cast a string argument to its typed equivalent.
|
||||
*
|
||||
* @param String arg
|
||||
* @return Mixed
|
||||
*/
|
||||
function castArgument(arg) {
|
||||
'use strict';
|
||||
if (arg.match(/^-?\d+$/)) {
|
||||
return parseInt(arg, 10);
|
||||
} else if (arg.match(/^-?\d+\.\d+$/)) {
|
||||
return parseFloat(arg);
|
||||
} else if (arg.match(/^(true|false)$/i)) {
|
||||
return arg.trim().toLowerCase() === 'true' ? true : false;
|
||||
} else {
|
||||
return arg;
|
||||
}
|
||||
}
|
||||
|
||||
var args = parse(system.args);
|
||||
// console.log(args.get('url'), args.get('out'));
|
||||
|
||||
|
||||
|
||||
var page = require('webpage').create();
|
||||
page.viewportSize = { width: 800, height: 600 };
|
||||
page.evaluate(function() {
|
||||
document.body.bgColor = 'white';
|
||||
});
|
||||
page.open(args.get('url'), function() {
|
||||
page.render(args.get('out'));
|
||||
phantom.exit();
|
||||
});
|
||||
|
||||
|
After Width: | Height: | Size: 62 KiB |
|
Before Width: | Height: | Size: 94 KiB |
|
After Width: | Height: | Size: 62 KiB |
|
Before Width: | Height: | Size: 95 KiB |
|
After Width: | Height: | Size: 82 KiB |
|
Before Width: | Height: | Size: 73 KiB |