s3-share/web/App.svelte

<script lang="ts">
	import { onMount } from "svelte";
	import getComponentForShare from "./contentType";

	const regex = /filename="(.*)"/gm;
	const slug = window.location.pathname.split("/").pop();

	let component = null;
	let contentType: string;
	let filename: string;

	async function getFileHeadAndComponent() {
		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];
		}
		
		return getComponentForShare(contentType,filename);
	}
</script>

<div class="dl">
	<a href="/s/{slug}">Download</a>
</div>
<main>
	{#await getFileHeadAndComponent()}
		Loading data...
	{:then v } 
		<svelte:component this={v.default} slug={slug} contentType={contentType} filename={filename} />
	{/await}
</main>

<style>

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

.dl {
	top: 0;
	right: 0;
	position: absolute;
	padding-top: 1rem;
	padding-right: 1rem;
	color: var(--color-secondary);
}

.dl a {
	color: var(--color-secondary);
	text-decoration: none;
}

</style>