From 67c590c46f3a29795308098e9c6d0fa1da53e805 Mon Sep 17 00:00:00 2001 From: Fushihara <1039534+fushihara@users.noreply.github.com> Date: Sat, 28 Sep 2024 18:33:11 +0900 Subject: [PATCH] =?UTF-8?q?=E3=83=86=E3=83=BC=E3=83=96=E3=83=AB=E4=BD=9C?= =?UTF-8?q?=E6=88=90=E3=81=AE=E5=87=A6=E7=90=86=E3=82=92=E5=88=87=E3=82=8A?= =?UTF-8?q?=E5=87=BA=E3=81=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/_components/tableElements.tsx | 44 ++++ .../_components/articleListElement.tsx | 233 +++++++++--------- src/app/article/all/[pageId]/page.tsx | 1 + 3 files changed, 157 insertions(+), 121 deletions(-) create mode 100644 src/app/_components/tableElements.tsx diff --git a/src/app/_components/tableElements.tsx b/src/app/_components/tableElements.tsx new file mode 100644 index 0000000..1051048 --- /dev/null +++ b/src/app/_components/tableElements.tsx @@ -0,0 +1,44 @@ +type MainOption = { + header: { + label: string, + }[] +}; +export function TableElement(mainOption: MainOption, bodyList: { element: JSX.Element }[][]) { + if (mainOption.header.length <= 0) { + throw new Error(`カラムの数は1以上にして下さい`); + } + const headerElementList: JSX.Element[] = []; + for (const h of mainOption.header) { + const index = mainOption.header.indexOf(h); + headerElementList.push( + {h.label} + ); + } + const bodyElementList: JSX.Element[] = []; + let trIndex = 0; + for (const body of bodyList) { + const tdElementList: JSX.Element[] = []; + for (let i = 0; i < mainOption.header.length; i++) { + const tdBody: { element: JSX.Element } = body[i]; + tdElementList.push({tdBody.element}); + } + bodyElementList.push( + + {tdElementList} + + ); + trIndex += 1; + } + return ( + + + + {headerElementList} + + + + {bodyElementList} + +
+ ); +} diff --git a/src/app/article/_components/articleListElement.tsx b/src/app/article/_components/articleListElement.tsx index 3cd30c1..27c7862 100644 --- a/src/app/article/_components/articleListElement.tsx +++ b/src/app/article/_components/articleListElement.tsx @@ -1,6 +1,7 @@ import Link from "next/link"; import dateformat from "dateformat"; import { ArticleLoader } from "../../../util/articleLoader"; +import { TableElement } from "../../_components/tableElements"; dateformat.i18n.dayNames = [ '日', '月', '火', '水', '木', '金', '土', '日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日' @@ -8,126 +9,116 @@ dateformat.i18n.dayNames = [ type DisplayData = Awaited>["articles"][number]; type CategoryTagData = Awaited>["categoryTag"] export function ArticleListElement(displayData: DisplayData[], categoryTag: CategoryTagData) { - return ( - - - - - - - - - - - {displayData.map(d => { - const officialLinkTitle = `公式のakiba-souken.com へのリンク。閉鎖後は繋がらなくなるはず`; - const iaSearchResultLinkTitle = `InternetArchive の検索結果へのリンク`; - const iframeLinkTitle = `Iframeを使ってInternetArchiveに記録されたアーカイブを表示します`; - const topCategory = d.breadLinks[0]; - const timestampStr = dateformat(new Date(d.timestampMs), "yyyy/mm/dd(ddd)HH:MM"); - const originalUrl = `https://akiba-souken.com/article/${d.articleId}/`; - const page2After = (() => { - if (d.maxPageNumber == 1) { - return [(<>)]; - } - const result: JSX.Element[] = [ - (
) - ]; - for (let page = 2; page <= d.maxPageNumber; page++) { - result.push( -
- 公式 - IA検索結果 - IAをiframe Page:{page} -
- ); - } - return result; - })(); - // パンくずリスト部分を作成 - let breadElement = (); - if (0 < d.breadLinks.length) { - const breadChildElement: JSX.Element[] = []; - breadChildElement.push(パンくずリスト：); - for (const bread of d.breadLinks) { - if (d.breadLinks.indexOf(bread) != 0) { - breadChildElement.push(＞); - } - const tagCount = categoryTag.getTagCount(bread); - breadChildElement.push( - {bread}({tagCount}) - ); - } - breadElement = ( - - {breadChildElement} - - ); - } - // タグ部分を作成 - let tagElement = (タグ無し); - if (d.tags.length != 0) { - const tagChildElements: JSX.Element[] = []; - tagChildElements.push(タグ：); - for (const tag of d.tags) { - if (d.tags.indexOf(tag) != 0) { - tagChildElements.push(／); - }; - const tagCount = categoryTag.getTagCount(tag); - tagChildElements.push( - {tag}({tagCount}) - ); - } - tagElement = ( - - {tagChildElements} - - ); - } - const hatebuElement = ( - - - - ); - return ( - - - - - - - ); - })} - -
- No - - カテゴリ - - タイトル - - 日時 -
{d.articleId} - {topCategory} - -
{d.title}
-
- 公式 - IA検索結果 - IAをiframe - {breadElement} - {tagElement} - {hatebuElement} -
- {page2After} - 		{timestampStr}
+ const result = TableElement({ + header: [ + { label: "No" }, + { label: "カテゴリ" }, + { label: "タイトル" }, + { label: "日付" }, + ] + }, displayData.map(d => { + return getDisplayData(d, categoryTag); + })); + return result; +} +function getDisplayData(d: DisplayData, categoryTag: CategoryTagData) { + const officialLinkTitle = `公式のakiba-souken.com へのリンク。閉鎖後は繋がらなくなるはず`; + const iaSearchResultLinkTitle = `InternetArchive の検索結果へのリンク`; + const iframeLinkTitle = `Iframeを使ってInternetArchiveに記録されたアーカイブを表示します`; + const topCategory = d.breadLinks[0]; + const timestampStr = dateformat(new Date(d.timestampMs), "yyyy/mm/dd(ddd)HH:MM"); + const originalUrl = `https://akiba-souken.com/article/${d.articleId}/`; + const page2After = (() => { + if (d.maxPageNumber == 1) { + return [(<>)]; + } + const result: JSX.Element[] = [ + (
) + ]; + for (let page = 2; page <= d.maxPageNumber; page++) { + result.push( +
+ 公式 + IA検索結果 + IAをiframe Page:{page} +
+ ); + } + return result; + })(); + // パンくずリスト部分を作成 + let breadElement = (); + if (0 < d.breadLinks.length) { + const breadChildElement: JSX.Element[] = []; + breadChildElement.push(パンくずリスト：); + for (const bread of d.breadLinks) { + if (d.breadLinks.indexOf(bread) != 0) { + breadChildElement.push(＞); + } + const tagCount = categoryTag.getTagCount(bread); + breadChildElement.push( + {bread}({tagCount}) + ); + } + breadElement = ( + + {breadChildElement} + + ); + } + // タグ部分を作成 + let tagElement = (タグ無し); + if (d.tags.length != 0) { + const tagChildElements: JSX.Element[] = []; + tagChildElements.push(タグ：); + for (const tag of d.tags) { + if (d.tags.indexOf(tag) != 0) { + tagChildElements.push(／); + }; + const tagCount = categoryTag.getTagCount(tag); + tagChildElements.push( + {tag}({tagCount}) + ); + } + tagElement = ( + + {tagChildElements} + + ); + } + const hatebuElement = ( + + + ); + const result: { element: JSX.Element }[] = [ + { element: <>{d.articleId} }, + { element: {topCategory} }, + { + element: <> +
{d.title}
+
+ 公式 + IA検索結果 + IAをiframe + {breadElement} + {tagElement} + {hatebuElement} +
+ {page2After} + + }, + { + element: <>{timestampStr} + } + ] + return result; } \ No newline at end of file diff --git a/src/app/article/all/[pageId]/page.tsx b/src/app/article/all/[pageId]/page.tsx index 2b9685c..c94909a 100644 --- a/src/app/article/all/[pageId]/page.tsx +++ b/src/app/article/all/[pageId]/page.tsx @@ -4,6 +4,7 @@ import { ArticleListElement } from "../../_components/articleListElement"; import { PPV } from "../../../../util/consts"; import { chunk } from "../../../../util/arrayChunk"; import { pagenationElement } from "../../_components/pagenationElement"; +import { TableElement } from "../../../_components/tableElements"; dateformat.i18n.dayNames = [ '日', '月', '火', '水', '木', '金', '土', '日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日'