From ba0c8d73e585d7ff249dd90684254bc7fa025544 Mon Sep 17 00:00:00 2001 From: Fushihara <1039534+fushihara@users.noreply.github.com> Date: Mon, 23 Sep 2024 15:19:25 +0900 Subject: commit --- src/app/article/_components/articleListElement.tsx | 123 +++++++++++++++ src/app/article/all/[pageId]/page.tsx | 165 +++++++++++++++++++++ src/app/article/category/[categoryName]/page.tsx | 44 ++++++ src/app/article/category/page.tsx | 29 ++++ src/app/article/category/style.css | 3 + src/app/article/tag/[tagName]/page.tsx | 40 +++++ src/app/article/tag/page.tsx | 30 ++++ src/app/article/tag/style.css | 3 + 8 files changed, 437 insertions(+) create mode 100644 src/app/article/_components/articleListElement.tsx create mode 100644 src/app/article/all/[pageId]/page.tsx create mode 100644 src/app/article/category/[categoryName]/page.tsx create mode 100644 src/app/article/category/page.tsx create mode 100644 src/app/article/category/style.css create mode 100644 src/app/article/tag/[tagName]/page.tsx create mode 100644 src/app/article/tag/page.tsx create mode 100644 src/app/article/tag/style.css (limited to 'src/app/article') diff --git a/src/app/article/_components/articleListElement.tsx b/src/app/article/_components/articleListElement.tsx new file mode 100644 index 0000000..21ee947 --- /dev/null +++ b/src/app/article/_components/articleListElement.tsx @@ -0,0 +1,123 @@ +import Link from "next/link"; +import dateformat from "dateformat"; +import { ArticleLoader } from "../../../util/articleLoader"; +dateformat.i18n.dayNames = [ + '日', '月', '火', '水', '木', '金', '土', + '日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日' +]; +type DisplayData = Awaited>[number]; +export function ArticleListElement(displayData: DisplayData[]) { + 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(＞); + } + // 1つ目のパンくずリストはカテゴリだけど、2つ目以降のパンくずリストはタグと同じ + if (d.breadLinks.indexOf(bread) == 0) { + breadChildElement.push({bread}); + } else { + breadChildElement.push({bread}); + } + } + 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(／); + } + tagChildElements.push({tag}); + } + tagElement = ( + + {tagChildElements} + + ); + } + const hatebuElement = ( + + + + ); + return ( + + + + + + + ); + })} + +
+ No + + カテゴリ + + タイトル + + 日時 +
{d.articleId} + {topCategory} + +
{d.title}
+
+ 公式 + IA検索結果 + IAをiframe + {breadElement} + {tagElement} + {hatebuElement} +
+ {page2After} + 		{timestampStr}
+ ); +} \ No newline at end of file diff --git a/src/app/article/all/[pageId]/page.tsx b/src/app/article/all/[pageId]/page.tsx new file mode 100644 index 0000000..fd72772 --- /dev/null +++ b/src/app/article/all/[pageId]/page.tsx @@ -0,0 +1,165 @@ +import Link from "next/link"; +import { ArticleLoader } from "../../../../util/articleLoader"; +import dateformat from "dateformat"; +import { createPagenation } from "../../../../util/pagenation"; +import { ArticleListElement } from "../../_components/articleListElement"; +dateformat.i18n.dayNames = [ + '日', '月', '火', '水', '木', '金', '土', + '日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日' +]; +type PageType = { + searchParams: Record, + params: { + pageId: string, + } +} +export async function generateMetadata(context: PageType) { + const pageId = getPageIdNumber(context.params.pageId); + return { + title: `アキバ総研アーカイブ：ページ ${pageId}`, + } +} +export default async function Page(context: PageType) { + const pageId = getPageIdNumber(context.params.pageId); + const al = new ArticleLoader() + const loadedData = await al.loadData(); + const chunkdData = chunk(loadedData, PPV); + const displayData = chunkdData[pageId - 1]; + return ( +
+ {pagenationElement(pageId, chunkdData.length)} +
全:{loadedData.length}件
+ {ArticleListElement(displayData)} + {pagenationElement(pageId, chunkdData.length)} +
+ ); +} +function pagenationElement(now: number, max: number) { + const pagenationData = createPagenation({ now: now, max: max, between: 2 }); + const liElements: JSX.Element[] = []; + for (const v of pagenationData) { + if (v.type == "back") { + if (v.link == null) { + liElements.push( +
  • + + Previous + + +
    • + ); + } else { + liElements.push( +
  • + + Previous + + +
    • + ); + } + } else if (v.type == "next") { + if (v.link == null) { + liElements.push( +
  • + + Next + + +
    • + ); + } else { + liElements.push( +
  • + + Next + + +
    • + ); + } + } else if (v.type == "num") { + if (v.link == null) { + if (v.num == now) { + liElements.push( +
  • + {v.num} +
    • + ); + } else { + liElements.push( +
  • + {v.num} +
    • + ); + } + } else { + liElements.push( +
  • + {v.num} +
    • + ); + } + } else if (v.type == "sp") { +
  • + ... +
    • + } + } + return ( + + ); +} +function getPageIdNumber(pageIdStr: string) { + const m = pageIdStr.match(/page-(\d+)/)!; + const id = Number(m[1]); + return id; +} +const PPV = Number(process.env["AKIBA_SOUKEN_AR_ITEM_PPV"] ?? "100"); +if (!Number.isInteger(PPV)) { + throw new Error(`AKIBA_SOUKEN_AR_ITEM_PPVに整数をセットして下さい`); +} +//export const dynamicParams = true; +export async function generateStaticParams() { + const al = new ArticleLoader() + const loadedData = await al.loadData(); + const chunkdData = chunk(loadedData, PPV); + return chunkdData.map((data, index) => { + return { pageId: `page-${index + 1}`, data: data }; + }); +} +// export const generateStaticParams = async () => { +// return [{ articleid: "123" }]; +// }; + +function chunk(list: T[], len: number) { + if (len <= 0) { + throw new Error(); + } + const result: T[][] = []; + for (let i = 0; i < list.length; i += len) { + result.push(list.slice(i, i + len)); + } + return result; +} \ No newline at end of file diff --git a/src/app/article/category/[categoryName]/page.tsx b/src/app/article/category/[categoryName]/page.tsx new file mode 100644 index 0000000..3e60a89 --- /dev/null +++ b/src/app/article/category/[categoryName]/page.tsx @@ -0,0 +1,44 @@ +import { ArticleLoader } from "../../../../util/articleLoader"; +import { ArticleListElement } from "../../_components/articleListElement"; +type PageType = { + searchParams: Record, + params: { + categoryName: string, + } +} +export async function generateMetadata(context: PageType) { + return { + title: `アキバ総研アーカイブ：カテゴリ ${decodeURIComponent(context.params.categoryName)}`, + } +} +export default async function Page(context: PageType) { + const al = new ArticleLoader() + const nowPageCategoryName = decodeURIComponent(context.params.categoryName); + const loadedData = await al.loadData().then(articles => { + const filterd = articles.filter(article => { + if (article.breadLinks.length == 0) { + return false; + } + const category = article.breadLinks[0]; + if (category == nowPageCategoryName) { + return true; + } else { + return false; + } + }); + return filterd; + }); + return ( +
    +
    カテゴリ:{nowPageCategoryName} の記事一覧
    +
    全:{loadedData.length}件
    + {ArticleListElement(loadedData)} +
    + ); +} +export async function generateStaticParams() { + const categoryList = await new ArticleLoader().getCategoryList(); + return categoryList.map((data, index) => { + return { categoryName: data.name }; + }); +} diff --git a/src/app/article/category/page.tsx b/src/app/article/category/page.tsx new file mode 100644 index 0000000..4976054 --- /dev/null +++ b/src/app/article/category/page.tsx @@ -0,0 +1,29 @@ +import Link from "next/link"; +import { ArticleLoader } from "../../../util/articleLoader"; +import "./style.css"; +type PageType = { + searchParams: Record, + params: { + tagName: string, + } +} +export async function generateMetadata(context: PageType) { + return { + title: `アキバ総研アーカイブ：カテゴリ一覧`, + } +} +export default async function Page(context: PageType) { + const tagList = await new ArticleLoader().getCategoryList(); + const categoryListElement: JSX.Element[] = []; + tagList.forEach(t => { + categoryListElement.push({t.name}({t.count})) + }) + return ( +
    +

    記事にセットされているカテゴリの一覧

    +
    + {categoryListElement} +
    +
    + ); +} diff --git a/src/app/article/category/style.css b/src/app/article/category/style.css new file mode 100644 index 0000000..f8a5c5f --- /dev/null +++ b/src/app/article/category/style.css @@ -0,0 +1,3 @@ +h1,h2,h3 { + all: revert; +} diff --git a/src/app/article/tag/[tagName]/page.tsx b/src/app/article/tag/[tagName]/page.tsx new file mode 100644 index 0000000..3df1f1e --- /dev/null +++ b/src/app/article/tag/[tagName]/page.tsx @@ -0,0 +1,40 @@ +import { ArticleLoader } from "../../../../util/articleLoader"; +import { ArticleListElement } from "../../_components/articleListElement"; +type PageType = { + searchParams: Record, + params: { + tagName: string, + } +} +export async function generateMetadata(context: PageType) { + return { + title: `アキバ総研アーカイブ：ページ ${context.params.tagName}`, + } +} +export default async function Page(context: PageType) { + const al = new ArticleLoader() + const nowPageTagName = decodeURIComponent(context.params.tagName); + const loadedData = await al.loadData().then(articles => { + const filterd = articles.filter(article => { + if (article.tags.includes(nowPageTagName)) { + return true; + } else { + return false; + } + }); + return filterd; + }); + return ( +
    +
    タグ:{nowPageTagName} の記事一覧
    +
    全:{loadedData.length}件
    + {ArticleListElement(loadedData)} +
    + ); +} +export async function generateStaticParams() { + const tagList = await new ArticleLoader().getTagList(); + return tagList.map((data, index) => { + return { tagName: data.name }; + }); +} diff --git a/src/app/article/tag/page.tsx b/src/app/article/tag/page.tsx new file mode 100644 index 0000000..211ca94 --- /dev/null +++ b/src/app/article/tag/page.tsx @@ -0,0 +1,30 @@ +import Link from "next/link"; +import { ArticleLoader } from "../../../util/articleLoader"; +import "./style.css"; +type PageType = { + searchParams: Record, + params: { + tagName: string, + } +} +export async function generateMetadata(context: PageType) { + return { + title: `アキバ総研アーカイブ：タグ一覧`, + } +} +export default async function Page(context: PageType) { + const tagList = await new ArticleLoader().getTagList(); + const tagsElement: JSX.Element[] = []; + tagList.forEach(t => { + tagsElement.push({t.name}({t.count})) + }) + return ( +
    +

    著名なタグ一覧

    +

    記事にセットされているタグの一覧

    +
    + {tagsElement} +
    +
    + ); +} diff --git a/src/app/article/tag/style.css b/src/app/article/tag/style.css new file mode 100644 index 0000000..f8a5c5f --- /dev/null +++ b/src/app/article/tag/style.css @@ -0,0 +1,3 @@ +h1,h2,h3 { + all: revert; +} -- cgit v1.2.3