added 404 page

web/App.svelte

@@ -1,16 +1,23 @@
 <script lang="ts">
-	import { onMount } from "svelte";
 	import getComponentForShare from "./contentType";
+	import NotFound from "./NotFound.svelte";
 
 	const regex = /filename="(.*)"/gm;
 	const slug = window.location.pathname.split("/").pop();
 
+	let notFound = false;
 	let component = null;
 	let contentType: string;
 	let filename: string;
 
-	async function getFileHeadAndComponent() {
+	async function getFileHead() {
 		const res = await fetch(`/s/${slug}`,{method:"HEAD"});
+
+		if (res.status === 404){
+			notFound = true;
+			return;
+		}
+
 		contentType = res.headers.get("Content-Type");
 
 		let match;
@@ -21,20 +28,29 @@
 			}
 			filename = match[1];
 		}
-		
-		return getComponentForShare(contentType,filename);
 	}
 </script>
 
+{#if !notFound}
 	<div class="dl">
 		<a href="/s/{slug}">Download</a>
 	</div>
+{/if}
 <main>
-	{#await getFileHeadAndComponent()}
+	{#await getFileHead()}
 		Loading data...
+	{:then}
+
+		{#if notFound}
+			<NotFound />
+		{:else}
+			{#await getComponentForShare(contentType, filename)}
+				Loading component...
 			{:then v} 
 				<svelte:component this={v.default} slug={slug} contentType={contentType} filename={filename} />
 			{/await}
+		{/if}
+	{/await}
 </main>
 
 <style>

web/NotFound.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+
+</script>
+
+<p>Share not found</p>
+
+<style>
+    p{
+        color: var(--color-secondary);
+        font-size: 3rem;
+    }
+</style>