From e01ffeb3db16c76720f9e57b0223e63f42f47fc5 Mon Sep 17 00:00:00 2001
From: Alessandro Pignotti <a.pignotti@sssup.it>
Date: Thu, 17 Oct 2024 11:20:51 +0200
Subject: [PATCH] Restore the information tab
With a high-level overview of the moving parts of WebVM
---
src/lib/InformationTab.svelte | 10 ++++++++++
src/lib/SideBar.svelte | 7 +++++--
2 files changed, 15 insertions(+), 2 deletions(-)
create mode 100644 src/lib/InformationTab.svelte
diff --git a/src/lib/InformationTab.svelte b/src/lib/InformationTab.svelte
new file mode 100644
index 0000000..ad28d3f
--- /dev/null
+++ b/src/lib/InformationTab.svelte
@@ -0,0 +1,10 @@
+<h1 class="text-lg font-bold">Information</h1>
+<img src="assets/webvm_hero.png" alt="WebVM Logo" class="w-full self-center">
+<p>WebVM is a virtual Linux environment running in the browser via WebAssembly</p>
+<p>It is based on:</p>
+<ul class="list-disc list-inside">
+ <li><a class="underline" target="_blank" href="https://cheerpx.io/">CheerpX</a>: x86 JIT in Wasm</li>
+ <li><a class="underline" target="_blank" href="https://xtermjs.org/">Xterm.js</a>: interactive terminal</li>
+ <li>Local/private <a class="underline" target="_blank" href="https://cheerpx.io/docs/guides/File-System-support">file storage</a></li>
+ <li><a class="underline" target="_blank" href="https://cheerpx.io/docs/guides/Networking">Networking</a> via <a class="underline" target="_blank" href="https://tailscale.com/">Tailscale</a></li>
+</ul>
diff --git a/src/lib/SideBar.svelte b/src/lib/SideBar.svelte
index 6133d45..6a40181 100644
--- a/src/lib/SideBar.svelte
+++ b/src/lib/SideBar.svelte
@@ -1,5 +1,6 @@
<script>
import Icon from './Icon.svelte';
+ import InformationTab from './InformationTab.svelte';
import NetworkingTab from './NetworkingTab.svelte';
import CpuTab from './CpuTab.svelte';
import DiskTab from './DiskTab.svelte';
@@ -8,7 +9,7 @@
import { cpuActivity, diskActivity } from './activities.js'
const icons = [
- //{ icon: 'fas fa-info-circle', info: 'Information', activity: null },
+ { icon: 'fas fa-info-circle', info: 'Information', activity: null },
{ icon: 'fas fa-wifi', info: 'Networking', activity: null },
{ icon: 'fas fa-microchip', info: 'CPU', activity: cpuActivity },
{ icon: 'fas fa-compact-disc', info: 'Disk', activity: diskActivity },
@@ -44,7 +45,9 @@
{/each}
</div>
<div class="flex flex-col gap-5 shrink-0 w-60 h-full z-10 p-2 bg-neutral-600 text-gray-100" class:hidden={!activeInfo}>
- {#if activeInfo === 'Networking'}
+ {#if activeInfo === 'Information'}
+ <InformationTab/>
+ {:else if activeInfo === 'Networking'}
<NetworkingTab on:connect/>
{:else if activeInfo === 'CPU'}
<CpuTab/>