diff --git a/.gitignore b/.gitignore index 0563835..b8edd10 100644 --- a/.gitignore +++ b/.gitignore @@ -33,4 +33,6 @@ yarn-error.log* # typescript *.tsbuildinfo -next-env.d.ts \ No newline at end of file +next-env.d.ts +.supermaven/config.json +/.supermaven diff --git a/components/Button.tsx b/components/Button.tsx new file mode 100644 index 0000000..6bbc435 --- /dev/null +++ b/components/Button.tsx @@ -0,0 +1,56 @@ +import React from 'react'; +import Link from 'next/link'; +import styles from '../styles/Button.module.scss'; + +const ButtonType = { + NAVBAR: styles.navBtn, + NAVBAR_ACTIVE: [styles.navBtn, styles.active].join(' '), + LIGHT: styles.lightBtn, + SOCIAL: styles.socialBtn, +} as const; + +type ButtonType = (typeof ButtonType)[keyof typeof ButtonType]; + +interface Props { + onClick?: () => void; + href?: string; + className?: string; + type: ButtonType; + prefetch?: boolean; +} + +interface LabelProps extends Props { + label: string; + children?: never; +} + +interface ChildrenProps extends Props { + children: React.ReactNode; + label?: never; +} + +const Button: React.FC = ({ + label, + children, + onClick, + href, + className, + type = ButtonType.NAVBAR, + prefetch = false, +}) => { + const classes = `${className} ${type} ${styles.button}`; + const content = label || children; + + return href ? ( + + {content} + + ) : ( + + ); +}; + +export default Button; +export { ButtonType }; diff --git a/components/EventBanner.tsx b/components/EventBanner.tsx index 17838cc..1bb72a6 100644 --- a/components/EventBanner.tsx +++ b/components/EventBanner.tsx @@ -1,37 +1,43 @@ // CSS import styles from '../styles/components/EventBanner.module.scss'; // Config -import * as config from '../config.yaml'; +import config from '../config.yaml'; import ReactMarkdown from 'react-markdown'; interface Props { color?: string; - contextKey?: string; + contextKey?: keyof typeof config; } export default function EventBanner({ color = 'event-banner', contextKey = 'bannerInfo', }: Props) { - const bannerInfo = config[contextKey] || []; + const bannerInfo = config[contextKey]; - if (bannerInfo.length === 0 || bannerInfo?.hidden) { - return null; - } + if (contextKey === 'bannerInfo') { + const bannerInfoTyped = bannerInfo as typeof config.bannerInfo; + if (!bannerInfoTyped || bannerInfoTyped.hidden) { + return null; + } - const eventMarkdown = bannerInfo.text; - if (!eventMarkdown) { - return null; - } + const eventMarkdown = bannerInfoTyped.text; + + if (!eventMarkdown) { + return null; + } - return ( -
- {/* Event Content */} -
- - {eventMarkdown} - + return ( +
+ {/* Event Content */} +
+ + {eventMarkdown} + +
-
- ); + ); + } + + return null; } diff --git a/components/HeroBanner.tsx b/components/HeroBanner.tsx new file mode 100644 index 0000000..fb63fa7 --- /dev/null +++ b/components/HeroBanner.tsx @@ -0,0 +1,42 @@ +// CSS +import styles from '../styles/components/HeroBanner.module.scss'; +import Button, { ButtonType } from './Button'; +import { heroIcons } from '../config.yaml'; +import Image from '../components/Image'; + +interface Props { + imagePath: string; + altText: string; +} + +export default function HeroBanner({ imagePath, altText }: Props) { + return ( +
+ {/* Left Column */} +
+ {altText} + +
+ {/* Right Column */} +
+

Trent Computer Science Club Association

+
+
Where passion meets code
+
+ {heroIcons.map((icon) => ( + + ))} +
+
+
+ ); +} diff --git a/components/Image.tsx b/components/Image.tsx new file mode 100644 index 0000000..c85a9cc --- /dev/null +++ b/components/Image.tsx @@ -0,0 +1,4 @@ +// For future accessabiility concerns +import Image from 'next/image'; + +export default Image; diff --git a/components/NavBar.tsx b/components/NavBar.tsx index 3ec715b..db643aa 100644 --- a/components/NavBar.tsx +++ b/components/NavBar.tsx @@ -2,6 +2,9 @@ import styles from '../styles/components/NavBar.module.scss'; // Config import { pageInfo } from '../config.yaml'; +// Components +import Button, { ButtonType } from '../components/Button'; + // Component interface Props { currentPage: string; @@ -16,7 +19,17 @@ export default function NavBar(props: Props) { key={index} className={props.currentPage == page.pageName ? styles.currentPage : ''} > - {page.pageName} + ); }); @@ -26,7 +39,7 @@ export default function NavBar(props: Props) { {/* TODO: LOGO */}
{/* Navigation */} - + ); } diff --git a/config.d.ts b/config.d.ts new file mode 100644 index 0000000..2729c49 --- /dev/null +++ b/config.d.ts @@ -0,0 +1,27 @@ +declare module '*.yaml' { + interface PageInfo { + pageName: string; + pageLink: string; + displayInNav: boolean; + } + + interface BannerInfo { + text: string; + hidden?: boolean; + } + + interface HeroIcon { + altText: string; + link: string; + path: string; + } + + interface Config { + pageInfo: PageInfo[]; + bannerInfo: BannerInfo; + heroIcons: HeroIcon[]; + } + + const value: Config; + export = value; +} diff --git a/config.yaml b/config.yaml index 0fc04e1..3b31b80 100644 --- a/config.yaml +++ b/config.yaml @@ -16,3 +16,14 @@ 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/ + path: /Icons/instagram.svg + - altText: Link to TCSCA Linkedin + link: https://www.linkedin.com/company/trent-computer-science-society + path: /Icons/linkedin.svg + - altText: Link to TCSCA Discord + link: https://discord.gg/serea2sPAd + path: /Icons/discord.svg diff --git a/next.config.mjs b/next.config.mjs index 1578585..7d056c0 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -5,6 +5,9 @@ const nextConfig = withYaml({ poweredByHeader: false, reactStrictMode: true, swcMinify: true, + images: { + unoptimized: true, + }, optimizeFonts: true, output: 'export', experimental: { diff --git a/pages/index.tsx b/pages/index.tsx index 1613989..8de1980 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -3,6 +3,7 @@ import styles from '../styles/Home.module.scss'; // Internal Components import NavBar from '../components/NavBar'; import EventBanner from '../components/EventBanner'; +import HeroBanner from '../components/HeroBanner'; export default function Home() { return ( @@ -10,9 +11,8 @@ export default function Home() {
-
- This is where the main page content goes here +
diff --git a/public/HeroBanner.jpg b/public/HeroBanner.jpg new file mode 100644 index 0000000..bf6e061 Binary files /dev/null and b/public/HeroBanner.jpg differ diff --git a/public/Icons/discord.svg b/public/Icons/discord.svg new file mode 100644 index 0000000..04045c1 --- /dev/null +++ b/public/Icons/discord.svg @@ -0,0 +1 @@ + diff --git a/public/Icons/github.svg b/public/Icons/github.svg new file mode 100644 index 0000000..9cb50f1 --- /dev/null +++ b/public/Icons/github.svg @@ -0,0 +1 @@ + diff --git a/public/Icons/instagram.svg b/public/Icons/instagram.svg new file mode 100644 index 0000000..e83aa01 --- /dev/null +++ b/public/Icons/instagram.svg @@ -0,0 +1 @@ + diff --git a/public/Icons/linkedin.svg b/public/Icons/linkedin.svg new file mode 100644 index 0000000..fbcdfc7 --- /dev/null +++ b/public/Icons/linkedin.svg @@ -0,0 +1 @@ + diff --git a/public/logo.svg b/public/logo.svg new file mode 100644 index 0000000..c6fa2a0 --- /dev/null +++ b/public/logo.svg @@ -0,0 +1,393 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/styles/Button.module.scss b/styles/Button.module.scss new file mode 100644 index 0000000..3c1aeec --- /dev/null +++ b/styles/Button.module.scss @@ -0,0 +1,28 @@ +.button { + @apply hover:shadow-lg; +} + +.socialBtn { + @apply flex; + @apply justify-center; + @apply bg-socials; + @apply rounded-md; + @apply w-10 h-10; + @apply p-1; + @apply shadow-md; +} + +.lightBtn { + @apply bg-color-2; + @apply rounded-md border-2 border-black; + @apply p-2; + @apply font-bold; +} + +.navBtn { + @apply text-color-3; + @apply bg-transparent hover:text-hover-1; + &.active { + @apply text-active-1; + } +} diff --git a/styles/components/HeroBanner.module.scss b/styles/components/HeroBanner.module.scss new file mode 100644 index 0000000..2056404 --- /dev/null +++ b/styles/components/HeroBanner.module.scss @@ -0,0 +1,39 @@ +// left side should have icon and apply button +// right side should have title, divider, tagline and buttons for social media +// use grid for layout +.HeroBanner { + @apply grid grid-cols-2 gap-4 p-4; + @apply my-8; +} + +.leftColumn { + @apply col-span-1 grid place-items-center; + + img { + @apply w-1/2 h-auto; + @apply object-cover mb-4 rounded-xl; + @apply bg-black; + } +} + +.rightColumn { + @apply col-span-1 grid place-items-center; + @apply gap-4; + + h1 { + @apply text-5xl font-bold text-center; + @apply text-color-2; + } + + .tagline { + @apply text-xl; + @apply italic; + @apply text-center; + @apply text-color-2; + } + + .socialMedia { + @apply flex gap-4; + @apply justify-center; + } +} diff --git a/styles/globals.scss b/styles/globals.scss index b5c61c9..b573d65 100644 --- a/styles/globals.scss +++ b/styles/globals.scss @@ -1,3 +1,8 @@ @tailwind base; @tailwind components; @tailwind utilities; + +hr { + @apply bg-color-2 h-0.5; + @apply w-4/5; +} diff --git a/tailwind.config.ts b/tailwind.config.ts index e8dd685..3b5af5a 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -18,6 +18,7 @@ const config: Config = { 'hover-1': '#4db6ac', // TODO: Decide on a color for this 'hover-2': '#89B4FA', // TODO: Decide on a color for this 'event-banner': '#5E18EB', // Event Banner Background + socials: '#7BD4CB', // Social }, }, }, diff --git a/types.d.ts b/types.d.ts index ee6acff..b337528 100644 --- a/types.d.ts +++ b/types.d.ts @@ -8,10 +8,17 @@ interface PageInfo { interface BannerInfo { title: string; } + +interface HeroIcons { + altText: string; + link: string; + path: string; +} // Yaml Config // TODO: Make this only match the config.yaml file declare module '*.yaml' { // Config export const pageInfo: PageInfo[]; export const bannerInfo: BannerInfo; + export const heroIcons: HeroIcons[]; }