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 BlogPostLink } from "./posts";
    
    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." />

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