s3-share/web/App.svelte

<script lang="ts">
	import getComponentForShare from "./contentType";
	import NotFound from "./NotFound.svelte";
	import sizeToReadable from "./sizeToReadable";

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

	let notFound = false;
	let contentType: string;
	let filename: string;
	let fileSize: number = 0;

	async function getFileHead() {
		const res = await fetch(`/s/${slug}`,{method:"HEAD"});

		if (res.status === 404){
			notFound = true;
			return;
		}

		contentType = res.headers.get("Content-Type");
		fileSize = parseInt(res.headers.get("Content-Length"));

		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;
	}
</script>

{#if !notFound}
	<div class="dl">
		<a download href="/s/{slug}">Download ({sizeToReadable(fileSize)})</a>
	</div>
{/if}
<main>
	{#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>

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>