feat: redesign tag filter and page to be more like tabs

Author: intergrav

src/components/ui/TagFilter.astro

@@ -0,0 +1,37 @@
+---
+import TagList from "./TagList.astro";
+import { getCollection } from "astro:content";
+
+interface Props {
+	activeTag?: string;
+	class?: string;
+}
+
+const { activeTag, class: className = "" } = Astro.props;
+
+const posts = (await getCollection("news", ({ data }) => !data.draft)).sort(
+	(a, b) => b.data.date.getTime() - a.data.date.getTime(),
+);
+
+const popularTags = posts
+	.flatMap(({ data }) => data.tags)
+	.reduce(
+		(counts, tag) => counts.set(tag, (counts.get(tag) || 0) + 1),
+		new Map<string, number>(),
+	)
+	.entries()
+	.toArray()
+	.sort(([, a], [, b]) => b - a)
+	.map(([tag]) => tag);
+---
+
+{
+	popularTags.length > 0 && (
+		<TagList
+			tags={popularTags}
+			showAll
+			class={`gap-2 ${className}`}
+			activeTag={activeTag}
+		/>
+	)
+}

src/pages/news/index.astro

@@ -4,25 +4,13 @@ import ProseCard from "../../components/ui/ProseCard.astro";
 import Card from "../../components/ui/Card.astro";
 import Button from "../../components/ui/Button.astro";
 import NewsCard from "../../components/NewsCard.astro";
-import TagList from "../../components/ui/TagList.astro";
+import TagFilter from "../../components/ui/TagFilter.astro";
 import { getCollection } from "astro:content";
 
 const posts = (await getCollection("news", ({ data }) => !data.draft)).sort(
 	(a, b) => b.data.date.getTime() - a.data.date.getTime(),
 );
 const [latestPost, ...remainingPosts] = posts;
-
-const popularTags = posts
-	.flatMap(({ data }) => data.tags)
-	.reduce(
-		(counts, tag) => counts.set(tag, (counts.get(tag) || 0) + 1),
-		new Map<string, number>(),
-	)
-	.entries()
-	.toArray()
-	.sort(([, a], [, b]) => b - a)
-	.slice(0, 8)
-	.map(([tag]) => tag);
 ---
 
 <MainLayout
@@ -36,13 +24,7 @@ const popularTags = posts
 			Launcher now supports viewing news directly in the Launcher by clicking
 			the news icon at the bottom of the window.
 		</p>
-
-		<!-- popular tags filter -->
-		{
-			popularTags.length > 0 && (
-				<TagList tags={popularTags} showAll class="gap-2" />
-			)
-		}
+		<TagFilter />
 	</ProseCard>
 
 	<!-- featured latest post -->

src/pages/news/tag/[tag].astro

@@ -4,6 +4,7 @@ import ProseCard from "../../../components/ui/ProseCard.astro";
 import Card from "../../../components/ui/Card.astro";
 import NewsCard from "../../../components/NewsCard.astro";
 import Breadcrumb from "../../../components/ui/Breadcrumb.astro";
+import TagFilter from "../../../components/ui/TagFilter.astro";
 import { getCollection } from "astro:content";
 
 export async function getStaticPaths() {
@@ -33,11 +34,13 @@ const filteredPosts = allPosts.filter(({ data }) => data.tags.includes(tag));
 	description={`All news posts tagged with "${tag}"`}
 >
 	<ProseCard>
-		<Breadcrumb href="/news" text="News" class="mb-3" />
-		<h1 class="heading-1 mb-4">Posts tagged "{tag}"</h1>
+		<h1 class="heading-1 mb-6">News</h1>
 		<p>
-			{filteredPosts.length} post{filteredPosts.length !== 1 ? "s" : ""}
+			The latest and greatest news regarding updates, changes and more. Prism
+			Launcher now supports viewing news directly in the Launcher by clicking
+			the news icon at the bottom of the window.
 		</p>
+		<TagFilter activeTag={tag} />
 	</ProseCard>
 
 	{