67 lines
1.6 KiB
Svelte
67 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
import Banner2 from "$lib/banner2.svelte";
|
|
import Content from "$lib/viewport/content.svelte";
|
|
import { BlogPostTag, posts, type BlogPostDetails, type BlogPostLink } from "./posts";
|
|
import BlogGallery from "$lib/lists/blog-gallery.svelte";
|
|
|
|
let filter = $state(BlogPostTag.NULL);
|
|
let filteredPosts = filterPosts();
|
|
|
|
function setFilter(tag: BlogPostTag) {
|
|
filter = tag;
|
|
console.log(filter);
|
|
}
|
|
|
|
function filterPosts(): BlogPostLink[] {
|
|
if (filter == BlogPostTag.NULL) {
|
|
return posts;
|
|
}
|
|
|
|
let a: BlogPostLink[] = posts.filter((post) => post.post.tags.includes(filter))
|
|
console.log(a);
|
|
return a;
|
|
}
|
|
</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 class="post-tag tag-filter" onclick={() => {
|
|
setFilter(tag)
|
|
}}>{tag}</button>
|
|
{/each}
|
|
</div>
|
|
|
|
<BlogGallery posts={filterPosts()} />
|
|
</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> |