added code splitting and basic opener

web/App.svelte

@@ -1,27 +1,46 @@
 <script lang="ts">
-import { onMount } from "svelte";
+	import { onMount } from "svelte";
+	import getComponentForShare from "./contentType";
 	const slug = window.location.pathname.split("/").pop();
 
-	let data: String = null
+	let component = null;
 
 	onMount(async () => {
+		const regex = /filename="(.*)"/gm;
 		const res = await fetch(`/s/${slug}`);
-		document.title = slug;
-	});
 
+		const contentType: string = res.headers.get("Content-Type");
+
+		let filename: string;
+		let m;
+		while ((m = regex.exec(res.headers.get("Content-Disposition"))) !== null) {
+			// This is necessary to avoid infinite loops with zero-width matches
+			if (m.index === regex.lastIndex) {
+				regex.lastIndex++;
+			}
+			filename = m[1];
+		}
+
+		document.title = filename;
+
+		component = getComponentForShare(contentType,filename);
+	});
 </script>
 
 <main>
-	<div>{ slug }</div>
+	<div>{slug}</div>
 	<div>
-		{#if data === null}
-        	Loading data...
-    	{:else}
-        	{data}
-    	{/if}
+		{#if component === null}
+			Loading data...
+		{:else}
+			{#await component}
+				Loading data...
+			{:then v } 
+				<svelte:component this={v.default} />
+			{/await}
+		{/if}
 	</div>
 </main>
 
 <style>
-
-</style>
+</style>

web/contentType.ts

@@ -0,0 +1,68 @@
+
+export default function getComponentForShare(contentType: string, filename: string) {
+	if (contentType.startsWith("image/")) {
+		return import("./opener/Default.svelte");
+	}
+
+	if (contentType.startsWith("video/")) {
+		return import("./opener/Default.svelte");
+	}
+
+	if (contentType.startsWith("audio/")) {
+		return import("./opener/Default.svelte");
+	}
+
+	if (contentType.startsWith("application/pdf")) {
+		return import("./opener/Default.svelte");
+	}
+
+	if (contentType.startsWith("text/")) {
+		return import("./opener/Text.svelte");
+	}
+
+	switch (contentType) {
+		case "application/json":
+		case "application/ld+json":
+		case "application/xhtml+xml":
+		case "application/xml":
+			return import("./opener/Default.svelte");
+		case "application/ogg":
+			return import("./opener/Default.svelte");
+	}
+
+	const extension = filename.split(".").pop();
+	if (extension === undefined) {
+		return import("./opener/Default.svelte");
+	}
+
+	switch (extension) {
+		case "png":
+		case "jpg":
+		case "jpeg":
+		case "gif":
+			return import("./opener/Default.svelte");
+		case "mp4":
+		case "mov":
+		case "avi":
+		case "mkv":
+		case "wmv":
+		case "flv":
+		case "mpg":
+		case "mpeg":
+			return import("./opener/Default.svelte");
+		case "mp3":
+		case "wav":
+		case "ogg":
+		case "flac":
+			return import("./opener/Default.svelte");
+		case "pdf":
+			return import("./opener/Default.svelte");
+		case "txt":
+		case "md":
+		case "markdown":
+			return import("./opener/Default.svelte");
+	}
+
+	return import("./opener/Text.svelte");
+
+}

web/opener/Default.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    export let contentType: string;
+    export let filename: string;
+    export let slug: string;
+    export let response: Response;
+</script>
+
+<div>
+    Default opener
+</div>

web/opener/Text.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    export let contentType: string;
+    export let filename: string;
+    export let slug: string;
+    export let response: Response;
+
+</script>
+
+<div>
+    Text opener
+</div>