Archive Panel Component

Relevant source files

The following files were used as context for generating this wiki page:

• src/components/ArchivePanel.svelte
• src/utils/content-utils.ts
• src/config.ts
• src/i18n/i18nKey.ts
• src/i18n/translation.ts
• src/utils/url-utils.ts

The ArchivePanel.svelte component is a client-side Svelte component responsible for rendering a filterable and chronologically grouped list of blog posts. It receives a complete list of sorted posts and dynamically filters and groups them based on URL query parameters. The final output is a timeline view, with posts organized by year.

This component is central to the blog's archive functionality, allowing users to browse posts by specific tags or categories.

Architecture and Data Flow

The component's logic is primarily executed on the client-side within the onMount lifecycle function. It follows a clear data processing pipeline from receiving props to rendering the final grouped list.

Data Flow Diagram

The following diagram illustrates the flow of data from the initial post collection to the final rendered UI.

This diagram shows that posts are collected and sorted on the server, passed as a prop to the ArchivePanel component, which then filters and groups them on the client based on URL parameters.
Sources: src/components/ArchivePanel.svelte, src/utils/content-utils.ts

Component Initialization and Logic

On initialization, the component performs several key actions to prepare the data for display.

1. Reads URL Parameters: It inspects window.location.search for tag, category, and uncategorized query parameters.
2. Filters Posts: It filters the initial sortedPosts array based on the retrieved parameters.
3. Groups Posts by Year: The filtered posts are then reduced into a record where keys are years and values are arrays of posts from that year.
4. Sorts Groups: The yearly groups are sorted in descending chronological order.
5. Renders UI: The component state is updated, causing Svelte to render the grouped and sorted posts.

Sources: src/components/ArchivePanel.svelte:11-14, 42-63

The initialization logic is visualized in the following flowchart:

Data Structures

The component internally defines interfaces to structure the post data for processing and rendering.

Interface	Property	Type	Description
Post	slug	string	The unique identifier for the post.
Post	data	object	Contains the post's frontmatter metadata.
Post.data	title	string	The title of the post.
Post.data	tags	string[]	An array of tags associated with the post.
Post.data	category	string?	The category of the post (optional).
Post.data	published	Date	The publication date of the post.
Group	year	number	The year the posts in the group were published.
Group	posts	Post[]	An array of posts published in that year.

Sources: src/components/ArchivePanel.svelte:16-27

Filtering Logic

The component supports filtering by tags, categories, or for posts that are uncategorized. The filtering logic is applied sequentially if multiple parameters are present.

Filtering Flow

This diagram shows the conditional filtering applied to the post list based on the presence of URL query parameters.
Sources: src/components/ArchivePanel.svelte:44-58

Code Implementation

The filtering is implemented within the onMount function.

// src/components/ArchivePanel.svelte:44-58
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),
		);
	}

	if (uncategorized) {
		filteredPosts = filteredPosts.filter((post) => !post.data.category);
	}
    // ... grouping logic follows
});

Rendering and UI

The component's template iterates through the groups array to render the timeline.

• A main <div> with class card-base acts as the container.
• An outer #each loop iterates over each group (year).
  • A header is displayed for each year, showing the year and the total number of posts in that year. The post count label is internationalized using i18n.
• An inner #each loop iterates over each post within the group.
  • Each post is rendered as an <a> tag, linking to the post's page via getPostUrlBySlug(post.slug).
  • The post's formatted date, title, and tags are displayed.
  • Helper functions formatDate and formatTag are used for presentation.

Sources: src/components/ArchivePanel.svelte:66-129

Dependencies and Helpers

The ArchivePanel relies on several utility functions and configuration files to perform its duties.

Dependency	File	Usage
onMount	svelte	Svelte lifecycle function to initialize client-side logic.
I18nKey, i18n	../i18n/*	Used for internationalizing strings like "post" and "posts".
getPostUrlBySlug	../utils/url-utils	Constructs the correct URL for a post based on its slug.
getSortedPosts	../utils/content-utils	Provides the initial sortedPosts array, pre-sorted by date and with pinned posts at the top.
siteConfig	../config	Used by content-utils.ts to identify which posts should be pinned.

Sources: src/components/ArchivePanel.svelte:2-6, src/utils/content-utils.ts:5, 10-16, src/utils/url-utils.ts

Summary

The ArchivePanel.svelte component is a well-encapsulated UI module for displaying archived posts. It effectively leverages client-side Svelte reactivity to provide a dynamic and filterable view of the blog's content. By processing URL parameters, it allows for deep-linking to specific filtered views of the archive, enhancing user navigation and content discovery. Its reliance on server-provided sorted data and client-side filtering strikes a balance between initial load performance and interactive functionality.