s3-share/web/opener/Text.svelte

<script lang="ts">
	import Highlight from "svelte-highlight";
	import highlightStyle from "svelte-highlight/styles/vs2015";
	import getLangFromShare from "./getLangFromShare";

	export let contentType: string;
	export let filename: string;
	export let slug: string;

	async function loadShare() {
		const res = await fetch(`/s/${slug}`);
		return await res.text();
	}

	async function loadLang() {
		return await getLangFromShare(contentType,filename).then(v => v.default);
	}
</script>


<svelte:head>
	{@html highlightStyle}
</svelte:head>

<div class="container" >
	<header>{filename}</header>
	
	{#await Promise.all([loadShare(), loadLang()])}
		Loading...
	{:then v} 
		<Highlight language={v[1]} code={v[0]} />
	{/await}
</div>

<style>
	header{
		font-size: 1.5rem;
		font-weight: bold;
		margin-bottom: 1rem;
		color: var(--color-secondary);
		border-bottom: solid 1px var(--color-primary);
		
		padding: 1rem;
	}

	.container{
		border-width: 2px;
		border-color: var(--color-primary);
		border-style: solid;
		border-radius: 5px;
		min-width: 50rem;
	}
	
</style>