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 {
        return {
            title: `${entry.post.title}`,
            subtitle: `#${posts.length - index} // ${entry.post.date}, ${entry.post.time}`,
            img: `/blog/${entry.key}/${entry.post.banner}`,
            link: `/blog/${entry.key}/`,
            imgAlt: `Preview image for ${entry.post.title}`,
        };
    }
</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} reverseTextOrder />
</Content>