<script lang="ts">
	import { routes } from "./sitemap.ts"
	import { Separator } from "$lib/components/ui/separator/index.js";
	let scrollPosition: number = .5;
	let scrollHeight: number = 1;
	let progress: number = 0;

	function onScroll(_p) {
		if (scrollHeight > 1) {
			progress = Math.min(1, scrollPosition / scrollHeight);
		}
	}

	import type { PageData } from './$types';
	export let data: PageData;
	const { name, Content } = data;

	import metadata from '$content/metadata.json';
</script>

<svelte:head>
	<title>{metadata.name}</title>
</svelte:head>

<div
	id="background"
	style="opacity: {1 - progress}; background-image: url('{metadata.frontCover}')"
>
</div>

<div id="front">
	<div id="floater">
		<p class="floater-elem" style="color: #888">{metadata.frontDescription}</p>
		<div
			class="floater-elem"
				 style="padding-bottom: {(1 - progress) * 50}vh"
		>
			<div class="flex h-5 items-center space-x-4 text-sm">
				<a href="#bio">Bio</a>
				{#each routes as item}
					{#if item.route !== "/"}
						<Separator orientation="vertical" />
						<a href={item.route}>{item.name}</a>
					{/if}
				{/each}
			</div>
		</div>
	</div>
</div>
<div id="bio" class="bg-white dark:bg-gray-900" style="">
	<div class="p-1">
		<div class="flex">
			<p id="bio-name">{name}</p>
			<div id="avatar">
				<img src={metadata.avatar} alt={metadata.name} />
			</div>
		</div>
	</div>
	<article class="prose-bio lg:prose-xl dark:prose-invert">
		<Content />
	</article>
</div>

<svelte:window
	bind:scrollY={scrollPosition}
	bind:innerHeight={scrollHeight}
	on:scroll={onScroll}
/>

<style>
	#background {
		background-attachment: fixed;
		background-size: 100%;
		background-position: center;
		z-index: -10;
		position: absolute;
		min-width: 100vw;
		min-height: 100vh;
	}
	#front {
		height: 100vh;
		display: flex;
		flex-direction: column;
	}
	#floater {
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-top: auto;
		margin-left: auto;
		margin-right: auto;
	}
	.floater-elem {
		margin-left: auto;
		margin-right: auto;
	}

	#bio {
		width: 80%;
		margin-left: auto;
		margin-right: auto;
		padding-top: 20px;
		min-height: 100vh;
	}
 	#bio-name {
		font-family: sans-serif;
		font-size: 10vh;
		line-height: 10vh;
		display: inline-block;
	}
	#avatar {
		line-height: 0;
		display: inline-block;
		margin: 5px;
		border: 4px solid rgba(100,100,100,0.4);
		border-radius: 50%;
		margin-right: auto;
		@apply ml-auto mr-0;
	}
	#avatar img {
		width: 20vh;
		height: 20vh;
		border-radius: 50%;
	}
	:global(h1 after) {
		content: ' ';
		display: block;
		border: 2px solid black;
	}
</style>
