Merge pull request #186 from TUS-OSK/dev/ridaisai-2023

いっけー

.node-version

@@ -1 +1 @@
-14.15.0
+16.20.2

.vscode/settings.json

@@ -1,4 +1,4 @@
 {
-    "editor.formatOnSave": true,
-    "editor.tabSize": 2
-}
+  "editor.formatOnSave": true,
+  "editor.tabSize": 2
+}

_configs/README.md

@@ -1,7 +1,9 @@
 # 設定の編集について
+
 ここはページの設定に関するjsonファイルがあります。
 
 ## バルーン
+
 バルーンとはトップページに表示される告知文のことです。
 ![バルーン](../_assets/baloon.png)
 
@@ -27,4 +29,4 @@
 }
 ```
 
-- `title_prefix`: ブラウザーのタイトルバーやページのタブに表示される文書の題名の全ページ共通の接頭辞
+- `title_prefix`: ブラウザーのタイトルバーやページのタブに表示される文書の題名の全ページ共通の接頭辞

api/markdowns.ts

@@ -86,6 +86,6 @@ export function getArticlesAll() {
   const yearDirNames = getArticleYearDirNames()
   return yearDirNames.reduce(
     (prev: MarkdownData<MarkdownBaseMeta>[], year) => [...prev, ...getArticlesByYear(year)],
-    []
+    [],
   )
 }

package.json

@@ -22,14 +22,19 @@
     "gray-matter": "^4.0.2",
     "next": "^11.1.0",
     "react": "^17.0.2",
+    "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^17.0.2",
     "react-modal": "^3.14.3",
+    "react-tabs": "^4.3.0",
+    "recharts": "^2.10.1",
     "remark": "^13.0.0",
-    "remark-html": "^13.0.1"
+    "remark-html": "^13.0.1",
+    "structured-clone": "^0.2.2"
   },
   "devDependencies": {
     "@emotion/babel-plugin": "^11.3.0",
     "@types/node": "^14.14.6",
+    "@types/react-beautiful-dnd": "^13.1.7",
     "@types/react-modal": "^3.12.1",
     "typescript": "^4.3.5"
   }

pages/articles/[year]/[slug].tsx

@@ -60,6 +60,6 @@ export const getStaticPaths: GetStaticPaths<Paths> = async () => {
         ],
       }
     },
-    { paths: [], fallback: false }
+    { paths: [], fallback: false },
   )
 }

pages/ridaisai/2023.tsx

@@ -0,0 +1,10 @@
+import Ridaisai2023 from 'src/pages/Ridaisai2023'
+import BreakPointProvider from 'src/pages/Ridaisai2021/breakpoint/Provider'
+
+export default function Ridaisai2023Page() {
+  return (
+    <>
+      <Ridaisai2023 />
+    </>
+  )
+}

src/components/Footer/index.tsx

@@ -4,7 +4,7 @@ import styled from '@emotion/styled'
 export default function Footer() {
   return (
     <Container as="footer">
-      <small>Copyright (c) 2022 OSK</small>
+      <small>Copyright (c) 2023 OSK</small>
     </Container>
   )
 }

src/pages/Home/HeroView/Banner/index.tsx

@@ -35,7 +35,8 @@ const Image = styled.div`
   background-size: cover;
   background-position: center;
   width: 100%;
-  animation: ${fade} ${T_PIC}s ${SWIFT} ${T_AROUND}s 1 normal both running,
+  animation:
+    ${fade} ${T_PIC}s ${SWIFT} ${T_AROUND}s 1 normal both running,
     ${pic} ${T_PIC * 0.9}s ${CUBIC_OUT} ${T_AROUND}s 1 normal both running;
 `
 

src/pages/Home/ScheduleView/Calendar/MonthEventElement.tsx

@@ -90,7 +90,9 @@ const JaName = styled.div<{ status: EventStatus }>`
   color: #fffd;
   opacity: ${(p) => eventStatusStyle[p.status].opacity};
   transform: translateY(${(p) => eventStatusStyle[p.status].y ?? 0}px);
-  transition: opacity 0.4s, transform 0.4s;
+  transition:
+    opacity 0.4s,
+    transform 0.4s;
 `
 
 const EnName = styled.div<{ status: EventStatus }>`
@@ -99,7 +101,9 @@ const EnName = styled.div<{ status: EventStatus }>`
 
   opacity: ${(p) => eventStatusStyle[p.status].opacity};
   transform: translateY(${(p) => (eventStatusStyle[p.status].y ?? 0) / 2}px);
-  transition: 0.1s opacity 0.4s, 0.1s transform 0.4s;
+  transition:
+    0.1s opacity 0.4s,
+    0.1s transform 0.4s;
 `
 
 const EventText = styled.div<{ status: EventStatus }>`

src/pages/Home/ScheduleView/index.tsx

@@ -4,7 +4,7 @@ import Calendar from './Calendar'
 import { EventCalendarMD } from 'pages/schedule'
 
 export const months = [...new Array(12).keys()].map((i) => i + 1)
-export type Month = typeof months[number]
+export type Month = (typeof months)[number]
 export interface EventData {
   name: {
     ja: string

src/pages/Ridaisai2021/BackgroundFluid.tsx

@@ -26,6 +26,7 @@ export default function BackgroundFluid({ fluidCss, ...props }: Props) {
     </Background>
   )
 }
+
 const Background = styled.div<BaseProps>`
   position: absolute;
   z-index: -1;

src/pages/Ridaisai2021/api.ts

@@ -19,7 +19,7 @@ const CONTENT_TYPE = {
   3: 'web',
 } as const
 
-export type ContentType = typeof CONTENT_TYPE[keyof typeof CONTENT_TYPE]
+export type ContentType = (typeof CONTENT_TYPE)[keyof typeof CONTENT_TYPE]
 
 export function checkContentType(content: Content) {
   return CONTENT_TYPE[content.id]

src/pages/Ridaisai2021/useContentNavigation.tsx

@@ -12,7 +12,7 @@ export function useContentNavigation(type: 'top' | ContentType, Icon: FC) {
         </NavigationIconWrapper>
       </Link>
     ),
-    []
+    [],
   )
 
   const anchor = useMemo(() => <div id={type}></div>, [])

src/pages/Ridaisai2021/useGetContents.ts

@@ -20,7 +20,7 @@ export default function useGetContents() {
           .map<[ContentType, ContentData[ContentType]]>((content) => [
             checkContentType(content),
             { likeCount: content.like_count },
-          ])
+          ]),
       )
     } catch {
       // FIXME: エラーしたときの対応を考える

src/pages/Ridaisai2023/Banner/index.tsx

@@ -0,0 +1,84 @@
+import styled from '@emotion/styled'
+import { BOUNCE, CUBIC_OUT, SWIFT } from 'src/utils/animations'
+import { fade, flip, pic, T_AROUND, T_COVER, T_FLIP, T_PIC } from '../animations'
+
+export default function TopBanner() {
+  return (
+    <Banner>
+      <Image></Image>
+      <Names></Names>
+    </Banner>
+  )
+}
+
+const Banner = styled.div`
+  position: relative;
+  z-index: 0;
+  width: 100%;
+  height: 100%;
+`
+
+const Image = styled.div`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background-image: url('/images/ridaisai/2023/coffee.jpg');
+  background-size: cover;
+  background-position: center;
+  width: 100%;
+  animation:
+    ${fade} ${T_PIC}s ${SWIFT} ${T_AROUND}s 1 normal both running,
+    ${pic} ${T_PIC * 0.9}s ${CUBIC_OUT} ${T_AROUND}s 1 normal both running;
+`
+
+function Names() {
+  return (
+    <NamesContainer>
+      <First>応用</First>
+      <Second>数学</Second>
+      <Third>研究部</Third>
+      <Forth>東京理科大学</Forth>
+    </NamesContainer>
+  )
+}
+
+const NamesContainer = styled.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 30px;
+  line-height: 36px;
+  color: rgba(0, 0, 0, 0.7);
+  background-color: rgba(255, 255, 255, 0.9);
+  font-weight: bold;
+  letter-spacing: 5px;
+  perspective: 200px;
+  padding: 40px;
+  white-space: nowrap;
+`
+
+const Name = styled.div`
+  margin-bottom: 0;
+  transform-origin: 50% 0;
+`
+
+const First = styled(Name)`
+  animation: ${flip} ${T_FLIP}s ${BOUNCE} ${T_COVER}s 1 normal both running;
+`
+const Second = styled(Name)`
+  animation: ${flip} ${T_FLIP}s ${BOUNCE} ${T_COVER + T_FLIP * 0.5}s 1 normal both running;
+`
+const Third = styled(Name)`
+  margin-bottom: 1px;
+  animation: ${flip} ${T_FLIP}s ${BOUNCE} ${T_COVER + T_FLIP}s 1 normal both running;
+`
+
+const Forth = styled(Name)`
+  font-weight: normal;
+  font-size: 20px;
+  margin-bottom: 0;
+  color: rgba(0, 0, 0, 0.4);
+  letter-spacing: 3px;
+  animation: ${flip} ${T_FLIP}s ${BOUNCE} ${T_COVER + T_FLIP * 1.5}s 1 normal both running;
+`

src/pages/Ridaisai2023/Cg/index.tsx

@@ -0,0 +1,67 @@
+import styled from '@emotion/styled'
+
+export default function Cg() {
+  return (
+    <div>
+      <Title>CG班</Title>
+      <DescriptionBox>
+        <Description>
+          CG班では主にblender,unityを扱い、3DCG用のモデルを作成したり、VRで遊んだりしています。
+          <br />
+          3DCGモデリング完全初心者の部員たちがweb上のチュートリアルや、本から学んでいます。
+          <br />
+          理大祭では今年発売のmeta
+          quest3のMRを利用し、部員が作成した簡単なアプリケーションや、既製品のアプリケーションを使って、VR、MRの展示を行っています。
+        </Description>
+      </DescriptionBox>
+    </div>
+  )
+}
+
+const Title = styled.h1`
+  font-family: 'novecentosans', sans-serif;
+  font-size: 2.5em;
+  line-height: 1.3em;
+  text-align: center;
+
+  &::after {
+    content: '';
+    display: block;
+    width: 40px;
+    border-bottom: solid 2px #5d639e;
+    margin: 50px auto;
+  }
+`
+
+const DescriptionBox = styled.div`
+  margin: 10%;
+  border-top: 2px solid #aaa;
+  border-bottom: 2px solid #aaa;
+  padding: 2em 0;
+  position: relative;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    top: -10px;
+    width: 2px;
+    height: -webkit-calc(100% + 20px);
+    height: calc(100% + 20px);
+    background-color: #aaa;
+  }
+
+  &::before {
+    left: 10px;
+  }
+
+  &::after {
+    right: 10px;
+  }
+`
+
+const Description = styled.div`
+  margin: 0 3%;
+  font-size: 1.2em;
+  text-align: center;
+`