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 { BlogPostTag, posts, type BlogPostLink } from "./posts";
    import BlogGallery from "$lib/lists/blog-gallery.svelte";

    function selectFilter(tag: string) {
        console.log(tag);
    }
    
    // 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." />

    <!-- TODO descriptions on filter click -->
    <div class="tag-filter-container">
        {#each Object.values(BlogPostTag) as tag}
            <button onclick={() => {
                selectFilter(tag)
            }} class="post-tag tag-filter">{tag}</button>
        {/each}
    </div>

    <BlogGallery {posts} />
</Content>

<style>
    .tag-filter-container {
        display: flex;
        gap: 12px;
        margin-bottom: 8px;
    }

    .tag-filter {
        width: fit-content;
        font-size: 0.9rem;
        color: var(--color-text);
        padding: 8px;
        border-radius: 12px;
        cursor: pointer;
    }

    .tag-filter:hover {
        background-color: aqua;
    }
</style>