feat: Improve the report UI

closes #2

index.js

@@ -15,6 +15,10 @@ program
   .version(pkg.version)
   .option('-o, --output [output]', 'output file')
   .option('-i, --input [input]', 'input file')
+  .option(
+    '-c, --theme [theme name]',
+    'template theme `dark` or `light` (defaults to `light`)'
+  )
   .option('-t, --template [handlebars file]', 'handlebars template file')
   .action(async (cmd, env) => {
     try {
@@ -28,14 +32,19 @@ program
         return process.exit(1)
       }
 
-      await genReport(data, cmd.output, cmd.template)
+      await genReport(data, cmd.output, cmd.template, cmd.theme)
     } catch (err) {
       console.error('Failed to parse NPM Audit JSON!')
       return process.exit(1)
     }
   })
 
-const genReport = async (data, output = 'npm-audit.html', template) => {
+const genReport = async (
+  data,
+  output = 'npm-audit.html',
+  template,
+  theme = 'light'
+) => {
   try {
     if (!data) {
       console.log('No JSON')
@@ -44,7 +53,7 @@ const genReport = async (data, output = 'npm-audit.html', template) => {
 
     const templateFile = template || `${__dirname}/templates/template.hbs`
 
-    await reporter(data, templateFile, output)
+    await reporter(data, templateFile, output, theme)
 
     console.log(`Vulnerability snapshot saved at ${output}`)
     process.exit(0)

lib/reporter.js

@@ -4,12 +4,30 @@ const moment = require('moment')
 const marked = require('marked')
 const fs = require('fs-extra')
 const chalk = require('chalk')
+const numeral = require('numeral')
+const highlight = require('highlight.js')
 
-const bootstrapClassSeverityMap = {
-  low: 'primary',
-  moderate: 'secondary',
-  high: 'warning',
-  critical: 'danger'
+const severityMap = {
+  info: {
+    color: 'info',
+    number: 5
+  },
+  low: {
+    color: 'primary',
+    number: 4
+  },
+  moderate: {
+    color: 'secondary',
+    number: 3
+  },
+  high: {
+    color: 'warning',
+    number: 2
+  },
+  critical: {
+    color: 'danger',
+    number: 1
+  }
 }
 
 const generateTemplate = async (data, template) => {
@@ -50,7 +68,7 @@ const modifyData = async data => {
   return data
 }
 
-module.exports = async (data, templateFile, outputFile) => {
+module.exports = async (data, templateFile, outputFile, theme) => {
   try {
     if (!data.metadata) {
       if (data.updated) {
@@ -77,22 +95,45 @@ module.exports = async (data, templateFile, outputFile) => {
     }
 
     const modifiedData = await modifyData(data)
+    modifiedData.theme = theme
     const report = await generateTemplate(modifiedData, templateFile)
     await writeReport(report, outputFile)
   } catch (err) {
     console.log(err)
   }
 }
 
-Handlebars.registerHelper('moment', (date, format) => {
-  return moment.utc(date).format(format)
-})
+Handlebars.registerHelper('moment', (date, format) =>
+  moment.utc(date).format(format)
+)
 
-Handlebars.registerHelper('severityClass', severity => {
-  const bootstrapClass = bootstrapClassSeverityMap[severity]
-  return bootstrapClass
-})
+Handlebars.registerHelper('numeral', (number, format) =>
+  numeral(number).format(format)
+)
 
-Handlebars.registerHelper('markdown', source => {
-  return marked(source)
+Handlebars.registerHelper('if_eq', (a, b, opts) => {
+  if (a === b) {
+    return opts.fn(this)
+  } else {
+    return opts.inverse(this)
+  }
 })
+
+Handlebars.registerHelper(
+  'severityClass',
+  severity => severityMap[severity].color
+)
+
+Handlebars.registerHelper(
+  'severityNumber',
+  severity => severityMap[severity].number
+)
+
+Handlebars.registerHelper('markdown', source =>
+  marked(source, {
+    highlight: code => {
+      return highlight.highlightAuto(code).value
+    },
+    gfm: true
+  })
+)

package.json

@@ -41,8 +41,10 @@
     "commander": "^3.0.0",
     "fs-extra": "^8.1.0",
     "handlebars": "^4.1.2",
+    "highlight.js": "^9.16.2",
     "marked": "^0.7.0",
     "moment": "^2.24.0",
+    "numeral": "^2.0.6",
     "terminal-link": "^1.3.0",
     "update-notifier": "^3.0.1"
   },