From 89a153ddffffcc7210d699096c5cc76ca4c58404 Mon Sep 17 00:00:00 2001
From: miyaji255 <84168445+miyaji255@users.noreply.github.com>
Date: Sat, 3 Feb 2024 19:29:03 +0900
Subject: [PATCH] =?UTF-8?q?#55=20=E3=82=BF=E3=82=B0=E3=82=AB=E3=83=86?=
 =?UTF-8?q?=E3=82=B4=E3=83=AA=E3=83=BC=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/blog/BlogTitle.astro           |   2 +-
 src/components/blog/tag/TagCategoryNav.astro  |  34 +++++
 src/components/blog/tag/TagListPage.astro     |  42 +++++
 src/components/blog/tag/TagListSection.astro  |   1 +
 src/components/layout/nav/BlogNav.astro       |  24 +--
 src/content/_schema.json                      | 143 ++++++++++--------
 src/content/_schema.ts                        |   3 +
 src/content/config.ts                         |  13 ++
 src/content/tags/advent-calendar.json         |   3 +-
 src/content/tags/arduino.json                 |   1 +
 src/content/tags/asp.net.json                 |   1 +
 src/content/tags/astro.json                   |   1 +
 src/content/tags/automation.json              |   3 +-
 src/content/tags/blender.json                 |   3 +-
 src/content/tags/c-cpp.json                   |   1 +
 src/content/tags/csharp.json                  |   1 +
 src/content/tags/discord-bot.json             |   1 +
 src/content/tags/docker.json                  |   1 +
 src/content/tags/dotnet.json                  |   1 +
 src/content/tags/electronic-dictionary.json   |   1 +
 src/content/tags/fashion.json                 |   3 +-
 src/content/tags/for-beginer.json             |   3 +-
 src/content/tags/git.json                     |   1 +
 src/content/tags/go.json                      |   1 +
 src/content/tags/javascript.json              |   3 +-
 src/content/tags/mad.json                     |   3 +-
 src/content/tags/markdown.json                |   1 +
 src/content/tags/mixamo.json                  |   3 +-
 src/content/tags/open-cv.json                 |   3 +-
 src/content/tags/open-xml.json                |   3 +-
 src/content/tags/oracle-cloud.json            |   3 +-
 src/content/tags/power-point.json             |   3 +-
 src/content/tags/python.json                  |   1 +
 src/content/tags/reaper.json                  |   3 +-
 src/content/tags/rest-api.json                |   1 +
 src/content/tags/rust.json                    |   1 +
 src/content/tags/shell.json                   |   1 +
 src/content/tags/tello.json                   |   1 +
 src/content/tags/transcribe.json              |   3 +-
 src/content/tags/typst.json                   |   1 +
 src/content/tags/unity.json                   |   1 +
 src/content/tags/vrchat.json                  |   3 +-
 src/content/tags/vrm.json                     |   3 +-
 src/content/tags/whisper.json                 |   3 +-
 src/content/tags/winforms.json                |   1 +
 src/content/tags/workshop.json                |   3 +-
 src/pages/blog/tags/[category].astro          |  15 ++
 .../tags/{[slug]/index.astro => [slug].astro} |   0
 src/pages/blog/tags/index.astro               |  33 +---
 49 files changed, 262 insertions(+), 122 deletions(-)
 create mode 100644 src/components/blog/tag/TagCategoryNav.astro
 create mode 100644 src/components/blog/tag/TagListPage.astro
 create mode 100644 src/pages/blog/tags/[category].astro
 rename src/pages/blog/tags/{[slug]/index.astro => [slug].astro} (100%)

diff --git a/src/components/blog/BlogTitle.astro b/src/components/blog/BlogTitle.astro
index df59775..b21e9f6 100644
--- a/src/components/blog/BlogTitle.astro
+++ b/src/components/blog/BlogTitle.astro
@@ -11,7 +11,7 @@ const { title, background } = Astro.props
   class:list={[
     'bg-dot flex items-center justify-center gap-x-5 py-6 text-6xl',
     {
-      'bg-dot-white': background === 'white',
+      'bg-dot-white border-t': background === 'white',
       'bg-dot-primary': background === 'primary',
       'bg-dot-secondary': background === 'secondary',
     },
diff --git a/src/components/blog/tag/TagCategoryNav.astro b/src/components/blog/tag/TagCategoryNav.astro
new file mode 100644
index 0000000..5be7d4c
--- /dev/null
+++ b/src/components/blog/tag/TagCategoryNav.astro
@@ -0,0 +1,34 @@
+---
+import { TagCategoryMapping, type TagCategory } from '@/content/config'
+
+export type TagNavCategory = 'all' | TagCategory
+
+interface Props {
+  category: TagNavCategory
+}
+const { category } = Astro.props
+const tagCategoryEntries = [['all', '全般'], ...TagCategoryMapping] as const
+---
+
+<nav
+  class="flex w-full whitespace-nowrap pb-6 pt-2 text-center font-sans text-lg font-medium"
+>
+  {
+    tagCategoryEntries.map(([c, text], i) => (
+      <a
+        href={c === 'all' ? '/blog/tags/' : `/blog/tags/${c}/`}
+        class:list={[
+          'block basis-28 border-y border-r border-slate-300 py-1 max-sm:basis-1/4',
+          {
+            'bg-slate-100': c === category,
+            'bg-white transition-colors hover:bg-slate-100': c !== category,
+            'rounded-l-xl border-l': i === 0,
+            'rounded-r-xl': i === tagCategoryEntries.length - 1,
+          },
+        ]}
+      >
+        {text}
+      </a>
+    ))
+  }
+</nav>
diff --git a/src/components/blog/tag/TagListPage.astro b/src/components/blog/tag/TagListPage.astro
new file mode 100644
index 0000000..a1f4415
--- /dev/null
+++ b/src/components/blog/tag/TagListPage.astro
@@ -0,0 +1,42 @@
+---
+import BlogLayout from '@/layouts/BlogLayout.astro'
+import { getCollection } from 'astro:content'
+import { getTagStatistics } from '@/content/_blog-statistics'
+import TagListSection from '@/components/blog/tag/TagListSection.astro'
+import type { TagNavCategory } from './TagCategoryNav.astro'
+import TagCategoryNav from './TagCategoryNav.astro'
+
+interface Props {
+  category: TagNavCategory
+}
+
+const { category } = Astro.props
+const [tagEntries, statistics] = await Promise.all([
+  getCollection('tags'),
+  getTagStatistics(),
+] as const)
+
+const tags = tagEntries
+  .filter((tag) => category === 'all' || category === tag.data.category)
+  .map((tag) => ({
+    ...tag,
+    articleCount: statistics[tag.id].length,
+    lastPostedTime: statistics[tag.id][0]?.time ?? 0,
+  }))
+tags.sort((tag1, tag2) =>
+  tag2.articleCount !== tag1.articleCount
+    ? tag2.articleCount - tag1.articleCount
+    : tag2.lastPostedTime - tag1.lastPostedTime,
+)
+---
+
+<BlogLayout title="タグ一覧" description="ブログのタグ一覧です。">
+  <!-- 右側のスクロールバーを常時表示させるために min-h-[80vh] -->
+  <main class="flex min-h-[80vh] flex-col">
+    <TagListSection title="タグ一覧" tags={tags}>
+      <Fragment slot="nav">
+        <TagCategoryNav category={category} />
+      </Fragment>
+    </TagListSection>
+  </main>
+</BlogLayout>
diff --git a/src/components/blog/tag/TagListSection.astro b/src/components/blog/tag/TagListSection.astro
index 04efdd3..6890ce4 100644
--- a/src/components/blog/tag/TagListSection.astro
+++ b/src/components/blog/tag/TagListSection.astro
@@ -13,5 +13,6 @@ const { title, tags } = Astro.props
 
 <Section background="secondary">
   <Fragment slot="title">{title}</Fragment>
+  <slot name="nav" />
   <TagList tags={tags} />
 </Section>
diff --git a/src/components/layout/nav/BlogNav.astro b/src/components/layout/nav/BlogNav.astro
index 5665fd7..6aa1342 100644
--- a/src/components/layout/nav/BlogNav.astro
+++ b/src/components/layout/nav/BlogNav.astro
@@ -1,29 +1,35 @@
 ---
+import { TagCategoryMapping } from '@/content/config'
+
 const current = Astro.url.pathname
 
-const navList: { target: string; title: string }[] = [
+const navList = [
   {
-    target: '/blog',
+    target: '/blog/',
     title: '記事一覧',
+    isHere: current === '/blog/',
   },
   {
-    target: '/blog/tags',
+    target: '/blog/tags/',
     title: 'タグ一覧',
+    isHere: [
+      '/blog/tags/',
+      ...TagCategoryMapping.map(([category]) => `/blog/tags/${category}/`),
+    ].includes(current),
   },
-]
+] as const satisfies { target: string; title: string; isHere: boolean }[]
 ---
 
-<div class="flex flex-nowrap gap-3 px-9 pt-1 text-lg">
+<div class="flex flex-nowrap gap-3 px-9 pt-1 font-sans text-lg font-medium">
   {
-    navList.map(({ target, title }) => (
+    navList.map(({ target, title, isHere }) => (
       <a
         href={target}
         class:list={[
           'whitespace-nowrap text-gray-700 hover:text-black',
           {
-            'after:block after:h-1 after:rounded-t-lg after:bg-primary':
-              current === target || current === target + '/',
-            'pb-1': current !== target && current !== target + '/',
+            'after:block after:h-1 after:rounded-t-lg after:bg-primary': isHere,
+            'pb-1': !isHere,
           },
         ]}
       >
diff --git a/src/content/_schema.json b/src/content/_schema.json
index 26527f8..6261c0e 100644
--- a/src/content/_schema.json
+++ b/src/content/_schema.json
@@ -1,72 +1,89 @@
 {
-  "$schema": "http://json-schema.org/draft-07/schema#",
-  "definitions": {
-    "AuthorSchema": {
-      "title": "AuthorSchema",
-      "type": "object",
-      "properties": {
-        "name": {
-          "type": "string",
-          "title": "name"
-        },
-        "description": {
-          "type": "string",
-          "title": "description"
-        },
-        "github": {
-          "type": "string",
-          "title": "github"
-        },
-        "image": {
-          "type": "string",
-          "title": "image"
-        }
-      },
-      "additionalProperties": false,
-      "required": ["name"]
-    },
-    "TagSchema": {
-      "title": "TagSchema",
-      "type": "object",
-      "properties": {
-        "name": {
-          "type": "string",
-          "title": "name"
-        },
-        "description": {
-          "type": "string",
-          "title": "description"
-        },
-        "image": {
-          "type": "string",
-          "title": "image"
-        },
-        "fullSizeImage": {
-          "type": "boolean",
-          "title": "fullSizeImage"
+    "$schema": "http://json-schema.org/draft-07/schema#",
+    "definitions": {
+        "AuthorSchema": {
+            "title": "AuthorSchema",
+            "type": "object",
+            "properties": {
+                "name": {
+                    "type": "string",
+                    "title": "name"
+                },
+                "description": {
+                    "type": "string",
+                    "title": "description"
+                },
+                "github": {
+                    "type": "string",
+                    "title": "github"
+                },
+                "image": {
+                    "type": "string",
+                    "title": "image"
+                }
+            },
+            "additionalProperties": false,
+            "required": [
+                "name"
+            ]
         },
-        "links": {
-          "type": "array",
-          "items": {
+        "TagSchema": {
+            "title": "TagSchema",
             "type": "object",
             "properties": {
-              "url": {
-                "type": "string",
-                "title": "url"
-              },
-              "text": {
-                "type": "string",
-                "title": "text"
-              }
+                "name": {
+                    "type": "string",
+                    "title": "name"
+                },
+                "description": {
+                    "type": "string",
+                    "title": "description"
+                },
+                "category": {
+                    "enum": [
+                        "circle",
+                        "other",
+                        "tech"
+                    ],
+                    "type": "string",
+                    "title": "category"
+                },
+                "image": {
+                    "type": "string",
+                    "title": "image"
+                },
+                "fullSizeImage": {
+                    "type": "boolean",
+                    "title": "fullSizeImage"
+                },
+                "links": {
+                    "type": "array",
+                    "items": {
+                        "type": "object",
+                        "properties": {
+                            "url": {
+                                "type": "string",
+                                "title": "url"
+                            },
+                            "text": {
+                                "type": "string",
+                                "title": "text"
+                            }
+                        },
+                        "additionalProperties": false,
+                        "required": [
+                            "text",
+                            "url"
+                        ]
+                    },
+                    "title": "links"
+                }
             },
             "additionalProperties": false,
-            "required": ["text", "url"]
-          },
-          "title": "links"
+            "required": [
+                "category",
+                "name"
+            ]
         }
-      },
-      "additionalProperties": false,
-      "required": ["name"]
     }
-  }
 }
diff --git a/src/content/_schema.ts b/src/content/_schema.ts
index b75f1de..189561d 100644
--- a/src/content/_schema.ts
+++ b/src/content/_schema.ts
@@ -1,6 +1,8 @@
 // JSON Schema 用定義
 // こちらを更新した際は npm run json-schema も動かす
 
+import type { TagCategory } from './config'
+
 export interface AuthorSchema {
   name: string
   description?: string
@@ -11,6 +13,7 @@ export interface AuthorSchema {
 export interface TagSchema {
   name: string
   description?: string
+  category: TagCategory
   image?: string
   fullSizeImage?: boolean
   links?: {
diff --git a/src/content/config.ts b/src/content/config.ts
index ad3b39b..2a382c4 100644
--- a/src/content/config.ts
+++ b/src/content/config.ts
@@ -42,12 +42,25 @@ const authorsCollection = defineCollection({
     }),
 })
 
+export const TagCategoryMapping = [
+  ['tech', '技術'],
+  ['circle', 'サークル'],
+  ['other', '雑記'],
+] as const satisfies [string, string][]
+export type TagCategory = (typeof TagCategoryMapping)[number][0]
+
 const tagsCollection = defineCollection({
   type: 'data',
   schema: ({ image }) =>
     z.object({
       name: z.string().min(1),
       description: z.string().optional(),
+      category: z.enum(
+        TagCategoryMapping.map(([category]) => category) as [
+          TagCategory,
+          ...TagCategory[],
+        ],
+      ),
       links: z
         .array(
           z.object({
diff --git a/src/content/tags/advent-calendar.json b/src/content/tags/advent-calendar.json
index b33d620..694e6d7 100644
--- a/src/content/tags/advent-calendar.json
+++ b/src/content/tags/advent-calendar.json
@@ -1,3 +1,4 @@
 {
-  "name": "Advent Calendar"
+  "name": "Advent Calendar",
+  "category": "circle"
 }
diff --git a/src/content/tags/arduino.json b/src/content/tags/arduino.json
index def4a72..7f5b8c5 100644
--- a/src/content/tags/arduino.json
+++ b/src/content/tags/arduino.json
@@ -1,4 +1,5 @@
 {
   "name": "Arduino",
+  "category": "tech",
   "image": "./arduino.svg"
 }
diff --git a/src/content/tags/asp.net.json b/src/content/tags/asp.net.json
index 8d5a399..502f64e 100644
--- a/src/content/tags/asp.net.json
+++ b/src/content/tags/asp.net.json
@@ -1,5 +1,6 @@
 {
   "name": "ASP.NET Core",
+  "category": "tech",
   "image": "./dotnet.svg",
   "fullSizeImage": true,
   "links": [
diff --git a/src/content/tags/astro.json b/src/content/tags/astro.json
index c526a1d..914b075 100644
--- a/src/content/tags/astro.json
+++ b/src/content/tags/astro.json
@@ -1,4 +1,5 @@
 {
   "name": "Astro",
+  "category": "tech",
   "image": "./astro.svg"
 }
diff --git a/src/content/tags/automation.json b/src/content/tags/automation.json
index fb5a1e8..770e4af 100644
--- a/src/content/tags/automation.json
+++ b/src/content/tags/automation.json
@@ -1,3 +1,4 @@
 {
-  "name": "自動化"
+  "name": "自動化",
+  "category": "tech"
 }
diff --git a/src/content/tags/blender.json b/src/content/tags/blender.json
index 6fc3062..3082a1f 100644
--- a/src/content/tags/blender.json
+++ b/src/content/tags/blender.json
@@ -1,3 +1,4 @@
 {
-  "name": "Blender"
+  "name": "Blender",
+  "category": "tech"
 }
diff --git a/src/content/tags/c-cpp.json b/src/content/tags/c-cpp.json
index d7f290a..7176711 100644
--- a/src/content/tags/c-cpp.json
+++ b/src/content/tags/c-cpp.json
@@ -1,5 +1,6 @@
 {
   "name": "C/C++",
+  "category": "tech",
   "description": "C/C++ は低レイヤな処理を得意とし、高速に実行できるコンパイル型言語です。歴史が長く、また組み込み機器のような特殊な環境でも動作します。C と C++ は別の言語ですが、C++ が基本的には C を拡張した言語であるため、ひっくるめて C/C++ と呼ばれることがあります。",
   "image": "./cpp.svg",
   "links": [
diff --git a/src/content/tags/csharp.json b/src/content/tags/csharp.json
index 757f830..a62d2bb 100644
--- a/src/content/tags/csharp.json
+++ b/src/content/tags/csharp.json
@@ -1,5 +1,6 @@
 {
   "name": "C#",
+  "category": "tech",
   "description": "C#は、最新のタイプ セーフなオブジェクト指向のプログラミング言語です。 開発者は C# を使用することにより、.NET で稼働する、安全かつ堅牢な多くの種類のアプリケーションを構築できます。",
   "image": "./csharp.svg",
   "links": [
diff --git a/src/content/tags/discord-bot.json b/src/content/tags/discord-bot.json
index 46de62c..d03a59c 100644
--- a/src/content/tags/discord-bot.json
+++ b/src/content/tags/discord-bot.json
@@ -1,4 +1,5 @@
 {
   "name": "Discord Bot",
+  "category": "tech",
   "image": "./discord-bot.svg"
 }
diff --git a/src/content/tags/docker.json b/src/content/tags/docker.json
index 55fb880..0e3d4e8 100644
--- a/src/content/tags/docker.json
+++ b/src/content/tags/docker.json
@@ -1,4 +1,5 @@
 {
   "name": "Docker",
+  "category": "tech",
   "image": "./docker.svg"
 }
diff --git a/src/content/tags/dotnet.json b/src/content/tags/dotnet.json
index 217215a..6dbed9b 100644
--- a/src/content/tags/dotnet.json
+++ b/src/content/tags/dotnet.json
@@ -1,6 +1,7 @@
 {
   "name": ".NET",
   "description": ".NET は C#, F#, VB.NET などが実行可能な仮想マシンです。(JVM に似ています) クラスプラットフォームであるためどんな環境でも同じコードで実行できます。",
+  "category": "tech",
   "image": "./dotnet.svg",
   "fullSizeImage": true,
   "links": [
diff --git a/src/content/tags/electronic-dictionary.json b/src/content/tags/electronic-dictionary.json
index 1ba3feb..7f02daa 100644
--- a/src/content/tags/electronic-dictionary.json
+++ b/src/content/tags/electronic-dictionary.json
@@ -1,6 +1,7 @@
 {
   "name": "電子辞書",
   "description": "電子辞書を本来とは異なる目的で活用する、電子辞書ハック関係の記事群です。主に SHARP 社製カラー電子辞書シリーズの Brain を対象としています。SHARP 社とは無関係な非公式の内容であることに注意してください。",
+  "category": "tech",
   "image": "./electronic-dictionary.svg",
   "links": [
     {
diff --git a/src/content/tags/fashion.json b/src/content/tags/fashion.json
index df03442..686ef8e 100644
--- a/src/content/tags/fashion.json
+++ b/src/content/tags/fashion.json
@@ -1,3 +1,4 @@
 {
-  "name": "ファッション"
+  "name": "ファッション",
+  "category": "other"
 }
diff --git a/src/content/tags/for-beginer.json b/src/content/tags/for-beginer.json
index 96c626a..87207f8 100644
--- a/src/content/tags/for-beginer.json
+++ b/src/content/tags/for-beginer.json
@@ -1,3 +1,4 @@
 {
-  "name": "初心者向け"
+  "name": "初心者向け",
+  "category": "tech"
 }
diff --git a/src/content/tags/git.json b/src/content/tags/git.json
index fb3175e..fdd4ce4 100644
--- a/src/content/tags/git.json
+++ b/src/content/tags/git.json
@@ -1,4 +1,5 @@
 {
   "name": "Git",
+  "category": "tech",
   "image": "./git.svg"
 }
diff --git a/src/content/tags/go.json b/src/content/tags/go.json
index 3897316..1f4b727 100644
--- a/src/content/tags/go.json
+++ b/src/content/tags/go.json
@@ -1,5 +1,6 @@
 {
   "name": "Go",
+  "category": "tech",
   "image": "./go.svg",
   "links": [
     {
diff --git a/src/content/tags/javascript.json b/src/content/tags/javascript.json
index 8ac873a..2e952b7 100644
--- a/src/content/tags/javascript.json
+++ b/src/content/tags/javascript.json
@@ -1,3 +1,4 @@
 {
-  "name": "JavaScript"
+  "name": "JavaScript",
+  "category": "tech"
 }
diff --git a/src/content/tags/mad.json b/src/content/tags/mad.json
index 323302a..071288f 100644
--- a/src/content/tags/mad.json
+++ b/src/content/tags/mad.json
@@ -1,3 +1,4 @@
 {
-  "name": "音MAD"
+  "name": "音MAD",
+  "category": "other"
 }
diff --git a/src/content/tags/markdown.json b/src/content/tags/markdown.json
index 596fe5a..69e5b66 100644
--- a/src/content/tags/markdown.json
+++ b/src/content/tags/markdown.json
@@ -1,4 +1,5 @@
 {
   "name": "Markdown",
+  "category": "tech",
   "image": "./markdown.svg"
 }
diff --git a/src/content/tags/mixamo.json b/src/content/tags/mixamo.json
index 6859e66..db2911a 100644
--- a/src/content/tags/mixamo.json
+++ b/src/content/tags/mixamo.json
@@ -1,3 +1,4 @@
 {
-  "name": "Mixamo"
+  "name": "Mixamo",
+  "category": "tech"
 }
diff --git a/src/content/tags/open-cv.json b/src/content/tags/open-cv.json
index daab72a..8b1e9f2 100644
--- a/src/content/tags/open-cv.json
+++ b/src/content/tags/open-cv.json
@@ -1,3 +1,4 @@
 {
-  "name": "OpenCV"
+  "name": "OpenCV",
+  "category": "tech"
 }
diff --git a/src/content/tags/open-xml.json b/src/content/tags/open-xml.json
index 1152812..e44fee1 100644
--- a/src/content/tags/open-xml.json
+++ b/src/content/tags/open-xml.json
@@ -1,3 +1,4 @@
 {
-  "name": "OpenXML"
+  "name": "OpenXML",
+  "category": "tech"
 }
diff --git a/src/content/tags/oracle-cloud.json b/src/content/tags/oracle-cloud.json
index aa3ef64..81c8ca4 100644
--- a/src/content/tags/oracle-cloud.json
+++ b/src/content/tags/oracle-cloud.json
@@ -1,3 +1,4 @@
 {
-  "name": "Oracle Cloud"
+  "name": "Oracle Cloud",
+  "category": "tech"
 }
diff --git a/src/content/tags/power-point.json b/src/content/tags/power-point.json
index 98e4633..75c69c3 100644
--- a/src/content/tags/power-point.json
+++ b/src/content/tags/power-point.json
@@ -1,3 +1,4 @@
 {
-  "name": "Power Point"
+  "name": "Power Point",
+  "category": "tech"
 }
diff --git a/src/content/tags/python.json b/src/content/tags/python.json
index 3c5e2df..f59b2d6 100644
--- a/src/content/tags/python.json
+++ b/src/content/tags/python.json
@@ -1,6 +1,7 @@
 {
   "name": "Python",
   "description": "Python はインタープリタ型の高水準汎用プログラミング言語です。",
+  "category": "tech",
   "image": "./python.svg",
   "links": [
     {
diff --git a/src/content/tags/reaper.json b/src/content/tags/reaper.json
index 8005b80..a9b80a2 100644
--- a/src/content/tags/reaper.json
+++ b/src/content/tags/reaper.json
@@ -1,3 +1,4 @@
 {
-  "name": "REAPER"
+  "name": "REAPER",
+  "category": "tech"
 }
diff --git a/src/content/tags/rest-api.json b/src/content/tags/rest-api.json
index f97cb5e..b392b93 100644
--- a/src/content/tags/rest-api.json
+++ b/src/content/tags/rest-api.json
@@ -1,4 +1,5 @@
 {
   "name": "REST API",
+  "category": "tech",
   "image": "./rest-api.svg"
 }
diff --git a/src/content/tags/rust.json b/src/content/tags/rust.json
index 0eed2f4..00b8a73 100644
--- a/src/content/tags/rust.json
+++ b/src/content/tags/rust.json
@@ -1,4 +1,5 @@
 {
   "name": "Rust",
+  "category": "tech",
   "image": "./rust.svg"
 }
diff --git a/src/content/tags/shell.json b/src/content/tags/shell.json
index 479d084..87b7d96 100644
--- a/src/content/tags/shell.json
+++ b/src/content/tags/shell.json
@@ -1,5 +1,6 @@
 {
   "name": "Shell",
   "description": "Shell はコンピュータを人間が操作するための UI の総称ですが、狭義には Bash や Zsh のようなコマンドラインインタプリタ（CLI）を指します。UI として利用することはもちろん、パイプやリダイレクトを用いた高度な情報処理や、shell script を用いた自動化など、広く活用されています。",
+  "category": "tech",
   "image": "./bash.svg"
 }
diff --git a/src/content/tags/tello.json b/src/content/tags/tello.json
index 21d3e81..a85381a 100644
--- a/src/content/tags/tello.json
+++ b/src/content/tags/tello.json
@@ -1,6 +1,7 @@
 {
   "name": "Tello",
   "description": "Tello、Tello eduはドローン界のAppleと言われるDJIと、CPU部分をIntelで共同開発し、Ryze Techから販売されているトイドローンです。",
+  "category": "tech",
   "links": [
     {
       "url": "https://www.ryzerobotics.com/",
diff --git a/src/content/tags/transcribe.json b/src/content/tags/transcribe.json
index 3e864a5..ef2640d 100644
--- a/src/content/tags/transcribe.json
+++ b/src/content/tags/transcribe.json
@@ -1,3 +1,4 @@
 {
-  "name": "文字起こし"
+  "name": "文字起こし",
+  "category": "tech"
 }
diff --git a/src/content/tags/typst.json b/src/content/tags/typst.json
index f4f376e..c5de18e 100644
--- a/src/content/tags/typst.json
+++ b/src/content/tags/typst.json
@@ -1,5 +1,6 @@
 {
   "name": "Typst",
+  "category": "tech",
   "image": "./typst.png",
   "fullSizeImage": true,
   "links": [
diff --git a/src/content/tags/unity.json b/src/content/tags/unity.json
index e684b06..4830a78 100644
--- a/src/content/tags/unity.json
+++ b/src/content/tags/unity.json
@@ -1,5 +1,6 @@
 {
   "name": "Unity",
+  "category": "tech",
   "image": "./unity.svg",
   "links": [
     {
diff --git a/src/content/tags/vrchat.json b/src/content/tags/vrchat.json
index a700cd6..d76cc78 100644
--- a/src/content/tags/vrchat.json
+++ b/src/content/tags/vrchat.json
@@ -1,3 +1,4 @@
 {
-  "name": "VRChat"
+  "name": "VRChat",
+  "category": "tech"
 }
diff --git a/src/content/tags/vrm.json b/src/content/tags/vrm.json
index b3c91cb..2f734db 100644
--- a/src/content/tags/vrm.json
+++ b/src/content/tags/vrm.json
@@ -1,3 +1,4 @@
 {
-  "name": "VRM"
+  "name": "VRM",
+  "category": "tech"
 }
diff --git a/src/content/tags/whisper.json b/src/content/tags/whisper.json
index 1567578..4f74570 100644
--- a/src/content/tags/whisper.json
+++ b/src/content/tags/whisper.json
@@ -1,3 +1,4 @@
 {
-  "name": "Whisper"
+  "name": "Whisper",
+  "category": "tech"
 }
diff --git a/src/content/tags/winforms.json b/src/content/tags/winforms.json
index 995a926..04dd70f 100644
--- a/src/content/tags/winforms.json
+++ b/src/content/tags/winforms.json
@@ -1,6 +1,7 @@
 {
   "name": "Windows Forms",
   "description": "Windows Forms (WinForms) はWindows 用の豊富なデスクトップ クライアント アプリを作成する UI フレームワークです。C# のUIフレームワークの中では最も古いためとても安定してます。",
+  "category": "tech",
   "image": "./dotnet.svg",
   "fullSizeImage": true,
   "links": [
diff --git a/src/content/tags/workshop.json b/src/content/tags/workshop.json
index f9c21b0..c31990d 100644
--- a/src/content/tags/workshop.json
+++ b/src/content/tags/workshop.json
@@ -1,3 +1,4 @@
 {
-  "name": "講習会"
+  "name": "講習会",
+  "category": "circle"
 }
diff --git a/src/pages/blog/tags/[category].astro b/src/pages/blog/tags/[category].astro
new file mode 100644
index 0000000..2b863dc
--- /dev/null
+++ b/src/pages/blog/tags/[category].astro
@@ -0,0 +1,15 @@
+---
+import TagListPage from '@/components/blog/tag/TagListPage.astro'
+import { TagCategoryMapping } from '@/content/config'
+
+export function getStaticPaths() {
+  return TagCategoryMapping.map(([category]) => ({
+    params: { category },
+    props: { category },
+  }))
+}
+
+const { category } = Astro.props
+---
+
+<TagListPage category={category} />
diff --git a/src/pages/blog/tags/[slug]/index.astro b/src/pages/blog/tags/[slug].astro
similarity index 100%
rename from src/pages/blog/tags/[slug]/index.astro
rename to src/pages/blog/tags/[slug].astro
diff --git a/src/pages/blog/tags/index.astro b/src/pages/blog/tags/index.astro
index 5206717..aa2ac7d 100644
--- a/src/pages/blog/tags/index.astro
+++ b/src/pages/blog/tags/index.astro
@@ -1,34 +1,5 @@
 ---
-import BlogLayout from '@/layouts/BlogLayout.astro'
-import { getCollection } from 'astro:content'
-import { getTagStatistics } from '@/content/_blog-statistics'
-import TagListSection from '@/components/blog/tag/TagListSection.astro'
-
-const tagEntries = await getCollection('tags')
-const statistics = await getTagStatistics()
-const tags = tagEntries
-  .filter(
-    (tag) =>
-      ![
-        // ignore tags
-        'dgv',
-        'astro',
-      ].includes(tag.id),
-  )
-  .map((tag) => ({
-    ...tag,
-    articleCount: statistics[tag.id].length,
-    lastPostedTime: statistics[tag.id][0]?.time ?? 0,
-  }))
-tags.sort((tag1, tag2) =>
-  tag2.articleCount !== tag1.articleCount
-    ? tag2.articleCount - tag1.articleCount
-    : tag2.lastPostedTime - tag1.lastPostedTime,
-)
+import TagListPage from '@/components/blog/tag/TagListPage.astro'
 ---
 
-<BlogLayout title="タグ一覧" description="ブログのタグ一覧です。">
-  <main class="flex h-full flex-col">
-    <TagListSection title="タグ一覧" tags={tags} />
-  </main>
-</BlogLayout>
+<TagListPage category="all" />