Permalink
Browse files

Update readme, switch to using electroshot to generate the screenshots

  • Loading branch information...
1 parent ba2bf2a commit 8a85d72cb4eb81c69589b890fe43654bf3ed8508 @mixu committed Oct 29, 2015
View
@@ -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
-
-# Download google fonts for cutycapt
-get-fonts:
- node screenshots/font-download.js
+ rm ./screenshots/montage.jpg || true
+ montage -tile 4x -label '%t' -geometry 120x120\>+20+5 ./screenshots/*.jpg ./screenshots/montage.jpg
-.PHONY: build screenshots get-fonts montage
+.PHONY: build screenshots montage
lint:
fixjsstyle $(GJSLINT) -r .
View
@@ -39,6 +39,7 @@
"yargs": "~3.27.0"
},
"devDependencies": {
+ "electroshot": "~1.0.0",
"file-fixture": "0.0.2",
"mds-csv": "0.0.0"
}
View
@@ -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.
-![montage](https://github.com/mixu/markdown-styles/raw/master/screenshots/montage.png)
+![montage](https://github.com/mixu/markdown-styles/raw/master/screenshots/montage.jpg)
## 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
-![github](https://github.com/mixu/markdown-styles/raw/master/screenshots/github.png)
+![github](https://github.com/mixu/markdown-styles/raw/master/screenshots/github.jpg)
### witex
-![witex](https://github.com/mixu/markdown-styles/raw/master/screenshots/witex.png)
+![witex](https://github.com/mixu/markdown-styles/raw/master/screenshots/witex.jpg)
### roryg-ghostwriter
-![roryg-ghostwriter](https://github.com/mixu/markdown-styles/raw/master/screenshots/roryg-ghostwriter.png)
+![roryg-ghostwriter](https://github.com/mixu/markdown-styles/raw/master/screenshots/roryg-ghostwriter.jpg)
### mixu-bootstrap
-![mixu-bootstrap](https://github.com/mixu/markdown-styles/raw/master/screenshots/mixu-bootstrap.png)
+![mixu-bootstrap](https://github.com/mixu/markdown-styles/raw/master/screenshots/mixu-bootstrap.jpg)
### mixu-bootstrap-2col
-![mixu-bootstrap-2col](https://github.com/mixu/markdown-styles/raw/master/screenshots/mixu-bootstrap-2col.png)
+![mixu-bootstrap-2col](https://github.com/mixu/markdown-styles/raw/master/screenshots/mixu-bootstrap-2col.jpg)
### mixu-gray
-![mixu-gray](https://github.com/mixu/markdown-styles/raw/master/screenshots/mixu-gray.png)
+![mixu-gray](https://github.com/mixu/markdown-styles/raw/master/screenshots/mixu-gray.jpg)
### jasonm23-dark
-![jasonm23-dark](https://github.com/mixu/markdown-styles/raw/master/screenshots/jasonm23-dark.png)
+![jasonm23-dark](https://github.com/mixu/markdown-styles/raw/master/screenshots/jasonm23-dark.jpg)
### jasonm23-foghorn
-![jasonm23-foghorn](https://github.com/mixu/markdown-styles/raw/master/screenshots/jasonm23-foghorn.png)
+![jasonm23-foghorn](https://github.com/mixu/markdown-styles/raw/master/screenshots/jasonm23-foghorn.jpg)
### jasonm23-markdown
-![jasonm23-markdown](https://github.com/mixu/markdown-styles/raw/master/screenshots/jasonm23-markdown.png)
+![jasonm23-markdown](https://github.com/mixu/markdown-styles/raw/master/screenshots/jasonm23-markdown.jpg)
### jasonm23-swiss
-![jasonm23-swiss](https://github.com/mixu/markdown-styles/raw/master/screenshots/jasonm23-swiss.png)
+![jasonm23-swiss](https://github.com/mixu/markdown-styles/raw/master/screenshots/jasonm23-swiss.jpg)
### markedapp-byword
-![markedapp-byword](https://github.com/mixu/markdown-styles/raw/master/screenshots/markedapp-byword.png)
+![markedapp-byword](https://github.com/mixu/markdown-styles/raw/master/screenshots/markedapp-byword.jpg)
### mixu-book
-![mixu-book](https://github.com/mixu/markdown-styles/raw/master/screenshots/mixu-book.png)
+![mixu-book](https://github.com/mixu/markdown-styles/raw/master/screenshots/mixu-book.jpg)
### mixu-page
-![mixu-page](https://github.com/mixu/markdown-styles/raw/master/screenshots/mixu-page.png)
+![mixu-page](https://github.com/mixu/markdown-styles/raw/master/screenshots/mixu-page.jpg)
### mixu-radar
-![mixu-radar](https://github.com/mixu/markdown-styles/raw/master/screenshots/mixu-radar.png)
+![mixu-radar](https://github.com/mixu/markdown-styles/raw/master/screenshots/mixu-radar.jpg)
### thomasf-solarizedcssdark
-![thomasf-solarizedcssdark](https://github.com/mixu/markdown-styles/raw/master/screenshots/thomasf-solarizedcssdark.png)
+![thomasf-solarizedcssdark](https://github.com/mixu/markdown-styles/raw/master/screenshots/thomasf-solarizedcssdark.jpg)
### thomasf-solarizedcsslight
-![thomasf-solarizedcsslight](https://github.com/mixu/markdown-styles/raw/master/screenshots/thomasf-solarizedcsslight.png)
+![thomasf-solarizedcsslight](https://github.com/mixu/markdown-styles/raw/master/screenshots/thomasf-solarizedcsslight.jpg)
### bootstrap3
-![bootstrap3](https://github.com/mixu/markdown-styles/raw/master/screenshots/bootstrap3.png)
+![bootstrap3](https://github.com/mixu/markdown-styles/raw/master/screenshots/bootstrap3.jpg)
## Contributing new styles to markdown-styles
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Deleted file not rendered
@@ -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);
-});
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Deleted file not rendered
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Deleted file not rendered
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Deleted file not rendered
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Deleted file not rendered
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Deleted file not rendered
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Deleted file not rendered
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Deleted file not rendered
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Deleted file not rendered
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Deleted file not rendered
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Deleted file not rendered
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Deleted file not rendered
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Diff not rendered.
Diff not rendered.
Diff not rendered.
View
Diff not rendered.
Diff not rendered.
Diff not rendered.
Oops, something went wrong.

0 comments on commit 8a85d72

Please sign in to comment.