タグ一覧のデータの仕組み変更

3 files changed, 62 insertions, 15 deletions

diff --git a/src/app/article/all/[pageId]/page.tsx b/src/app/article/all/[pageId]/page.tsx
index fd72772..0374401 100644
--- a/src/app/article/all/[pageId]/page.tsx
+++ b/src/app/article/all/[pageId]/page.tsx
@@ -149,9 +149,6 @@ export async function generateStaticParams() {
     return { pageId: `page-${index + 1}`, data: data };
   });
 }
-// export const generateStaticParams = async () => {
-//   return [{ articleid: "123" }];
-// };
 
 function chunk<T = any>(list: T[], len: number) {
   if (len <= 0) {
diff --git a/src/app/article/tag/[tagName]/page.tsx b/src/app/article/tag/[tagName]/page.tsx
index 3df1f1e..b783e82 100644
--- a/src/app/article/tag/[tagName]/page.tsx
+++ b/src/app/article/tag/[tagName]/page.tsx
@@ -8,7 +8,7 @@ type PageType = {
 }
 export async function generateMetadata(context: PageType) {
   return {
-    title: `アキバ総研アーカイブ：ページ ${context.params.tagName}`,
+    title: `アキバ総研アーカイブ：タグの記事一覧 ${context.params.tagName}`,
   }
 }
 export default async function Page(context: PageType) {
@@ -35,6 +35,6 @@ export default async function Page(context: PageType) {
 export async function generateStaticParams() {
   const tagList = await new ArticleLoader().getTagList();
   return tagList.map((data, index) => {
-    return { tagName: data.name };
+    return { tagName: encodeURIComponent(data.tag) };
   });
 }
diff --git a/src/app/article/tag/page.tsx b/src/app/article/tag/page.tsx
index 211ca94..f1d161b 100644
--- a/src/app/article/tag/page.tsx
+++ b/src/app/article/tag/page.tsx
@@ -14,17 +14,67 @@ export async function generateMetadata(context: PageType) {
 }
 export default async function Page(context: PageType) {
   const tagList = await new ArticleLoader().getTagList();
-  const tagsElement: JSX.Element[] = [];
-  tagList.forEach(t => {
-    tagsElement.push(<span key={t.name}><Link href={`/article/tag/${t.name}`}>{t.name}({t.count})</Link></span>)
-  })
+  type TAG = { tag: string, count: number, primary?: boolean };
+  const elementListPcPart: TAG[] = [];
+  const elementListAkiba: TAG[] = [];
+  const elementListAnime: TAG[] = [];
+  const elementListAnimeSeason: TAG[] = [];
+  const elementListGame: TAG[] = [];
+  const elementListHobby: TAG[] = [];
+  const elementListOther: TAG[] = [];
+  for (const tag of tagList) {
+    if (tag.category == "PCパーツ") {
+      elementListPcPart.push({ tag: tag.tag, count: tag.count, primary: tag.tag == "PCパーツ" });
+    } else if (tag.category == "アキバ") {
+      elementListAkiba.push({ tag: tag.tag, count: tag.count, primary: tag.tag == "アキバ" });
+    } else if (tag.category == "アニメ") {
+      elementListAnime.push({ tag: tag.tag, count: tag.count, primary: tag.tag == "アニメ" });
+    } else if (tag.category == "ゲーム") {
+      elementListGame.push({ tag: tag.tag, count: tag.count, primary: tag.tag == "ゲーム" });
+    } else if (tag.category == "ホビー") {
+      elementListHobby.push({ tag: tag.tag, count: tag.count, primary: tag.tag == "ホビー" });
+    } else if (tag.tag.match(/^\d+(春|夏|秋|冬)?アニメ$/)) {
+      elementListAnimeSeason.push({ tag: tag.tag, count: tag.count });
+    } else if (tag.tag == "G.E.M.シリーズ") {
+      elementListHobby.push({ tag: tag.tag, count: tag.count });
+    } else if (["3DS", "PS4ゲームレビュー", "PS Vita", "PS5ゲームレビュー", "Switchインディーズ", "ポケモンGO", "Steamゲームレビュー"].includes(tag.tag)) {
+      elementListGame.push({ tag: tag.tag, count: tag.count });
+    } else {
+      elementListOther.push({ tag: tag.tag, count: tag.count });
+    }
+  }
   return (
-    <div className="p-8 pb-20 gap-16 sm:p-20">
-      <h1>著名なタグ一覧</h1>
-      <h1>記事にセットされているタグの一覧</h1>
-      <div className="flex gap-2 flex-wrap">
-        {tagsElement}
-      </div>
+    <div className="p-1">
+      {createList("PCパーツ", elementListPcPart)}
+      {createList("アキバ", elementListAkiba)}
+      {createList("ゲーム", elementListGame)}
+      {createList("ホビー", elementListHobby)}
+      {createList("カテゴリなし", elementListOther)}
+      {createList("アニメ", elementListAnime)}
+      {createList("アニメ(時期別)", elementListAnimeSeason)}
     </div>
   );
 }
+function createList(headerLabel: string, tagList: { tag: string, count: number, primary?: boolean }[]) {
+  const sortedList = tagList.toSorted((a, b) => {
+    if (a.primary == true) {
+      return -1;
+    } else if (b.primary == true) {
+      return 1;
+    } else {
+      return b.count - a.count;
+    };
+  })
+  const elementList: JSX.Element[] = [];
+  sortedList.forEach(t => {
+    elementList.push(
+      <Link href={`/article/tag/${t.tag}`} key={`list-${tagList.indexOf(t)}`} className="original-href">{t.tag}({t.count})</Link>
+    )
+  })
+  return (<>
+    <h1>{headerLabel}</h1>
+    <div className="flex gap-2 flex-wrap">
+      {elementList}
+    </div>
+  </>);
+}
\ No newline at end of file