hugo/layouts/partials/xterm.html

    <link rel="stylesheet" href="/xterm/xterm.css" />
    <script src="/xterm/xterm.js"></script>
    <script src="/xterm/xterm-addon-fit.js"></script>
    <script>

	//Utility namespace to group all functionality related to printing (both error and non error) messages
	const color= "\x1b[1;35m";
	const bold= "\x1b[1;37m";
	const underline= "\x1b[94;4m";
	const normal= "\x1b[0m";
	var printOnTerm = {
		getAsciiTitle: function ()
		{
			var title = [
				color + "                        __      __   _  __   ____  __       " + normal,
				color + "                        \\ \\    / /__| |_\\ \\ / /  \\/  | " + normal,
				color + "                         \\ \\/\\/ / -_) '_ \\ V /| |\\/| | " + normal,
				color + "                          \\_/\\_/\\___|_.__/\\_/ |_|  |_|  " + normal,

			];
			return title;
		},
		getAsciiText: function ()
		{
			var text = [
				" +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~+",
				"",
				"   Welcome to WebVM (build 20220201). If unsure, try these examples:",
				"",
				"     python3 examples/python3/fibonacci.py ",
				"     gcc -o helloworld examples/c/helloworld.c && ./helloworld",
				"     objdump -d ./helloworld | less -M",
				"     vim examples/c/helloworld.c",
				"",
				];
			return text;
		},
		getSharedArrayBufferMissingMessage: function ()
		{
			const text = [
				"",
				"",
				color + "CheerpX could not start" + normal,
				"",
				"CheerpX depends on JavaScript's SharedArrayBuffer, that your browser",
				"     does not support.",
				"",
				"SharedArrayBuffer is currently enabled by default on recent",
				"     versions of Chrome, Edge, Firefox and Safari.",
				"",
				"",
				"Give it a try from another browser!",
				]

			return text;
		},
		getErrorMessage: function (error_message)
		{
			const text = [
				"",
				"",
				color + "CheerpX could not start" + normal,
				"",
				"CheerpX internal error message is:",
				error_message,
				"",
				"",
				"CheerpX is expected to work with recent desktop versions of Chrome, Edge, Firefox and Safari",
				"",
				"",
				"Give it a try from a desktop version / another browser!",
				]

			return text;
		},
		printMessage: function (text) {
			for (var i=0; i<text.length; i++)
			{
				term.write(text[i]);
				term.write('\n');
			}
		},
		printError: function (message)
		{
			this.printMessage(message);

			term.write("\n\n");

			function writeCustom(something)
			{
				term.write(something);
			}
		},
	};

	var consoleDiv = document.getElementById("console");

	//xterm.js related logic
	var term = new Terminal({cursorBlink:true,convertEol:true, fontFamily:"'Roboto Mono', monospace", fontWeight: 400, fontWeightBold: 700});
	var fitAddon = new FitAddon.FitAddon();
	term.loadAddon(fitAddon);
	term.open(consoleDiv);
	term.scrollToTop();

	fitAddon.fit();
	window.addEventListener("resize", function(ev){fitAddon.fit();}, false);
	term.focus();
	var cxReadFunc = null;
	function writeData(buf)
	{
		term.write(new Uint8Array(buf));
	}
	function readData(str)
	{
		if(cxReadFunc == null)
			return;
		for(var i=0;i<str.length;i++)
			cxReadFunc(str.charCodeAt(i));
	}
	term.onData(readData);

	//Actual CheerpX and bash specific logic
	function runBash()
	{
		const structure = {
			name: "bash",
			cmd: "/bin/bash",
			args: ["--login"],
			env: ["HOME=/home/user", "TERM=xterm", "USER=user", "SHELL=/bin/bash", "EDITOR=vim", "LANG=en_US.UTF-8", "LC_ALL=C"],
			expectedPrompt: ">",
			versionOpt: "--version",
			comment_line: "#",
			description_line: "The original Bourne Again SHell",
		}
		if (typeof SharedArrayBuffer === "undefined")
		{
			printOnTerm.printError(printOnTerm.getSharedArrayBufferMissingMessage());
			return;
		}

		async function runTest(cx)
		{
			term.scrollToBottom();

			async function cxLogAndRun(cheerpx, cmd, args, env)
			{
				await cheerpx.run(cmd, args, env);
				printOnTerm.printMessage(" ");
			}

			cxReadFunc = cx.setCustomConsole(writeData, term.cols, term.rows);

			function preventDefaults (e) {
				e.preventDefault()
				e.stopPropagation()
			}
			consoleDiv.addEventListener("dragover", preventDefaults, false);
			consoleDiv.addEventListener("dragenter", preventDefaults, false);
			consoleDiv.addEventListener("dragleave", preventDefaults, false);
			consoleDiv.addEventListener("drop", preventDefaults, false);

			var opts = {env:structure.env, cwd:"/home/user"};
			while (true)
			{
				await cxLogAndRun(cx, structure.cmd, structure.args, opts);
			}
		}
		function failCallback(err)
		{
			printOnTerm.printError(printOnTerm.getErrorMessage(err));
		}
		CheerpXApp.create({devices:[{type:"block",url:"https://disks.leaningtech.com/webvm_20220131.ext2",name:"block1"}],mounts:[{type:"ext2",dev:"block1",path:"/"},{type:"cheerpOS",dev:"/app",path:"/bootstrap"},{type:"devs",dev:"",path:"/dev"}]}).then(runTest, failCallback);
	}
	function initialMessage()
	{
		printOnTerm.printMessage(printOnTerm.getAsciiTitle());
		printOnTerm.printMessage(["\n"]);
		printOnTerm.printMessage(printOnTerm.getAsciiText());
		term.registerLinkMatcher(/https:\/\/medium\.com\/p\/40a60170b361/, function(mouseEvent, matchedString) {
			window.open(matchedString, "_blank")
		});
		const textArray = new Array(6);
		const linksArray = new Array(6);
		const rangesArray = new Array(6);
		var last = 0;
		const textLinkLine = " | GitHub  |  Issues  |  Gitter  |  Twitter  |  Latest News  |  About CheerpX |";
		const lineWithLinks = 23;
		function addLink(text, website)
		{
			var index = textLinkLine.indexOf(text);
			const start_x = index+1;
			const end_x = index + text.length;
			rangesArray[last] = {start: {x:start_x, y:lineWithLinks}, end: {x:end_x, y:lineWithLinks}};
			linksArray[last] = website;
			last++;
		}

		addLink("GitHub", "https://github.com/leaningtech/webvm");
		addLink("Issues", "https://github.com/leaningtech/webvm/issues");
		addLink("Gitter", "https://gitter.im/leaningtech/cheerpx");
		addLink("Twitter", "https://twitter.com/leaningtech");
		addLink("Latest News", "https://medium.com/leaningtech");
		addLink("About CheerpX", "https://leaningtech.com/cheerpx");
		var provider = {
			provideLinks(bufferLineNum, callback) {
				switch(bufferLineNum)
				{
					case lineWithLinks:
						{
						callback([
								{range: rangesArray[0], activate() {window.open('' + linksArray[0], '_blank');}},
								{range: rangesArray[1], activate() {window.open('' + linksArray[1], '_blank');}},
								{range: rangesArray[2], activate() {window.open('' + linksArray[2], '_blank');}},
								{range: rangesArray[3], activate() {window.open('' + linksArray[3], '_blank');}},
								{range: rangesArray[4], activate() {window.open('' + linksArray[4], '_blank');}},
								{range: rangesArray[5], activate() {window.open('' + linksArray[5], '_blank');}},
							]);
							break;
						}

					}
			}
		};
		term.registerLinkProvider(provider);
		console.log("Welcome. We appreciate curiosity, but be warned that keeping the DevTools open causes significant performance degradation and crashes.");
	}
	initialMessage();

	var script = document.createElement('script');
	script.type = 'text/javascript';

	var cxFile = "https://cheerpxdemos.leaningtech.com/publicdeploy/";
	const isMobile = navigator.userAgent.toLowerCase().match(/mobile/i);
	if (isMobile)
	{
		printOnTerm.printMessage(["Loading mobile version...\n"]);
		cxFile += '20220131_500/cx.js';
	}
	else
	{
		cxFile += '20220131_700/cx.js';
	}

	script.src = cxFile;
	script.addEventListener("load", runBash, false);

	document.head.appendChild(script);

    </script>