Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(HeroBanner): add HeroBanner component and add to HomePage #10

Merged
merged 40 commits into from
Jul 17, 2024
Merged
Changes from all commits
Commits
Show all changes
40 commits
Select commit Hold shift + click to select a range
e9c1914
Feat(Components): Create button component
Kara-Zor-El Jul 10, 2024
1bea75b
chore(NavBar): Change NavBar to use Button's
Kara-Zor-El Jul 10, 2024
85f90ee
chore(formatting): format button and navbar component
Kara-Zor-El Jul 11, 2024
a2d516f
Fix(Button): Add nextjs link component
Kara-Zor-El Jul 13, 2024
64a984a
Fix(Button): Add nextjs link component
Kara-Zor-El Jul 13, 2024
6656672
Fix(Button): Add prefetching to link
Kara-Zor-El Jul 13, 2024
8b920f1
Fix(Button): Remove unnecessary props
Kara-Zor-El Jul 13, 2024
98b1cba
Fix(Button): Remove depricated prefetch
Kara-Zor-El Jul 13, 2024
4bd57e8
Fix(Button): Create multiple prop options
Kara-Zor-El Jul 14, 2024
72bc771
Fix(Button): Add Button Styles
Kara-Zor-El Jul 16, 2024
934bd77
feat(HeroBanner): Add images and svgs required for HeroBanner
Kara-Zor-El Jun 13, 2024
56e2002
feat(HeroBanner): Add config for HeroBanner
Kara-Zor-El Jun 13, 2024
c84dc82
feat(HeroBanner): Add HeroBanner code
Kara-Zor-El Jun 13, 2024
45d3714
feat(HomePage): Add HeroBanner to HomePage
Kara-Zor-El Jun 13, 2024
0415a37
Fix(HeroBanner): restyle HeroBanner
Kara-Zor-El Jul 16, 2024
704ed95
Fix(HeroBanner): Formatting
Kara-Zor-El Jul 16, 2024
068156b
Fix(HomePage): Do some more work on the header
Kara-Zor-El Jul 16, 2024
e2eac43
Fix(Button): Change Svg Color
Kara-Zor-El Jul 16, 2024
81c1d76
Fix(Button): Change to use Enum
Kara-Zor-El Jul 16, 2024
17f42ee
Feat(Image): Add image export for future use
Kara-Zor-El Jul 16, 2024
cdc83c1
Fix(HeroBanner): remove unnessary tailwind
Kara-Zor-El Jul 16, 2024
c7bceb8
Fix(HeroBanner): Remove unnecessary double check
Kara-Zor-El Jul 16, 2024
0cf36aa
Fix(HerBanner): Hr for divider
Kara-Zor-El Jul 16, 2024
563d5e8
Fix(HeroBanner): Fix ugly code
Kara-Zor-El Jul 16, 2024
a59e2fd
Fix(HeroBanner): Add onClick
Kara-Zor-El Jul 16, 2024
e6e98be
Fix(HeroBanner): add .button style
Kara-Zor-El Jul 16, 2024
ad6225a
Fix(HeroBanner): add active style stuff
Kara-Zor-El Jul 16, 2024
fe4ce95
Fix(HeroBanner): pass in alt text
Kara-Zor-El Jul 16, 2024
f79fc22
Fix(HeroBanner): Add comment for info
Kara-Zor-El Jul 16, 2024
1f9d989
Fix(HeroBanner): Add prefetch prop
Kara-Zor-El Jul 16, 2024
858af9a
Fix(HeroBanner): Fix navbar active
Kara-Zor-El Jul 16, 2024
6ad9afc
Fix(HeroBanner): Change div to H1
Kara-Zor-El Jul 16, 2024
9e23782
Fix(HeroBanner): Styling
Kara-Zor-El Jul 16, 2024
856ed65
Fix(HeroBanner): re-add back current page is highlighted
Kara-Zor-El Jul 16, 2024
193a270
Fix(HeroBanner): Fix unnecessary css
Kara-Zor-El Jul 16, 2024
faf5ccb
Fix(HeroBanner): naming semantics change
Kara-Zor-El Jul 16, 2024
757b0f8
Fix(HeroBanner): naming semantics change
Kara-Zor-El Jul 16, 2024
cc93557
Fix(Config): Make cases match
Kara-Zor-El Jul 16, 2024
fd3f0ca
Fix(Build): Make the website able to build using npm run build
Kara-Zor-El Jul 16, 2024
91fa8ab
Fix(HeroBanner): Fix typechecking on config
Kara-Zor-El Jul 17, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -33,4 +33,6 @@ yarn-error.log*

# typescript
*.tsbuildinfo
next-env.d.ts
next-env.d.ts
.supermaven/config.json
/.supermaven
56 changes: 56 additions & 0 deletions components/Button.tsx
Original file line number Diff line number Diff line change
@@ -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;
spotandjake marked this conversation as resolved.
Show resolved Hide resolved
className?: string;
type: ButtonType;
prefetch?: boolean;
}
Kara-Zor-El marked this conversation as resolved.
Show resolved Hide resolved

interface LabelProps extends Props {
label: string;
children?: never;
}

interface ChildrenProps extends Props {
children: React.ReactNode;
label?: never;
}

const Button: React.FC<LabelProps | ChildrenProps> = ({
label,
children,
onClick,
href,
className,
type = ButtonType.NAVBAR,
prefetch = false,
}) => {
const classes = `${className} ${type} ${styles.button}`;
const content = label || children;

return href ? (
spotandjake marked this conversation as resolved.
Show resolved Hide resolved
<Link href={href} className={classes} onClick={onClick} prefetch={prefetch}>
<span> {content} </span>
</Link>
) : (
<button onClick={onClick} className={classes}>
{content}
</button>
);
};

export default Button;
export { ButtonType };
44 changes: 25 additions & 19 deletions components/EventBanner.tsx
Original file line number Diff line number Diff line change
@@ -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 (
<div className={styles.EventBanner} style={{ backgroundColor: color }}>
{/* Event Content */}
<div className={styles.EventContent}>
<ReactMarkdown className={styles.Markdown}>
{eventMarkdown}
</ReactMarkdown>
return (
<div className={styles.EventBanner} style={{ backgroundColor: color }}>
{/* Event Content */}
<div className={styles.EventContent}>
<ReactMarkdown className={styles.Markdown}>
{eventMarkdown}
</ReactMarkdown>
</div>
</div>
</div>
);
);
}

return null;
}
42 changes: 42 additions & 0 deletions components/HeroBanner.tsx
Original file line number Diff line number Diff line change
@@ -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 (
<div className={styles.HeroBanner}>
{/* Left Column */}
<div className={styles.leftColumn}>
<Image src={imagePath} alt={altText} width={100} height={100} />
<Button type={ButtonType.LIGHT}>Apply</Button>
</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.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>
))}
</div>
</div>
</div>
);
}
4 changes: 4 additions & 0 deletions components/Image.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
// For future accessabiility concerns
import Image from 'next/image';

Kara-Zor-El marked this conversation as resolved.
Show resolved Hide resolved
export default Image;
17 changes: 15 additions & 2 deletions components/NavBar.tsx
Original file line number Diff line number Diff line change
@@ -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 : ''}
>
<a href={page.pageLink}>{page.pageName}</a>
<Button
type={ButtonType.NAVBAR}
Kara-Zor-El marked this conversation as resolved.
Show resolved Hide resolved
href={page.pageLink}
className={
props.currentPage == page.pageName
? ButtonType.NAVBAR_ACTIVE
: ButtonType.NAVBAR
}
>
{page.pageName}
</Button>
</li>
);
});
@@ -26,7 +39,7 @@ export default function NavBar(props: Props) {
{/* TODO: LOGO */}
<div className={styles.Icon}></div>
{/* Navigation */}
<ul className={styles.LinkArea}>{...navContent}</ul>
<ul className={styles.LinkArea}>{navContent}</ul>
</nav>
);
}
27 changes: 27 additions & 0 deletions config.d.ts
Original file line number Diff line number Diff line change
@@ -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;
}
11 changes: 11 additions & 0 deletions config.yaml
Original file line number Diff line number Diff line change
@@ -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
3 changes: 3 additions & 0 deletions next.config.mjs
Original file line number Diff line number Diff line change
@@ -5,6 +5,9 @@ const nextConfig = withYaml({
poweredByHeader: false,
reactStrictMode: true,
swcMinify: true,
images: {
unoptimized: true,
},
optimizeFonts: true,
output: 'export',
experimental: {
4 changes: 2 additions & 2 deletions pages/index.tsx
Original file line number Diff line number Diff line change
@@ -3,16 +3,16 @@ 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 (
<>
<EventBanner contextKey='bannerInfo' />
<NavBar currentPage='Home' />
<section className={styles.container}>
<aside className={styles.SideArea}></aside>
<main className={styles.MainArea}>
This is where the main page content goes here
<HeroBanner imagePath='logo.svg' altText='TCSCA Logo' />
</main>
</section>
</>
Binary file added public/HeroBanner.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions public/Icons/discord.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions public/Icons/github.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions public/Icons/instagram.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions public/Icons/linkedin.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
393 changes: 393 additions & 0 deletions public/logo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
28 changes: 28 additions & 0 deletions styles/Button.module.scss
spotandjake marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -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;
}
}
39 changes: 39 additions & 0 deletions styles/components/HeroBanner.module.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
5 changes: 5 additions & 0 deletions styles/globals.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

hr {
@apply bg-color-2 h-0.5;
@apply w-4/5;
}
1 change: 1 addition & 0 deletions tailwind.config.ts
Original file line number Diff line number Diff line change
@@ -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
Kara-Zor-El marked this conversation as resolved.
Show resolved Hide resolved
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a functional/semantic reason socials isn't in quotes and the rest are?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a functional/semantic reason socials isn't in quotes and the rest are?

The others have a - in their name which means they have to be in quotes the formatter removes them on this one because they are not needed. We will probably change this name with issue #16

},
},
},
7 changes: 7 additions & 0 deletions types.d.ts
Original file line number Diff line number Diff line change
@@ -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[];
}