From 2222951621e7d539c607aee1ad78e2503ee28429 Mon Sep 17 00:00:00 2001
From: Alessandro Pignotti <a.pignotti@sssup.it>
Date: Sat, 9 Nov 2024 23:04:01 +0100
Subject: [PATCH] Add customize cross-linking messages between main WebVM and
 Alpine

---
 src/lib/InformationTab.svelte  | 1 +
 src/lib/SideBar.svelte         | 4 +++-
 src/lib/WebVM.svelte           | 4 +++-
 src/routes/+page.svelte        | 4 +++-
 src/routes/alpine/+page.svelte | 4 +++-
 5 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/lib/InformationTab.svelte b/src/lib/InformationTab.svelte
index b2131a3..4941da1 100644
--- a/src/lib/InformationTab.svelte
+++ b/src/lib/InformationTab.svelte
@@ -8,3 +8,4 @@
 	<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>
+<slot></slot>
diff --git a/src/lib/SideBar.svelte b/src/lib/SideBar.svelte
index 180bc74..9028116 100644
--- a/src/lib/SideBar.svelte
+++ b/src/lib/SideBar.svelte
@@ -48,7 +48,9 @@
 	</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 === 'Information'}
-			<InformationTab/>
+			<InformationTab>
+				<slot></slot>
+			</InformationTab>
 		{:else if activeInfo === 'Networking'}
 			<NetworkingTab on:connect/>
 		{:else if activeInfo === 'CPU'}
diff --git a/src/lib/WebVM.svelte b/src/lib/WebVM.svelte
index 8cbc47b..b867931 100644
--- a/src/lib/WebVM.svelte
+++ b/src/lib/WebVM.svelte
@@ -327,7 +327,9 @@
 <main class="relative w-full h-full">
 	<Nav />
 	<div class="absolute top-10 bottom-0 left-0 right-0">
-		<SideBar on:connect={handleConnect} on:reset={handleReset}/>
+		<SideBar on:connect={handleConnect} on:reset={handleReset}>
+			<slot></slot>
+		</SideBar>
 		{#if configObj.needsDisplay}
 			<div class="absolute top-0 bottom-0 left-14 right-0">
 				<canvas class="w-full h-full cursor-none" id="display"></canvas>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 436feea..bf07d92 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -11,4 +11,6 @@ function handleProcessCreated(processCount)
 }
 </script>
 
-<WebVM configObj={configObj} processCallback={handleProcessCreated} cacheId="blocks_terminal" />
+<WebVM configObj={configObj} processCallback={handleProcessCreated} cacheId="blocks_terminal">
+	<p>Looking for a complete desktop experience? Try the new <a class="underline" href="/alpine.html" target="_blank">Alpine Linux</a> graphical WebVM</p>
+</WebVM>
diff --git a/src/routes/alpine/+page.svelte b/src/routes/alpine/+page.svelte
index 4a3f5b6..6b3d090 100644
--- a/src/routes/alpine/+page.svelte
+++ b/src/routes/alpine/+page.svelte
@@ -11,4 +11,6 @@ function handleProcessCreated(processCount)
 }
 </script>
 
-<WebVM configObj={configObj} processCallback={handleProcessCreated} cacheId="blocks_alpine" />
+<WebVM configObj={configObj} processCallback={handleProcessCreated} cacheId="blocks_alpine">
+	<p>Looking for something different? Try the classic <a class="underline" href="/" target="_blank">Debian Linux</a> terminal-based WebVM</p>
+</WebVM>