From 3005f6a0a47b7b5f8e67e5e2e7ea7efa1d459e02 Mon Sep 17 00:00:00 2001
From: cor <cor@pruijs.dev>
Date: Thu, 28 Sep 2023 14:30:30 +0200
Subject: [PATCH] feat(site): improve terminal colors

---
 site/src/lib/Xterm.svelte                     | 19 ++++++++++---------
 .../routes/blog/the-journey-so-far/+page.md   |  2 +-
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/site/src/lib/Xterm.svelte b/site/src/lib/Xterm.svelte
index b058bdf2bf..9fb1d2c6d0 100644
--- a/site/src/lib/Xterm.svelte
+++ b/site/src/lib/Xterm.svelte
@@ -2,6 +2,7 @@
 	import { onMount } from 'svelte';
 	import { ApolloClient, InMemoryCache, gql } from '@apollo/client/core';
 	import type { Terminal } from 'xterm';
+	import type { ApolloQueryResult } from '@apollo/client';
 
 	const client = new ApolloClient({
 	  uri: 'https://graphql.union.build/v1/graphql',
@@ -20,7 +21,7 @@
 	let terminal: null | Terminal;
 	let terminalElement: HTMLElement;
 
-	let logLines: String[] = [];
+	let logLines: {network: String, action: String, logLine: String}[] = [];
 
 
 	const scrollToBottom = node => {
@@ -34,7 +35,7 @@
 };
 
 
-    const filter = (r: ApolloQueryResult<any>): null | string  => {
+    const filter = (r: ApolloQueryResult<any>): null | { origin: String, logLine: String } => {
 			let data = r.data.demo_txes_by_pk;
 			if (data === null) {
 				return null
@@ -45,12 +46,12 @@
 			let action;
 
 			if ('EthereumMinimal' in data) {
-				network = "[union]: "
+				network = "union"
                 data = data['EthereumMinimal']
 			}
 
 			if ('CometblsMinimal' in data) {
-				network = "[sepolia]: "
+				network = "sepolia"
                 data = data['CometblsMinimal']
 			}
 
@@ -73,7 +74,7 @@
 				return null
 			}
 
-			return network + action + JSON.stringify(data)
+			return { network, action,  logLine: JSON.stringify(data)}
 	}
 
 
@@ -105,10 +106,10 @@
 </script>
 
 
-<div class="relative h-80">
-	<div bind:this={terminalElement} class="overflow-auto absolute left-0 right-0 bg-black h-80 text-sm font-jetbrains">
-		{#each logLines as logline}
-			<div>{logline}</div>
+<div class="relative h-80 my-4">
+	<div bind:this={terminalElement} class="overflow-auto absolute left-0 right-0 bg-black h-80 text-sm font-jetbrains p-2">
+		{#each logLines as {network, action, logLine}}
+			<div><span class={ network == "union" ? "text-accent" : "text-yellow-300"}>[{network}] </span><span>{action}</span><span class="text-gray-400">{logLine}</span></div>
 		{/each}
 	</div>
 </div>
diff --git a/site/src/routes/blog/the-journey-so-far/+page.md b/site/src/routes/blog/the-journey-so-far/+page.md
index 148a8ccc4e..10737c31cd 100644
--- a/site/src/routes/blog/the-journey-so-far/+page.md
+++ b/site/src/routes/blog/the-journey-so-far/+page.md
@@ -48,7 +48,7 @@ Note that this is not a dummy or hacky setup, we have:
 
 <Xterm/>
 
-For the first person that can point us to the contract addresses in use; DM our [twitter](https://x.com/union_build) for a reward.
+For the first person that can point us to the contract addresses in use; [DM our X](https://x.com/union_build) for a reward.
 
 ## Join the Union