Add meow for the CLI and eslint

Author: Guillaume Martigny

api.js

@@ -1,11 +1,11 @@
-const loremPix = require(".");
 const { parse } = require("url");
+const loremPix = require(".");
 
 module.exports = (request, response) => {
     const { query } = parse(request.url, true);
     const { width, height, color } = query;
 
-    const data = loremPix(width && Number(width), height && Number(height) || undefined, color || undefined);
+    const data = loremPix(width && Number(width), (height && Number(height)) || undefined, color || undefined);
 
     response.writeHead(200, {
         "Content-Type": "image/png",

cli.js

@@ -1,15 +1,47 @@
 #!/usr/bin/env node
-const loremPix = require(".");
 const { writeFileSync } = require("fs");
+const meow = require("meow");
+const loremPix = require(".");
+
+const run = (cli) => {
+    const [width, height, color] = cli.input;
+
+    if (!width) {
+        cli.showHelp();
+        return;
+    }
+
+    try {
+        const dataURL = loremPix(Number(width), height && Number(height), color);
+
+        writeFileSync(cli.flags.output, dataURL.split(",")[1], "base64");
+        console.log("Done creating image.");
+    }
+    catch (error) {
+        console.error(error.message);
+    }
+};
+
+const defaultFileName = "lorem.png";
+const cli = meow(`Create a placeholder image at light speed.
+If omitted, color is picked randomly and height equals width.
+
+    Usage
+        $ lorem-pix <width> [<height> [<color> [--output <file>]]]
 
-const [width, height, color] = process.argv.slice(2);
+    Options
+        --output, -o    Output file path, default to ${defaultFileName}
 
-try {
-    const dataURL = loremPix(width && Number(width), height && Number(height), color);
+    Example
+        $ lorem-pix 800 600 red
+`, {
+    flags: {
+        output: {
+            alias: "o",
+            type: "string",
+            default: defaultFileName,
+        },
+    },
+});
 
-    writeFileSync("lorem.png", dataURL.split(",")[1], "base64");
-    console.log("Done creating image.");
-}
-catch (error) {
-    console.error(error.message);
-}
+run(cli);

front/live-preview.js

@@ -5,3 +5,5 @@ const livePreview = (img, width, height, color) => {
     img.src = url;
     return url;
 };
+
+export default livePreview;

index.html

@@ -31,8 +31,9 @@ <h1>Lorem pix</h1>
     <figcaption id="caption"></figcaption>
     <img src="" alt="live preview" id="preview"/>
 </figure>
-<script src="front/live-preview.js"></script>
-<script>
+<script src="front/live-preview.js" type="module"></script>
+<script type="module">
+    import livePreview from "./front/live-preview.js";
     const form = document.getElementById("form");
     const caption = document.getElementById("caption");
     const img = document.getElementById("preview");

index.js

@@ -1,6 +1,14 @@
 const { createCanvas } = require("canvas");
 const clamp = require("clamp");
 
+/**
+ * Create a placeholder image at light speed.
+ * @param {Number} width - Width of the image in pixels (from 1 to 10,000)
+ * @param {Number} [height=width] - Height of the image in pixels (from 1 to 10,000), equal <width> if omitted
+ * @param {String} [color] - Background color of the image, picked randomly if omitted, can be any valid CSSColor [https://developer.mozilla.org/docs/Web/CSS/color_value]
+ * @example loremPix(800, 600, "red");
+ * @return {String} Base 64 encoding of the image
+ */
 const loremPix = (width, height = width, color = `#${Math.random().toString(16).slice(-6)}`) => {
     if (!width) {
         throw RangeError("Lorem-pix function need at least one non-null argument.");