display a text share

web/App.svelte

@@ -4,14 +4,15 @@
 	const slug = window.location.pathname.split("/").pop();
 
 	let component = null;
+	let contentType: string;
+	let filename: string;
 
 	onMount(async () => {
 		const regex = /filename="(.*)"/gm;
-		const res = await fetch(`/s/${slug}`);
+		const res = await fetch(`/s/${slug}`,{method:"HEAD"});
 
-		const contentType: string = res.headers.get("Content-Type");
-
-		let filename: string;
+		contentType = res.headers.get("Content-Type");
+		
 		let m;
 		while ((m = regex.exec(res.headers.get("Content-Disposition"))) !== null) {
 			// This is necessary to avoid infinite loops with zero-width matches
@@ -36,7 +37,7 @@
 			{#await component}
 				Loading data...
 			{:then v } 
-				<svelte:component this={v.default} />
+				<svelte:component this={v.default} slug={slug} contentType={contentType} filename={filename} />
 			{/await}
 		{/if}
 	</div>

web/opener/Default.svelte

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

web/opener/Text.svelte

@@ -1,11 +1,18 @@
 <script lang="ts">
-    export let contentType: string;
-    export let filename: string;
-    export let slug: string;
-    export let response: Response;
+import { onMount } from "svelte";
+	export let contentType: string;
+	export let filename: string;
+	export let slug: string;
 
+	let content = "";
+
+	onMount(async () => {
+		const res = await fetch(`/s/${slug}`);
+		content = await res.text();
+	});
 </script>
 
 <div>
-    Text opener
+	Text opener
+	<pre><code>{ content }</code></pre>
 </div>