<script lang="ts">
    import Banner2 from "$lib/banner2.svelte";
    import Content from "$lib/viewport/content.svelte";
    // import Gallery, { type GalleryEntry } from "$lib/lists/gallery.svelte";
    import { posts, type BlogPostLink } from "./posts";
    import BlogGallery from "$lib/lists/blog-gallery.svelte";
    
    // let entries: GalleryEntry[] = posts.map(mapEntries);

    // function mapEntries(entry: BlogPostLink, index: number): GalleryEntry {
    //     let banner = "";
    //     if (entry.post.banner && entry.post.banner !== "") {
    //         banner = `/blog/${entry.key}/${entry.post.banner}`;
    //     }

    //     return {
    //         title: `${entry.post.title}`,
    //         subtitle: `#${(posts.length - index).toString().padStart(2, '0')} // ${entry.post.date}, ${entry.post.time}`,
    //         img: banner,
    //         link: `/blog/${entry.key}/`,
    //         imgAlt: `Preview image for ${entry.post.title}`,
    //         description: entry.post.description,
    //     };
    // }
</script>

<svelte:head>
    <title>Blog | denizk0461</title> 
</svelte:head>

<Content>
	<Banner2
		title="Blog"
        banner="robert.webp"
        bannerAlt="View at a tram bridge rising and then curving to the left." />

    <BlogGallery {posts} />
</Content>