Merge pull request #62 from SystemEngineeringTeam/feat-events-page

イベントページ追加

Author: SatooRu65536

Diff for: app/events/[id]/page.tsx

@@ -0,0 +1,65 @@
+import { getEvents } from '@/components/loadFiles';
+import Md2Html from '@/components/md2html';
+import { css } from '@/styled-system/css';
+import { mdStyle } from '@/styled-system/patterns';
+
+export const generateStaticParams = () => {
+  const events = getEvents();
+
+  return events.map((e) => ({
+    id: e.id.toString(),
+  }));
+};
+
+type Props = {
+  params: {
+    id: string;
+  };
+};
+
+export default function Products(props: Props) {
+  const {
+    params: { id },
+  } = props;
+
+  const events = getEvents();
+  const event = events.find((event) => event.id.toString() === id);
+
+  if (event === undefined) throw new Error('Event not found');
+
+  return (
+    <main
+      className={css({
+        padding: '80px 20px',
+      })}
+    >
+      <div
+        className={css({
+          marginInline: 'auto',
+          width: '100%',
+          maxWidth: '800px',
+        })}
+      >
+        <h1
+          className={css({
+            fontSize: '2rem',
+            fontWeight: 700,
+            marginBottom: '1rem',
+            borderBottom: '1px solid black',
+          })}
+        >
+          {event?.meta.title}
+        </h1>
+
+        <section>
+          <Md2Html
+            className={mdStyle({
+              style: 'default',
+            })}
+            content={event?.content}
+          />
+        </section>
+      </div>
+    </main>
+  );
+}

Diff for: app/events/_components/_components/Card.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import Md2Html from '@/components/md2html';
+import { formatdate } from '@/components/util';
+import { css } from '@/styled-system/css';
+import { mdStyle } from '@/styled-system/patterns';
+import { EventPage } from '@/types';
+
+interface Props {
+  event: EventPage;
+}
+
+export default function EventCard(props: Props) {
+  const { event } = props;
+  const router = useRouter();
+
+  const now = Date.now();
+
+  function jumpTo() {
+    router.push(`/events/${event.id}`);
+  }
+
+  return (
+    <div
+      className={css({
+        height: '300px',
+        padding: '20px',
+        textAlign: 'start',
+        boxShadow: '4px 2px 10px -5px #777777',
+        borderRadius: '5px',
+        overflow: 'hidden',
+        transition: 'scale 0.2s',
+        cursor: 'pointer',
+
+        '&:hover': {
+          scale: 1.02,
+        },
+      })}
+      onClick={jumpTo}
+      // 期限が過ぎたお知らせは非表示
+      style={{ display: now < event.deadline.getTime() ? 'block' : 'none' }}
+    >
+      <p>
+        {formatdate(event.meta.created_at)} - {formatdate(event.deadline)}
+      </p>
+
+      <h3
+        className={css({
+          paddingBottom: '10px',
+          fontSize: '1.5rem',
+          fontWeight: 'bold',
+          overflow: 'hidden',
+          textWrap: 'nowrap',
+          textOverflow: 'ellipsis',
+        })}
+      >
+        {event.meta.title}
+      </h3>
+
+      <div
+        className={css({
+          height: '195px',
+          overflow: 'hidden',
+          overflowWrap: 'break-word',
+        })}
+      >
+        <Md2Html
+          className={mdStyle({
+            style: 'no-style',
+          })}
+          content={event.overview}
+        />
+      </div>
+    </div>
+  );
+}

Diff for: app/events/_components/_components/List.tsx

@@ -0,0 +1,25 @@
+import EventCard from './Card';
+import { css } from '@/styled-system/css';
+import { EventPage } from '@/types';
+
+interface Props {
+  events: EventPage[];
+}
+
+export default function EventList(props: Props) {
+  const { events } = props;
+
+  return (
+    <section
+      className={css({
+        display: 'grid',
+        gap: '20px',
+        gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
+      })}
+    >
+      {events.map((event) => (
+        <EventCard key={event.id} event={event} />
+      ))}
+    </section>
+  );
+}

Diff for: app/events/page.tsx

@@ -0,0 +1,29 @@
+import EventList from './_components/_components/List';
+import { getEvents } from '@/components/loadFiles';
+import { css } from '@/styled-system/css';
+
+export default function EventsPage() {
+  const events = getEvents();
+
+  return (
+    <main
+      className={css({
+        padding: '80px 20px',
+        maxWidth: '1000px',
+        marginInline: 'auto',
+      })}
+    >
+      <h1
+        className={css({
+          fontSize: '2rem',
+          fontWeight: 700,
+          marginBottom: '1rem',
+          borderBottom: '1px solid black',
+        })}
+      >
+        募集中のイベント
+      </h1>
+      <EventList events={events} />
+    </main>
+  );
+}

Diff for: components/loadFiles.ts

@@ -2,7 +2,7 @@ import fs from 'fs';
 import path from 'path';
 import matter from 'gray-matter';
 import { IMAGE_REGEX } from '@/const';
-import { Page, Image, PostPage, Product, NoticePage } from '@/types';
+import { Page, Image, PostPage, Product, NoticePage, EventPage } from '@/types';
 
 export function getTopImages(): Image[] {
   const imagesDir = path.join(process.cwd(), 'public/img/top');
@@ -35,6 +35,59 @@ function parseMetaTag(
   return defaultValue;
 }
 
+export function getEvents(): EventPage[] {
+  const contentsDir = path.join(process.cwd(), 'public/markdown/events');
+  const filenames = fs.readdirSync(contentsDir);
+  const filteredFilenames = filenames.filter(
+    (filename) => !filename.startsWith('.'),
+  );
+
+  const pages: EventPage[] = filteredFilenames.map((filename) => {
+    const filePath = path.join(contentsDir, filename);
+    const fileContents = fs.readFileSync(filePath, 'utf8');
+    const md = matter(fileContents);
+    const meta = md.data;
+
+    if (typeof meta.tags === 'string') meta.tags = meta.tags.split(', ');
+
+    const createdAt = parseMetaTag(
+      meta.tags,
+      'at',
+      meta.created_at,
+      /\d{4}-\d{2}-\d{2}/,
+    );
+    meta.created_at = new Date(createdAt);
+
+    const deadline = parseMetaTag(
+      meta.tags,
+      'deadline',
+      '3000-01-01',
+      /\d{4}-\d{2}-\d{2}/,
+    );
+
+    const overview = md.content.split('---').at(0) || '';
+    const content = md.content.includes('---')
+      ? md.content.split('---').slice(1).join('---')
+      : md.content;
+
+    return {
+      filename,
+      deadline: deadline ? new Date(deadline) : null,
+      id: md.data.number,
+      meta,
+      content,
+      overview,
+    } as EventPage;
+  });
+
+  const filteredPosts = pages.filter((page) => page.meta.title !== 'README');
+  filteredPosts.sort((a, b) =>
+    a.meta.created_at > b.meta.created_at ? -1 : 1,
+  );
+
+  return filteredPosts;
+}
+
 export function getNotices(): NoticePage[] {
   const contentsDir = path.join(process.cwd(), 'public/markdown/notice');
   const filenames = fs.readdirSync(contentsDir);

Diff for: const/index.ts

@@ -5,7 +5,14 @@ export const mdStyles = [
   'a-only',
 ] as const;
 
-export const specialPath = ['/', '/posts', '/post', '/products', '/dev'];
+export const specialPath = [
+  '/',
+  '/posts',
+  '/post',
+  '/products',
+  '/dev',
+  '/events',
+];
 
 export const DEFAULT_POST_THUMBNAIL = '/img/posts/default.webp';
 export const DEFAULT_PRODUCT_THUMBNAIL = '/img/products/default.webp';

Diff for: public/markdown/events/1288.html.md

@@ -0,0 +1,42 @@
+---
+title: asdfasdfasdf
+category:
+tags: at:2024-03-18, deadline:2024-09-18, category:イベント
+created_at: '2024-03-18T17:42:22+09:00'
+updated_at: '2024-03-18T18:50:51+09:00'
+published: true
+number: 1288
+---
+
+ここに概要が入ります
+
+---
+
+# アクセス
+愛知工業大学 八草キャンパス ４号館別館 3階 310が部室です。
+
+正門近くの１号館から歩いて約10分程です。
+
+現在は４号館別館が部室のある棟ですが、近々この棟はなくなるので２年後くらいに部室の引っ越しをします。１号館近くに引っ越しになる予定です。
+<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2229.702625338343!2d137.11433052322164!3d35.184538944361755!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6003670d681bdf13%3A0x8dd4ff9bff0cfb7e!2z77yU5Y-36aSo5Yil6aSo!5e0!3m2!1sja!2sjp!4v1698985780113!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
+
+
+# 部室への行き方
+具体的な部室への行き方です。
+
+### 1.ここが４号館別館です。
+正門近くの１号館から歩いて約10分程です。
+<img width="1280" alt="image.png (1.2 MB)" src="/img/markdown/762/b06ccc9b-50ea-49de-90cf-c89e48a77179.webp">
+
+### 2.部室は3階にあります。
+
+３階まで階段を登ったら右側に進みます。
+<img width="1280" alt="image.png (879.5 kB)" src="/img/markdown/762/216dd883-2303-4ec0-9951-cbbbbd733727.webp">
+
+### 3.右側の廊下を一番奥まで進みます。
+
+<img width="1280" alt="image.png (796.3 kB)" src="/img/markdown/762/d6f12f08-aff4-4b4b-9b4a-fa4dfe1bc4ef.webp">
+
+### 4.システム工学研究会の張り紙がしてある部屋がシス研の部室です。
+<img width="1280" alt="image.png (646.5 kB)" src="/img/markdown/762/d57343b6-8ba9-4f93-8e94-426823112b37.webp">
+

Diff for: public/markdown/events/1326.html.md

@@ -0,0 +1,14 @@
+---
+title: 入部希望者へのお知らせ
+category:
+tags: at:2024-04-05, deadline:2024-06-31, category:お知らせ
+created_at: '2024-04-05T12:48:36+09:00'
+updated_at: '2024-04-10T18:29:11+09:00'
+published: true
+number: 1326
+---
+
+入部希望の方は 部室[4号館別館310](https://www.sysken.net/access) までお願いします！基本的に毎日空いているのでいつでも来てください。
+何か質問等は [X(Twitter)](https://twitter.com/set_official )もしくは [instagram](https://www.instagram.com/ait.sysken?igsh=aDc4MWFnbWJ1bjY1&utm_source=qr )のDMで待ってます
+詳細は [入部の手引き](http://localhost:3000/newcomer) を参考にしてください
+

Diff for: types/index.ts

@@ -33,6 +33,14 @@ export type NoticePage = Omit<
   deadline: Date;
 };
 
+export type EventPage = Omit<
+  Page,
+  'path' | 'style' | 'widthNarrow' | 'other' | 'sort'
+> & {
+  deadline: Date;
+  overview: string;
+};
+
 export type Product = {
   title: string;
   created_at: Date;