From de34cb587e0900ad1f6a3830fc55ff18792c5ba4 Mon Sep 17 00:00:00 2001
From: Alessandro Pignotti <a.pignotti@sssup.it>
Date: Sun, 13 Oct 2024 11:21:50 +0200
Subject: [PATCH] Add missing files for Sveltekit support

---
 src/app.html            |  38 ++++++++++
 src/lib/global.css      |  17 +++++
 src/routes/+page.svelte | 160 ++++++++++++++++++++++++++++++++++++++++
 3 files changed, 215 insertions(+)
 create mode 100644 src/app.html
 create mode 100644 src/lib/global.css
 create mode 100644 src/routes/+page.svelte
diff --git a/src/app.html b/src/app.html
new file mode 100644
index 0000000..7f927ce
--- /dev/null
+++ b/src/app.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<title>WebVM - Linux virtualization in WebAssembly</title>
+
+		<meta name="description" content="Server-less virtual machine, networking included, running browser-side in HTML5/WebAssembly. Code in any programming language inside this Linux terminal.">
+		<meta name="keywords" content="WebVM, Virtual Machine, CheerpX, x86 virtualization, WebAssembly, Tailscale, JIT">
+		<meta property="og:title" content="WebVM - Linux virtualization in WebAssembly" />
+		<meta property="og:type" content="website" />
+		<meta property="og:site_name" content="WebVM"/>
+		<meta property="og:image" content="https://webvm.io/assets/social.png" />
+		<meta name="twitter:card" content="summary_large_image" />
+		<meta name="twitter:site" content="@leaningtech" />
+		<meta name="twitter:title" content="WebVM - Linux virtualization in WebAssembly" />
+		<meta name="twitter:description" content="Server-less virtual machine, networking included, running browser-side in HTML5/WebAssembly. Code in any programming language inside this Linux terminal.">
+		<meta name="twitter:image" content="https://webvm.io/assets/social.png" />
+
+		<!-- Apple iOS web clip compatibility tags -->
+		<meta name="application-name" content="WebVM" />
+		<meta name="apple-mobile-web-app-title" content="WebVM" />
+		<meta name="apple-mobile-web-app-capable" content="yes" />
+		<meta name="mobile-web-app-capable" content="yes" />
+		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
+		<link rel="shortcut icon" href="./tower.ico">
+		<link rel="preconnect" href="https://fonts.googleapis.com">
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+		<link rel='stylesheet' href='scrollbar.css'>
+		<!-- Serviceworker script that adds the COI and CORS headers to the response headers in cases where the server does not support it. -->
+		<script src="serviceWorker.js"></script>
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>
diff --git a/src/lib/global.css b/src/lib/global.css
new file mode 100644
index 0000000..b65b9a7
--- /dev/null
+++ b/src/lib/global.css
@@ -0,0 +1,17 @@
+@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap');
+
+@tailwind base;
+@tailwind utilities;
+
+body
+{
+	font-family: Archivo, sans-serif;
+	margin: 0;
+	height: 100%;
+	background: black;
+}
+
+html
+{
+	height: 100%;
+}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
new file mode 100644
index 0000000..61ea0bd
--- /dev/null
+++ b/src/routes/+page.svelte
@@ -0,0 +1,160 @@
+<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 '$lib/SideBar.svelte';
+	import * as CheerpX from '@leaningtech/cheerpx';
+	import { diskImageUrl, diskImageType } from 'diskConfig'
+	import '$lib/global.css';
+	import '@xterm/xterm/css/xterm.css'
+	import '@fortawesome/fontawesome-free/css/all.min.css'
+	import { networkInterface, startLogin } from '$lib/network.js'
+
+	var term = new Terminal({cursorBlink:true, convertEol:true, fontFamily:"monospace", fontWeight: 400, fontWeightBold: 700});
+	var cx = null;
+	var fitAddon = new FitAddon();
+	term.loadAddon(fitAddon);
+	var linkAddon = new WebLinksAddon();
+	term.loadAddon(linkAddon);
+	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);
+	function initTerminal()
+	{
+		const consoleDiv = document.getElementById("console");
+		term.open(consoleDiv);
+		term.scrollToTop();
+		fitAddon.fit();
+		window.addEventListener("resize", function(ev){ fitAddon.fit(); });
+		term.focus();
+		// Avoid undesired default DnD handling
+		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);
+		initCheerpX();
+	}
+	async function initCheerpX()
+	{
+		// TODO: Check for SAB support
+		var blockDevice = null;
+		switch(diskImageType)
+		{
+			case "cloud":
+				try
+				{
+					blockDevice = await CheerpX.CloudDevice.create(diskImageUrl);
+				}
+				catch(e)
+				{
+					// Report the failure and try again with plain HTTP
+					var wssProtocol = "wss:";
+					if(diskImageUrl.startsWith(wssProtocol))
+					{
+						// WebSocket protocol failed, try agin using plain HTTP
+						plausible("WS Disk failure");
+						blockDevice = await CheerpX.CloudDevice.create("https:" + diskImageUrl.substr(wssProtocol.length));
+					}
+					else
+					{
+						// No other recovery option
+						throw e;
+					}
+				}
+				break;
+			case "bytes":
+				blockDevice = await CheerpX.HttpBytesDevice.create(diskImageUrl);
+				break;
+			case "github":
+				blockDevice = await CheerpX.GitHubDevice.create(diskImageUrl);
+				break;
+			default:
+				throw new Error("Unrecognized device type");
+		}
+		var overlayDevice = await CheerpX.OverlayDevice.create(blockDevice, await CheerpX.IDBDevice.create("block1"));
+		var webDevice = await CheerpX.WebDevice.create("");
+		var dataDevice = await CheerpX.DataDevice.create();
+		var mountPoints = [
+			// The root filesystem, as an Ext2 image
+			{type:"ext2", dev:overlayDevice, path:"/"},
+			// Access to files on the Web server, relative to the current page
+			{type:"dir", dev:webDevice, path:"/web"},
+			// Access to read-only data coming from JavaScript
+			{type:"dir", dev:dataDevice, path:"/data"},
+			// Automatically created device files
+			{type:"devs", path:"/dev"},
+			// The Linux 'proc' filesystem which provides information about running processes
+			{type:"proc", path:"/proc"}
+		];
+		try
+		{
+			cx = await CheerpX.Linux.create({mounts: mountPoints, networkInterface: networkInterface});
+		}
+		catch(e)
+		{
+			// TODO: Print error message on console
+			throw e;
+		}
+		// TODO: Register activity callbacks
+		term.scrollToBottom();
+		cxReadFunc = cx.setCustomConsole(writeData, term.cols, term.rows);
+		// Reasonable defaults for local deployments
+		// var cmd = "/bin/bash";
+		// var args = ["--login"];
+		// var env = ["HOME=/home/user", "TERM=xterm", "USER=user", "SHELL=/bin/bash", "EDITOR=vim", "LANG=en_US.UTF-8", "LC_ALL=C"];
+		// var cwd = "/home/user";
+		// Executable full path (Required)
+		var cmd = "/bin/bash";
+		// Arguments, as an array (Required)
+		var args = ["--login"]
+		// Optional extra parameters
+		var opts = {
+			// Environment variables
+			env: ["HOME=/home/user", "TERM=xterm", "USER=user", "SHELL=/bin/bash", "EDITOR=vim", "LANG=en_US.UTF-8", "LC_ALL=C"],
+			// Current working directory
+			cwd: "/home/user",
+			// User id
+			uid: 1000,
+			// Group id
+			gid: 1000
+		};
+		// Run the command in a loop, in case the user exits
+		while (true)
+		{
+			await cx.run(cmd, args, opts);
+		}
+	}
+	onMount(initTerminal);
+	async function handleConnect()
+	{
+		const w = window.open("login.html", "_blank");
+		await cx.networkLogin();
+		w.location.href = await startLogin();
+	}
+</script>
+
+<main class="flex flex-col w-full h-full">
+	<Nav />
+	<div class="flex flex-row flex-grow">
+		<SideBar on:connect={handleConnect}/>
+		<div class="grow h-full p-1 scrollbar" id="console">
+		</div>
+	</div>
+</main>
+
