<script lang="ts">
	import type { MDsveXComponent } from '$lib/types';
	import type { SvelteComponent } from 'svelte';
	import './style-entries.css';

	let blog_entries: [string, SvelteComponent][] = Object.entries(
		import.meta.glob('/src/routes/blogs/**/+page.svx', { eager: true })
	).map(([key, value]) => [
		key.split('/src/routes').pop()?.split('/+page.svx').slice(0, -1).pop() as string,
		value as MDsveXComponent
	]).map(([link,val])=> 
        typeof val.metadata?.src !== 'undefined' ? [val.metadata?.src, val] : [link,val]
    ).map(([link,val])=>{
        if(val.metadata)
            val.metadata.date = Date.parse(val.metadata?.date);
        return [link,val];
    }
    ).sort(([link1,a],[link2,b])=>b.metadata?.date-a.metadata?.date);
    console.log(blog_entries);
</script>

<main>
    <div class="start">
        <h1>Welcome to SvelteKit</h1>
        <p>
            Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation
        </p>
    </div>
	{#each blog_entries as [href, page]}
		<a {href}>
			<div class="blog-entry">
				<div>
					<h4>{page.metadata?.title}</h4>
					<p>{page.metadata?.desc}</p>
					<p class="date">{new Date(page.metadata?.date).toDateString()}</p>
				</div>
				<img src="blog-1.png" class="blog-image" />
			</div>
		</a>
		<br />
		<!-- svelte:component this={page.default} /-->
	{/each}
</main>

<style>

    .start {
        padding: var(--d2);
    }

	.blog-entry {
		background: var(--rp-moon-surface);
		border-radius: var(--border-round);
		width: 100%;
		color: var(--rp-moon-text);
		display: flex;
		flex-flow: row wrap;
		box-shadow: 0px 0px 1rem 0px hsl(from var(--rp-moon-base) h s calc(l * 0.75));
        transition: 0.2s;
	}

	.blog-entry:hover {
		box-shadow: 0px 0px 1rem 0px hsl(from var(--rp-moon-base) h s calc(l * 0.55));
		background: var(--rp-moon-overlay);
		transition: 0.2s;
	}

	.blog-entry div {
		width: calc(100% - 15rem - var(--d2) * 2);
		padding: var(--d2);
	}

	.blog-entry img {
		width: 15rem;
		object-fit: cover;
		border-radius: 0 var(--border-round) var(--border-round) 0;
	}

	@media only screen and (max-width: 700px) {
		.blog-entry div {
			width: calc(100% - var(--d2) * 2);
		}

		.blog-entry img {
			width: 100%;
			max-height: 14rem;
			border-radius: 0 0rem var(--border-round)  var(--border-round) ;
		}
	}

	.blog-entry h4 {
		margin-top: 0.5rem;
		margin-bottom: 0.5rem;
	}
</style>
