add more homepage text

inner-app/vite.config.js

@@ -103,7 +103,6 @@ function readOutputFiles() {
 
 				// find matches for /assets/ in the scriptContent
 				let matches = scriptContent.match(/"\/assets\//g);
-				console.log('matches:', matches);
 
 				// insert ${base} before `assets/` in the source code scriptContent
 				// so that the innerApp can load the correct urls

src/routes/+page.svelte

@@ -36,8 +36,6 @@
 		// fetch the text
 		const appRaw = await fetch(`${base}/${name}`).then((res) => res.text());
 
-		console.log(appRaw);
-
 		// generate sha256 Subresource Integrity of app.js (appRaw)
 		// and use it as integrity attribute of script tag
 		// to prevent MITM attacks
@@ -92,18 +90,83 @@
 		<!-- Safari can just click the link -->
 		<Finger />
 	{/if}
-	<a id="el_link" bind:this={el_link} class="border-2 rounded-lg shadow-md px-4 py-2 w-full"
+	<a
+		id="el_link"
+		bind:this={el_link}
+		class="border-2 border-neutral-400 rounded-lg shadow-md outline-lime-50 px-4 py-2 w-full"
 		>Drag me into tab bar</a
 	>
 
 	<div id="el_notification" bind:this={el_notification} hidden class="">
 		✅ Data URL copied to clipboard. Paste it into your browser's address bar.
 	</div>
 
+	<h2>Why do we need this?</h2>
+	<p class="my-2">
+		We need an app architecture that is secure by default, especially when it comes to sensitive
+		data with secrets and personal information. Even the most cutting edge cryptography
+		organizations are using Browser extensions or Mobile Apps to hold these secrets, both of which
+		can change code without you knowing
+	</p>
+
 	<h2 class="text-xl font-semibold my-4">How does this work?</h2>
 	<p class="my-2">
 		When you copy/paste or drag the link into the address bar, the app will be loaded. This is a
 		secure way to load the app because the app code cannot change behind your back. Once the data
 		URL has loaded, you can bookmark it and use it in the future.
 	</p>
+
+	<h2 class="text-xl font-semibold my-4">Why is this secure?</h2>
+	<p class="my-2">
+		This is secure because the browser will check the integrity of the app code before loading it.
+		This means you (or a nerdy friend) can review the app code once, then know that it hasn't
+		changed after that. This is important so that "updates" aren't applied without your knowledge or
+		active consent!
+	</p>
+
+	<h2 class="text-xl font-semibold my-4">What if I want to update?</h2>
+	<p class="my-2">
+		If you want to update the app, you can simply revisit this page and copy/paste or drag the link
+		into the address bar again. This will load the new version of the app. If there have been
+		updates since you last book marked, you'll get a new integrity hash for the new code.
+	</p>
+
+	<h2>Can I run this page myself?</h2>
+	<p class="my-2">
+		Yes! Everything is public and open source. You can run this page yourself by forking the <a
+			href="https://github.com/DougAnderson444/integrity-app"
+			target="_blank">code repository</a
+		> with one click. GitHub will even host your Intergrity App for you if you like, for free.
+	</p>
+
+	<h2 class="text-xl font-semibold my-4">What is the app?</h2>
+	<p class="my-2">
+		The Integrity App uses a <a href="https://github.com/DougAnderson444/wurbo">Wurbo</a> Loader by default,
+		which means you can safely load any WebAsembly App that implements the Wurbo interfaces. Wurbo is
+		a cutting edge Wasm framework that uses a minimal amount of JavaScript to make the WebAssembly Component
+		interactive, but not enough to make it dangerous. It's just enough JavaScript to run the WebAssembly
+		Component, nothing else!
+	</p>
+
+	<h2 class="text-xl font-semibold my-4">What is the Wurbo Loader?</h2>
+	<p>
+		The Wurbo Loader is a WebAssembly Loader that uses a minimal amount of JavaScript to make the
+		WebAssembly Component interactive, but not enough to make it dangerous. It's just enough
+		JavaScript to run the WebAssembly Component, nothing else!
+	</p>
 </main>
+
+<style>
+	h2 {
+		@apply text-xl font-semibold my-4;
+	}
+
+	a {
+		@apply border border-neutral-400 rounded-lg shadow-md outline-lime-50 px-2 py-1 w-full bg-sky-100;
+	}
+
+	a:not(#el_link)::after {
+		content: '➚';
+		margin-left: 0.5rem;
+	}
+</style>