OUCC · miyaji255 · Feb 5, 2024 · Feb 3, 2024 · Feb 3, 2024 · Feb 3, 2024
diff --git a/README_BLOG.md b/README_BLOG.md
@@ -14,6 +14,7 @@ OUCC BLOG の仕様について記載しています。何もわからない場
 ---
 title: タイトル
 description: 説明
+category: 記事のカテゴリー。tech(技術関連), club(クラブ関連), other(その他) から選択できます。
 author: 著者
 tags:
   - タグ1

diff --git a/src/components/blog/BlogCategoryNav.astro b/src/components/blog/BlogCategoryNav.astro
@@ -0,0 +1,37 @@
+---
+import { BlogCategoryMapping, type BlogCategory } from '@/content/config'
+
+export type TagNavCategory = 'all' | BlogCategory
+
+interface Props {
+  category: TagNavCategory
+}
+const { category } = Astro.props
+const tagCategoryEntries = [
+  ['all', '全般'],
+  ...Object.entries(BlogCategoryMapping),
+] 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/' : `/blog/category=${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/BlogContent.astro b/src/components/blog/BlogContent.astro
@@ -32,7 +32,7 @@ const { Content } = await blog.render()
         ><AuthorIcon {...author.data} size={28} />{author.data.name}</a
       >
     </div>
-    <TagSmallList tags={tags} />
+    <TagSmallList blogCategory={blog.data.category} tags={tags} />
     <div class="flex gap-3 p-2 text-sm text-gray-700">
       {
         blogMeta.updateDate && (

diff --git a/src/components/blog/BlogListItem.astro b/src/components/blog/BlogListItem.astro
@@ -20,7 +20,7 @@ const tags = await getEntries(blog.tags)
       {blog.title}
     </h2>
   </a>
-  <TagSmallList tags={tags} />
+  <TagSmallList blogCategory={blog.category} tags={tags} />
   <div class="flex gap-3 px-2 text-gray-600">
     <div class="hover:underline">
       <a href={`/blog/authors/${author.id}`} class="flex items-center gap-2"

diff --git a/src/components/blog/BlogListSection.astro b/src/components/blog/BlogListSection.astro
@@ -13,5 +13,6 @@ const { title, blogs } = Astro.props
 
 <Section background="secondary">
   <Fragment slot="title">{title}</Fragment>
+  <slot name="nav" />
   <BlogList blogs={blogs} />
 </Section>
diff --git 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/TagSmallList.astro b/src/components/blog/tag/TagSmallList.astro
@@ -1,14 +1,24 @@
 ---
 import type { CollectionEntry } from 'astro:content'
 import TagIcon from '../icon/TagIcon.astro'
+import { BlogCategoryMapping, type BlogCategory } from '@/content/config'
 interface Props {
+  blogCategory: BlogCategory
   tags: CollectionEntry<'tags'>[]
 }
 
-const { tags } = Astro.props
+const { blogCategory, tags } = Astro.props
 ---
 
 <ul class="flex flex-wrap gap-2">
+  <li>
+    <a
+      href={`/blog/category=${blogCategory}/`}
+      class="rounded-full bg-white px-2 py-1 text-justify text-sm ring-1 ring-primary hover:bg-gray-200"
+      >{BlogCategoryMapping[blogCategory]}</a
+    >
+  </li>
+
   {
     tags.map((tag) => (
       <li>

diff --git a/src/components/layout/nav/BlogNav.astro b/src/components/layout/nav/BlogNav.astro
@@ -1,33 +1,52 @@
 ---
+import { BlogCategoryMapping } from '@/content/config'
+
 const current = Astro.url.pathname
 
-const navList: { target: string; title: string }[] = [
+const navList = [
   {
-    target: '/blog',
+    target: '/blog/',
     title: '記事一覧',
+    isHere: [
+      '/blog/',
+      ...Object.keys(BlogCategoryMapping).map(
+        (category) => `/blog/category=${category}/`,
+      ),
+    ].includes(current),
   },
   {
-    target: '/blog/tags',
+    target: '/blog/tags/',
     title: 'タグ一覧',
+    isHere: '/blog/tags/' === 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 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',
+          'whitespace-nowrap',
           {
-            'after:block after:h-1 after:rounded-t-lg after:bg-primary':
-              current === target || current === target + '/',
-            'pb-1': current !== target && current !== target + '/',
+            'text-black after:block after:h-1 after:rounded-t-lg after:bg-primary':
+              isHere,
+            'text-gray-700 hover:text-black': !isHere,
           },
         ]}
       >
-        {title}
+        <span
+          class:list={[
+            'inline-block pb-1 pt-2',
+            {
+              'pb-1': isHere,
+              'pb-2': !isHere,
+            },
+          ]}
+        >
+          {title}
+        </span>
       </a>
     ))
   }

diff --git a/src/content/blogs/10.md b/src/content/blogs/10.md
@@ -7,6 +7,7 @@ description: |
 
     さて、私たちはそんな大学祭でどんなことをするのか、それについて少しだけお話しさせてもらうことにします。
 author: member
+category: club
 tags: []
 ---
 <!-- wp:heading {"level":3} -->

diff --git a/src/content/blogs/100.md b/src/content/blogs/100.md
@@ -9,6 +9,7 @@ description: |
 
     今後は、PythonやJavaScriptなど、講習会を開いていく予定です！
 author: member
+category: club
 tags: []
 ---
 <!-- wp:paragraph -->

diff --git a/src/content/blogs/1000.md b/src/content/blogs/1000.md
@@ -3,6 +3,7 @@ title: DataGridView のセルのイベントの順番はどうなっているの
 description: DataGridView のセルのイベントの順番について説明します
 tags: [advent-calendar, csharp, dotnet, winforms]
 author: miyaji
+category: tech
 ---
 
 この記事は [OUCC Advent Calendar 2023](https://adventar.org/calendars/9315) の14日目の記事です。空いていたので入れてみました。

diff --git a/src/content/blogs/1001.md b/src/content/blogs/1001.md
@@ -3,6 +3,7 @@ title: C# のJsonSerializerの速度比較
 description: C# のJsonSerializerはどれが最も高速なのか検証しました
 tags: [advent-calendar, csharp, dotnet]
 author: miyaji
+category: tech
 ---
 
 この記事は [OUCC Advent Calendar 2023](https://adventar.org/calendars/9315) の17日目の記事です。前回はぐれいしゃさんによる [CTfとは？Ghidraをつかったreversing入門](https://qiita.com/icestdy/items/86b597d118e4801453d5) でした。

diff --git a/src/content/blogs/1002.md b/src/content/blogs/1002.md
@@ -2,6 +2,7 @@
 title: C言語でコンパイルが通らなかった話
 description: 大学の課題で作成したC言語のコードのコンパイルが通らず、試行錯誤した結果を記事にしました。
 author: TaPet
+category: tech
 tags:
   - advent-calendar
   - c-cpp

diff --git a/src/content/blogs/1003.md b/src/content/blogs/1003.md
@@ -2,6 +2,7 @@
 title: 覚えておくと便利なTypstの文法
 description: 組版システムTypstのドキュメントにないけど覚えておくと便利な文法を紹介します。
 tags: [advent-calendar, typst]
+category: tech
 author: miyaji
 ---
 

diff --git a/src/content/blogs/105.md b/src/content/blogs/105.md
@@ -6,6 +6,7 @@ description: |
     模擬店では唐揚げと焼き鳥を売らせていただき、二日とも休日だったおかげか唐揚げを完売することができました!!(去年は10kgほど売り残りがあり、部員たちで唐揚げパーティー(消費会)を開催しました（笑）)
     また、展示では去年のまちかね祭で出させていただいたシューティングゲームや占いに加え、opencvを用いたゲームや部長が作ったアクションゲームを展示させていただきました！！
 author: member
+category: club
 tags: []
 ---
 

diff --git a/src/content/blogs/110.md b/src/content/blogs/110.md
@@ -5,6 +5,7 @@ description: |
 
     この合宿の目的はチーム開発を経験することということで、３人１組の２つのグループに分かれて開発をしました。開発をする時間は９月９日の１６時から９月１１日の１１時３０分まででした。最後の夜は徹夜をして、開発終了時間にはどちらも動くものを発表することができました。
 author: member
+category: club
 tags: []
 ---
 <!-- wp:paragraph -->

diff --git a/src/content/blogs/116.md b/src/content/blogs/116.md
@@ -9,6 +9,7 @@ description: |
 
     興味がある方は是非学祭に足を運びください！
 author: member
+category: club
 tags: []
 ---
 <!-- wp:paragraph -->

diff --git a/src/content/blogs/120.md b/src/content/blogs/120.md
@@ -7,6 +7,7 @@ description: |
 
     今回考えたゲームのテーマは、「デッキ作製系リアルタイム対戦ゲーム」です。戦闘画面のイメージは次の通り。
 author: member
+category: tech
 tags: [advent-calendar, unity]
 ---
 

diff --git a/src/content/blogs/13.md b/src/content/blogs/13.md
@@ -8,6 +8,7 @@ description: |
 
     また、LT会についても話題に上がりました。(LTは、[Lightning Talk]の略で各員が各々のトピックを5分程度の時間で話し合うものです)
 author: member
+category: club
 tags: []
 ---
 <!-- wp:heading -->

diff --git a/src/content/blogs/132.md b/src/content/blogs/132.md
@@ -12,6 +12,7 @@ description: |
 
     　それで何分悩んだかわからないけど死にかけの頭で考えて何とか実装には成功したので、今後同じ事態にはまった時のためにメモとしてここに記述します。
 author: member
+category: tech
 tags: [unity, csharp]
 ---
 

diff --git a/src/content/blogs/145.md b/src/content/blogs/145.md
@@ -10,6 +10,7 @@ description: |
     https://kanchi0914.hatenablog.com/entry/2019/10/02/181617
     今回はこれをパワポケ風に近づけるために追加した機能を書きたいと思います。
 author: member
+category: tech
 tags: [advent-calendar, unity]
 ---
 

diff --git a/src/content/blogs/15.md b/src/content/blogs/15.md
@@ -5,6 +5,7 @@ description: |
     Posted by OUCC webサーバ係 (2018 10/19)
     本日、OUCCにてLT(Light Talking)会が開催されました
 author: member
+category: club
 tags: []
 ---
 <!-- wp:heading {"level":3} -->

diff --git a/src/content/blogs/161.md b/src/content/blogs/161.md
@@ -4,6 +4,7 @@ description: |
     ・～あらすじ～
     　クリスマスではないけど、一応アドベントカレンダーの名目で二日目の記事書かせてもらいますOUCCの2DCG班長です。最初は適当にunityの音声認識の記事でも書いてやり過ごそうと思ってたんですが、一日目の先代の部長が結構頑張ってたんで、それを見て急遽書く内容変更して、一日で出来るけどそこそこ難易度のあるテーマを考えました。シートン学園を見ながら3時間くらい悩んだ結果、PCの隣にあったMONO消しゴムのデザインがエストニアの国旗に似ているな～とふと気が付いて、現在に至ります。
 author: member
+category: tech
 tags: [advent-calendar, python, open-cv]
 ---
 

diff --git a/src/content/blogs/17.md b/src/content/blogs/17.md
@@ -7,6 +7,7 @@ description: |
 
     そして部室に朝が来ました。
 author: member
+category: club
 tags: []
 ---
 <!-- wp:heading {"level":3} -->

diff --git a/src/content/blogs/19.md b/src/content/blogs/19.md
@@ -7,6 +7,7 @@ description: |
 
     部会では、OUCC内で共有すべき情報を報告したり、イベントなどの連絡をしたりする会議です。
 author: member
+category: club
 tags: []
 ---
 <!-- wp:heading {"level":3} -->

diff --git a/src/content/blogs/2023-12-18-td4.md b/src/content/blogs/2023-12-18-td4.md
@@ -2,6 +2,7 @@
 title: TD4エミュレータで遊ぶ
 description: 「CPUの創りかた」で出てきたTD4エミュレータで機械語を書いて遊ぶのが楽しかったので紹介します。
 author: talkie
+category: tech
 tags:
   - advent-calendar
 ---

diff --git a/src/content/blogs/2023_12_24.md b/src/content/blogs/2023_12_24.md
@@ -2,6 +2,7 @@
 title: 戯言シリーズの新刊について語る
 description: 2023年にまさかの新刊が刊行された戯言シリーズについて（早口で）語ります
 tags: [advent-calendar]
+category: other
 author: ryota
 ---
 # 初めに

diff --git a/src/content/blogs/21.md b/src/content/blogs/21.md
@@ -7,6 +7,7 @@ description: |
 
     打ち上げでは、唐揚げ5kgと焼き鳥300本を食べました。
 author: member
+category: club
 tags: []
 ---
 <!-- wp:heading {"level":3} -->

diff --git a/src/content/blogs/227.md b/src/content/blogs/227.md
@@ -11,6 +11,7 @@ description: |
             }
     このif文は必要でしょうか？こんなことを聞くからには、もちろんNoです。ただ、if文が必要ないというのは語弊があります。正確には、処理をif文で囲む必要はありません。次のメソッドは全く同じ動作をします。
 author: member
+category: tech
 tags: [csharp, for-beginer]
 ---
 

diff --git a/src/content/blogs/234.md b/src/content/blogs/234.md
@@ -6,6 +6,7 @@ description: |
 
     新入生へ向けてのアドベントカレンダーということで、今回はここ数年でこの クラブ が行った活動を、私の知りうる範囲で振り返りたいと思います。
 author: member
+category: club
 tags: [advent-calendar]
 ---
 

diff --git a/src/content/blogs/24.md b/src/content/blogs/24.md
@@ -7,6 +7,7 @@ description: |
 
     4人で寿司屋に行ったのですが、フードファイターの鯖さんは全員分の代金である６９６６円中の４１６０円も食べたそうです。うん、すごいね。
 author: member
+category: club
 tags: []
 ---
 <!-- wp:heading {"level":3} -->

diff --git a/src/content/blogs/26.md b/src/content/blogs/26.md
@@ -7,6 +7,7 @@ description: |
 
     †一回生による叛逆の歴史はここからはじまる†
 author: member
+category: club
 tags: []
 ---
 

diff --git a/src/content/blogs/28.md b/src/content/blogs/28.md
@@ -5,6 +5,7 @@ description: |
     Posted by OUCC (旧)会計監査係(2018 12/14)
     クリスマスまで残すところあと2週間となりましたが、いかがお過ごしでしょうか？
 author: member
+category: club
 tags: []
 ---
 <!-- wp:heading {"level":3} -->

diff --git a/src/content/blogs/282.md b/src/content/blogs/282.md
@@ -5,6 +5,7 @@ description: |
 
     私が受けた院試は、大阪大学の大学院情報科学研究科というところで、8月1日と2日の二日に分けて行われました。
 author: member
+category: other
 tags: []
 ---
 

diff --git a/src/content/blogs/286.md b/src/content/blogs/286.md
@@ -10,6 +10,7 @@ description: |
     Facebook
     のいずれかのアカウントが必要になりますので、あらかじめご準備をお願いします。
 author: member
+category: club
 tags: [advent-calendar]
 ---
 

diff --git a/src/content/blogs/30.md b/src/content/blogs/30.md
@@ -5,6 +5,7 @@ description: |
     Posted by OUCC 旧webサーバ係(2018 12/26)
     本日、OUCC部内にてクリスマスパーティが行われました！とはいっても、OUCCでは恒例の、たこ焼きを作ってそれをみんなで食べる、所謂「タコパ」ですけど(笑)
 author: member
+category: club
 tags: []
 ---
 <!-- wp:heading {"level":3} -->