From 69aab5b1b5981ce52d79a83b4e6b4ce35aa6d7f4 Mon Sep 17 00:00:00 2001 From: Jaret Date: Thu, 14 Aug 2025 13:18:12 -0400 Subject: [PATCH] Refactor content.tsx: extract repeated code into components (#90) AND added myself to contributors for website --- .vscode/settings.json | 3 + src/app/(main)/(routes)/projects/content.tsx | 1155 ++++++++---------- 2 files changed, 500 insertions(+), 658 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..cbb7b3a --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5502 +} \ No newline at end of file diff --git a/src/app/(main)/(routes)/projects/content.tsx b/src/app/(main)/(routes)/projects/content.tsx index d0e04f2..e8f2926 100644 --- a/src/app/(main)/(routes)/projects/content.tsx +++ b/src/app/(main)/(routes)/projects/content.tsx @@ -6,6 +6,210 @@ import ApplyButton from '~/src/app/components/Projects/ApplyButton'; import { getMember } from '~/src/app/components/members'; import { MemberID } from '~/src/app/components/members'; import { ExternalLink } from 'lucide-react'; +import React from "react"; + +// Internalized components + +const ProjectTitle: React.FC<{ + title: string; + Icon: React.ComponentType; + projectID: ProjectID; + pageID: string; +}> = ({ title, Icon, projectID, pageID }) => ( +
+

{title}

+
+
Join the Project!
+
+); + +const ProjectDescription: React.FC<{ + text: string; + pageID: string; +}> = ({ text, pageID }) => ( +

+ {text} +

+); + +type ProjectTextProps = { + paragraphs: (string | JSX.Element)[]; + pageID: string; +}; + +const ProjectText: React.FC = ({ paragraphs, pageID }) => ( + <> + {paragraphs.map((para, i) => + typeof para === "string" ? ( +

+ {para} +

+ ) : ( + React.cloneElement(para, { key: i }) + ) + )} + +); + +const ProjectGoals: React.FC<{ + goals: string[]; + pageID: string; +}> = ({ goals, pageID }) => ( +
+
+
+

Current Project Goals

+
+
+
    + {goals.map((goal, idx) => ( +
  • {goal}
    • + ))} +
+ +
+
+); + +const ProjectStack: React.FC<{ + pageID: string; + stack: { href: string; svgID: number }[]; +}> = ({ pageID, stack }) => ( +
+ {stack.map(({ href, svgID }) => ( + + {getSVG({ svgID })} + + ))} +
+); + +const GitMonitor: React.FC<{ + pageID: string +}> = ({ pageID }) => ( +
+
GitHub Activity
+
+
+); + +type ProjectImagesProps = { + projectID: ProjectID; + pageID: string; + count?: number; + files?: string[]; + width?: number; + height?: number; + alt?: string; +}; + +const ProjectImages: React.FC = ({ + projectID, + pageID, + count = 3, + files, + width = 300, + height = 200, + alt = "project image", +}) => { + const sources = files && files.length > 0 + ? files.map((f) => `/assets/projects/${projectID}/${f}`) + : Array.from({ length: count }, (_, i) => + `/assets/projects/${projectID}/project-image-${i + 1}.png` + ); + + return ( +
+ {sources.map((src) => ( + {alt} + ))} +
+ ); +}; + + + +type ProjectTeamProps = { + projectID: ProjectID; + pageID: string; +}; + + +const ProjectTeam: React.FC = ({ projectID, pageID }) => { + const team = projectTeams[projectID]; + + if (!team || team.length === 0) { + return ( +
+

No contributors just yet. Be the first to apply!

+
+ ); + } + + const [leaderID] = team[0] as [MemberID, string?]; + const contributors = team.slice(1); + + return ( +
+ {/*Heading */} +
+
+

Project Team

+
+ + {/* Leader Info */} +
+ Project Leader's photo +
+

{getMember({ memberID: leaderID as MemberID, memberData: "name" })}

+

{getMember({ memberID: leaderID as MemberID, memberData: "bio" })}

+
+
+ + {/* Contributors */} +
+ {contributors.length > 0 ? ( + contributors.map(([member, link], index) => ( +
+ {link ? ( + + {member} + + ) : ( +

{member}

+ )} +
+ )) + ) : ( + <>

No contributors just yet. Be the first to apply

+ )} +
+
+ ); +}; + +type RepoLinkProps = { + href: string; + pageID: string; +}; + +const RepoLink: React.FC = ({ href, pageID }) => ( +
+ +
+); + + export const projectIDs = [ 'academy', @@ -34,6 +238,8 @@ export const gitRepoLinks = { mobile: "https://github.com/ASU-CodeDevils/CD-Mobile", scraper: "https://github.com/ASU-CodeDevils/scraper.codedevils.org", }; + + // format: element [0] must be of type MemberID all other elements must be an array of one or @@ -56,7 +262,8 @@ const projectTeams = { ['Alejandro Jimenez'], ['Darshan Phaldesai'], ['Jaith Darrah'], - ['Tyler Wallace'] + ['Tyler Wallace'], + ['Jaret Aparo', 'https://jaretaparo.com/'] ], gamedev: [ ['remi'], ['Autumn O'], @@ -89,668 +296,300 @@ const projectTeams = { contentID: number, pageID: string }) => { - - const content = { - academy: [( -
-

CodeDevils Academy

-
- -
-
- Join the Project! -
-
- ), ( -

A sister website to CodeDevils.org. A content library for users to visit and learn how to code!

- ), ( - <> -

- The sister website to CodeDevils.org, CodeDevils Academy is our content management and learning - platform. We're excited to announce the development of our dedicated learning platform designed - to empower our community through accessible educational resources. This project will be built - from the ground up, although the designs for it are in the late stages. Our vision for CodeDevils - Academy is to create an engaging, user-friendly environment where members can easily access a wealth - of learning materials tailored to their needs. -

- We aim to provide a seamless experience for all users. The platform will feature a clean and organized - layout, allowing members to quickly find exclusive tutorials, courses, and resources without hassle. - We plan to create a robust content management system that will allow us to upload, edit, and manage - educational materials efficiently. -

- The platform will host a variety of content formats, including written tutorials, video lessons, - quizzes, and coding challenges. By offering multiple learning styles, we aim to engage all members, - whether they are beginners or advanced developers. To keep our members motivated, we'll implement - progress tracking features that allow users to monitor their advancement through courses and tutorials. - This will help them set goals and celebrate their achievements. -

- If you're ready to make a difference and help us build CodeDevils Academy, we invite you to apply. - Let's create a premier learning platform that reflects our commitment to education and community. - Your journey with CodeDevils starts here—let's make something great! -

- - ), ( -
-
-
-

Current Project Goals

-
-
-
    -
  • Implement a content player component
    • -
  • Create user authentication systems
    • -
  • Finalize front end and admin panel
    • -
- -
-
- ), ( -
- - { getSVG({ svgID: 3 }) } - - - { getSVG({ svgID: 2 }) } - - - { getSVG({ svgID: 4 }) } - -
- ), ( -
-
GitHub Activity
-
-
- ), ( -
- project image - project image - project image -
- ), ( -
-
-
-

Project Team

-
-
- Project Leader's photo -
-

{ getMember({memberID: projectTeams[projectID][0]?.[0] as MemberID, memberData: 'name'}) }

-

{ getMember({memberID: projectTeams[projectID][0]?.[0] as MemberID, memberData: 'bio'}) }

-
-
-
- { projectTeams[projectID][1] ? - ( projectTeams[projectID].map(([member, link], index) => ( - index > 0 ? ( -
- { link ? {member} - :

{member}

} -
) : <> - ))) : <>

No contributors just yet. Be the first to apply!

} -
-
- ), - ( -
- -
- ) - ], - website: [( -
-

CodeDevils Website

-
- -
-
- Join the Project! -
-
- ), ( -

Our rapidly-evolving website. New features and tools are constantly being added!

- ), ( - <> -

- This is the codedevils.org project; the website you're currently looking at. With many features - planned, and with an active rebrand going on, we'll need some talented hands to keep this ship running. - This is considered one of our core projects, meaning it is essential to the CodeDevils brand and - identity. We build our websites in Next.js and Typescript. Next.js is a powerful framework for - JavaScript/TypeScript that handles frontend and backend deployments. One primary focus of the - website's design is to keep the code maintainable, manageable, and readable. We will not be building - web pages that are simply hard-coded in HTML, but are dynamic and rely on backend data structures to - function. -

- We have a lot of fun features planned, many of them are just to show off our skills as programmers, - but we're here to advertise our organization and put our best foot forward to outside companies, - prospective contributors, and to the university we stand behind. Our project is dedicated not to - being flashy, but to being robust and respectable to the community at large. We aim to create a - website that is not just functional but also resonates with our audience, reflecting our dedication - to quality and professionalism. -

- We're seeking contributors who share our passion for technology and community. Whether you're a - seasoned developer, a creative designer, or even someone wanting to dip their toes into web design - and learn from us, you're in the right place. If you're ready to make a meaningful contribution, - we invite you to join us. Whether you can dedicate a few hours or want to take on a larger role, - your efforts will help shape the future of CodeDevils.org. This is more than just coding; it's - about building a resource that empowers our community and showcases our commitment to excellence. -

- Let's work together to create a website that embodies the spirit of CodeDevils—dynamic, robust, - and community-focused. Your journey with us starts here. Let's make it remarkable! -

- - ), ( -
-
-
-

Current Project Goals

-
-
-
    -
  • Add and improve features using service API's
    • -
  • Redesign the website's colors and design to align with CodeDevils rebranding
    • -
  • Rewrite and redesign the website's content
    • -
- -
-
- ), ( -
- - { getSVG({ svgID: 3 }) } - - - { getSVG({ svgID: 2 }) } - - - { getSVG({ svgID: 4 }) } - -
- ), ( -
-
GitHub Activity
-
-
- ), ( -
- project image - project image - project image -
- ), ( -
-
-
-

Project Team

-
-
- Project Leader's photo -
-

{ getMember({memberID: projectTeams[projectID][0]?.[0] as MemberID, memberData: 'name'}) }

-

{ getMember({memberID: projectTeams[projectID][0]?.[0] as MemberID, memberData: 'bio'}) }

-
-
-
- { projectTeams[projectID][1] ? - ( projectTeams[projectID].map(([member, link], index) => ( - index > 0 ? ( -
- { link ? {member} - :

{member}

} -
) : <> - ))) : <>

No contributors just yet. Be the first to apply!

} -
-
- ), - ( -
- -
- ) + const content = { + academy: [ + , + , + , + , + , + + , + , + , + + ], + website: [ + , + , + , + , + , + + , + , + , + ], + gamedev: [ + , + , + + One of the main drivers behind the decision of using Rust + Bevy, was that it is open-source, and is turtles all the way down. In other words, everything is Rust from top to bottom, allowing us to delve deep into how the Bevy ECS framework, and all its accompanying tools, work under the hood. We want to teach you about all the components that goes into creating and running a game, and traditional game engines usually abstract all those details away. But that is not to say that Bevy is not easy to use. After some practice, we believe you'll find that it is incredibly ergonomic and user friendly, thanks to the amazing engineers contributing to the Bevy project. The game itself will be inspired from the{" "} + + + metroidvania genre + + + , but might take elements from other genres as well. It will be a 2D, side-view game, with a pixel art style. The features and systems we will implement will evolve over time as we prototype and progress together. By joining this project, you won't just be coding what we tell you to code, we also want you to be part of the discussion about where the game is headed in all of its aspect, would it be features and systems, or story and lore. +

, - gamedev: [( -
-

CodeDevils GameDev

-
- -
-
- Join the Project! -
-
- ), ( -

A series of Game Development projects to implement in various places around CodeDevils!

- ), ( - <> -

- Do you want to learn more about game development? Then the CD-GameDev project is for you. - We have decided to use the Rust programming language, a growingly popular, high-performance, - multi-purpose programming language that is sure to be a great tool to add to your skill set. - And although most games tend to use object oriented programming, we have opted to use a different - paradigm that is also growing more popular in the game dev world; Entity Component System (ECS). - This paradigm allows for major performance gains in compute heavy games, and also offers a different - way to think about objects in our game by separating data and systems. For this endeavor, we will be - using the Bevy ECS framework, one of the best on the market. -

- One of the main drivers behind the decision of using Rust + Bevy, was that it is open-source, and - is turtles all the way down. In other words, everything is Rust from top to bottom, allowing us - to delve deep into how the Bevy ECS framework, and all its accompanying tools, work under the hood. - We want to teach you about all the components that goes into creating and running a game, and traditional - game engines usually abstract all those details away. But that is not to say that Bevy is not easy to use. - After some practice, we believe you'll find that it is incredibly ergonomic and user friendly, thanks to - the amazing engineers contributing to the Bevy project. -

- The game itself will be inspired from the - - metroidvania genre - - , but might take elements from other genres as - well. It will be a 2D, side-view game, with a pixel art style. The features and systems we will implement - will evolve over time as we prototype and progress together. By joining this project, you won't just be - coding what we tell you to code, we also want you to be part of the discussion about where the game is headed - in all of its aspect, would it be features and systems, or story and lore. -

- The journey will be a challenging one, but will be very rewarding as well. You might have to learn quite - a few things before you can get started contributing, especially if you never coded in Rust or are new - to game development, but we will be there every step of the way, and we have curated a selection of - resources to help you get started using Rust and Bevy, so that you can start your game dev journey - with us as fast as possible. From things like how to handle asset loading, animations, handling audio, - to how game handles physics and graphics rendering, you'll come out of this project with a greater - understanding of all that comes into play when creating games. -

- - ), ( -
-
-
-

Current Project Goals

-
-
-
    -
  • Create systems and plugins to facilitate the creation of the game
    • -
  • Program and integrate multiple gameplay systems together
    • -
  • Publish the game on a game distribution platform
    • -
- -
-
- ), ( -
- - { getSVG({ svgID: 0 }) } - - - { getSVG({ svgID: 1 }) } - -
- ), ( -
-
GitHub Activity
-
-
- ), ( -
- project image - project image - project image -
- ), ( -
-
-
-

Project Team

-
-
- Project Leader's photo -
-

{ getMember({memberID: projectTeams[projectID][0]?.[0] as MemberID, memberData: 'name'}) }

-

{ getMember({memberID: projectTeams[projectID][0]?.[0] as MemberID, memberData: 'bio'}) }

-
-
-
- { projectTeams[projectID][1] ? - ( projectTeams[projectID].map(([member, link], index) => ( - index > 0 ? ( -
- { link ? {member} - :

{member}

} -
) : <> - ))) : <>

No contributors just yet. Be the first to apply!

} -
-
- ), - ( -
- -
- ) + "The journey will be a challenging one, but will be very rewarding as well. You might have to learn quite a few things before you can get started contributing, especially if you never coded in Rust or are new to game development, but we will be there every step of the way, and we have curated a selection of resources to help you get started using Rust and Bevy, so that you can start your game dev journey with us as fast as possible. From things like how to handle asset loading, animations, handling audio, to how game handles physics and graphics rendering, you'll come out of this project with a greater understanding of all that comes into play when creating games." + ]} + />, + , + , + + , + , + , + ], - - mobile: [( -
-

CodeDevils Mobile

-
- -
-
- Join the Project! -
-
- ), ( -

Our Mobile app! Built for iOS and Android, helps contributors keep up to date with projects and keeps members aware of events!

- ), ( - <> -

- Welcome to the CodeDevils Mobile project page! As part of our commitment to fostering a community of - developers, we are excited to announce the development of our mobile app, CodeDevils Mobile. This project - is designed to create a welcoming space for anyone interested in mobile development, whether you're a - beginner looking to learn or an experienced developer eager to share your knowledge. -

- With CodeDevils Mobile, our vision is to build an inclusive platform that encourages exploration and - collaboration in the world of mobile app development. We recognize that mobile technology is an integral - part of our lives, and we want to provide a space where members can come together to learn, share ideas, - and showcase their projects. By utilizing Dart/Flutter, Swift, and Kotlin, we aim to create a versatile - application that caters to both iOS and Android platforms. -

- CodeDevils Mobile, in its current vision, will serve primarily as a community platform for CodeDevils - events, Academy content, and have a contributor platform to stay up to date with the latest project - announcements and changes. Additional features will come as the project unfolds. We have a lot of - excitement for this project and we're very excited to see what it becomes. -

- If you have a particular interest or passion for mobile development, we encourage you to get started - early on this project and make your mark! Your influence on the direction and execution of this project - will be invaluable to both your career and to the project as a whole. -

- - ), ( -
-
-
-

Current Project Goals

-
-
-
    -
  • Create systems and plugins to facilitate the creation of the game
    • -
  • Program and integrate multiple gameplay systems together
    • -
  • Publish the game on a game distribution platform
    • -
- -
-
- ), ( -
- - { getSVG({ svgID: 5 }) } - - - { getSVG({ svgID: 6 }) } - - - { getSVG({ svgID: 7 }) } - - - { getSVG({ svgID: 8 }) } - -
- ), ( -
-
GitHub Activity
-
-
- ), ( -
- project image - project image - project image -
- ), ( -
-
-
-

Project Team

-
-
- Project Leader's photo -
-

{ getMember({memberID: projectTeams[projectID][0]?.[0] as MemberID, memberData: 'name'}) }

-

{ getMember({memberID: projectTeams[projectID][0]?.[0] as MemberID, memberData: 'bio'}) }

-
-
-
- { projectTeams[projectID][1] ? - ( projectTeams[projectID].map(([member, link], index) => ( - index > 0 ? ( -
- { link ? {member} - :

{member}

} -
) : <> - ))) :

No contributors just yet. Be the first to apply!

} -
-
- ), - ( -
- -
- ) - ], - - scraper: [( -
-

CodeDevils Scraper

-
- -
-
- Join the Project! -
-
- ), ( -

A job post scraping tool built to keep our members up to date with the latest developments in the job market!

- ), ( - <> -

- CD-Scraper is a project designed to teach the fundamentals of web scaping and the tools to make that happen. - The goal is to design a system for scraping job posting from various websites and serving the collected data - through an API build using SpringBoot. As this project is going to be based fully in Java, it is friendly to - those that are just starting off their programming journey. -

- Throughout this project, contributors will have the opportunity to collaborate with peers, share insights, - and learn from each other. This team-oriented approach fosters a supportive environment where beginners can - ask questions and gain confidence in their coding abilities. You'll not only develop your technical skills - but also engage in problem-solving and critical thinking as you navigate the challenges of web scraping - together. -

- Each contributor will be responsible for implementing a script to scrape different job posting websites - (i.e. Indeed, LinkedIn). Through this process, you will, hopefully, have a grasp on the some fundamental - HTML parsing. -

- In this project, you will NOT be working with APIs or any web related technology. Those will be managed - by staff to ensure this project is easy to pick up for those new to programming, but wanting to contribute - to a more complex project outside of school assignments. Also, you will NOT be working with any data and - their persistence (i.e. databases). -

- If you want to apply what you have learned about Java in class into a project that is more tangible, - join our beginner-friendly project by filling out our application. Your project lead will reach out to you - within the week. Let's learn to code by building something meaningful and fun! -

- - ), ( -
-
-
-

Current Project Goals

-
-
-
    -
  • Learn about web scraping
    • -
  • Take Java skills from school and implement them into a tangible project
    • -
  • Gain confidence to start your own personal projects
    • -
- -
-
- ), ( -
- - { getSVG({ svgID: 9 }) } - -
- ), ( -
-
GitHub Activity
-
-
- ), ( -
- project image - project image - project image -
- ), ( -
-
-
-

Project Team

-
-
- Project Leader's photo -
-

{ getMember({memberID: projectTeams[projectID][0]?.[0] as MemberID, memberData: 'name'}) }

-

{ getMember({memberID: projectTeams[projectID][0]?.[0] as MemberID, memberData: 'bio'}) }

-
-
-
- { projectTeams[projectID][1] ? - ( projectTeams[projectID].map(([member, link], index) => ( - index > 0 ? ( -
- { link ? {member} - :

{member}

} -
) : <> - ))) :

No contributors just yet. Be the first to apply!

} -
-
- ), - ( -
- -
- ) + mobile: [ + , + , + , + + , + , + + , + , + , + + ], + scraper: [ + , + , + , + , + + , + + , + , + , + + + ] }