Merge branch 'main' into release

Author: SatooRu65536

Diff for: app/_component/sections/notice/Announce.tsx

@@ -0,0 +1,40 @@
+import NoticeCard from "./Card";
+import { getNotices } from "@/components/loadFiles";
+import { css } from "@/styled-system/css";
+
+export default function Notice() {
+  const notices = getNotices();
+  // ビルド時点での期限が過ぎたお知らせは表示しないï
+  const displayNotices = notices.filter(
+    (n) => n.deadline.getTime() > Date.now(),
+  );
+
+  return (
+    <section
+      className={css({
+        padding: "50px 0",
+        textAlign: "center",
+      })}
+    >
+      <h2
+        className={css({
+          paddingBottom: "30px",
+          fontSize: "2rem",
+        })}
+      >
+        お知らせ
+      </h2>
+
+      <div
+        className={css({
+          marginInline: "auto",
+          maxWidth: "800px",
+        })}
+      >
+        {displayNotices.map((notice) => (
+          <NoticeCard key={notice.id} notice={notice} />
+        ))}
+      </div>
+    </section>
+  );
+}

Diff for: app/_component/sections/notice/Card.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import Md2Html from "@/components/md2html";
+import { formatdate } from "@/components/util";
+import { css } from "@/styled-system/css";
+import { mdStyle } from "@/styled-system/patterns";
+import { NoticePage } from "@/types";
+
+type Props = {
+  notice: NoticePage;
+};
+
+export default function NoticeCard(props: Props) {
+  const { notice } = props;
+
+  const now = Date.now();
+
+  return (
+    <div
+      key={notice.id}
+      className={css({
+        padding: "40px",
+        textAlign: "start",
+        borderBottom: "1px solid rgba(0, 0, 0, 0.2)",
+
+        "&:nth-child(1)": {
+          borderTop: "1px solid rgba(0, 0, 0, 0.2)",
+        },
+      })}
+      // 期限が過ぎたお知らせは非表示
+      style={{ display: now < notice.deadline.getTime() ? "block" : "none" }}
+    >
+      <p>
+        <span>{formatdate(notice.meta.created_at)}</span>
+        <span
+          className={css({
+            marginLeft: "10px",
+          })}
+        >
+          [{notice.category}]
+        </span>
+      </p>
+
+      <h3
+        className={css({
+          fontSize: "1.5rem",
+          fontWeight: "bold",
+        })}
+      >
+        {notice.meta.title}
+      </h3>
+
+      <Md2Html
+        className={mdStyle({
+          style: "a-only",
+        })}
+        content={notice.content}
+      />
+    </div>
+  );
+}

Diff for: app/page.tsx

@@ -1,31 +1,34 @@
-import AboutSection from './_component/sections/About';
-import ImageSection from './_component/sections/Image';
-import RecentPosts from './_component/sections/recentpost/RecentPosts';
-import TopSection from './_component/sections/top/Top';
-import { getPages, getPosts, getTopImages } from '@/components/loadFiles';
+import AboutSection from "./_component/sections/About";
+import ImageSection from "./_component/sections/Image";
+import Notice from "./_component/sections/notice/Announce";
+import RecentPosts from "./_component/sections/recentpost/RecentPosts";
+import TopSection from "./_component/sections/top/Top";
+import { getPages, getPosts, getTopImages } from "@/components/loadFiles";
 
 export default function Home() {
   const pages = getPages();
   const posts = getPosts();
 
-  const topPage = pages.find((page) => page.path === '/');
-  const mdContents = topPage ? topPage.content.split('---') : [];
+  const topPage = pages.find((page) => page.path === "/");
+  const mdContents = topPage ? topPage.content.split("---") : [];
   const imagepathes = getTopImages();
   const hero =
-    imagepathes.find((image) => image.name.startsWith('hero')) ||
+    imagepathes.find((image) => image.name.startsWith("hero")) ||
     imagepathes.slice(-1)[0];
   const others = imagepathes.filter((image) => image.name !== hero.name);
 
   return (
     <main>
       <TopSection message={mdContents[0]} images={[hero, ...others]} />
+      <Notice />
+      <ImageSection img={imagepathes[0].path} />
       <RecentPosts posts={posts} />
       {mdContents.splice(1).map((content, index) => {
         return (
           <>
             <ImageSection
               key={`parallax-${index}`}
-              img={imagepathes[index % imagepathes.length].path}
+              img={imagepathes[(index + 1) % imagepathes.length].path}
             />
             <AboutSection key={index} content={content} />
           </>