Feat(HomePage): Create Home Page

components/Button.tsx

@@ -1,12 +1,14 @@
 import React from 'react';
 import Link from 'next/link';
 import styles from '../styles/Button.module.scss';
+import Image from '../components/Image';
 
 const ButtonType = {
   NAVBAR: styles.navBtn,
   NAVBAR_ACTIVE: [styles.navBtn, styles.active].join(' '),
   LIGHT: styles.lightBtn,
   SOCIAL: styles.socialBtn,
+  SOCIAL_DARK: styles.socialBtnDark,
 } as const;
 
 type ButtonType = (typeof ButtonType)[keyof typeof ButtonType];
@@ -16,38 +18,49 @@ interface Props {
   href?: string;
   className?: string;
   type: ButtonType;
-  prefetch?: boolean;
 }
 
 interface LabelProps extends Props {
   label: string;
-  children?: never;
+  image?: never;
 }
 
-interface ChildrenProps extends Props {
-  children: React.ReactNode;
-  label?: never;
+interface IconProps extends Props {
+  image: {
+    src: string;
+    altText: string;
+  };
+  label?: string;
 }
 
-const Button: React.FC<LabelProps | ChildrenProps> = ({
-  label,
-  children,
+const Button: React.FC<LabelProps | IconProps> = ({
   onClick,
-  href,
+  href = '',
   className,
   type = ButtonType.NAVBAR,
-  prefetch = false,
+  ...props
 }) => {
   const classes = `${className} ${type} ${styles.button}`;
-  const content = label || children;
+  if (props.image) {
+    return (
+      <Link className={classes} href={href} onClick={onClick}>
+        <div className={styles.imageWrapper}>
+          <Image src={props.image.src} alt={props.image.altText} fill={true} />
+        </div>
+        {props.label && (
+          <span className={styles.buttonText}>{props.label}</span>
+        )}
+      </Link>
+    );
+  }
 
   return href ? (
-    <Link href={href} className={classes} onClick={onClick} prefetch={prefetch}>
-      <span> {content} </span>
+    <Link href={href} className={classes} onClick={onClick}>
+      <span>{props.label}</span>
     </Link>
   ) : (
     <button onClick={onClick} className={classes}>
-      {content}
+      {props.label}
     </button>
   );
 };

components/Footer.tsx

@@ -0,0 +1,41 @@
+import styles from '../styles/components/Footer.module.scss';
+import config from '../config.yaml';
+import Button, { ButtonType } from '../components/Button';
+import Link from 'next/link';
+import { footer } from '../config.yaml';
+import ReactMarkdown from 'react-markdown';
+import Logo from '../components/Logo';
+
+export default function Footer() {
+  return (
+    <footer className={styles.Footer}>
+      {/* Top section */}
+      <div className={styles.top}>
+        <ReactMarkdown className={styles.text}>{footer.text}</ReactMarkdown>
+      </div>
+      {/* Left side */}
+      <div className={styles.left}>
+        <div className={styles.logo}>
+          <Logo />
+        </div>
+        <Link href={`mailto:${config.email}`} className={styles.link}>
+          {config.email}
+        </Link>
+      </div>
+      {/* Right side */}
+      <div className={styles.right}>
+        <div className={styles.socialMedia}>
+          {config.heroIcons.map((icon, index) => (
+            <Button
+              key={index}
+              image={{ src: icon.path, altText: icon.altText }}
+              type={ButtonType.SOCIAL_DARK}
+              href={icon.link}
+              className={styles.socialMedia}
+            />
+          ))}
+        </div>
+      </div>
+    </footer>
+  );
+}

components/HeroBanner.tsx

@@ -1,40 +1,29 @@
 // CSS
 import styles from '../styles/components/HeroBanner.module.scss';
 import Button, { ButtonType } from './Button';
-import { heroIcons } from '../config.yaml';
-import Image from '../components/Image';
+import { heroIcons, tagline } from '../config.yaml';
 import Logo from '../components/Logo';
 
-interface Props {
-  imagePath: string;
-  altText: string;
-}
-
-export default function HeroBanner({ imagePath, altText }: Props) {
+export default function HeroBanner() {
   return (
     <div className={styles.HeroBanner}>
       {/* Left Column */}
       <div className={styles.leftColumn}>
         <Logo />
-        <Button type={ButtonType.LIGHT}>Apply</Button>
+        <Button type={ButtonType.LIGHT} label='Apply' />
       </div>
       {/* Right Column */}
       <div className={styles.rightColumn}>
         <h1>Trent Computer Science Club Association</h1>
         <hr />
-        <div className={styles.tagline}>Where passion meets code</div>
+        <div className={styles.tagline}>{tagline}</div>
         <div className={styles.socialMedia}>
           {heroIcons.map((icon) => (
-            <Button key={icon.altText} type={ButtonType.SOCIAL}>
-              <Image
-                key={icon.altText}
-                src={icon.path}
-                alt={icon.altText}
-                width={100}
-                height={100}
-                className={styles.socialMedia}
-              />
-            </Button>
+            <Button
+              key={icon.altText}
+              type={ButtonType.SOCIAL}
+              image={{ src: icon.path, altText: icon.altText }}
+            />
           ))}
         </div>
       </div>

components/Logo.tsx

@@ -8,13 +8,9 @@ interface LogoProps {
 
 export default function Logo({ href = '/' }: LogoProps) {
   return (
-    <Link href={href} className={styles.container} prefetch={true}>
+    <Link href={href} className={styles.container}>
       <div>
-        <Image
-          src='/logo.svg'
-          alt='TCSCA Logo'
-          fill={true}
-        />
+        <Image src='/logo.svg' alt='TCSCA Logo' fill={true} />
       </div>
     </Link>
   );

components/NavBar.tsx

@@ -27,9 +27,8 @@ export default function NavBar(props: Props) {
               ? ButtonType.NAVBAR_ACTIVE
               : ButtonType.NAVBAR
           }
-        >
-          {page.pageName}
-        </Button>
+          label={page.pageName}
+        />
       </li>
     );
   });

config.d.ts

@@ -16,10 +16,56 @@ declare module '*.yaml' {
     path: string;
   }
 
+  interface Footer {
+    text: string;
+  }
+
+  interface NewsItem {
+    text: string;
+    date: Date;
+    href: string;
+  }
+
+  const HomeSectionTypes = {
+    TextSection = 'TextSection',
+    LatestNews = 'LatestNews',
+  };
+
+  type HomeSectionType =
+    (typeof HomeSectionTypes)[keyof typeof HomeSectionTypes];
+
+  interface HomePageSection {
+    type: HomeSectionType;
+    header: string;
+  }
+
+  interface TextSection extends HomePageSection {
+    type: HomeSectionType.TextSection;
+    text: string;
+    image: string;
+    imageAlt: string;
+    buttonText?: string;
+    buttonRoute?: string;
+  }
+
+  interface LatestNews extends HomePageSection {
+    type: HomeSectionType.LatestNews;
+    newsFeed: NewsItem[];
+  }
+
+  type TextSectionType = (typeof TextSection)[keyof typeof TextSection];
+  type LatestNewsType = (typeof LatestNews)[keyof typeof LatestNews];
+  type HomeSection = TextSectionType | LatestNewsType;
+
   interface Config {
     pageInfo: PageInfo[];
     bannerInfo: BannerInfo;
     heroIcons: HeroIcon[];
+    homeSections: HomeSection[];
+    email: string;
+    tagline: string;
+    footer: Footer;
+    HomeSection: HomeSection;
   }
 
   const value: Config;

config.yaml

@@ -16,7 +16,6 @@ pageInfo:
     displayInNav: true
 bannerInfo:
   text: 'HACKATHON 2024, coming to Trent, [Learn More](example.com)!'
-# please refer to https://react-icons.github.io/react-icons/icons/ for possible icons
 heroIcons:
   - altText: Link to TCSCA Instagram
     link: https://www.instagram.com/trentcsca/
@@ -27,3 +26,25 @@ heroIcons:
   - altText: Link to TCSCA Discord
     link: https://discord.gg/serea2sPAd
     path: /Icons/discord.svg
+email: &contactEmail '[email protected]'
+discordLink: https://discord.gg/serea2sPAd
+tagline: Where innovation happens
+footer:
+  text: Got questions or want to get involved? We'd love to hear from you! Feel free to contact us at the socials listed or by our  [contact us](Contact) page. We'd love to hear from you and help you get the most out of your experience with the Trent Computer Science Club Association.
+homeSections:
+  - type: TextSection
+    header: About Us
+    text: Welcome to the Trent Computer Science Club Association! We are a vibrant community of tech enthusiasts at Trent University, dedicated to fostering a love for technology and innovation. Our club hosts workshops, events, tech talks, and hackathons, providing a platform for students to learn, connect, and grow. Whether you're looking for coding help, career guidance, or just a place to share your passion for computer science, our club is here for you.
+    image: /AboutUsPlaceHolder.jpg
+    imageAlt: About Us Image
+    buttonText: Learn More
+    buttonRoute: /About
+  - type: LatestNews
+    header: Latest News
+    newsFeed:
+      - text: NEWS ABOUT TRENT COMPUTER SCIENCE
+        date: 2024-09-10
+        href: /
+      - text: NEWS ABOUT EXCITING EVENT
+        date: 2024-07-25
+        href: /

layouts/LatestNews.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import Button, { ButtonType } from '../components/Button';
+import Link from 'next/link';
+import styles from '../styles/layouts/LatestNews.module.scss';
+import ReactMarkdown from 'react-markdown';
+
+const NewsSectionStyle = {
+  primary: styles.primaryStyle,
+  secondary: styles.secondaryStyle,
+} as const;
+
+type NewsSectionStyleType =
+  (typeof NewsSectionStyle)[keyof typeof NewsSectionStyle];
+
+interface NewsItem {
+  text: string;
+  href: string;
+  date: Date;
+}
+
+interface NewsSectionProps {
+  newsFeed: NewsItem[];
+  style?: NewsSectionStyleType;
+}
+
+const NewsSection: React.FC<NewsSectionProps> = ({
+  newsFeed,
+  style = NewsSectionStyle.primary,
+}) => {
+  return (
+    <div className={`${styles.latestNewsLayout} ${style}`}>
+      {newsFeed.map((item, index) => (
+        <NewsItemComponent key={index} {...item} />
+      ))}
+    </div>
+  );
+};
+
+const NewsItemComponent: React.FC<NewsItem> = ({ text, href, date }) => {
+  return (
+    <Link className={styles.newsItem} href={href}>
+      <div className={styles.left}>
+        <ReactMarkdown className={styles.title}>{text}</ReactMarkdown>
+        <p className={styles.date}>{formatDate(date)}</p>
+      </div>
+      <div className={styles.right}>
+        <Button
+          type={ButtonType.LIGHT}
+          className={styles.learnMore}
+          label='Learn more'
+        />
+      </div>
+    </Link>
+  );
+};
+
+const formatDate = (date: Date): string => {
+  const day = date.getDate();
+
+  const getDaySuffix = (day: number): string => {
+    if (day > 3 && day < 21) return 'th'; // Covers 11th, 12th, 13th, etc.
+    switch (day % 10) {
+      case 1:
+        return 'st';
+      case 2:
+        return 'nd';
+      case 3:
+        return 'rd';
+      default:
+        return 'th';
+    }
+  };
+
+  const [month, year] = date
+    .toLocaleDateString('en-US', { month: 'long', year: 'numeric' })
+    .split(' ');
+
+  return `${month} ${day}${getDaySuffix(day)}, ${year}`;
+};
+
+export default NewsSection;
+export { NewsSectionStyle, type NewsItem, type NewsSectionProps };