Merge pull request #22 from hayato-osh/feature/tag-index

タグ一覧ページを作成

src/components/Header.astro

@@ -1,4 +1,9 @@
 ---
 import ThemeIcon from "./ThemeIcon.astro";
 ---
-<header class="h-8 flex items-center justify-between">header<ThemeIcon /></header>
+<header class="h-8 flex items-center justify-between">
+  <nav>
+    <a href="/tags">tags</a>
+  </nav>
+  <ThemeIcon />
+</header>

src/components/Post.astro

@@ -1,8 +1,6 @@
 ---
-import type { CollectionEntry } from "astro:content";
-
 interface Props {
-	post: CollectionEntry<"posts">;
+	post: Post;
 }
 
 const { post } = Astro.props;

src/pages/index.astro

@@ -1,10 +1,8 @@
 ---
-import { getCollection } from "astro:content";
 import GlobalLayout from "@/layouts/GlobalLayout.astro";
+import { getPosts } from "@/utils/getPosts";
 
-const posts = (await getCollection("posts")).sort(
-	(a, b) => b.data.createdAt.getTime() - a.data.createdAt.getTime(),
-);
+const posts = await getPosts();
 ---
 
 <GlobalLayout>

src/pages/tags/index.astro

@@ -0,0 +1,16 @@
+---
+import GlobalLayout from "@/layouts/GlobalLayout.astro";
+import { getTags } from "@/utils/getTags";
+
+const tags = await getTags();
+---
+<GlobalLayout>
+  <ul class="grid gap-2">
+    {Array.from(tags).map(([key, value]) => (
+      <li class="grid gap-1">
+        <a href={`/tags/${key}`} class="underline text-xl">{key}</a>
+        <span class="text-sm">{value.length} posts</span>
+      </li>
+    ))}
+  </ul>
+</GlobalLayout>

src/types/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="../../.astro/types" />
+/// <reference types="astro" />
+
+type Post = import("astro:content").CollectionEntry<"posts">;

src/utils/getPosts.ts

@@ -0,0 +1,9 @@
+import { getCollection } from "astro:content";
+
+export const getPosts = async () => {
+	const posts = await getCollection("posts");
+
+	posts.sort((a, b) => b.data.createdAt.getTime() - a.data.createdAt.getTime());
+
+	return posts;
+};

src/utils/getTags.ts

@@ -0,0 +1,17 @@
+import { getPosts } from "./getPosts";
+
+export const getTags = async () => {
+	const posts = await getPosts();
+
+	const tags = new Map<string, Post[]>();
+
+	for (const post of posts) {
+		for (const tag of post.data.tags) {
+			const posts = tags.get(tag) ?? [];
+			posts.push(post);
+			tags.set(tag, posts);
+		}
+	}
+
+	return tags;
+};