Merge pull request #73 from decentralized-identity/feat/iiw-highlight

feat: add color highlighting to log type and dids

src/pages/profile/console.css

@@ -10,3 +10,30 @@ pre.logs-viewport {
 pre.logs-viewport code {
 	display: block;
 }
+
+span.did.prefix {
+	color: #d41f0b;
+}
+span.did.method {
+	color: #1a4b99;
+}
+span.did.data {
+	color: #32a852;
+}
+span.did.fragment {
+	color: #bf800b;
+}
+
+span.protocol.prefix {
+	color: #0070c0;
+}
+span.protocol.group {
+	/*original slide color: "#f1c232"*/
+	color: #b97713;
+}
+span.protocol.version {
+	color: #c00000;
+}
+span.protocol.function {
+	color: #51a33f;
+}

src/pages/profile/console.ts

@@ -110,6 +110,74 @@ class ConsoleComponent implements m.ClassComponent<ConsoleAttributes> {
     this.autoScroll = isAtBottom
   }
 
+  parseLogEntry(entry: string) : m.Vnode {
+    const colorizeDid = (entry: string): m.Vnode => {
+      const didRegex = /(.*)(did):([a-z0-9]+):((?:[a-zA-Z0-9._%-]*:)*[a-zA-Z0-9._%-]+)([?/#][a-zA-Z0-9._%-])?(".*)/
+      if(!didRegex.test(entry)) {
+        return m("span", entry);
+      }
+      const match = didRegex.exec(entry);
+      return m(
+        "span",
+        match[1],
+        m("span.did.prefix", match[2]),
+        ":",
+        m("span.did.method", match[3]),
+        ":",
+        m("span.did.data", match[4]),
+        m("span.did.fragment", match[5]),
+        match[6]
+      );
+    }
+    const colorizeType = (header_string: string, entry: string): m.Vnode => {
+      const decodedMessage = JSON.parse(entry.slice(header_string.length));
+      const renderedMessage = JSON.stringify(decodedMessage, null, 2);
+      const lines = renderedMessage.split("\n");
+
+      let messages : (m.Vnode | string)[] = [];
+      for(var i = 0; i < lines.length; i++) {
+        if(i > 0) {
+          messages.push("\n");
+        }
+
+        let line = lines[i];
+
+        if((/^  "type": "(.+)",?$/).test(line)) {
+          const regex = /(.+)"(.+)\/([a-z0-9-_\.]+)\/([0-9]+\.[0-9])\/([a-z0-9-_\.]+)(".+)/i;
+          if(!regex.test(line)) {
+            messages.push(m("span", line));
+            continue;
+          }
+
+          let match = regex.exec(line);
+          messages.push(
+            match[1],
+            '"',
+            m("span.protocol.prefix", match[2]),
+            "/",
+            m("span.protocol.group", match[3]),
+            "/",
+            m("span.protocol.version", match[4]),
+            "/",
+            m("span.protocol.function", match[5]),
+            match[6],
+          );
+          continue;
+        }
+        messages.push(colorizeDid(line));
+      }
+      return m("span", header_string, messages);
+    };
+
+    if(entry.startsWith("Received: ")) {
+      return colorizeType("Received: ", entry);
+    }
+    if(entry.startsWith("Sent: ")) {
+      return colorizeType("Sent: ", entry);
+    }
+    return m("span", entry);
+  }
+
   view() {
     return m(".console", [
       m(ConsoleControls, {
@@ -124,7 +192,7 @@ class ConsoleComponent implements m.ClassComponent<ConsoleAttributes> {
           oncreate: vnode => (this.logsViewport = vnode.dom as HTMLElement),
           onscroll: (e: Event) => this.handleScroll(e),
         },
-        this.logs.map(log => m("code", log))
+        this.logs.map(log => m("code", this.parseLogEntry(log)))
       ),
     ])
   }