Merge pull request #10 from vcapretz/replace-highlight-lib

highlight: replace libs with more powerful one

package.json

@@ -23,7 +23,7 @@
     "build": "NODE_ENV=production webpack",
     "build:watch": "NODE_ENV=production webpack --watch",
     "start": "node example.js",
-    "start:dev": "yarn build:watch && yarn start",
+    "start:dev": "concurrently \"yarn build:watch\" \"yarn start\"",
     "start:example": "yarn build && yarn start"
   },
   "dependencies": {
@@ -37,10 +37,11 @@
     "ramda": "^0.26.1",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "react-json-syntax-highlighter": "^0.2.0"
+    "react-highlight": "^0.12.0"
   },
   "devDependencies": {
     "babel-preset-react-app": "^7.0.2",
+    "concurrently": "^4.1.2",
     "css-loader": "^2.1.1",
     "dockest": "^1.0.3",
     "eslint": "^6.2.1",

ui/components/Queue.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { getYear, format, isToday, formatDistance } from 'date-fns'
-import JsonHighlight from 'react-json-syntax-highlighter'
 import { type } from 'ramda'
+import Highlight from 'react-highlight/lib/optimized'
 
 const today = new Date()
 
@@ -160,7 +160,11 @@ const fieldComponents = {
   progress: ({ job }) => {
     switch (type(job.progress)) {
       case 'Object':
-        return <JsonHighlight obj={job.progress} />
+        return (
+          <Highlight className="json">
+            {JSON.stringify(job.progress, null, 2)}
+          </Highlight>
+        )
       case 'Number':
         return (
           <div className="progress-wrapper">
@@ -186,15 +190,23 @@ const fieldComponents = {
     return (
       <>
         {job.failedReason || 'NA'}
-        <pre>{job.stacktrace}</pre>
+        <Highlight className="javascript">{job.stacktrace}</Highlight>
       </>
     )
   },
   data: ({ job }) => {
-    return <JsonHighlight obj={job.data} />
+    return (
+      <Highlight className="json">
+        {JSON.stringify(job.data, null, 2)}
+      </Highlight>
+    )
   },
   opts: ({ job }) => {
-    return <JsonHighlight obj={job.opts} />
+    return (
+      <Highlight className="json">
+        {JSON.stringify(job.opts, null, 2)}
+      </Highlight>
+    )
   },
   retry: ({ job, retryJob }) => {
     return <button onClick={retryJob}>Retry</button>

ui/index.css

@@ -210,42 +210,6 @@ button:active {
   top: 1px;
 }
 
-/* Higlight */
-
-pre {
-  font-family: 'monospace';
-  line-height: 1.5em;
-  font-size: 0.7em;
-  border: 1px solid #fafafa;
-  background: #fdfdfd;
-  padding: 8px;
-  color: #c3d1d1;
-  max-height: 176px;
-  max-width: 1000px;
-  overflow: auto;
-  border-radius: 8px;
-}
-
-pre span.key {
-  color: #839496;
-}
-
-pre span.string {
-  color: #d33682;
-}
-
-pre span.number {
-  color: #268bd2;
-}
-
-pre span.null {
-  color: #002b36;
-}
-
-pre span.boolean {
-  color: #6c71c4;
-}
-
 /* Progress bar */
 
 .progress-wrapper {

ui/index.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import { render } from 'react-dom'
 import './index.css'
+import './xcode.css'
 import App from './components/App'
 
 render(<App basePath={window.basePath} />, document.getElementById('root'))

ui/xcode.css

@@ -0,0 +1,103 @@
+/*
+
+XCode style (c) Angel Garcia <[email protected]>
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #fff;
+  color: black;
+}
+
+/* Gray DOCTYPE selectors like WebKit */
+.xml .hljs-meta {
+  color: #c0c0c0;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #007400;
+}
+
+.hljs-tag,
+.hljs-attribute,
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-literal,
+.hljs-name {
+  color: #aa0d91;
+}
+
+.hljs-variable,
+.hljs-template-variable {
+  color: #3f6e74;
+}
+
+.hljs-code,
+.hljs-string,
+.hljs-meta-string {
+  color: #c41a16;
+}
+
+.hljs-regexp,
+.hljs-link {
+  color: #0e0eff;
+}
+
+.hljs-title,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-number {
+  color: #1c00cf;
+}
+
+.hljs-section,
+.hljs-meta {
+  color: #643820;
+}
+
+.hljs-class .hljs-title,
+.hljs-type,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-params {
+  color: #5c2699;
+}
+
+.hljs-attr {
+  color: #836c28;
+}
+
+.hljs-subst {
+  color: #000;
+}
+
+.hljs-formula {
+  background-color: #eee;
+  font-style: italic;
+}
+
+.hljs-addition {
+  background-color: #baeeba;
+}
+
+.hljs-deletion {
+  background-color: #ffc8bd;
+}
+
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #9b703f;
+}
+
+.hljs-doctag,
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}

webpack.config.js

@@ -1,4 +1,5 @@
 const path = require('path')
+const webpack = require('webpack')
 
 module.exports = {
   mode: 'production',
@@ -19,4 +20,10 @@ module.exports = {
       { test: /\.css$/, use: ['style-loader', 'css-loader'] },
     ],
   },
+  plugins: [
+    new webpack.ContextReplacementPlugin(
+      /highlight.js\/lib\/languages$/,
+      /^.\/(json|javascript)$/,
+    ),
+  ],
 }