Sync in-facto-web

ykpythemind · May 4, 2024 · 89ea722 · 89ea722
1 parent 6e4c095
commit 89ea722
Show file tree

Hide file tree

Showing 12 changed files with 501 additions and 18 deletions.
diff --git a/website/_posts/isu.md b/website/_posts/isu.md
diff --git a/website/app/(main)/(sub)/layout.tsx b/website/app/(main)/(sub)/layout.tsx
@@ -71,7 +71,7 @@ const transitionStyles = {
   unmounted: {},
 } as const;
 
-type PageState = "about" | "posts" | "unknown";
+type PageState = "about" | "posts" | "videos" | "unknown";
 
 const Navigation = (props: { isVisible: boolean }) => {
   const { isVisible } = props;
@@ -87,6 +87,9 @@ const Navigation = (props: { isVisible: boolean }) => {
   if (path && path.startsWith("/posts")) {
     page = "posts";
   }
+  if (path && path.startsWith("/videos")) {
+    page = "videos";
+  }
 
   const currentArrow = "›";
 
@@ -118,14 +121,9 @@ const Navigation = (props: { isVisible: boolean }) => {
                 <A href="/about">About</A>
                 {page === "about" && ` ${currentArrow}`}
               </div>
-              <div>
-                <A
-                  href="https://www.youtube.com/@in-facto"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  Youtube
-                </A>
+              <div className={clsx(page === "videos" && "font-bold")}>
+                <A href="/videos">Videos</A>
+                {page === "videos" && ` ${currentArrow}`}
               </div>
               <div className={clsx(page === "posts" && "font-bold")}>
                 <A href={"/posts"}>Posts</A>

diff --git a/website/app/(main)/(sub)/videos/page.tsx b/website/app/(main)/(sub)/videos/page.tsx
@@ -0,0 +1,62 @@
+import { format, parseISO } from "date-fns";
+import { A } from "../../components/A";
+import { PageTitle } from "../../components/PageTitle";
+import { getAllPosts, getAllVideos } from "../../../../lib/api";
+import { Metadata } from "next";
+import { generateSharedMetadata } from "../../../../lib/generateSharedMetadata";
+import React from "react";
+import { VideoComponent } from "./video";
+
+export type VideoType = {
+  id: string;
+  title: string;
+  youtube?: string;
+  summary?: string;
+  published_at?: string;
+  credit?: string;
+  post_id?: string;
+  post_title?: string;
+};
+
+function Page() {
+  const videos = getAllVideos();
+
+  return (
+    <div>
+      <PageTitle title={"Videos"} />
+
+      <div className="mt-2">
+        <A
+          href="https://www.youtube.com/@in-facto"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Youtube Channel
+        </A>
+      </div>
+
+      <div className="mt-6">
+        {videos
+          .filter((v: VideoType) => !!v.youtube && !!v.published_at) // published_atがないものは表示しない.
+          .map((v: VideoType) => (
+            <div key={v.id} className="mb-7">
+              <VideoComponent
+                id={v.id}
+                title={v.title}
+                credit={v.credit}
+                published_at={v.published_at ?? ""}
+                youtube={v.youtube}
+                summary={v.summary}
+                postId={v.post_id}
+                postTitle={v.post_title}
+              />
+            </div>
+          ))}
+      </div>
+    </div>
+  );
+}
+
+export const metadata = generateSharedMetadata({ title: "Videos" });
+
+export default Page;
diff --git a/website/app/(main)/(sub)/videos/video.tsx b/website/app/(main)/(sub)/videos/video.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+import React from "react";
+import YouTube, { YouTubeProps } from "react-youtube";
+import { A } from "../../components/A";
+
+type Props = {
+  id: string;
+  title: string;
+  youtube?: string;
+  summary?: string;
+  published_at: string;
+  credit?: string;
+  postTitle?: string;
+  postId?: string;
+};
+
+export const VideoComponent = (props: Props) => {
+  const v = props;
+
+  const opts: YouTubeProps["opts"] = {
+    // height: "390",
+    // width: "640",
+    playerVars: {
+      // https://developers.google.com/youtube/player_parameters
+      // autoplay: 1,
+    },
+  };
+
+  return (
+    <>
+      <h4 className="font-bold my-2">{v.title}</h4>
+      <div className="text-sm">
+        {v.youtube && (
+          <div className="mb-2">
+            <YouTube videoId={v.youtube} opts={opts} />
+          </div>
+        )}
+
+        {v.summary && v.summary !== "" && (
+          <div className="mb-2">{nl2br(v.summary as string)}</div>
+        )}
+
+        {v.credit && v.credit !== "" && (
+          <div className="mb-2">{nl2br(v.credit as string)}</div>
+        )}
+
+        {v.postTitle && v.postId && (
+          <div className="mb-2">
+            関連する記事『<A href={`/posts/${v.postId}`}>{v.postTitle}</A>』
+          </div>
+        )}
+
+        <div className="text-gray-400 text-sm">
+          {v.published_at} | {v.id}
+        </div>
+      </div>
+    </>
+  );
+};
+
+const nl2br = (summary: string) => {
+  const regex = /(\n)/g;
+
+  return summary.split(regex).map((line) => {
+    if (line.match(regex)) {
+      return React.createElement("br");
+    } else {
+      return line;
+    }
+  });
+};
diff --git a/website/app/(main)/page.tsx b/website/app/(main)/page.tsx
@@ -31,13 +31,7 @@ const Page: NextPage = () => {
               <A href={"/about"}>About</A>
             </li>
             <li>
-              <A
-                href="https://www.youtube.com/@in-facto"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                Youtube
-              </A>
+              <A href={"/videos"}>Videos</A>
             </li>
             <li>
               <A href={"/posts"}>Posts</A>

diff --git a/website/lib/api.ts b/website/lib/api.ts
@@ -3,6 +3,7 @@ import { join } from "path";
 import matter from "gray-matter";
 import { isPreviewEnv } from "./env";
 import { isAfter, isBefore } from "date-fns";
+import * as csv from "csv-parse/sync";
 import { notFound } from "next/navigation";
 
 const postsDirectory = join(process.cwd(), "_posts");
@@ -61,3 +62,22 @@ export function getAllPosts(fields: string[] = []) {
 
   return posts;
 }
+
+export function getAllVideos(fields: string[] = []) {
+  const options = { columns: true };
+  const content = fs.readFileSync(join(process.cwd(), `video.csv`)).toString();
+  const records = csv.parse(content, options);
+  const videos = records.reverse();
+
+  console.log(records);
+
+  // // NEXT_PUBLIC_IS_PREVIEW=trueのときは、公開日が未来の記事も表示する
+  // if (!isPreviewEnv) {
+  //   const now = new Date();
+  //   posts = posts.filter((post) => {
+  //     return isBefore(new Date(post.date), now);
+  //   });
+  // }
+
+  return videos;
+}
diff --git a/website/package.json b/website/package.json
@@ -14,6 +14,7 @@
   "dependencies": {
     "@icons-pack/react-simple-icons": "^5.8.0",
     "clsx": "^1.2.1",
+    "csv-parse": "^5.5.5",
     "date-fns": "^2.29.3",
     "gray-matter": "^4.0.3",
     "next": "^13.4.3",
@@ -22,6 +23,7 @@
     "react-dom": "^18.2.0",
     "react-intersection-observer": "^9.4.1",
     "react-transition-group": "^4.4.5",
+    "react-youtube": "^10.1.0",
     "rehype-external-links": "^2.0.1",
     "rehype-stringify": "^9.0.3",
     "remark": "^14.0.2",

diff --git a/website/posts.list b/website/posts.list
@@ -1,3 +1,4 @@
+isu.md,1RQakI3N-jQSEidEEEJZs_qf5qF2diincuTn0m1sdhV0
 movie_and_hentai.md,1tBGooeNfESLO0Y82BnYzJ4g0-WHk0ZBOj41EqJVqJeE
 junrei.md,1iPbpvaY6fzuhwlCPWLb76t7_yqbkkenL2QEGWjkFKSo
 uraomote.md,1lZUqefGXfm3i2Wy0-5pSf7jFkdYomEaToYH_QLa1-jo

diff --git a/website/public/post_assets/isu/isu_meet.jpg b/website/public/post_assets/isu/isu_meet.jpg
diff --git a/website/public/post_assets/isu/record.jpg b/website/public/post_assets/isu/record.jpg
diff --git a/website/video.csv b/website/video.csv
@@ -0,0 +1,46 @@
+id,title,author,summary,youtube,credit,post_title,post_id,published_at,season,備考
+IFT_001,いんのこ,"藤本薪, in-facto",とあるYouTuberが撮影した、降霊術「いんのこ」についての記録映像,1NrZCPXxJOI,"原案：in-facto
+出演：藤本薪
+脚本・演出：トモヒロツジ
+撮影・編集：ykpythemind",in-facto始動と「いんのこ」について,beginning_of_in_facto,2022/10/09,1,
+IFT_002,土下座,in-facto,土下座（どげざ）とは、土の上に直に坐り、平伏して礼（お辞儀）を行うこと。 (Wikipedia 日本語版より),ntTZe7UHkos,"制作：in-facto
+出演：ykpythemind",土下座の撮影とフォーリー録音,dogeza,2022/11/13,1,
+IFT_003,Delivery,in-facto,"配達完了: ご注文商品の配達が完了しました。
+",RgjRnTFc48E,"制作：in-facto
+出演：藤本薪",令和ホラーの作り方,delivery,2022/12/11,1,
+IFT_004,天使化,in-facto,とある組織で行われている秘匿された儀式「光天の儀」の記録映像,zRwu7WkgIuc,"制作：in-facto
+出演：トモヒロツジ",in-factoとビーフシチュー。メリークリスマス。,tensika,2022/12/25,1,
+IFT_004_b,天使化(メッセージ),in-facto,,VggzrKyRaFc,,,,,1,"https://www.youtube.com/watch?v=VggzrKyRaFc
+での限定公開。
+天使化本編の前日談"
+IFT_005,傘,in-facto,子どもがおもちゃにしてしまい、傘を壊してしまいました。大変申し訳ございません。,5Nb8zeOqto4,"制作：in-facto
+出演：藤本薪、osd
+主題歌：澤田誠也",傘・公共・斬魄刀,kasa,2023/01/29,1,
+IFT_006,車中泊,in-facto,この映像はin-factoチームが入手した録画データを編集したものである,4QsMP-pxoEQ,"制作：in-facto
+出演：トモヒロツジ、藤本薪",【打ち上げ収録】車中泊,shachuhaku,2023/02/19,1,
+IFT_007,似顔絵,in-facto,似顔絵は写真よりも危険である。したがって、より慎重であるべきだ。,6k-ZYxlVqaw,"制作：in-facto
+出演：ニシムラタクヤ、ササキ伶菜","撮影は似顔絵よりも危険である。
+",nigaoe,2023/03/12,1,
+IFT_008,セラピー,in-facto,集団精神療法（グループセラピー）とは、同じトラウマを持つ人が集まり、話し合うことを通じて、問題の改善を図ろうとする精神療法の一種,xGaG2ESRjUw,"制作：in-facto
+出演：osd、トモヒロツジ、ykpythemind",誰もが皆それぞれの船を出す,therapy,2023/04/23,1,
+IFT_009,　　裏,in-facto,,7jAGfCgqiPY,"制作：in-facto
+出演：キムラジン",裏表〜GW大特別編〜,uraomote,2023/05/14,1,
+IFT_010,　　表,in-facto,,Ms50bkeE8eg,"制作：in-facto
+出演：osd",裏表〜GW大特別編〜,uraomote,2023/05/21,1,
+IFT_011,調査報告：L市,"osd, in-facto",壺三部作の1本目,tG2C0kIwRmI,"制作：in-facto
+出演：トモヒロツジ、osd、藤本薪、セイヤコバヤシ、小松稜、宮村優輔",,,2023/07/23,1,
+IFT_011_b,【予告】調査報告：L市,in-facto,予告編,wRb9yVgz6ws,,,,2023/07/17,1,
+IFT_012,健康生活 セラピーV,"藤本薪, in-facto",壺三部作の2本目,mFO1iUDEMXE,"制作：in-facto
+出演：喜多原光之、尾形美香",,,2023/08/27,1,
+IFT_013,特殊清掃,"トモヒロツジ, in-facto",壺三部作の3本目,jS7VMC6Rr_g,"制作：in-facto
+出演：osd、uskey、藤本薪",,,2023/10/16,1,
+IFT_014,巡礼,in-facto,,gIZVpTRkR04,制作：in-facto,シーズン2開始と「巡礼」,junrei,2024/02/18,2,
+IFT_015,信号,in-facto,,wgb-ua0_YrI,"制作：in-facto
+出演：
+川瀬知佐子
+志波昴星",映像と美術、hentai,movie_and_hentai,2024/03/31,2,
+IFT_016,椅子,in-facto,,OuEy4_fVpIc,"制作：in-facto
+出演：
+管理人　中尾みち雄
+サクラ　楠本奈々瀬
+ハルキ　橋本隆佑",嫌なカップルと椅子,isu,2024/05/05,2,
diff --git a/website/yarn.lock b/website/yarn.lock
@@ -1685,6 +1685,11 @@ csstype@^3.0.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9"
   integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==
 
+csv-parse@^5.5.5:
+  version "5.5.5"
+  resolved "https://registry.yarnpkg.com/csv-parse/-/csv-parse-5.5.5.tgz#68a271a9092877b830541805e14c8a80e6a22517"
+  integrity sha512-erCk7tyU3yLWAhk6wvKxnyPtftuy/6Ak622gOO7BCJ05+TYffnPCJF905wmOQm+BpkX54OdAl8pveJwUdpnCXQ==
+
 damerau-levenshtein@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
@@ -1702,6 +1707,13 @@ debug@4, debug@^4.0.0, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.4:
   dependencies:
     ms "2.1.2"
 
+debug@^2.6.6:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
+  dependencies:
+    ms "2.0.0"
+
 debug@^3.2.7:
   version "3.2.7"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
@@ -2367,7 +2379,7 @@ extend@^3.0.0, extend@^3.0.2:
   resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
   integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
 
-fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
+fast-deep-equal@3.1.3, fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
@@ -3701,6 +3713,11 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
+load-script@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/load-script/-/load-script-1.0.0.tgz#0491939e0bee5643ee494a7e3da3d2bac70c6ca4"
+  integrity sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA==
+
 locate-path@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
@@ -4088,6 +4105,11 @@ mri@^1.1.0:
   resolved "https://registry.yarnpkg.com/mri/-/mri-1.2.0.tgz#6721480fec2a11a4889861115a48b6cbe7cc8f0b"
   integrity sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==
 
+[email protected]:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+  integrity sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==
+
 [email protected]:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
@@ -4531,7 +4553,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.6.2, prop-types@^15.8.1:
+prop-types@15.8.1, prop-types@^15.6.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -4600,6 +4622,15 @@ react-transition-group@^4.4.5:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
+react-youtube@^10.1.0:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/react-youtube/-/react-youtube-10.1.0.tgz#7e5670c764f12eb408166e8eb438d788dc64e8b5"
+  integrity sha512-ZfGtcVpk0SSZtWCSTYOQKhfx5/1cfyEW1JN/mugGNfAxT3rmVJeMbGpA9+e78yG21ls5nc/5uZJETE3cm3knBg==
+  dependencies:
+    fast-deep-equal "3.1.3"
+    prop-types "15.8.1"
+    youtube-player "5.5.2"
+
 react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
@@ -4903,6 +4934,11 @@ signal-exit@^3.0.2, signal-exit@^3.0.3, signal-exit@^3.0.7:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
   integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
 
+sister@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/sister/-/sister-3.0.2.tgz#bb3e39f07b1f75bbe1945f29a27ff1e5a2f26be4"
+  integrity sha512-p19rtTs+NksBRKW9qn0UhZ8/TUI9BPw9lmtHny+Y3TinWlOa9jWh9xB0AtPSdmOy49NJJJSSe0Ey4C7h0TrcYA==
+
 sisteransi@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
@@ -5669,6 +5705,15 @@ yocto-queue@^0.1.0:
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
 
+[email protected]:
+  version "5.5.2"
+  resolved "https://registry.yarnpkg.com/youtube-player/-/youtube-player-5.5.2.tgz#052b86b1eabe21ff331095ffffeae285fa7f7cb5"
+  integrity sha512-ZGtsemSpXnDky2AUYWgxjaopgB+shFHgXVpiJFeNB5nWEugpW1KWYDaHKuLqh2b67r24GtP6HoSW5swvf0fFIQ==
+  dependencies:
+    debug "^2.6.6"
+    load-script "^1.0.0"
+    sister "^3.0.0"
+
 [email protected]:
   version "3.21.4"
   resolved "https://registry.yarnpkg.com/zod/-/zod-3.21.4.tgz#10882231d992519f0a10b5dd58a38c9dabbb64db"