Merge pull request #23 from NUSComputingDev/KAN-22-Update-Articles

Add student life articles into events page

.eslintrc.cjs

@@ -39,7 +39,7 @@ module.exports = {
     '@stylistic/eol-last': ['error', 'always'],
     '@stylistic/indent': ['error', 2],
     '@stylistic/jsx-quotes': ['error', 'prefer-single'],
-    '@stylistic/max-len': ['error'],
+    '@stylistic/max-len': ['error', 120],
     '@stylistic/no-trailing-spaces': ['error'],
     '@stylistic/object-curly-spacing': ['error', 'always'],
     '@stylistic/quotes': ['error', 'single'],

index.html

@@ -4,16 +4,16 @@
     <meta charset='UTF-8'>
     <link rel='icon' type='image/png' href='/comclub_logo.png'>
     <link
-      rel="stylesheet"
-      type="text/css"
-      charset="UTF-8"
-      href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"
-    />
+      rel='stylesheet'
+      type='text/css'
+      charset='UTF-8'
+      href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css'
+    >
     <link
-      rel="stylesheet"
-      type="text/css"
-      href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"
-    />
+      rel='stylesheet'
+      type='text/css'
+      href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css'
+    >
     <meta name='viewport' content='width=device-width, initial-scale=1.0'>
     <title>NUS Students' Computing Club</title>
   </head>

package.json

@@ -24,6 +24,7 @@
     "@stylistic/eslint-plugin": "^1.5.3",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
+    "@types/react-slick": "^0.23.13",
     "@typescript-eslint/eslint-plugin": "^6.19.0",
     "@typescript-eslint/parser": "^6.19.0",
     "@vitejs/plugin-react": "^4.2.1",

src/App.jsx

@@ -16,17 +16,11 @@ function App() {
         <Routes>
           <Route path='/' element={<Home />} />
           <Route path='/privacy' element={<Privacy />} />
-        </Routes>
-        <Routes>
           <Route path='/about' element={<About />} />
-        </Routes>
-        <Routes>
           <Route path='/events'>
             <Route path='' element={<Events />} />
             <Route path=':articleLink' element={<Article />} />
           </Route>
-        </Routes>
-        <Routes>
           <Route path='/resources' element={<Resources />} />
         </Routes>
       </main>

src/layout/NavigationBar.tsx

@@ -8,7 +8,7 @@ function NavigationBar() {
     <header className='w-full h-20'>
       <div className='navigation-bar'>
         <Link to='/'>
-          <img src='comclub_logo.png' className='h-12 p-2'></img>
+          <img src='/comclub_logo.png' className='h-12 p-2'></img>
         </Link>
         <NavigationMenu />
       </div>

src/layout/WindowCard.css

@@ -5,6 +5,7 @@
     border-2
     overflow-hidden
     drop-shadow-window
+    w-fit
   ;
 }
 

src/pages/about/RolesSection.tsx

@@ -16,7 +16,7 @@ function RolesSection() {
                 {
                   members.map((member) => {
                     const imgSrc: string =
-                      `members/${member.name.replace(/\s/g, '')}.jpg`;
+                      `/members/${member.name.replace(/\s/g, '')}.jpg`;
                     return <RoleCard
                       name={member.name}
                       role={member.role}

src/pages/about/index.tsx

@@ -7,7 +7,7 @@ function About() {
   return (
     <div>
       <section>
-        <img src='about_graphic.svg' className='section-graphic'></img>
+        <img src='/about_graphic.svg' className='section-graphic'></img>
         <div className='section-description'>
           <h1>About Us</h1>
           <p>
@@ -39,7 +39,7 @@ function About() {
       <section className='icon-section'>
         <div className='icon-container'>
           <div className='icon-bubble'>
-            <img src='vision_icon.svg'></img>
+            <img src='/vision_icon.svg'></img>
           </div>
           <h3>Our Vision</h3>
           <p>
@@ -51,7 +51,7 @@ function About() {
 
         <div className='icon-container'>
           <div className='icon-bubble'>
-            <img src='mission_icon.svg'></img>
+            <img src='/mission_icon.svg'></img>
           </div>
           <h3>Our Mission</h3>
           <p>

src/pages/events/articles.json

@@ -1 +1 @@
-{"wellness_festival": {"title": "SOC Wellness Festival", "body": "\nHey SoC Students,\n\nAre you feeling the mid-semester slump? Is your brain starting to feel fried from staring at endless lines of code? If so, don\u2019t panic. We\u2019ve got the antidote for you!\n\nThis year, we are introducing Canine Companion: Interacting with Dogs, a collaboration between Student Life Office and Computing Club.\n\nRegistration is free for all NUS SoC students!\n\nPlease note:\nEvent is limited to 10-minute timeslot per person. You will be allocated to, and informed about a specific 10-minute timeslot within the window period that the event is conducted.\n\nDo check out some other exciting workshops under SoC Wellness Festival 2024 too\ud83d\ude0e\ud83d\ude0e:\n- Craft your own Musical Box\n- Build your own Air Plant Terrarium\n- Embrace Nature with Forest Therapy\n\nSlots are limited so do register your interest at https://forms.office.com/r/4vfPX0aiCF now!\n", "link": "wellness_festival", "imgSrc": "https://nuscomputingdev.github.io/comclub-website-2024/articles/wellness_festival.jpg"}, "bizcom_league": {"title": "BIZCOM League", "body": "\nHEY SOC\ud83e\udd13\nRecess week is almost here \ud83d\ude0b! are you looking for ways to destress?? \ud83d\ude0c AND meet new friends \ud83e\udd73\ud83e\udd73?\n\nJoin us at BIZCOM LEAGUE, and stand a chance to win:\n- HaiDiLao vouchers \ud83c\udf72 - Grab vouchers \ud83d\ude97\n- NTUC vouchers \ud83c\udf7e\n- JBL speakers \ud83d\udd08!\n- FREE JERSEYS \ud83d\udc55\nanddddd most importantly, IT\u2019s FREE!!!! \ud83e\udd11\n\n\nBIZCOM LEAGUE IS BACK AGAIN\ud83d\ude31\ud83d\ude31\ud83e\udd29\ud83e\udd29 between NUS Computing Club and NUS Bizad Club where you get to make some new Biz friends! (You may sign up in groups of 8 MAX, or even solo!)\nAll you have to do is sign up and play four sports (basketball\ud83c\udfc0 , dodgeball \ud83e\udd3e\u200d\u2640\ufe0f, ultimate frisbee\ud83e\udd4f , captain\u2019s ball \ud83c\udfd0) over the course of two days!\n\nWHEN?\n\u203c\ufe0f26 Feb 9am - 7pm\n\u203c\ufe0f27 Feb 9am - 7pm\n\nSo WHAT ARE YOU WAITING FOR\u2049\ufe0fSIGN UP NOW\u203c\ufe0f you won\u2019t regret it \ud83e\udd2d\nhttps://nus.campuslabs.com/engage/submitter/form/start/626464\n", "link": "bizcom_league", "imgSrc": "https://nuscomputingdev.github.io/comclub-website-2024/articles/bizcom_league.jpg"}}
+{"wellness_festival": {"title": "SOC Wellness Festival", "body": "\nHey SoC Students,\n\nAre you feeling the mid-semester slump? Is your brain starting to feel fried from staring at endless lines of code? If so, don\u2019t panic. We\u2019ve got the antidote for you!\n\nThis year, we are introducing Canine Companion: Interacting with Dogs, a collaboration between Student Life Office and Computing Club.\n\nRegistration is free for all NUS SoC students!\n\nPlease note:\nEvent is limited to 10-minute timeslot per person. You will be allocated to, and informed about a specific 10-minute timeslot within the window period that the event is conducted.\n\nDo check out some other exciting workshops under SoC Wellness Festival 2024 too\ud83d\ude0e\ud83d\ude0e:\n- Craft your own Musical Box\n- Build your own Air Plant Terrarium\n- Embrace Nature with Forest Therapy\n\nSlots are limited so do register your interest at https://forms.office.com/r/4vfPX0aiCF now!\n", "link": "wellness_festival", "imgSrc": "https://nuscomputingdev.github.io/comclub-website-2024/articles/wellness_festival.jpg"}, "bizcom_league": {"title": "BIZCOM League", "body": "\nHEY SOC\ud83e\udd13\nRecess week is almost here \ud83d\ude0b! are you looking for ways to destress?? \ud83d\ude0c AND meet new friends \ud83e\udd73\ud83e\udd73?\n\nJoin us at BIZCOM LEAGUE, and stand a chance to win:\n- HaiDiLao vouchers \ud83c\udf72 - Grab vouchers \ud83d\ude97\n- NTUC vouchers \ud83c\udf7e\n- JBL speakers \ud83d\udd08!\n- FREE JERSEYS \ud83d\udc55\nanddddd most importantly, IT\u2019s FREE!!!! \ud83e\udd11\n\n\nBIZCOM LEAGUE IS BACK AGAIN\ud83d\ude31\ud83d\ude31\ud83e\udd29\ud83e\udd29 between NUS Computing Club and NUS Bizad Club where you get to make some new Biz friends! (You may sign up in groups of 8 MAX, or even solo!)\nAll you have to do is sign up and play four sports (basketball\ud83c\udfc0 , dodgeball \ud83e\udd3e\u200d\u2640\ufe0f, ultimate frisbee\ud83e\udd4f , captain\u2019s ball \ud83c\udfd0) over the course of two days!\n\nWHEN?\n\u203c\ufe0f26 Feb 9am - 7pm\n\u203c\ufe0f27 Feb 9am - 7pm\n\nSo WHAT ARE YOU WAITING FOR\u2049\ufe0fSIGN UP NOW\u203c\ufe0f you won\u2019t regret it \ud83e\udd2d\nhttps://nus.campuslabs.com/engage/submitter/form/start/626464\n", "link": "bizcom_league", "imgSrc": "https://nuscomputingdev.github.io/comclub-website-2024/articles/bizcom_league.jpg"}, "freshman_social_camp": {"title": "Freshman Social Camp", "body": "\nDates: 19th June - 22nd June 2024\n\nTheme: Harry Potter\n\nFSC is crafted to kickstart your university journey with enduring friendships and unforgettable experiences. Engage in a variety of physical and intellectual games, participate in team bonding exercises, and compete for exciting team and individual prizes. You will also have the opportunity to attend the beach finale event Bash together with your new friends, solidifying your friendships.\n\nSignup links will be released soon! Stay tuned!\n", "link": "freshman_social_camp", "imgSrc": "/announcements/fsc.jpg"}, "freshman_orientation_camp": {"title": "Freshman Orientation Camp", "body": "\nDates: 24th July - 27th July 2024\n\nTheme: Teenage Mutant Ninja Turtles\n\nFOW is a 4-day physical orientation camp where seniors help freshmen adapt to different aspects of university life through preparatory talks and team-building activities. Forge lasting friendships as you navigate campus resources and academic challenges together. Look forward to strategic team games that develop you both intellectually and physically.\n\nSignup links will be released soon! Stay tuned!\n", "link": "freshman_orientation_camp", "imgSrc": "/announcements/fow.jpg"}, "freshman_finale_camp": {"title": "Freshman Finale Camp", "body": "\nDates: 5th August - 7th August 2024\n\nTheme: Elementals: Rediscover your inner element\n\nAbstract: FFC is a 3-day physical summer camp, perfectly tailored for international students gearing up for matriculation closer to August. The camp offers an array of theme-based activities such as flag-building and exhilarating house face-offs. Engage in friendly competition alongside your housemates, strategizing to earn glory for your elemental faction in a series of thrilling challenges. End the camp on a high note with its campfire and barbecue finale under the stars.\n\nSignup links will be released soon! Stay tuned!\n", "link": "freshman_finale_camp", "imgSrc": "/announcements/ffc.jpg"}, "computing_bash": {"title": "Computing Bash", "body": "\nEvent date: 16th August 2024\n\nA fun-filled beach finale event where freshmen and seniors come together to wrap up the entire orientation experience with a night of performances, games, and food. Held at Sentosa Beach, Bash 2024 offers an electrifying atmosphere with DJ sets, inflatable obstacle courses, and much more.\n\nSignup links will be released soon! Stay tuned!\n", "link": "computing_bash", "imgSrc": "/announcements/bash.jpg"}}

src/pages/events/dump.py

@@ -44,6 +44,43 @@
 https://nus.campuslabs.com/engage/submitter/form/start/626464
 '''
 
+fsc_body = '''
+Dates: 19th June - 22nd June 2024
+
+Theme: Harry Potter
+
+FSC is crafted to kickstart your university journey with enduring friendships and unforgettable experiences. Engage in a variety of physical and intellectual games, participate in team bonding exercises, and compete for exciting team and individual prizes. You will also have the opportunity to attend the beach finale event Bash together with your new friends, solidifying your friendships.
+
+Signup links will be released soon! Stay tuned!
+'''
+
+fow_body = '''
+Dates: 24th July - 27th July 2024
+
+Theme: Teenage Mutant Ninja Turtles
+
+FOW is a 4-day physical orientation camp where seniors help freshmen adapt to different aspects of university life through preparatory talks and team-building activities. Forge lasting friendships as you navigate campus resources and academic challenges together. Look forward to strategic team games that develop you both intellectually and physically.
+
+Signup links will be released soon! Stay tuned!
+'''
+
+ffc_body = '''
+Dates: 5th August - 7th August 2024
+
+Theme: Elementals: Rediscover your inner element
+
+Abstract: FFC is a 3-day physical summer camp, perfectly tailored for international students gearing up for matriculation closer to August. The camp offers an array of theme-based activities such as flag-building and exhilarating house face-offs. Engage in friendly competition alongside your housemates, strategizing to earn glory for your elemental faction in a series of thrilling challenges. End the camp on a high note with its campfire and barbecue finale under the stars.
+
+Signup links will be released soon! Stay tuned!
+'''
+
+bash_body = '''
+Event date: 16th August 2024
+
+A fun-filled beach finale event where freshmen and seniors come together to wrap up the entire orientation experience with a night of performances, games, and food. Held at Sentosa Beach, Bash 2024 offers an electrifying atmosphere with DJ sets, inflatable obstacle courses, and much more.
+
+Signup links will be released soon! Stay tuned!
+'''
 
 # temporary stopgap for article content
 # convert multiline articles into json
@@ -53,13 +90,37 @@
             'title': 'SOC Wellness Festival',
             'body': wellness_festival_body,
             'link': 'wellness_festival',
-            'imgSrc': 'https://nuscomputingdev.github.io/comclub-website-2024/articles/wellness_festival.jpg',
+            'imgSrc': '/articles/wellness_festival.jpg',
         },
         'bizcom_league': {
             'title': 'BIZCOM League',
             'body': bizcom_league_body,
             'link': 'bizcom_league',
-            'imgSrc': 'https://nuscomputingdev.github.io/comclub-website-2024/articles/bizcom_league.jpg',
+            'imgSrc': '/articles/bizcom_league.jpg',
+        },
+        'freshman_social_camp': {
+            'title': 'Freshman Social Camp',
+            'body': fsc_body,
+            'link': 'freshman_social_camp',
+            'imgSrc': '/announcements/fsc.jpg'
+        },
+        'freshman_orientation_camp': {
+            'title': 'Freshman Orientation Camp',
+            'body': fow_body,
+            'link': 'freshman_orientation_camp',
+            'imgSrc': '/announcements/fow.jpg'
+        },
+        'freshman_finale_camp': {
+            'title': 'Freshman Finale Camp',
+            'body': ffc_body,
+            'link': 'freshman_finale_camp',
+            'imgSrc': '/announcements/ffc.jpg'
+        },
+        'computing_bash': {
+            'title': 'Computing Bash',
+            'body': bash_body,
+            'link': 'computing_bash',
+            'imgSrc': '/announcements/bash.jpg'
         },
     }
     json.dump(articles, open('articles.json', 'w+'))

src/pages/home/AnnouncementsCard.css

@@ -1,52 +1,57 @@
-.container {
+.announcement-container {
   @apply
     flex
-    flex-row
-    max-w-full
-    h-[30vh]
-    lg:h-[30vh]
+    flex-col
+    lg:flex-row
+    h-[20rem]
+    lg:h-[16rem]
+    w-full
+    lg:w-[24rem]
+    xl:w-[28rem]
     items-center
-    justify-center
-    md:justify-around
-    px-2
-    md:gap-2
-  ;
+    justify-start
+    lg:justify-around
+    px-4
 }
 
-.container>img {
+.announcement-container>img {
   @apply
-      object-cover
-      p-4
-      w-32
-      md:w-48
-      max-h-[30vh]
-      rounded-3xl
+    object-cover
+    p-4
+    max-h-40
+    min-w-40
+    lg:max-h-44
+    lg:min-w-44
+    rounded-3xl
   ;
 }
 
 .text-container {
   @apply
-      flex
-      flex-col
-      lg:p-4
-      max-h-full
+    flex
+    flex-col
+    h-fit
+    max-w-48
+    lg:max-w-[16rem]
+    p-2
+    lg:pr-4
   ;
 }
 
 .text-container>h2 {
   @apply
     font-bold
     text-sm
-    md:text-xl
+    lg:text-xl
   ;
 }
 
 .text-container>h3 {
   @apply
     font-subheading
     text-xs
-    md:text-sm
-    pb-4
+    lg:text-sm
+    pb-2
   ;
 }
 
@@ -55,7 +60,7 @@
     line-clamp-2
     font-body
     text-xs
-    md:text-sm
+    lg:text-sm
   ;
 }
 
@@ -66,7 +71,7 @@
     font-subheading
     p-2
     text-xs
-    md:text-base
+    lg:text-base
   ;
 }
 

src/pages/home/AnnouncementsCard.tsx

@@ -11,22 +11,23 @@ interface AnnouncementsCardProps {
   link: string;
 }
 
-export default function AnnouncementsCard(props: AnnouncementsCardProps) {
-  const content = (
-    <div className='container'>
-      <img src={props.imgSrc}></img>
-      <div className='text-container'>
-        <h2>{props.title}</h2>
-        <h3>{props.date}</h3>
-        <p>{props.desc}</p>
-        <h4>
+function AnnouncementsCard(props: AnnouncementsCardProps) {
+  return (
+    <WindowCard content={
+      // TODO: flip flex dir if small
+      <div className='announcement-container'>
+        <img src={props.imgSrc}></img>
+        <div className='text-container'>
+          <h2>{props.title}</h2>
+          <h3>{props.date}</h3>
+          <p>{props.desc}</p>
+          <h4>
             <Link to={props.link}>Read More</Link>
-        </h4>
+          </h4>
+        </div>
       </div>
-    </div>
-  );
-
-  return (
-    <WindowCard content={content}></WindowCard>
+    }></WindowCard>
   );
 }
+
+export default AnnouncementsCard;