src/lib/posts.ts

@@ -38,7 +38,7 @@ export async function getPosts(tag: string | null = null) : Promise<Post[]> {
 	return posts;
 }
 
-export async function getTags() : Promise<Set<string>> {
+export async function getTags() : Promise<Map<string, number>> {
 	const allPostFiles = import.meta.glob('$content/post/*.md');
 	const iterablePostFiles = Object.entries(allPostFiles);
 
@@ -48,5 +48,7 @@ export async function getTags() : Promise<Set<string>> {
 			return metadata.tags;
 		})
 	);
-	return new Set(allPosts.flat());
+	return allPosts.flat().reduce((acc: Map<string, number>, curr: string) => {
+		return acc[curr] ? ++acc[curr] : acc[curr] = 1, acc
+	}, new Map());
 }

src/routes/tag/+page.svelte

@@ -12,15 +12,22 @@
 <h1>Tags</h1>
 
 <hr class="separator" />
-<div id="catalog" class="content">
+<div id="tags">
-	{#each allTags as tag}
+	{#each Object.entries(allTags) as [tag, occ]}
-		<a class="tag" href="/tag/{tag}">{tag}</a>
+		<div class="tag">
+			<a href="/tag/{tag}">{tag}</a>
+			({occ})
+		</div>
 	{/each}
 </div>
 <hr class="separator" />
 
 <style>
+	#tags {
+		display: inline-block;
+	}
 	.tag {
+		display: inline-block;
 		margin-left: 1em;
 		margin-right: 1em;
 	}

src/routes/tag/+page.ts

@@ -2,6 +2,6 @@ import type { PageLoad } from './$types';
 import { getTags } from '$lib/posts';
 
 export const load: PageLoad = async (_) => {
-	const allTags = await getTags();
+	let allTags = await getTags();
 	return { allTags };
 };

src/routes/tag/[slug]/+page.svelte

@@ -10,7 +10,7 @@
 	<title>{name} | {siteMetadata.blogName}</title>
 </svelte:head>
 
-<h1>{name}</h1>
+<h1>{name} ({posts.length})</h1>
 
 <hr class="separator" />
 <ul id="catalog" class="content">