94 lines
2.4 KiB
Svelte
94 lines
2.4 KiB
Svelte
<script lang="ts">
|
|
import Banner2 from "$lib/banner2.svelte";
|
|
import Content from "$lib/viewport/content.svelte";
|
|
import { BlogPostTag, posts, type BlogPostLink } from "./posts";
|
|
import BlogGallery from "$lib/lists/blog-gallery.svelte";
|
|
|
|
let filter = $state(BlogPostTag.NULL);
|
|
|
|
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 -->
|
|
<p class="tag-filter-header"># filter posts by tag:</p>
|
|
<div class="tag-filter-container">
|
|
{#each Object.values(BlogPostTag) as tag}
|
|
{#if tag == filter}
|
|
<button class="post-tag tag-filter tag-filter-selected" onclick={() => { setFilter(tag) }}>{tag}</button>
|
|
{:else}
|
|
<button class="post-tag tag-filter" onclick={() => { setFilter(tag) }}>{tag}</button>
|
|
{/if}
|
|
{/each}
|
|
</div>
|
|
|
|
<BlogGallery posts={filterPosts()} />
|
|
</Content>
|
|
|
|
<style>
|
|
.tag-filter-header {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.9rem;
|
|
/* margin-left: 10px;
|
|
margin-right: 10px; */
|
|
margin: 12px 10px 4px;
|
|
color: var(--color-text-highlight-alt);
|
|
}
|
|
|
|
.tag-filter-container {
|
|
display: flex;
|
|
gap: 8px 12px;
|
|
margin: 0 10px 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.tag-filter {
|
|
width: fit-content;
|
|
font-size: 0.9rem;
|
|
color: var(--color-text);
|
|
padding: 8px;
|
|
border-radius: 12px;
|
|
cursor: pointer;
|
|
transition: background-color var(--duration-animation) var(--anim-curve);
|
|
}
|
|
|
|
.tag-filter-selected {
|
|
background-color: var(--color-highlight-alt);
|
|
}
|
|
|
|
.tag-filter:hover {
|
|
background-color: var(--color-background-highlight-hover-alt);
|
|
}
|
|
|
|
@media screen and (max-width: 600px) {
|
|
.tag-filter-container {
|
|
gap: 8px;
|
|
}
|
|
|
|
.tag-filter {
|
|
font-size: 0.8rem;
|
|
}
|
|
}
|
|
</style> |