feat: make archive page dynamic (#469)

src/components/ArchivePanel.svelte

@@ -0,0 +1,149 @@
+<script lang="ts">
+import { onMount } from "svelte";
+
+import { UNCATEGORIZED } from "@constants/constants";
+import I18nKey from "../i18n/i18nKey";
+import { i18n } from "../i18n/translation";
+import { getPostUrlBySlug } from "../utils/url-utils";
+
+export let tags: string[];
+export let categories: string[];
+export let sortedPosts: Post[] = [];
+
+const params = new URLSearchParams(window.location.search);
+tags = params.has("tag") ? params.getAll("tag") : [];
+categories = params.has("category") ? params.getAll("category") : [];
+
+interface Post {
+	slug: string;
+	data: {
+		title: string;
+		tags: string[];
+		category?: string;
+		published: Date;
+	};
+}
+
+interface Group {
+	year: number;
+	posts: Post[];
+}
+
+let groups: Group[] = [];
+
+function formatDate(date: Date) {
+	const month = (date.getMonth() + 1).toString().padStart(2, "0");
+	const day = date.getDate().toString().padStart(2, "0");
+	return `${month}-${day}`;
+}
+
+function formatTag(tagList: string[]) {
+	return tagList.map((t) => `#${t}`).join(" ");
+}
+
+onMount(async () => {
+	let filteredPosts: Post[] = sortedPosts;
+
+	if (tags.length > 0) {
+		filteredPosts = filteredPosts.filter(
+			(post) =>
+				Array.isArray(post.data.tags) &&
+				post.data.tags.some((tag) => tags.includes(tag)),
+		);
+	}
+
+	if (categories.length > 0) {
+		filteredPosts = filteredPosts.filter(
+			(post) =>
+				(post.data.category && categories.includes(post.data.category)) ||
+				(!post.data.category && categories.includes(UNCATEGORIZED)),
+		);
+	}
+
+	const grouped = filteredPosts.reduce(
+		(acc, post) => {
+			const year = post.data.published.getFullYear();
+			if (!acc[year]) {
+				acc[year] = [];
+			}
+			acc[year].push(post);
+			return acc;
+		},
+		{} as Record<number, Post[]>,
+	);
+
+	const groupedPostsArray = Object.keys(grouped).map((yearStr) => ({
+		year: Number.parseInt(yearStr),
+		posts: grouped[Number.parseInt(yearStr)],
+	}));
+
+	groupedPostsArray.sort((a, b) => b.year - a.year);
+
+	groups = groupedPostsArray;
+});
+</script>
+
+<div class="card-base px-8 py-6">
+    {#each groups as group}
+        <div>
+            <div class="flex flex-row w-full items-center h-[3.75rem]">
+                <div class="w-[15%] md:w-[10%] transition text-2xl font-bold text-right text-75">
+                    {group.year}
+                </div>
+                <div class="w-[15%] md:w-[10%]">
+                    <div
+                            class="h-3 w-3 bg-none rounded-full outline outline-[var(--primary)] mx-auto
+                  -outline-offset-[2px] z-50 outline-3"
+                    ></div>
+                </div>
+                <div class="w-[70%] md:w-[80%] transition text-left text-50">
+                    {group.posts.length} {i18n(I18nKey.postsCount)}
+                </div>
+            </div>
+
+            {#each group.posts as post}
+                <a
+                        href={getPostUrlBySlug(post.slug)}
+                        aria-label={post.data.title}
+                        class="group btn-plain !block h-10 w-full rounded-lg hover:text-[initial]"
+                >
+                    <div class="flex flex-row justify-start items-center h-full">
+                        <!-- date -->
+                        <div class="w-[15%] md:w-[10%] transition text-sm text-right text-50">
+                            {formatDate(post.data.published)}
+                        </div>
+
+                        <!-- dot and line -->
+                        <div class="w-[15%] md:w-[10%] relative dash-line h-full flex items-center">
+                            <div
+                                    class="transition-all mx-auto w-1 h-1 rounded group-hover:h-5
+                       bg-[oklch(0.5_0.05_var(--hue))] group-hover:bg-[var(--primary)]
+                       outline outline-4 z-50
+                       outline-[var(--card-bg)]
+                       group-hover:outline-[var(--btn-plain-bg-hover)]
+                       group-active:outline-[var(--btn-plain-bg-active)]"
+                            ></div>
+                        </div>
+
+                        <!-- post title -->
+                        <div
+                                class="w-[70%] md:max-w-[65%] md:w-[65%] text-left font-bold
+                     group-hover:translate-x-1 transition-all group-hover:text-[var(--primary)]
+                     text-75 pr-8 whitespace-nowrap overflow-ellipsis overflow-hidden"
+                        >
+                            {post.data.title}
+                        </div>
+
+                        <!-- tag list -->
+                        <div
+                                class="hidden md:block md:w-[15%] text-left text-sm transition
+                     whitespace-nowrap overflow-ellipsis overflow-hidden text-30"
+                        >
+                            {formatTag(post.data.tags)}
+                        </div>
+                    </div>
+                </a>
+            {/each}
+        </div>
+    {/each}
+</div>

src/components/PostMeta.astro

@@ -3,7 +3,7 @@ import { Icon } from "astro-icon/components";
 import I18nKey from "../i18n/i18nKey";
 import { i18n } from "../i18n/translation";
 import { formatDateToYYYYMMDD } from "../utils/date-utils";
-import { url, getTagUrl } from "../utils/url-utils";
+import { getCategoryUrl, getTagUrl } from "../utils/url-utils";
 
 interface Props {
 	class: string;
@@ -53,7 +53,7 @@ const className = Astro.props.class;
             <Icon name="material-symbols:book-2-outline-rounded" class="text-xl"></Icon>
         </div>
         <div class="flex flex-row flex-nowrap items-center">
-            <a href={url(`/archive/category/${encodeURIComponent(category || 'uncategorized')}/`)} aria-label={`View all posts in the ${category} category`}
+            <a href={getCategoryUrl(category)} aria-label={`View all posts in the ${category} category`}
                class="link-lg transition text-50 text-sm font-medium
                             hover:text-[var(--primary)] dark:hover:text-[var(--primary)] whitespace-nowrap">
                 {category || i18n(I18nKey.uncategorized)}
@@ -70,7 +70,7 @@ const className = Astro.props.class;
         <div class="flex flex-row flex-nowrap items-center">
             {(tags && tags.length > 0) && tags.map((tag, i) => (
                 <div class:list={[{"hidden": i == 0}, "mx-1.5 text-[var(--meta-divider)] text-sm"]}>/</div>
-                <a href={getTagUrl(tag.trim())} aria-label={`View all posts with the ${tag.trim()} tag`}
+                <a href={getTagUrl(tag)} aria-label={`View all posts with the ${tag.trim()} tag`}
                    class="link-lg transition text-50 text-sm font-medium
                                 hover:text-[var(--primary)] dark:hover:text-[var(--primary)] whitespace-nowrap">
                     {tag.trim()}

src/components/widget/Categories.astro

@@ -27,7 +27,7 @@ const style = Astro.props.style;
 >
     {categories.map((c) =>
         <ButtonLink
-            url={getCategoryUrl(c.name.trim())}
+            url={getCategoryUrl(c.name)}
             badge={String(c.count)}
             label={`View all posts in the ${c.name.trim()} category`}
         >

src/components/widget/Tags.astro

@@ -23,7 +23,7 @@ const style = Astro.props.style;
 <WidgetLayout name={i18n(I18nKey.tags)} id="tags" isCollapsed={isCollapsed} collapsedHeight={COLLAPSED_HEIGHT} class={className} style={style}>
     <div class="flex gap-2 flex-wrap">
         {tags.map(t => (
-            <ButtonTag href={getTagUrl(t.name.trim())} label={`View all posts with the ${t.name.trim()} tag`}>
+            <ButtonTag href={getTagUrl(t.name)} label={`View all posts with the ${t.name.trim()} tag`}>
                 {t.name.trim()}
             </ButtonTag>
         ))}