#55 タグカテゴリーを追加

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',
     },

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>

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>

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>

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,
           },
         ]}
       >

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"]
     }
-  }
 }

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?: {

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({

src/content/tags/advent-calendar.json

@@ -1,3 +1,4 @@
 {
-  "name": "Advent Calendar"
+  "name": "Advent Calendar",
+  "category": "circle"
 }

src/content/tags/arduino.json

@@ -1,4 +1,5 @@
 {
   "name": "Arduino",
+  "category": "tech",
   "image": "./arduino.svg"
 }

src/content/tags/asp.net.json

@@ -1,5 +1,6 @@
 {
   "name": "ASP.NET Core",
+  "category": "tech",
   "image": "./dotnet.svg",
   "fullSizeImage": true,
   "links": [

src/content/tags/astro.json

@@ -1,4 +1,5 @@
 {
   "name": "Astro",
+  "category": "tech",
   "image": "./astro.svg"
 }

src/content/tags/automation.json

@@ -1,3 +1,4 @@
 {
-  "name": "自動化"
+  "name": "自動化",
+  "category": "tech"
 }

src/content/tags/blender.json

@@ -1,3 +1,4 @@
 {
-  "name": "Blender"
+  "name": "Blender",
+  "category": "tech"
 }

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": [

src/content/tags/csharp.json

@@ -1,5 +1,6 @@
 {
   "name": "C#",
+  "category": "tech",
   "description": "C#は、最新のタイプ セーフなオブジェクト指向のプログラミング言語です。 開発者は C# を使用することにより、.NET で稼働する、安全かつ堅牢な多くの種類のアプリケーションを構築できます。",
   "image": "./csharp.svg",
   "links": [

src/content/tags/discord-bot.json

@@ -1,4 +1,5 @@
 {
   "name": "Discord Bot",
+  "category": "tech",
   "image": "./discord-bot.svg"
 }

src/content/tags/docker.json

@@ -1,4 +1,5 @@
 {
   "name": "Docker",
+  "category": "tech",
   "image": "./docker.svg"
 }