better support for space and colored logs

static/log_viewer

@@ -26,8 +26,7 @@
         </header>
         <main>
         <h1>Logs for <span id="title"></span></h1>
-	<div id="logs" style="background-color: #000; color: #fff;">
-	</div>
+	<pre id="logs" style="background-color: #000; color: #fff;"></pre>
         </main>
         <footer>
             <span>Plume-ci 0.0.1</span>

static/log_viewer.js

@@ -1,7 +1,7 @@
 const search = new URL(document.URL).search
 const id = search.substring(1, search.length)
 const title = document.getElementById("title")
-title.innerText = `#${id}`;
+title.innerText = `#${id}`
 fetch(`https://api.github.com/repos/Plume-org/Plume/pulls/${id}`, { mode: 'cors' })
 	.then(r => r.json())
 	.catch(() => {
@@ -10,19 +10,19 @@ fetch(`https://api.github.com/repos/Plume-org/Plume/pulls/${id}`, { mode: 'cors'
 		}
 	})
 	.then(json => {
-		title.innerText = `#${id}: ${json.title || ''}`;
+		title.innerText = `#${id}: ${json.title || ''}`
 	});
 
-const logs = document.getElementById("logs");
-const ansi_up = new AnsiUp();
+const logs = document.getElementById("logs")
+const ansi_up = new AnsiUp()
 const template = document.createElement('template')
 const ws = new WebSocket(`wss://pr-list.joinplu.me/logs/${id}`)
 ws.onmessage = (e) => {
-	var html = ansi_up.ansi_to_html(e.data);
-	template.innerHTML = html.trim();
-	for (var i = 0; i < template.content.childNodes.length; ++i) {
-		const node = template.content.childNodes[i];
-		logs.appendChild(node);
+	const message = e.data
+	const html = ansi_up.ansi_to_html(message)
+	if(message.includes("=>")) {
+		logs.innerHTML += `&nbsp;&nbsp;&nbsp;&nbsp;${html}<br/>`
+	} else {
+		logs.innerHTML += `${html}<br/>`
 	}
-	logs.appendChild(document.createElement('br'))
 }