Merge pull request #9 from rtfpessoa/improve-code-style

Fix some JS style issues and update CSS

Author: rtfpessoa

README.md

@@ -1,5 +1,7 @@
 # Diff to Html CLI by [rtfpessoa](https://github.com/rtfpessoa)
 
+[![Codacy Badge](https://api.codacy.com/project/badge/grade/e6139937d72f40ed8b3920d53c74298a)](https://www.codacy.com/app/Codacy/diff2html-cli)
+
 Diff to Html generates pretty HTML diffs from git diff output in your terminal
 
 ## Features

dist/diff2html.css

@@ -33,26 +33,31 @@
 }
 
 .d2h-lines-added {
+    text-align: right;
+}
+
+.d2h-lines-added > * {
     background-color: #ceffce;
     border: 1px solid #b4e2b4;
     color: #399839;
     border-radius: 5px 0 0 5px;
     padding: 2px;
-    width: 25px;
 }
 
 .d2h-lines-deleted {
+    text-align: left;
+}
+
+.d2h-lines-deleted > * {
     background-color: #f7c8c8;
     border: 1px solid #e9aeae;
     color: #c33;
     border-radius: 0 5px 5px 0;
     padding: 2px;
-    width: 25px;
 }
 
 .d2h-file-name {
     display: inline;
-    height: 33px;
     line-height: 33px;
     max-width: 80%;
     white-space: nowrap;
@@ -144,28 +149,30 @@
 }
 
 .line-num1 {
-    display: inline-block;
+    box-sizing: border-box;
     float: left;
-    width: 30px;
+    width: 32px;
     overflow: hidden;
     text-overflow: ellipsis;
+    padding-left: 3px;
 }
 
 .line-num2 {
-    display: inline-block;
+    box-sizing: border-box;
     float: right;
-    width: 30px;
+    width: 32px;
     overflow: hidden;
     text-overflow: ellipsis;
+    padding-left: 3px;
 }
 
 .d2h-code-linenumber {
+    box-sizing: border-box;
     position: absolute;
-    width: 2%;
-    min-width: 65px;
-    padding-left: 10px;
-    padding-right: 10px;
+    width: 82px;
     height: 18px;
+    padding-left: 2px;
+    padding-right: 2px;
     line-height: 18px;
     background-color: #fff;
     color: rgba(0, 0, 0, 0.3);
@@ -176,8 +183,9 @@
 }
 
 .d2h-code-side-linenumber {
+    box-sizing: border-box;
     position: absolute;
-    width: 35px;
+    width: 52px;
     padding-left: 10px;
     padding-right: 10px;
     height: 18px;
@@ -207,3 +215,78 @@
     color: rgba(0, 0, 0, 0.3);
     border-color: #d5e4f2;
 }
+
+.d2h-file-list-wrapper {
+    margin-bottom: 10px;
+    padding: 0 10px;
+}
+
+.d2h-file-list-wrapper a {
+    text-decoration: none;
+    color: #3572b0;
+}
+
+.d2h-file-list-wrapper a:visited {
+    color: #3572b0;
+}
+
+.d2h-file-list-header {
+    font-weight: bold;
+    float: left;
+}
+
+.d2h-file-list-line {
+    text-align: left;
+    font: 13px Helvetica, arial, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
+}
+
+.d2h-file-list-line .d2h-file-name {
+    line-height: 21px;
+}
+
+.d2h-file-list {
+    display: none;
+}
+
+.d2h-clear {
+    display: block;
+    clear: both;
+}
+
+.d2h-del.d2h-change, .d2h-ins.d2h-change {
+    background-color: #ffc;
+}
+
+ins.d2h-change, del.d2h-change {
+    background-color: #fad771;
+}
+
+.d2h-file-diff .d2h-del.d2h-change {
+    background-color: #fae1af;
+}
+
+.d2h-file-diff .d2h-ins.d2h-change {
+    background-color: #ded;
+}
+
+/* CSS only show/hide */
+.d2h-show {
+    display: none;
+    float: left;
+}
+
+.d2h-hide {
+    float: left;
+}
+
+.d2h-hide:target + .d2h-show {
+    display: inline;
+}
+
+.d2h-hide:target {
+    display: none;
+}
+
+.d2h-hide:target ~ .d2h-file-list {
+    display: block;
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "diff2html-cli",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "homepage": "https://www.github.com/rtfpessoa/diff2html-cli",
   "description": "Fast Diff to colorized HTML",
   "keywords": [
@@ -43,9 +43,9 @@
   },
   "main": "./src/main.js",
   "dependencies": {
-    "yargs": "3.27.*",
+    "yargs": "3.31.*",
     "extend": "3.0.*",
-    "request": "2.65.*",
+    "request": "2.67.*",
     "diff2html": "*"
   },
   "devDependencies": {

src/main.js

@@ -1,4 +1,5 @@
 #!/usr/bin/env node
+
 /*
  *
  * Diff to HTML CLI (main.js)
@@ -115,7 +116,7 @@ function runGitDiff(callback) {
   if (argv._.length && argv._[0]) {
     gitArgs = argv._.join(' ');
   } else {
-    gitArgs = '-M HEAD~1'
+    gitArgs = '-M HEAD~1';
   }
 
   var diffCommand = 'git diff ' + gitArgs;
@@ -135,10 +136,11 @@ function getOutput(input) {
       htmlContent = diff2Html.getPrettyHtmlFromDiff(input, config);
     }
     return prepareHTML(htmlContent);
-  } else {
-    var jsonContent = diff2Html.getJsonFromDiff(input, config);
-    return prepareJSON(jsonContent);
   }
+
+  var jsonContent = diff2Html.getJsonFromDiff(input, config);
+  return prepareJSON(jsonContent);
+
 }
 
 function preview(content) {
@@ -148,10 +150,16 @@ function preview(content) {
 }
 
 function prepareHTML(content) {
-  var template = readFileSync(__dirname + '/../dist/template.html', 'utf8');
-  var css = readFileSync(__dirname + '/../dist/diff2html.css', 'utf8');
+  var template = readFileSync(__dirname + '/../dist/template.html');
+
+  var cssFile = __dirname + '/../node_modules/diff2html/css/diff2html.css';
+  var cssFallbackFile = __dirname + '/../dist/diff2html.css';
+  if (existsSync(cssFile)) cssFile = cssFallbackFile;
+
+  var cssContent = readFileSync(cssFile);
+
   return template
-    .replace('<!--css-->', '<style>\n' + css + '\n</style>')
+    .replace('<!--css-->', '<style>\n' + cssContent + '\n</style>')
     .replace('<!--diff-->', content);
 }
 
@@ -164,8 +172,8 @@ function postToDiffy(diff, postType) {
       return;
     }
 
-    if (response.status != 'error') {
-      print("Link powered by diffy.org:");
+    if (response.status !== 'error') {
+      print('Link powered by diffy.org:');
       print(response.url);
 
       if (postType === 'browser') {
@@ -174,7 +182,7 @@ function postToDiffy(diff, postType) {
         runCmd('echo "' + response.url + '" | pbcopy');
       }
     } else {
-      print("Error: " + message);
+      print('Error: ' + message);
     }
   });
 }
@@ -188,11 +196,11 @@ function post(url, payload, callback) {
     .on('response', function(response) {
       response.on('data', function(body) {
         try {
-          callback(null, JSON.parse(body.toString('utf8')));
+          return callback(null, JSON.parse(body.toString('utf8')));
         } catch (err) {
-          callback(new Error('could not parse response'));
+          return callback(new Error('could not parse response'));
         }
-      })
+      });
     })
     .on('error', function(err) {
       callback(err);
@@ -211,6 +219,16 @@ function error(msg) {
   console.error(msg);
 }
 
+function existsSync(filePath) {
+  try {
+    fs.existsSync(filePath);
+  } catch (ignore) {
+    return false;
+  }
+
+  return true;
+}
+
 function readFileSync(filePath) {
   return fs.readFileSync(filePath, 'utf8');
 }