summaryrefslogtreecommitdiff
path: root/src/app
diff options
context:
space:
mode:
Diffstat (limited to 'src/app')
-rw-r--r--src/app/article/_components/pagenationElement.tsx100
-rw-r--r--src/app/article/all/[pageId]/page.tsx122
-rw-r--r--src/app/article/tag/[tagName]/[pageNum]/page.tsx54
-rw-r--r--src/app/article/tag/[tagName]/page.tsx33
4 files changed, 182 insertions, 127 deletions
diff --git a/src/app/article/_components/pagenationElement.tsx b/src/app/article/_components/pagenationElement.tsx
new file mode 100644
index 0000000..79191bc
--- /dev/null
+++ b/src/app/article/_components/pagenationElement.tsx
@@ -0,0 +1,100 @@
+import Link from "next/link";
+import { createPagenation } from "../../../util/pagenation";
+
+export function pagenationElement(now: number, max: number, getHrefBuilder: (page: number) => string) {
+ 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(
+ <li key={v.key}>
+ <span className="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
+ <span className="sr-only">Previous</span>
+ <svg className="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
+ <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4" />
+ </svg>
+ </span>
+ </li>
+ );
+ } else {
+ liElements.push(
+ <li key={v.key}>
+ <Link href={getHrefBuilder(v.link)} className="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
+ <span className="sr-only">Previous</span>
+ <svg className="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
+ <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4" />
+ </svg>
+ </Link>
+ </li>
+ );
+ }
+ } else if (v.type == "next") {
+ if (v.link == null) {
+ liElements.push(
+ <li key={v.key}>
+ <span className="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
+ <span className="sr-only">Next</span>
+ <svg className="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
+ <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4" />
+ </svg>
+ </span>
+ </li>
+ );
+ } else {
+ liElements.push(
+ <li key={v.key}>
+ <Link href={getHrefBuilder(v.link)} className="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
+ <span className="sr-only">Next</span>
+ <svg className="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
+ <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4" />
+ </svg>
+ </Link>
+ </li>
+ );
+ }
+ } else if (v.type == "num") {
+ if (v.link == null) {
+ if (v.num == now) {
+ liElements.push(
+ <li key={v.key}>
+ <span
+ className="z-10 flex items-center justify-center px-4 h-10 leading-tight text-blue-600 border border-blue-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white"
+ >{v.num}</span>
+ </li>
+ );
+ } else {
+ liElements.push(
+ <li key={v.key}>
+ <span
+ className="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+ >{v.num}</span>
+ </li>
+ );
+ }
+ } else {
+ liElements.push(
+ <li key={v.key}>
+ <Link
+ href={getHrefBuilder(v.link)}
+ className="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+ >{v.num}</Link>
+ </li>
+ );
+ }
+ } else if (v.type == "sp") {
+ <li key={v.key}>
+ <span
+ className="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+ >...</span>
+ </li>
+ }
+ }
+ return (
+ <nav className="flex justify-center pt-10">
+ <ul className="flex items-center -space-x-px h-10 text-base">
+ {liElements}
+ </ul>
+ </nav>
+ );
+}
diff --git a/src/app/article/all/[pageId]/page.tsx b/src/app/article/all/[pageId]/page.tsx
index 622edbb..2b9685c 100644
--- a/src/app/article/all/[pageId]/page.tsx
+++ b/src/app/article/all/[pageId]/page.tsx
@@ -1,8 +1,9 @@
-import Link from "next/link";
import { ArticleLoader } from "../../../../util/articleLoader";
import dateformat from "dateformat";
-import { createPagenation } from "../../../../util/pagenation";
import { ArticleListElement } from "../../_components/articleListElement";
+import { PPV } from "../../../../util/consts";
+import { chunk } from "../../../../util/arrayChunk";
+import { pagenationElement } from "../../_components/pagenationElement";
dateformat.i18n.dayNames = [
'日', '月', '火', '水', '木', '金', '土',
'日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日'
@@ -26,119 +27,21 @@ export default async function Page(context: PageType) {
const displayData = chunkdData[pageId - 1];
return (
<div className="p-1 gap-16">
- {pagenationElement(pageId, chunkdData.length)}
+ {pagenationElement(pageId, chunkdData.length, getHrefBuilder)}
<div className="text-right">全:{loadedData.articles.length}件</div>
{ArticleListElement(displayData, loadedData.categoryTag)}
- {pagenationElement(pageId, chunkdData.length)}
+ {pagenationElement(pageId, chunkdData.length, getHrefBuilder)}
</div>
);
}
-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(
- <li key={v.key}>
- <span className="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
- <span className="sr-only">Previous</span>
- <svg className="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
- <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4" />
- </svg>
- </span>
- </li>
- );
- } else {
- liElements.push(
- <li key={v.key}>
- <Link href={`/article/all/page-${v.link}`} className="flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-500 bg-white border border-e-0 border-gray-300 rounded-s-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
- <span className="sr-only">Previous</span>
- <svg className="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
- <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4" />
- </svg>
- </Link>
- </li>
- );
- }
- } else if (v.type == "next") {
- if (v.link == null) {
- liElements.push(
- <li key={v.key}>
- <span className="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
- <span className="sr-only">Next</span>
- <svg className="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
- <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4" />
- </svg>
- </span>
- </li>
- );
- } else {
- liElements.push(
- <li key={v.key}>
- <Link href={`/article/all/page-${v.link}`} className="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-e-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
- <span className="sr-only">Next</span>
- <svg className="w-3 h-3 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
- <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4" />
- </svg>
- </Link>
- </li>
- );
- }
- } else if (v.type == "num") {
- if (v.link == null) {
- if (v.num == now) {
- liElements.push(
- <li key={v.key}>
- <span
- className="z-10 flex items-center justify-center px-4 h-10 leading-tight text-blue-600 border border-blue-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white"
- >{v.num}</span>
- </li>
- );
- } else {
- liElements.push(
- <li key={v.key}>
- <span
- className="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
- >{v.num}</span>
- </li>
- );
- }
- } else {
- liElements.push(
- <li key={v.key}>
- <Link
- href={`/article/all/page-${v.link}`}
- className="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
- >{v.num}</Link>
- </li>
- );
- }
- } else if (v.type == "sp") {
- <li key={v.key}>
- <span
- className="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
- >...</span>
- </li>
- }
- }
- return (
- <nav className="flex justify-center pt-10">
- <ul className="flex items-center -space-x-px h-10 text-base">
- {liElements}
- </ul>
- </nav>
- );
+function getHrefBuilder(page: number): string {
+ return `/article/all/page-${page}`;
}
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 loadedData = await ArticleLoader.instance.loadData();
@@ -147,14 +50,3 @@ export async function generateStaticParams() {
return { pageId: `page-${index + 1}`, data: data };
});
}
-
-function chunk<T = any>(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/tag/[tagName]/[pageNum]/page.tsx b/src/app/article/tag/[tagName]/[pageNum]/page.tsx
new file mode 100644
index 0000000..1820f65
--- /dev/null
+++ b/src/app/article/tag/[tagName]/[pageNum]/page.tsx
@@ -0,0 +1,54 @@
+import { chunk } from "../../../../../util/arrayChunk";
+import { ArticleLoader } from "../../../../../util/articleLoader";
+import { PPV } from "../../../../../util/consts";
+import { ArticleListElement } from "../../../_components/articleListElement";
+import { pagenationElement } from "../../../_components/pagenationElement";
+
+type PageType = {
+ searchParams: Record<string, string>,
+ params: {
+ tagName: string,
+ pageNum: string,
+ }
+}
+export async function generateMetadata(context: PageType) {
+ return {
+ title: `アキバ総研アーカイブ：タグの記事一覧 ${context.params.tagName}`,
+ }
+}
+export default async function Page(context: PageType) {
+ const pageNumber = Number(context.params.pageNum);
+ const nowPageTagName = decodeURIComponent(context.params.tagName);
+ const categoryTag = await ArticleLoader.instance.getCategoryTag();
+ const loadedData = await ArticleLoader.instance.getTagArticle(nowPageTagName);
+ const chunkdData = chunk(loadedData, PPV);
+ const displayData = chunkdData[pageNumber - 1];
+ return (
+ <div className="p-1 gap-16">
+ <div className="text-center">タグ:{nowPageTagName} の記事一覧</div>
+ <div className="text-right">全:{loadedData.length}件</div>
+ {pagenationElement(pageNumber, chunkdData.length, getHrefBuilder(nowPageTagName))}
+ {ArticleListElement(displayData, categoryTag)}
+ {pagenationElement(pageNumber, chunkdData.length, getHrefBuilder(nowPageTagName))}
+ </div>
+ );
+}
+function getHrefBuilder(tagName: string) {
+ return (page: number) => {
+ if (page == 1) {
+ return `/article/tag/${tagName}/`;
+ } else {
+ return `/article/tag/${tagName}/${page}/`;
+ }
+ }
+}
+export async function generateStaticParams() {
+ const articleData = await ArticleLoader.instance.loadData();
+ const result: PageType["params"][] = [];
+ for (const [tag, data] of articleData.categoryTag.data) {
+ for (let page = 2; page <= Math.ceil(data.count / PPV); page++) {
+ result.push({ tagName: tag, pageNum: String(page) });
+ }
+ }
+ return result;
+}
diff --git a/src/app/article/tag/[tagName]/page.tsx b/src/app/article/tag/[tagName]/page.tsx
index 7fbce4c..4cef1d3 100644
--- a/src/app/article/tag/[tagName]/page.tsx
+++ b/src/app/article/tag/[tagName]/page.tsx
@@ -1,5 +1,8 @@
+import { chunk } from "../../../../util/arrayChunk";
import { ArticleLoader } from "../../../../util/articleLoader";
+import { PPV } from "../../../../util/consts";
import { ArticleListElement } from "../../_components/articleListElement";
+import { pagenationElement } from "../../_components/pagenationElement";
type PageType = {
searchParams: Record<string, string>,
params: {
@@ -13,24 +16,30 @@ export async function generateMetadata(context: PageType) {
}
export default async function Page(context: PageType) {
const nowPageTagName = decodeURIComponent(context.params.tagName);
- const loadedData = await ArticleLoader.instance.loadData()
- const filterdArticles = loadedData.articles.filter(article => {
- if (article.tags.includes(nowPageTagName)) {
- return true;
- }
- if (article.breadLinks.includes(nowPageTagName)) {
- return true;
- }
- return false;
- });
+ const categoryTag = await ArticleLoader.instance.getCategoryTag();
+ const loadedData = await ArticleLoader.instance.getTagArticle(nowPageTagName);
+ const chunkdData = chunk(loadedData, PPV);
+ const displayData = chunkdData[0];
return (
<div className="p-1 gap-16">
<div className="text-center">タグ:{nowPageTagName} の記事一覧</div>
- <div className="text-right">全:{filterdArticles.length}件</div>
- {ArticleListElement(filterdArticles, loadedData.categoryTag)}
+ <div className="text-right">全:{loadedData.length}件</div>
+ {pagenationElement(1, chunkdData.length, getHrefBuilder(nowPageTagName))}
+ {ArticleListElement(displayData, categoryTag)}
+ {pagenationElement(1, chunkdData.length, getHrefBuilder(nowPageTagName))}
</div>
);
}
+function getHrefBuilder(tagName: string) {
+ return (page: number) => {
+ if (page == 1) {
+ return `/article/tag/${tagName}/`;
+ } else {
+ return `/article/tag/${tagName}/${page}/`;
+ }
+ }
+}
+
export async function generateStaticParams() {
const articleData = await ArticleLoader.instance.loadData();
const result: { tagName: string }[] = [];
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-26 22:28:10 +0000