From 6bc7fd76fe71ac65da4ff11cdeaba5ec70682c0b Mon Sep 17 00:00:00 2001 From: Respirayson Date: Mon, 11 Mar 2024 21:40:27 +0800 Subject: [PATCH 1/3] Add student life articles into events page --- src/layout/NavigationBar.tsx | 2 +- src/pages/events/articles.json | 2 +- src/pages/events/dump.py | 61 +++++++++++++++ src/pages/home/AnnouncementsCard.tsx | 2 +- src/pages/home/Carousel.tsx | 108 +++++++++++++-------------- src/pages/home/announcements.json | 12 ++- 6 files changed, 126 insertions(+), 61 deletions(-) diff --git a/src/layout/NavigationBar.tsx b/src/layout/NavigationBar.tsx index 38a3843..090cc4f 100644 --- a/src/layout/NavigationBar.tsx +++ b/src/layout/NavigationBar.tsx @@ -8,7 +8,7 @@ function NavigationBar() {
- +
diff --git a/src/pages/events/articles.json b/src/pages/events/articles.json index 86fd695..b11ea8d 100644 --- a/src/pages/events/articles.json +++ b/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"}} \ No newline at end of file +{"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"}} \ No newline at end of file diff --git a/src/pages/events/dump.py b/src/pages/events/dump.py index d8351cd..2c68694 100644 --- a/src/pages/events/dump.py +++ b/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 @@ -61,5 +98,29 @@ 'link': 'bizcom_league', 'imgSrc': 'https://nuscomputingdev.github.io/comclub-website-2024/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+')) diff --git a/src/pages/home/AnnouncementsCard.tsx b/src/pages/home/AnnouncementsCard.tsx index a1c85a5..c32448d 100644 --- a/src/pages/home/AnnouncementsCard.tsx +++ b/src/pages/home/AnnouncementsCard.tsx @@ -20,7 +20,7 @@ export default function AnnouncementsCard(props: AnnouncementsCardProps) {

{props.date}

{props.desc}

- Read More + Read More

diff --git a/src/pages/home/Carousel.tsx b/src/pages/home/Carousel.tsx index 7ec1c50..a1d28df 100644 --- a/src/pages/home/Carousel.tsx +++ b/src/pages/home/Carousel.tsx @@ -1,35 +1,35 @@ -import React from "react"; -import Slider from "react-slick"; +import React from 'react'; +import Slider from 'react-slick'; import AnnouncementsCard from './AnnouncementsCard'; import './Carousel.css'; -import { GoChevronLeft, GoChevronRight } from "react-icons/go"; +import { GoChevronLeft, GoChevronRight } from 'react-icons/go'; import announcements from './announcements.json' with {type: 'json'}; function NextArrow(props) { - const { className, style, onClick } = props; - return ( + const { className, style, onClick } = props; + return ( +
+ +
+ ); +} + +function PrevArrow(props) { + const { className, style, onClick } = props; + return (
- -
- ); - } - - function PrevArrow(props) { - const { className, style, onClick } = props; - return ( -
-
- ); - } + className={className} + onClick={onClick}> + + ); +} export default function Carousel() { - var settings = { + const settings = { dots: true, infinite: true, speed: 500, @@ -38,43 +38,43 @@ export default function Carousel() { nextArrow: , prevArrow: , responsive: [ - { - breakpoint: 1200, - settings: { - slidesToShow: 1, - slidesToScroll: 1, - initialSlide: 1 - } + { + breakpoint: 1200, + settings: { + slidesToShow: 1, + slidesToScroll: 1, + initialSlide: 1, + }, + }, + { + breakpoint: 800, + settings: { + slidesToShow: 1, + slidesToScroll: 1, + initialSlide: 1, + nextArrow: false, + prevArrow: false, }, - { - breakpoint: 800, - settings: { - slidesToShow: 1, - slidesToScroll: 1, - initialSlide: 1, - nextArrow: false, - prevArrow: false - } - } - ] + }, + ], }; return ( -
- - {announcements.map((announcement, index) => ( -
- -
- ))} - +
+ + {announcements.map((announcement, index) => ( +
+ +
+ ))} +
); } diff --git a/src/pages/home/announcements.json b/src/pages/home/announcements.json index a156fef..e238012 100644 --- a/src/pages/home/announcements.json +++ b/src/pages/home/announcements.json @@ -3,24 +3,28 @@ "title": "Freshman Social Camp (FSC)", "desc": "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.", "date": "19th June - 22nd June 2024", - "imgSrc": "announcements/fsc.jpg" + "imgSrc": "announcements/fsc.jpg", + "link": "./events/freshman_social_camp" }, { "title": "Freshman Orientation Week (FOW)", "desc": "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.", "date": "24th July - 27th July 2024", - "imgSrc": "announcements/fow.jpg" + "imgSrc": "announcements/fow.jpg", + "link": "./events/freshman_orientation_camp" }, { "title": "Freshman Finale Camp (FFC)", "desc": "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.", "date": "5th August - 7th August 2024", - "imgSrc": "announcements/ffc.jpg" + "imgSrc": "announcements/ffc.jpg", + "link": "./events/freshman_finale_camp" }, { "title": "Computing Bash", "desc": "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.", "date": "16th August 2024", - "imgSrc": "announcements/bash.jpg" + "imgSrc": "announcements/bash.jpg", + "link": "./events/computing_bash" } ] From cd66550eed0c9f56fa225088e07922c66e3d62d0 Mon Sep 17 00:00:00 2001 From: Leslie Yip Date: Wed, 20 Mar 2024 01:36:25 +0800 Subject: [PATCH 2/3] Fix overscroll behavior and update carousel layout --- src/pages/home/AnnouncementsCard.css | 57 +++++++++++++----------- src/pages/home/AnnouncementsCard.tsx | 33 +++++++------- src/pages/home/Carousel.css | 43 ++++++++++-------- src/pages/home/Carousel.tsx | 65 +++++++++++++++------------- src/pages/home/announcements.json | 32 +++++++------- src/pages/home/index.css | 18 +++++--- src/pages/home/index.tsx | 12 ++--- tailwind.config.js | 2 +- vite.config.js | 21 +++++---- 9 files changed, 153 insertions(+), 130 deletions(-) diff --git a/src/pages/home/AnnouncementsCard.css b/src/pages/home/AnnouncementsCard.css index d952999..9b4628d 100644 --- a/src/pages/home/AnnouncementsCard.css +++ b/src/pages/home/AnnouncementsCard.css @@ -1,35 +1,40 @@ -.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 ; } @@ -37,7 +42,7 @@ @apply font-bold text-sm - md:text-xl + lg:text-xl ; } @@ -45,8 +50,8 @@ @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 ; } diff --git a/src/pages/home/AnnouncementsCard.tsx b/src/pages/home/AnnouncementsCard.tsx index c32448d..4d45867 100644 --- a/src/pages/home/AnnouncementsCard.tsx +++ b/src/pages/home/AnnouncementsCard.tsx @@ -11,22 +11,23 @@ interface AnnouncementsCardProps { link: string; } -export default function AnnouncementsCard(props: AnnouncementsCardProps) { - const content = ( -
- -
-

{props.title}

-

{props.date}

-

{props.desc}

-

- Read More -

-
-
- ); - +function AnnouncementsCard(props: AnnouncementsCardProps) { return ( - + + +
+

{props.title}

+

{props.date}

+

{props.desc}

+

+ Read More +

+
+
+ }> ); } + +export default AnnouncementsCard; diff --git a/src/pages/home/Carousel.css b/src/pages/home/Carousel.css index 9347122..d6ff037 100644 --- a/src/pages/home/Carousel.css +++ b/src/pages/home/Carousel.css @@ -1,8 +1,14 @@ .item { - @apply - p-8 - md:p-14 - ; + @apply + py-8 + lg:py-12 + ; +} + +.item>.window { + @apply + m-auto + ; } .slick-arrow.slick-next, @@ -11,29 +17,30 @@ flex justify-center items-center - h-24 - w-24 + h-20 + w-20 z-10 - max-w-full ; } .slick-prev::before,.slick-next::before{ - display:none; + @apply + hidden + ; } .arrows { - @apply - h-80 - w-80 - text-primary - opacity-60 - z-10 - ; + @apply + h-80 + w-80 + text-primary + opacity-60 + z-10 + ; } .arrows:hover { - @apply - opacity-100 - ; + @apply + opacity-100 + ; } diff --git a/src/pages/home/Carousel.tsx b/src/pages/home/Carousel.tsx index a1d28df..502ed27 100644 --- a/src/pages/home/Carousel.tsx +++ b/src/pages/home/Carousel.tsx @@ -1,13 +1,14 @@ import React from 'react'; -import Slider from 'react-slick'; -import AnnouncementsCard from './AnnouncementsCard'; -import './Carousel.css'; import { GoChevronLeft, GoChevronRight } from 'react-icons/go'; +import Slider, { CustomArrowProps, Settings } from 'react-slick'; +import resolveConfig from 'tailwindcss/resolveConfig'; +import tailwindConfig from '../../../tailwind.config.js'; +import AnnouncementsCard from './AnnouncementsCard'; import announcements from './announcements.json' with {type: 'json'}; +import './Carousel.css'; - -function NextArrow(props) { - const { className, style, onClick } = props; +function NextArrow(props: CustomArrowProps) { + const { className, onClick } = props; return (
-
+ + ); } - -export default function Carousel() { - const settings = { +function Carousel() { + const breakpoints = resolveConfig(tailwindConfig).theme.screens; + const settings: Settings = { dots: true, infinite: true, speed: 500, slidesToShow: 2, slidesToScroll: 1, + centerMode: true, nextArrow: , prevArrow: , responsive: [ { - breakpoint: 1200, + breakpoint: parseInt(breakpoints['md'].replace('px', '')), settings: { slidesToShow: 1, slidesToScroll: 1, initialSlide: 1, + centerMode: true, + arrows: false, }, }, { - breakpoint: 800, + breakpoint: parseInt(breakpoints['lg'].replace('px', '')), settings: { - slidesToShow: 1, + slidesToShow: 2, slidesToScroll: 1, initialSlide: 1, - nextArrow: false, - prevArrow: false, + arrows: false, }, }, ], }; - return (
- {announcements.map((announcement, index) => ( -
- -
- ))} + { + announcements.map((announcement, index) => ( +
+ +
+ )) + }
); } + +export default Carousel; diff --git a/src/pages/home/announcements.json b/src/pages/home/announcements.json index e238012..28cbfc0 100644 --- a/src/pages/home/announcements.json +++ b/src/pages/home/announcements.json @@ -1,30 +1,30 @@ [ { - "title": "Freshman Social Camp (FSC)", + "title": "Freshman Social Camp", "desc": "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.", - "date": "19th June - 22nd June 2024", - "imgSrc": "announcements/fsc.jpg", - "link": "./events/freshman_social_camp" + "date": "19/06/24 - 22/06/24", + "link": "./events/freshman_social_camp", + "imgSrc": "/announcements/fsc.jpg" }, { - "title": "Freshman Orientation Week (FOW)", + "title": "Freshman Orientation Week", "desc": "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.", - "date": "24th July - 27th July 2024", - "imgSrc": "announcements/fow.jpg", - "link": "./events/freshman_orientation_camp" + "date": "24/07/24 - 27/07/24", + "link": "./events/freshman_orientation_camp", + "imgSrc": "/announcements/fow.jpg" }, { - "title": "Freshman Finale Camp (FFC)", + "title": "Freshman Finale Camp", "desc": "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.", - "date": "5th August - 7th August 2024", - "imgSrc": "announcements/ffc.jpg", - "link": "./events/freshman_finale_camp" + "date": "05/08/24 - 07/08/24", + "link": "./events/freshman_finale_camp", + "imgSrc": "/announcements/ffc.jpg" }, { "title": "Computing Bash", - "desc": "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.", - "date": "16th August 2024", - "imgSrc": "announcements/bash.jpg", - "link": "./events/computing_bash" + "desc": "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.", + "date": "16/08/24", + "link": "./events/computing_bash", + "imgSrc": "/announcements/bash.jpg" } ] diff --git a/src/pages/home/index.css b/src/pages/home/index.css index 58d751c..089989d 100644 --- a/src/pages/home/index.css +++ b/src/pages/home/index.css @@ -16,9 +16,11 @@ section { .latest-announcements { @apply - flex - flex-col - h-[80vh] + flex + flex-col + h-fit + md:min-h-[80vh] + ; } .section-header { @@ -55,10 +57,12 @@ section { .carousel-container { @apply - px-0 - md:px-6 - lg:px-20 - pb-4 + h-fit + md:px-8 + xl:px-16 + 2xl:px-32 + pb-16 + 2xl:pb-8 ; } diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx index fac36d8..e3617ee 100644 --- a/src/pages/home/index.tsx +++ b/src/pages/home/index.tsx @@ -17,22 +17,22 @@ function Home() { the gaps between them and the school.

- + {/* latest announcements */} -
-
+
+

Latest Announcements

-
+
{/* events */}
- +

Wondering

What's up?

@@ -60,7 +60,7 @@ function Home() {
- +
); diff --git a/tailwind.config.js b/tailwind.config.js index 2facf57..a4d013a 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,6 +1,6 @@ /** @type {import('tailwindcss').Config} */ -module.exports = { +export default { content: ['./src/**/*.{js,jsx,ts,tsx}'], theme: { extend: { diff --git a/vite.config.js b/vite.config.js index b6d7a33..6b167f8 100644 --- a/vite.config.js +++ b/vite.config.js @@ -3,9 +3,9 @@ import react from '@vitejs/plugin-react'; import tailwindcss from 'tailwindcss'; // https://vitejs.dev/config/ -export default defineConfig(({ command }) => { - const config = { - plugins: [react( +export default defineConfig({ + plugins: [ + react( { babel: { plugins: [ @@ -13,13 +13,12 @@ export default defineConfig(({ command }) => { ], }, }, - )], - base: '/', - css: { - postcss: { - plugins: [tailwindcss()], - }, + ), + ], + base: '/', + css: { + postcss: { + plugins: [tailwindcss()], }, - }; - return config; + }, }); From 2be9e8993e1f8876dcb03a4c223a61db0c39addb Mon Sep 17 00:00:00 2001 From: Leslie Yip Date: Wed, 20 Mar 2024 01:36:30 +0800 Subject: [PATCH 3/3] Lint --- .eslintrc.cjs | 2 +- index.html | 18 ++++++++--------- package-lock.json | 10 ++++++++++ package.json | 1 + src/App.jsx | 6 ------ src/layout/WindowCard.css | 1 + src/pages/about/RolesSection.tsx | 2 +- src/pages/about/index.tsx | 6 +++--- src/pages/events/articles.json | 2 +- src/pages/events/dump.py | 4 ++-- src/pages/resources/FolderLink.tsx | 2 +- src/pages/resources/index.tsx | 32 +++++++++++++++++------------- 12 files changed, 48 insertions(+), 38 deletions(-) diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 562e470..79b0938 100644 --- a/.eslintrc.cjs +++ b/.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'], diff --git a/index.html b/index.html index b13c0a3..13196e1 100644 --- a/index.html +++ b/index.html @@ -4,16 +4,16 @@ + 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' + href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css' + > NUS Students' Computing Club diff --git a/package-lock.json b/package-lock.json index 8423b09..0968e44 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,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", @@ -1366,6 +1367,15 @@ "@types/react": "*" } }, + "node_modules/@types/react-slick": { + "version": "0.23.13", + "resolved": "https://registry.npmjs.org/@types/react-slick/-/react-slick-0.23.13.tgz", + "integrity": "sha512-bNZfDhe/L8t5OQzIyhrRhBr/61pfBcWaYJoq6UDqFtv5LMwfg4NsVDD2J8N01JqdAdxLjOt66OZEp6PX+dGs/A==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/scheduler": { "version": "0.16.8", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz", diff --git a/package.json b/package.json index f549b1c..9e132ff 100644 --- a/package.json +++ b/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", diff --git a/src/App.jsx b/src/App.jsx index 1f0cfe3..94ea1a8 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -16,17 +16,11 @@ function App() { } /> } /> - - } /> - - } /> } /> - - } /> diff --git a/src/layout/WindowCard.css b/src/layout/WindowCard.css index bc9acea..97519a4 100644 --- a/src/layout/WindowCard.css +++ b/src/layout/WindowCard.css @@ -5,6 +5,7 @@ border-2 overflow-hidden drop-shadow-window + w-fit ; } diff --git a/src/pages/about/RolesSection.tsx b/src/pages/about/RolesSection.tsx index 49245ca..1412428 100644 --- a/src/pages/about/RolesSection.tsx +++ b/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
- +

About Us

@@ -39,7 +39,7 @@ function About() {

- +

Our Vision

@@ -51,7 +51,7 @@ function About() {

- +

Our Mission

diff --git a/src/pages/events/articles.json b/src/pages/events/articles.json index b11ea8d..6ac1f1c 100644 --- a/src/pages/events/articles.json +++ b/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"}, "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"}} \ No newline at end of file +{"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"}} diff --git a/src/pages/events/dump.py b/src/pages/events/dump.py index 2c68694..b3fe900 100644 --- a/src/pages/events/dump.py +++ b/src/pages/events/dump.py @@ -90,13 +90,13 @@ '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', diff --git a/src/pages/resources/FolderLink.tsx b/src/pages/resources/FolderLink.tsx index 3ea06ae..9480c8b 100644 --- a/src/pages/resources/FolderLink.tsx +++ b/src/pages/resources/FolderLink.tsx @@ -9,7 +9,7 @@ interface FolderLinkProps { function FolderLink(props: FolderLinkProps) { return ( - +

{props.label}

); diff --git a/src/pages/resources/index.tsx b/src/pages/resources/index.tsx index 9247c31..6439acb 100644 --- a/src/pages/resources/index.tsx +++ b/src/pages/resources/index.tsx @@ -15,23 +15,27 @@ function Resources() {
- - -
-

Study Planner

-

Chart out your academic journey.

- + + +
+

Study Planner

+

Chart out your academic journey.

+ +
-
}> + }> - - -
-

SEP Points Tracker

-

Monitor your SEP points.

- + + +
+

SEP Points Tracker

+

Monitor your SEP points.

+ +
-
}> + }>