Adds ansi colors via ansi-to-html (#38)

assets/pages/Container.vue

@@ -23,14 +23,18 @@
 
 <script>
 import { formatRelative } from "date-fns";
+import AnsiConvertor from "ansi-to-html";
 import ScrollbarNotification from "../components/ScrollbarNotification";
 
+const ansiConvertor = new AnsiConvertor();
+
 let es = null;
 let nextId = 0;
-const parseMessage = data => {
+
+function parseMessage(data) {
   const date = new Date(data.substring(0, 30));
   const dateRelative = formatRelative(date, new Date());
-  const message = data.substring(30);
+  const message = ansiConvertor.toHtml(data.substring(30));
   const key = nextId++;
   return {
     key,
@@ -38,7 +42,7 @@ const parseMessage = data => {
     dateRelative,
     message
   };
-};
+}
 
 export default {
   props: ["id", "name"],

package-lock.json

@@ -1472,10 +1472,9 @@
       }
     },
     "ansi-to-html": {
-      "version": "0.6.10",
-      "resolved": "https://registry.npmjs.org/ansi-to-html/-/ansi-to-html-0.6.10.tgz",
-      "integrity": "sha512-znsY3gvsk4CiApWu1yVYF8Nx5Vy0FEe8B0YwyxdbCdErJu5lfKlRHB2twtUjR+dxR4WewTk2OP8XqTmWYnImOg==",
-      "dev": true,
+      "version": "0.6.11",
+      "resolved": "https://registry.npmjs.org/ansi-to-html/-/ansi-to-html-0.6.11.tgz",
+      "integrity": "sha512-88XZtrcwrfkyn6fGstHnkaF1kl7hGtNCYh4vSmItgEV+6JnQHryDBf7udF4f2RhTRQmYvJvPcTtqgaqrxzc9oA==",
       "requires": {
         "entities": "^1.1.1"
       }
@@ -3547,8 +3546,7 @@
     "entities": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
-      "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==",
-      "dev": true
+      "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w=="
     },
     "error-ex": {
       "version": "1.3.2",

package.json

@@ -24,6 +24,7 @@
  },
  "homepage": "https://github.com/amir20/dozzle#readme",
  "dependencies": {
+  "ansi-to-html": "^0.6.11",
   "bulma": "^0.7.5",
   "date-fns": "^2.0.0-alpha.32",
   "vue": "^2.6.10",