Introduce xterm.js

next.html

@@ -8,6 +8,7 @@
 
 	<link rel='icon' type='image/png' href='/favicon.png'>
 	<link rel='stylesheet' href='/build/bundle.css'>
+	<link rel='stylesheet' href='scrollbar.css'>
 
 	<script defer src='/build/bundle.js'></script>
 </head>

package-lock.json

@@ -15,6 +15,9 @@
 				"@rollup/plugin-terser": "^0.4.0",
 				"@sveltejs/adapter-auto": "^3.0.0",
 				"@sveltejs/kit": "^2.0.0",
+				"@xterm/addon-fit": "^0.10.0",
+				"@xterm/addon-web-links": "^0.11.0",
+				"@xterm/xterm": "^5.5.0",
 				"autoprefixer": "^10.4.20",
 				"labs": "git@github.com:leaningtech/labs.git",
 				"postcss": "^8.4.47",
@@ -1120,6 +1123,30 @@
 			"integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==",
 			"dev": true
 		},
+		"node_modules/@xterm/addon-fit": {
+			"version": "0.10.0",
+			"resolved": "https://registry.npmjs.org/@xterm/addon-fit/-/addon-fit-0.10.0.tgz",
+			"integrity": "sha512-UFYkDm4HUahf2lnEyHvio51TNGiLK66mqP2JoATy7hRZeXaGMRDr00JiSF7m63vR5WKATF605yEggJKsw0JpMQ==",
+			"dev": true,
+			"peerDependencies": {
+				"@xterm/xterm": "^5.0.0"
+			}
+		},
+		"node_modules/@xterm/addon-web-links": {
+			"version": "0.11.0",
+			"resolved": "https://registry.npmjs.org/@xterm/addon-web-links/-/addon-web-links-0.11.0.tgz",
+			"integrity": "sha512-nIHQ38pQI+a5kXnRaTgwqSHnX7KE6+4SVoceompgHL26unAxdfP6IPqUTSYPQgSwM56hsElfoNrrW5V7BUED/Q==",
+			"dev": true,
+			"peerDependencies": {
+				"@xterm/xterm": "^5.0.0"
+			}
+		},
+		"node_modules/@xterm/xterm": {
+			"version": "5.5.0",
+			"resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-5.5.0.tgz",
+			"integrity": "sha512-hqJHYaQb5OptNunnyAnkHyM8aCjZ1MEIDTQu1iIbbTD/xops91NB5yq1ZK/dC2JDbVWtF23zUtl9JE2NqwT87A==",
+			"dev": true
+		},
 		"node_modules/acorn": {
 			"version": "8.12.1",
 			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",

package.json

@@ -14,6 +14,9 @@
 		"@rollup/plugin-terser": "^0.4.0",
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/kit": "^2.0.0",
+		"@xterm/addon-fit": "^0.10.0",
+		"@xterm/addon-web-links": "^0.11.0",
+		"@xterm/xterm": "^5.5.0",
 		"autoprefixer": "^10.4.20",
 		"labs": "git@github.com:leaningtech/labs.git",
 		"postcss": "^8.4.47",

src/App.svelte

@@ -1,22 +1,34 @@
 <script>
+	import { onMount } from 'svelte';
+	import { Terminal } from '@xterm/xterm';
+	import { FitAddon } from '@xterm/addon-fit';
+	import { WebLinksAddon } from '@xterm/addon-web-links';
 	import Nav from 'labs/packages/global-navbar/src/Nav.svelte';
 	import SideBar from './SideBar.svelte';
+
+	var term = new Terminal({cursorBlink:true, convertEol:true, fontFamily:"monospace", fontWeight: 400, fontWeightBold: 700});
+	var fitAddon = new FitAddon();
+	term.loadAddon(fitAddon);
+	var linkAddon = new WebLinksAddon();
+	term.loadAddon(linkAddon);
+
+	onMount(function()
+	{
+		const consoleDiv = document.getElementById("console");
+		term.open(consoleDiv);
+		term.scrollToTop();
+		fitAddon.fit();
+		window.addEventListener("resize", function(ev){ fitAddon.fit(); });
+		term.focus();
+	});
 </script>
 
 <main class="flex flex-col w-full h-full">
 	<Nav />
 	<div class="flex flex-row flex-grow">
 		<SideBar />
-		<h1>Hello</h1>
-		<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
+		<div class="grow h-full m-1 scrollbar" id="console">
+		</div>
 	</div>
 </main>
 
-<style>
-	h1 {
-		color: #ff3e00;
-		text-transform: uppercase;
-		font-size: 4em;
-		font-weight: 100;
-	}
-</style>

src/global.css

@@ -8,6 +8,7 @@ body
 	font-family: Archivo, sans-serif;
 	margin: 0;
 	height: 100%;
+	background: black;
 }
 
 html

src/main.js

@@ -1,4 +1,5 @@
 import './global.css'
+import '@xterm/xterm/css/xterm.css'
 import '@fortawesome/fontawesome-free/css/all.min.css'
 import App from './App.svelte';