Chore/title design

README.md

@@ -1,3 +1,4 @@
 # joken.dev - 松江高専 情報科学研究部 ホームページ
 Svelteで書かれていた前ホームページのリニューアルバージョンです。 
 Vite + React + TypeScriptで書かれています。
+近いうちに新しいものに置き換えられます。

package.json

@@ -35,5 +35,6 @@
     "prettier": "^2.8.7",
     "typescript": "^4.9.4",
     "vite": "^4.0.3"
-  }
-}
+  },
+  "packageManager": "[email protected]"
+}

src/App.tsx

@@ -1,34 +1,34 @@
-import { BrowserRouter, Routes, Route } from "react-router-dom";
-import "./App.css";
-import { TopPage } from "./pages/top";
-import { Header } from "./components/header";
-import { Navigation } from "./components/nav";
-import { Activity } from "./pages/activity";
-import { Achievements } from "./pages/achievements";
-import { Join } from "./pages/join";
-import { Members } from "./pages/members";
-import { Works } from "./pages/works";
-import { NotFound } from "./pages/notfound";
-import { Box, Center } from "@chakra-ui/react";
-import { LinkProps } from "./components/nav";
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import './App.css';
+import { TopPage } from './pages/top';
+import { Header } from './components/header';
+import { Navigation } from './components/nav';
+import { Activity } from './pages/activity';
+import { Achievements } from './pages/achievements';
+import { Join } from './pages/join';
+import { Members } from './pages/members';
+import { Works } from './pages/works';
+import { NotFound } from './pages/notfound';
+import { Box, Center } from '@chakra-ui/react';
+import { LinkProps } from './components/nav';
 import {
   RiBrushFill,
   RiComputerFill,
   RiDoorFill,
   RiHomeFill,
   RiMedalFill,
   RiTeamFill,
-} from "react-icons/ri";
+} from 'react-icons/ri';
 
 // メニューのリンク
 const Links: LinkProps = {
   links: [
-    { name: "ホーム", url: "/", icon: RiHomeFill },
-    { name: "活動実績", url: "/achievements", icon: RiMedalFill },
-    { name: "メンバー", url: "/members", icon: RiTeamFill },
-    { name: "活動内容", url: "/activity", icon: RiComputerFill },
-    { name: "制作物", url: "/works", icon: RiBrushFill },
-    { name: "入部案内", url: "/join", icon: RiDoorFill },
+    { name: 'ホーム', url: '/', icon: RiHomeFill },
+    { name: '活動実績', url: '/achievements', icon: RiMedalFill },
+    { name: 'メンバー', url: '/members', icon: RiTeamFill },
+    { name: '活動内容', url: '/activity', icon: RiComputerFill },
+    { name: '制作物', url: '/works', icon: RiBrushFill },
+    { name: '入部案内', url: '/join', icon: RiDoorFill },
   ],
 };
 
@@ -39,15 +39,15 @@ const App = () => {
         <Header />
         <Navigation {...Links} />
         <Center>
-          <Box width={["100%", "95%", "90%", "85%"]}>
+          <Box width={['100%', '95%', '90%', '85%']}>
             <Routes>
-              <Route path="/" element={<TopPage />} />
-              <Route path="/activity" element={<Activity />} />
-              <Route path="/achievements" element={<Achievements />} />
-              <Route path="/join" element={<Join />} />
-              <Route path="/members" element={<Members />} />
-              <Route path="works" element={<Works />} />
-              <Route path="*" element={<NotFound />} />
+              <Route path='/' element={<TopPage />} />
+              <Route path='/activity' element={<Activity />} />
+              <Route path='/achievements' element={<Achievements />} />
+              <Route path='/join' element={<Join />} />
+              <Route path='/members' element={<Members />} />
+              <Route path='works' element={<Works />} />
+              <Route path='*' element={<NotFound />} />
             </Routes>
           </Box>
         </Center>

src/components/achievementsCard.tsx

@@ -1,4 +1,4 @@
-import { ListItem, UnorderedList } from "@chakra-ui/react";
+import { ListItem, UnorderedList } from '@chakra-ui/react';
 
 export const AchievementsCard = ({
   achievements,

src/components/activityCard.tsx

@@ -6,7 +6,7 @@ import {
   HStack,
   Text,
   CardHeader,
-} from "@chakra-ui/react";
+} from '@chakra-ui/react';
 
 export type activityCardProps = {
   title: string;
@@ -16,22 +16,22 @@ export type activityCardProps = {
 
 const ActivityCard = (props: activityCardProps) => {
   return (
-    <Card align="center" w="40%" minW="20em">
+    <Card align='center' w='40%' minW='20em'>
       <CardHeader>
-        <Heading size="md">{props.title}</Heading>
+        <Heading size='md'>{props.title}</Heading>
       </CardHeader>
-      <CardBody w="100%">
-        <Text fontSize="xl">
-          {props.body.split("\n").map((t) => {
+      <CardBody w='100%'>
+        <Text fontSize='xl'>
+          {props.body.split('\n').map((t) => {
             return <div>{t.match(/\n/) ? <br /> : t}</div>;
           })}
         </Text>
 
         <div>
-          <HStack mt="1em">
+          <HStack mt='1em'>
             {props.tag.map((t) => {
               return (
-                <Badge fontSize="md" colorScheme="green">
+                <Badge fontSize='md' colorScheme='green'>
                   {t}
                 </Badge>
               );

src/components/header.tsx

@@ -1,9 +1,9 @@
-import { Center, Heading } from "@chakra-ui/react";
-import { Link } from "react-router-dom";
+import { Center, Heading } from '@chakra-ui/react';
+import { Link } from 'react-router-dom';
 export const Header = (): JSX.Element => {
   return (
-    <Center as="header" w="100%" p={5}>
-      <Heading as="span" fontSize="2xl">
+    <Center as='header' w='100%' p={5}>
+      <Heading as='span' fontSize='2xl'>
         <Link to={`/`}>松江高専 情報科学研究部</Link>
       </Heading>
     </Center>

src/components/joinAccordion.tsx

@@ -5,60 +5,60 @@ import {
   Box,
   AccordionIcon,
   AccordionPanel,
-} from "@chakra-ui/react";
+} from '@chakra-ui/react';
 
 export const JoinAccordion = () => {
   const faq: Array<{ question: string; answer: string }> = [
     {
-      question: "自分のPCを持ってくる必要はありますか？",
+      question: '自分のPCを持ってくる必要はありますか？',
       answer:
-        "見学と入学すぐのときはNo、それ以外はYesです。\n持っていない場合をのぞいて、活動にはPCを持って来てもらっています。\n難しい場合は相談した上で部が保有しているPCを使うこともできます。",
+        '見学と入学すぐのときはNo、それ以外はYesです。\n持っていない場合をのぞいて、活動にはPCを持って来てもらっています。\n難しい場合は相談した上で部が保有しているPCを使うこともできます。',
     },
     {
-      question: "情報工学科(J科)でなくても入部できますか？",
-      answer: "できます。現在部員はD,E,J科の学生で構成されています",
+      question: '情報工学科(J科)でなくても入部できますか？',
+      answer: 'できます。現在部員はD,E,J科の学生で構成されています',
     },
     {
-      question: "プログラミング未経験でも入部できますか？",
+      question: 'プログラミング未経験でも入部できますか？',
       answer:
-        "できます。\n4-8月にかけて毎年プログラミング講習会を実施しています。\nそれ以外にも部員同士で教え合うこともしています。",
+        'できます。\n4-8月にかけて毎年プログラミング講習会を実施しています。\nそれ以外にも部員同士で教え合うこともしています。',
     },
     {
-      question: "部活の掛け持ちは可能ですか？",
-      answer: "可能です。",
+      question: '部活の掛け持ちは可能ですか？',
+      answer: '可能です。',
     },
     {
-      question: "部費はありますか？",
+      question: '部費はありますか？',
       answer:
-        "いいえ。部費を部員から徴収することはしていません。\n大会参加費などは随時発生する可能性があります。",
+        'いいえ。部費を部員から徴収することはしていません。\n大会参加費などは随時発生する可能性があります。',
     },
     {
-      question: "2年生以上でも入部できますか？",
-      answer: "はい。1~5年生であれば誰でも入部できます。",
+      question: '2年生以上でも入部できますか？',
+      answer: 'はい。1~5年生であれば誰でも入部できます。',
     },
     {
-      question: "入部の手続きの仕方を教えてください",
+      question: '入部の手続きの仕方を教えてください',
       answer:
-        "活動日に活動場所に来て下さい。\n部で利用しているDiscordサーバーに招待します。",
+        '活動日に活動場所に来て下さい。\n部で利用しているDiscordサーバーに招待します。',
     },
   ];
 
   return (
-    <Accordion width={["100%", "95%", "90%", "85%"]}>
+    <Accordion width={['100%', '95%', '90%', '85%']}>
       {faq.map((f) => {
         return (
           <AccordionItem>
             <h2>
               <AccordionButton>
-                <Box as="span" flex="1" textAlign="left">
+                <Box as='span' flex='1' textAlign='left'>
                   {f.question}
                 </Box>
                 <AccordionIcon />
               </AccordionButton>
             </h2>
             <AccordionPanel pb={4}>
               <div>
-                {f.answer.split("\n").map((t) => {
+                {f.answer.split('\n').map((t) => {
                   return <div>{t.match(/\n/) ? <br /> : t}</div>;
                 })}
               </div>

src/components/memberCard.tsx

@@ -13,7 +13,7 @@ import {
   Divider,
   ButtonGroup,
   SimpleGrid,
-} from "@chakra-ui/react";
+} from '@chakra-ui/react';
 
 export type memberProps = {
   members: Readonly<{
@@ -28,33 +28,31 @@ export type memberProps = {
 // ToDo: 画像のフォールバック考える
 const MemberCard = ({ members }: memberProps) => {
   return (
-    <SimpleGrid spacingY="2em">
+    <SimpleGrid spacingY='2em'>
       {members.map((m) => {
         return (
           <Card
-            overflow="hidden"
-            variant="outline"
-            w="100%"
-            mb="1.5em"
-            maxW="40em"
+            overflow='hidden'
+            variant='outline'
+            w='100%'
+            mb='1.5em'
+            maxW='40em'
           >
-
             <CardBody>
               <Stack mt='6' spacing='3'>
                 <Center>
                   <Image
-                    objectFit="cover"
-                    maxW={{ base: "100%", sm: "200px" }}
+                    objectFit='cover'
+                    maxW={{ base: '100%', sm: '200px' }}
                     src={m.imageUrl}
                     borderRadius='full'
                   />
                 </Center>
-                <Heading size="md">{m.nickName}</Heading>
+                <Heading size='md'>{m.nickName}</Heading>
 
-                <Text py="2">{m.realName}</Text>
-                {m.position && <Badge colorScheme="green">{m.position}</Badge>}
+                <Text py='2'>{m.realName}</Text>
+                {m.position && <Badge colorScheme='green'>{m.position}</Badge>}
               </Stack>
-
             </CardBody>
 
             <Divider />
@@ -64,12 +62,12 @@ const MemberCard = ({ members }: memberProps) => {
                   {m.link.map((link) => {
                     return (
                       <Link href={link.url}>
-                        {link.name === "twitter" ? (
-                          <Button variant="solid" colorScheme={"twitter"}>
+                        {link.name === 'twitter' ? (
+                          <Button variant='solid' colorScheme={'twitter'}>
                             {link.name}
                           </Button>
                         ) : (
-                          <Button variant="solid" colorScheme="facebook">
+                          <Button variant='solid' colorScheme='facebook'>
                             {link.name}
                           </Button>
                         )}

src/components/nav.tsx

@@ -9,11 +9,11 @@ import {
   DrawerBody,
   Text,
   VStack,
-} from "@chakra-ui/react";
-import { HamburgerIcon, Icon } from "@chakra-ui/icons";
-import { useRef } from "react";
-import { Link } from "react-router-dom";
-import { IconType } from "react-icons";
+} from '@chakra-ui/react';
+import { HamburgerIcon, Icon } from '@chakra-ui/icons';
+import { useRef } from 'react';
+import { Link } from 'react-router-dom';
+import { IconType } from 'react-icons';
 
 export type LinkProps = {
   links: Array<{
@@ -30,7 +30,7 @@ export const Links = ({ links, onClick }: LinkProps) => {
       {links.map((l: any) => {
         return (
           <Link to={l.url} onClick={onClick}>
-            <Button w="15em" leftIcon={<Icon as={l.icon} />}>
+            <Button w='15em' leftIcon={<Icon as={l.icon} />}>
               {l.name}
             </Button>
           </Link>
@@ -48,32 +48,32 @@ export const Navigation = (props: LinkProps) => {
     <>
       <Button
         ref={btnRef}
-        colorScheme="yellow"
+        colorScheme='yellow'
         onClick={onOpen}
-        zIndex="300"
-        position="fixed"
-        top="90%"
+        zIndex='300'
+        position='fixed'
+        top='90%'
         bottom={0}
-        marginLeft="1.5em"
+        marginLeft='1.5em'
         leftIcon={<HamburgerIcon />}
       >
         メニュー
       </Button>
       <Drawer
         isOpen={isOpen}
-        placement="left"
+        placement='left'
         onClose={onClose}
         finalFocusRef={btnRef}
       >
         <DrawerOverlay />
         <DrawerContent>
           <DrawerCloseButton />
           <DrawerHeader>
-            <Text fontSize="md">松江高専情報科学研究部</Text>
+            <Text fontSize='md'>松江高専情報科学研究部</Text>
           </DrawerHeader>
 
           <DrawerBody>
-            <Links {...props} onClick={onClose}/>
+            <Links {...props} onClick={onClose} />
           </DrawerBody>
         </DrawerContent>
       </Drawer>