├── .gitignore
├── .npmignore
├── bin
    └── index.js
├── index.js
├── package.json
├── readme.md
└── test.js


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | test.js
2 | node_modules
3 | npm-debug.log
4 | 


--------------------------------------------------------------------------------
/bin/index.js:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 | 
3 | var plh = require('../index')
4 | var args = process.argv.slice(2)
5 | process.stdout.write(plh(args[0], args[1]) + '\n')
6 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | var execSync = require('child_process').execSync
2 | 
3 | module.exports = function (x = 1, y = 1) {
4 |   var cmd = `echo 'data:image/gif;base64,'"$(convert -size ${x}x${y} xc:transparent gif:- | base64)"`
5 |   return execSync(cmd).toString().trim()
6 | }
7 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "plh",
 3 |   "version": "0.0.1",
 4 |   "description": "Returns a base64 encoded transparent placeholder gif as Data URI",
 5 |   "main": "index.js",
 6 |   "bin": {
 7 |     "plh": "bin/index.js"
 8 |   },
 9 |   "scripts": {
10 |     "test": "node test"
11 |   },
12 |   "keywords": [
13 |     "placeholder",
14 |     "base64",
15 |     "gif",
16 |     "data uri",
17 |     "transparent"
18 |   ],
19 |   "author": "Jon Gacnik <jon@folderstudio.com> (http://jongacnik.com)",
20 |   "repository": {
21 |     "type": "git",
22 |     "url": "git+https://github.com/jongacnik/plh.git"
23 |   },
24 |   "homepage": "https://github.com/jongacnik/plh#readme",
25 |   "license": "MIT",
26 |   "dependencies": {},
27 |   "devDependencies": {
28 |     "tape": "^4.6.3"
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | # plh
 2 | 
 3 | Returns a base64 encoded transparent placeholder gif as Data URI
 4 | 
 5 | ```bash
 6 | $ npm i plh
 7 | ```
 8 | 
 9 | **Requires [ImageMagick](https://www.imagemagick.org/)**
10 | 
11 | ## CLI
12 | 
13 | Let's make a 1x1 pixel placeholder:
14 | 
15 | ```bash
16 | $ plh
17 | # → data:image/gif;base64,R0lGODlhAQABAPAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==
18 | ```
19 | 
20 | You can also pass in a width and height:
21 | 
22 | ```bash
23 | $ plh 10 50
24 | # → data:image/gif;base64,R0lGODlhCgAyAPAAAAAAAAAAACH5BAEAAAAALAAAAAAKADIAAAIUhI+py+0Po5y02ouz3rz7D4biiBQAOw==
25 | ```
26 | 
27 | ## Node
28 | 
29 | You can also use `plh` from within node:
30 | 
31 | ```js
32 | var plh = require('plh')
33 | var base64 = plh(3, 4)
34 | // → data:image/gif;base64,R0lGODlhAwAEAPAAAAAAAAAAACH5BAEAAAAALAAAAAADAAQAAAIDhI9WADs=
35 | ```
36 | 
37 | ## FAQ
38 | 
39 | ### Why?
40 | 
41 | Sometimes base64 encoded placeholder images are handy. I made this so I could quickly nab aspect ratio specific placeholders.
42 | 
43 | ### How?
44 | 
45 | The ImageMagick [`convert`](https://www.imagemagick.org/script/convert.php) command is used to create a placeholder image which is piped into the `base64` program and concated to a [data uri](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) prefix:
46 | 
47 | ```bash
48 | echo 'data:image/gif;base64,'"$(convert -size 1x1 xc:transparent gif:- | base64)"
49 | ```
50 | 


--------------------------------------------------------------------------------
/test.js:
--------------------------------------------------------------------------------
 1 | var test = require('tape')
 2 | var plh = require('./index')
 3 | 
 4 | test('default', function (t) {
 5 |   var base64 = plh()
 6 |   t.equal(base64, 'data:image/gif;base64,R0lGODlhAQABAPAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==')
 7 |   t.end()
 8 | })
 9 | 
10 | test('options', function (t) {
11 |   var base64 = plh(10, 50)
12 |   t.equal(base64, 'data:image/gif;base64,R0lGODlhCgAyAPAAAAAAAAAAACH5BAEAAAAALAAAAAAKADIAAAIUhI+py+0Po5y02ouz3rz7D4biiBQAOw==')
13 |   t.end()
14 | })
15 | 


--------------------------------------------------------------------------------