commit

8 files changed, 437 insertions, 0 deletions

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<ReturnType<ArticleLoader["loadData"]>>[number];
+export function ArticleListElement(displayData: DisplayData[]) {
+  return (
+    <table className="w-full">
+      <thead className="bg-white border-b sticky top-0 text-md font-medium text-gray-900">
+        <tr>
+          <th scope="col" className="px-6 py-4 text-left">
+            No
+          </th>
+          <th scope="col" className="px-6 py-4 text-left">
+            カテゴリ
+          </th>
+          <th scope="col" className="px-6 py-4 text-left">
+            タイトル
+          </th>
+          <th scope="col" className="px-6 py-4 text-left">
+            日時
+          </th>
+        </tr>
+      </thead>
+      <tbody className="">
+        {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[] = [
+              (<hr key={`hr`} />)
+            ];
+            for (let page = 2; page <= d.maxPageNumber; page++) {
+              result.push(
+                <div className="flex gap-4 text-xs text-gray-300" key={`page-${page}`}>
+                  <a href={`https://akiba-souken.com/article/${d.articleId}/?page=${page}`} target="_blank" className="transition duration-300 ease-in-out hover:text-gray-900" title={officialLinkTitle}>公式</a>
+                  <a href={`https://web.archive.org/web/*/https://akiba-souken.com/article/${d.articleId}/?page=${page}`} target="_blank" className="transition duration-300 ease-in-out hover:text-gray-900" title={iaSearchResultLinkTitle}>IA検索結果</a>
+                  <Link href={`/iframe?src=article-${d.articleId}-${page}`} className="transition duration-300 ease-in-out hover:text-gray-900" title={iframeLinkTitle}>IAをiframe</Link> Page:{page}
+                </div>
+              );
+            }
+            return result;
+          })();
+          // パンくずリスト部分を作成
+          let breadElement = (<span key={`notice`}></span>);
+          if (0 < d.breadLinks.length) {
+            const breadChildElement: JSX.Element[] = [];
+            breadChildElement.push(<span className="mr-[-0.5rem]" key={`label`}>パンくずリスト：</span>);
+            for (const bread of d.breadLinks) {
+              if (d.breadLinks.indexOf(bread) != 0) {
+                breadChildElement.push(<span>＞</span>);
+              }
+              // 1つ目のパンくずリストはカテゴリだけど、2つ目以降のパンくずリストはタグと同じ
+              if (d.breadLinks.indexOf(bread) == 0) {
+                breadChildElement.push(<Link href={`/article/category/${bread}`} className="transition duration-300 ease-in-out hover:text-gray-900" key={`bread-${bread}`}>{bread}</Link>);
+              } else {
+                breadChildElement.push(<Link href={`/article/tag/${bread}`} className="transition duration-300 ease-in-out hover:text-gray-900" key={`bread-${bread}`}>{bread}</Link>);
+              }
+            }
+            breadElement = (
+              <span className="flex gap-0.5">
+                {breadChildElement}
+              </span>
+            );
+          }
+          // タグ部分を作成
+          let tagElement = (<span key={`notice`}>タグ無し</span>);
+          if (d.tags.length != 0) {
+            const tagChildElements: JSX.Element[] = [];
+            tagChildElements.push(<span className="mr-[-0.5rem]" key={`label`}>タグ：</span>);
+            for (const tag of d.tags) {
+              if (d.tags.indexOf(tag) != 0) {
+                tagChildElements.push(<span>／</span>);
+              }
+              tagChildElements.push(<Link href={`/article/tag/${tag}`} className="transition duration-300 ease-in-out hover:text-gray-900" key={`tag-${tag}`}>{tag}</Link>);
+            }
+            tagElement = (
+              <span className="flex gap-0.5">
+                {tagChildElements}
+              </span>
+            );
+          }
+          const hatebuElement = (
+            <a href={`https://b.hatena.ne.jp/entry/${originalUrl}`}>
+              <img src={`https://b.hatena.ne.jp/entry/image/${originalUrl}`} />
+            </a>
+          );
+          return (
+            <tr className="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100 text-sm text-gray-900 font-light">
+              <td className="px-1 py-1">{d.articleId}</td>
+              <td className="px-1 py-1">
+                <Link href={`/article/category/${topCategory}`} className="transition duration-300 ease-in-out hover:text-gray-900 original-href" >{topCategory}</Link>
+              </td>
+              <td className="px-1 py-1">
+                <div>{d.title}</div>
+                <div className="flex gap-4 text-xs text-gray-300">
+                  <a href={originalUrl} target="_blank" className="transition duration-300 ease-in-out hover:text-gray-900" title={officialLinkTitle}>公式</a>
+                  <a href={`https://web.archive.org/web/*/${originalUrl}`} target="_blank" className="transition duration-300 ease-in-out hover:text-gray-900" title={iaSearchResultLinkTitle}>IA検索結果</a>
+                  <Link href={`/iframe?src=article-${d.articleId}`} className="transition duration-300 ease-in-out hover:text-gray-900" title={iframeLinkTitle}>IAをiframe</Link>
+                  {breadElement}
+                  {tagElement}
+                  {hatebuElement}
+                </div>
+                {page2After}
+              </td>
+              <td className="px-1 py-1">{timestampStr}</td>
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+}
\ 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<string, string>,
+  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 (
+    <div className="p-1 gap-16">
+      {pagenationElement(pageId, chunkdData.length)}
+      <div className="text-right">全:{loadedData.length}件</div>
+      {ArticleListElement(displayData)}
+      {pagenationElement(pageId, chunkdData.length)}
+    </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 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<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/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<string, string>,
+  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 (
+    <div className="p-1 gap-16">
+      <div className="text-center">カテゴリ:{nowPageCategoryName} の記事一覧</div>
+      <div className="text-right">全:{loadedData.length}件</div>
+      {ArticleListElement(loadedData)}
+    </div>
+  );
+}
+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<string, string>,
+  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(<span key={t.name}><Link href={`/article/category/${t.name}`}>{t.name}({t.count})</Link></span>)
+  })
+  return (
+    <div className="p-8 pb-20 gap-16 sm:p-20">
+      <h1>記事にセットされているカテゴリの一覧</h1>
+      <div className="flex gap-2">
+        {categoryListElement}
+      </div>
+    </div>
+  );
+}
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<string, string>,
+  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 (
+    <div className="p-1 gap-16">
+      <div className="text-center">タグ:{nowPageTagName} の記事一覧</div>
+      <div className="text-right">全:{loadedData.length}件</div>
+      {ArticleListElement(loadedData)}
+    </div>
+  );
+}
+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<string, string>,
+  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(<span key={t.name}><Link href={`/article/tag/${t.name}`}>{t.name}({t.count})</Link></span>)
+  })
+  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>
+  );
+}
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;
+}