diff --git a/src/pages/profile/console.css b/src/pages/profile/console.css index 5aa2f1b..4984602 100644 --- a/src/pages/profile/console.css +++ b/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; +} diff --git a/src/pages/profile/console.ts b/src/pages/profile/console.ts index e1c9e0b..b8da8fc 100644 --- a/src/pages/profile/console.ts +++ b/src/pages/profile/console.ts @@ -110,6 +110,74 @@ class ConsoleComponent implements m.ClassComponent { 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 { 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))) ), ]) }