Add Page Filter

src/components/TagComponent.astro

@@ -5,11 +5,18 @@ import {capitalize} from "./admin/util";
 
 interface Props {
     tag: string;
+    noLink?: boolean;
 }
 
-const {tag} = Astro.props;
+const {tag, noLink} = Astro.props;
 ---
 
-<a href={l(`/announcements/tags/${tag}`)}>
+{noLink
+    ? (
         <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 shadow-2xl">{capitalize(tag)}</span>
-</a>
+    )
+    : (
+        <a href={l(`/announcements/tags/${tag}`)}>
+            <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 shadow-2xl">{capitalize(tag)}</span>
+        </a>
+    )}

src/pages/ankuendigungen/index.astro

@@ -4,11 +4,12 @@ import PageLayout from "../../layouts/PageLayout.astro";
 import {astroI18n, t} from "astro-i18n";
 import PostComponent from "../../components/PostComponent.astro";
 import dayjs from "dayjs";
+import TagComponent from "../../components/TagComponent.astro";
 
 async function getPosts() {
     const posts = await getCollection("announcements", entry => entry.id.split("/")[0] === astroI18n.locale);
 
-    const germanPosts = await getCollection("announcements", entry => entry.id.split("/")[0] === "de");
+    const germanPosts = await getCollection("announcements", entry => entry.id.split("/")[0] === astroI18n.fallbackLocale);
 
     germanPosts.forEach(value => {
         if (posts.find(post => post.data.key === value.data.key)) {
@@ -21,10 +22,35 @@ async function getPosts() {
     return posts.sort((a, b) => dayjs(b.data.created).unix() - dayjs(a.data.created).unix()).filter((value, index) => index < 20);
 }
 
+async function getTags() {
+    const posts = await getCollection("announcements");
+    const tags = new Map<string, number>();
+    posts.forEach(post => {
+        post.data.tags.forEach(tag => {
+            if (tags.has(tag)) {
+                tags.set(tag, tags.get(tag) + 1);
+            } else {
+                tags.set(tag, 1);
+            }
+        });
+    });
+    return Array.from(tags).sort((a, b) => b[1] - a[1]).map(value => value[0]);
+}
+
 const posts = await getPosts();
+const tags = await getTags();
 ---
 
 <PageLayout title={t("blog.title")}>
+    <div>
+        <h2 class="text-xl">Filter</h2>
+        <div class="py-2">
+            {tags.map(tag => (
+                <TagComponent tag={tag} transition:name={`${tag}-tag-filter`} />
+            ))}
+        </div>
+    </div>
+    <hr>
     {posts.map((post, index) => (
         <div>
             <PostComponent post={post}/>

src/pages/ankuendigungen/tags/[tag].astro

@@ -6,6 +6,9 @@ import PageLayout from "../../../layouts/PageLayout.astro";
 import {capitalize} from "../../../components/admin/util";
 import PostComponent from "../../../components/PostComponent.astro";
 import dayjs from "dayjs";
+import { ArrowLeftOutline } from "flowbite-svelte-icons";
+import {l} from "../../../util/util";
+import TagComponent from "../../../components/TagComponent.astro";
 
 export const getStaticPaths = createGetStaticPaths(async () => {
     let posts = (await getCollection("announcements", entry => entry.id.split("/")[0] === astroI18n.locale));
@@ -54,6 +57,13 @@ const {posts, tag} = Astro.props;
 ---
 
 <PageLayout title={t("tag.title", {tag: capitalize(tag)})}>
+    <div class="pb-2">
+        <a class="flex gap-2 items-center" href={l("/ankuendigungen")}>
+            <ArrowLeftOutline />
+            <TagComponent tag={tag} noLink="true" transition:name={`${tag}-tag-filter`}/>
+        </a>
+    </div>
+    <hr>
     {posts.map((post, index) => (
         <div>
             <PostComponent post={post}/>