Sync in-facto-web

ykpythemind · Dec 15, 2024 · 347eb33 · 347eb33
1 parent bcc80f1
commit 347eb33
Show file tree

Hide file tree

Showing 14 changed files with 823 additions and 329 deletions.
diff --git a/website/app/(main)/(sub)/about/page.tsx b/website/app/(main)/(sub)/about/page.tsx
@@ -1,24 +1,23 @@
 import Link from "next/link";
 import { PageTitle } from "../../components/PageTitle";
 import { A } from "../../components/A";
-import { contactUrl } from "../layout";
 import { Metadata } from "next";
 import { generateSharedMetadata } from "../../../../lib/generateSharedMetadata";
 
 const Page = () => {
   return (
     <div>
-      <PageTitle title={"About"} />
+      <PageTitle title={"チームについて"} />
 
       <div className="mt-5">
         <p className="align-middle">
-          「真の楽しさを追求する」制作コミュニティ、
+          「おもしろいホラーをつくる」をコンセプトに、2022年から
           <img
             src={"/in-facto-black.png"}
             alt={"in-facto"}
-            className={"w-[50px] inline align-middle -mt-1 ml-0.5 mr-0.5"}
+            className={"w-[50px] inline align-middle -mt-1.5 ml-0.5 mr-0.5"}
           />
-          から映像制作チームが発足。「自分たちのホラー」を追求するべく活動中。
+          として活動中。
         </p>
         <div className="mt-5 flex space-x-3">
           <A
@@ -36,10 +35,6 @@ const Page = () => {
           >
             X
           </A>
-
-          <A href={contactUrl} target="_blank" rel={"noopener noreferrer"}>
-            Contact
-          </A>
         </div>
 
         <div className="mt-16 pt-10 md:pt-5">
@@ -148,7 +143,7 @@ const X = () => {
 };
 
 export const metadata: Metadata = generateSharedMetadata({
-  title: "About",
+  title: "チームについて",
 });
 
 export default Page;
diff --git a/website/app/(main)/(sub)/archives/page.tsx b/website/app/(main)/(sub)/archives/page.tsx
@@ -0,0 +1,35 @@
+import { A } from "../../components/A";
+import { PageTitle } from "../../components/PageTitle";
+import { generateSharedMetadata } from "../../../../lib/generateSharedMetadata";
+
+function Page() {
+  return (
+    <div>
+      <PageTitle title={"アーカイブ"} />
+
+      <div className="mt-6">
+        <ul className="list-disc list-inside">
+          <li>
+            <A
+              target="_blank"
+              rel="noopener noreferrer"
+              href="https://docs.google.com/presentation/d/1J7sBjifq_ZmhktXqs2VEih5ouVxa7I3upSLh-8StGpc/edit#slide=id.p"
+            >
+              in-facto meet-up vol.2 Closing Talk 資料
+            </A>
+          </li>
+          <li>
+            <A href="/meetup2">in-facto meet-up vol.2</A>
+          </li>
+          <li>
+            <A href="/meetup1">in-facto meet-up vol.1</A>
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+}
+
+export const metadata = generateSharedMetadata({ title: "アーカイブ" });
+
+export default Page;
diff --git a/website/app/(main)/(sub)/contact/page.tsx b/website/app/(main)/(sub)/contact/page.tsx
@@ -0,0 +1,25 @@
+import { A } from "../../components/A";
+import { PageTitle } from "../../components/PageTitle";
+import { generateSharedMetadata } from "../../../../lib/generateSharedMetadata";
+
+const contactUrl = "https://forms.gle/vBwXbBzrsnfGx3qT9";
+
+function Page() {
+  return (
+    <div>
+      <PageTitle title={"問い合わせ"} />
+
+      <div className="mt-6">
+        お問い合わせは{" "}
+        <A href={contactUrl} target="_blank" rel="noopener noreferrer">
+          こちら
+        </A>{" "}
+        からお願いします。通常3,4日以内に返信いたします。
+      </div>
+    </div>
+  );
+}
+
+export const metadata = generateSharedMetadata({ title: "問い合わせ" });
+
+export default Page;
diff --git a/website/app/(main)/(sub)/layout.tsx b/website/app/(main)/(sub)/layout.tsx
@@ -1,135 +1,7 @@
 "use client";
 
-import Link from "next/link";
-import { clsx } from "clsx";
-import { useEffect, useRef, useState } from "react";
-// import { useInView } from "react-intersection-observer";
-import { A } from "../components/A";
-import { Transition } from "react-transition-group";
-import { usePathname } from "next/navigation";
-
 const Layout = ({ children }: { children: React.ReactElement }) => {
-  // const { ref, inView, entry } = useInView({
-  //   fallbackInView: true,
-  //   initialInView: true,
-  // });
-
-  // const isNavigationVisible = !inView;
-  const isNavigationVisible = true;
-
-  return (
-    <>
-      <Navigation isVisible={isNavigationVisible} />
-
-      <main
-        className={
-          "max-w-lg w-11/12 px-2 md:px-0 md:w-4/5 mx-auto grid min-h-full"
-        }
-        style={{ gridTemplateRows: "auto 1fr auto" }}
-      >
-        <div className="mt-8 pb-2 md:hidden">
-          <div className="inline-block">
-            <Link href={"/"} passHref>
-              <img
-                src={"/in-facto-black.png"}
-                alt={"in-facto"}
-                className={"w-[100px] md:w-[160px]"}
-              />
-            </Link>
-          </div>
-        </div>
-        <div className="mt-7">{children}</div>
-
-        <footer className="mt-10 mb-12 text-gray-600 text-sm font-serif font-light tracking-wider">
-          <div className="flex">
-            <div>
-              <A href={"/"}>in-facto</A> (c) 2022-
-            </div>
-
-            <div className="ml-auto"></div>
-          </div>
-        </footer>
-      </main>
-    </>
-  );
-};
-
-export const contactUrl = "https://forms.gle/vBwXbBzrsnfGx3qT9";
-
-const duration = 300;
-
-const defaultStyle = {
-  transition: `opacity ${duration}ms ease-in-out`,
-  opacity: 0,
-};
-
-const transitionStyles = {
-  entering: { opacity: 1 },
-  entered: { opacity: 1 },
-  exiting: { opacity: 0 },
-  exited: { opacity: 0 },
-  unmounted: {},
-} as const;
-
-type PageState = "about" | "posts" | "videos" | "unknown";
-
-const Navigation = (props: { isVisible: boolean }) => {
-  const { isVisible } = props;
-  const nodeRef = useRef(null);
-
-  const path = usePathname();
-
-  let page: PageState = "unknown";
-
-  if (path && path.startsWith("/about")) {
-    page = "about";
-  }
-  if (path && path.startsWith("/posts")) {
-    page = "posts";
-  }
-  if (path && path.startsWith("/videos")) {
-    page = "videos";
-  }
-
-  return (
-    <Transition nodeRef={nodeRef} in={isVisible} timeout={5000} appear={false}>
-      {(state) => {
-        // not working now...
-
-        // console.log(state);
-        return (
-          <div
-            className={clsx("invisible md:visible", "fixed", "py-7", "pl-5")}
-            style={{
-              ...defaultStyle,
-              ...transitionStyles[state],
-            }}
-          >
-            <div className="flex flex-col gap-1">
-              <div>
-                <A href={"/"}>
-                  <img
-                    src={"/in-facto-black.png"}
-                    alt={"in-facto"}
-                    className={"w-[100px]"}
-                  />
-                </A>
-              </div>
-              <div className={clsx("mt-3", page === "about" && "font-bold")}>
-                <A href="/about">About</A>
-              </div>
-              <div className={clsx(page === "videos" && "font-bold")}>
-                <A href="/videos">Videos</A>
-              </div>
-              <div className={clsx(page === "posts" && "font-bold")}>
-                <A href={"/posts"}>Posts</A>
-              </div>
-            </div>
-          </div>
-        );
-      }}
-    </Transition>
-  );
+  return <div className="w-full">{children}</div>;
 };
 
 export default Layout;
diff --git a/website/app/(main)/(sub)/posts/page.tsx b/website/app/(main)/(sub)/posts/page.tsx
@@ -10,7 +10,7 @@ function Page() {
 
   return (
     <div>
-      <PageTitle title={"Posts"} />
+      <PageTitle title={"記事"} />
 
       <div className="mt-6">
         {allPosts.map((p, i) => (
@@ -28,7 +28,7 @@ function Page() {
   );
 }
 
-export const metadata = generateSharedMetadata({ title: "Posts" });
+export const metadata = generateSharedMetadata({ title: "記事" });
 
 const PostIndex = ({
   title,

diff --git a/website/app/(main)/(sub)/videos/page.tsx b/website/app/(main)/(sub)/videos/page.tsx
@@ -23,7 +23,7 @@ function Page() {
 
   return (
     <div>
-      <PageTitle title={"Videos"} />
+      <PageTitle title={"動画"} />
 
       <div className="mt-2">
         <A
@@ -57,6 +57,6 @@ function Page() {
   );
 }
 
-export const metadata = generateSharedMetadata({ title: "Videos" });
+export const metadata = generateSharedMetadata({ title: "動画" });
 
 export default Page;
diff --git a/website/app/(main)/components/A.tsx b/website/app/(main)/components/A.tsx
@@ -10,18 +10,20 @@ type PropsType = {
   isInlineFlex?: boolean;
   target?: ComponentProps<typeof Link>["target"];
   rel?: ComponentProps<typeof Link>["rel"];
+  passPref?: boolean;
 };
 
 export const A = (props: PropsType & { children: React.ReactNode }) => {
-  const { children, href, target, rel, isInlineFlex = false } = props;
+  const { passPref, children, href, target, rel, isInlineFlex = false } = props;
 
   return (
     <Link
       href={href ?? ""}
       target={target}
       rel={rel}
+      passHref
       className={clsx(
-        "underline hover:text-blue-400 text-sm md:text-md",
+        "underline hover:text-blue-400 ",
         isInlineFlex && "inline-flex"
       )}
     >

diff --git a/website/app/(main)/components/PageTitle.tsx b/website/app/(main)/components/PageTitle.tsx
@@ -1,5 +1,5 @@
 "use client";
 
 export const PageTitle = ({ title }: { title: string }) => {
-  return <h2 className="text-2xl font-serif">{title}</h2>;
+  return <h2 className="text-xl font-serif">{title}</h2>;
 };