s3-share/web/App.svelte

<script lang="ts">
	import { onMount } from "svelte";
	import getComponentForShare from "./contentType";
	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}`,{method:"HEAD"});

		contentType = res.headers.get("Content-Type");
		
		let match;
		while ((match = regex.exec(res.headers.get("Content-Disposition"))) !== null) {
			// This is necessary to avoid infinite loops with zero-width matches
			if (match.index === regex.lastIndex) {
				regex.lastIndex++;
			}
			filename = match[1];
		}

		document.title = filename;

		component = getComponentForShare(contentType,filename);
	});
</script>

<main>
	{#if component === null}
		Loading data...
	{:else}
		{#await component}
			Loading data...
		{:then v } 
			<svelte:component this={v.default} slug={slug} contentType={contentType} filename={filename} />
		{/await}
	{/if}
</main>

<style>

main {
	display: flex;
	justify-content: center;
	padding-top: 5rem;
}

</style>