pages/src/routes/blog/+page.svelte

<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 BlogPostDetails } from "./posts";
    
    let entries: GalleryEntry[] = posts.entries().map(mapEntries).toArray();

    function mapEntries(m: [String, BlogPostDetails], index: number): GalleryEntry {
        return {
            title: `${m[1].title}`,
            subtitle: `#${posts.size - index} // ${m[1].date}, ${m[1].time}`,
            img: `/blog/${m[0]}/${m[1].banner}`,
            link: `/blog/${m[0]}/`,
            imgAlt: `Preview image for ${m[1].title}`,
        };
    }
</script>

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

<Content>
	<Banner2
		title="Blog" />

    <Gallery entries={entries} reverseTextOrder />
</Content>