Skip to content

Commit

Permalink
Merge pull request #77 from BSims623/main
Browse files Browse the repository at this point in the history
Single Project Contribute and Project/Single Project Refactor
  • Loading branch information
feydan authored May 23, 2024
2 parents 2fe817b + df1bf76 commit 4378ba5
Show file tree
Hide file tree
Showing 19 changed files with 368 additions and 254 deletions.
14 changes: 12 additions & 2 deletions src/app/get-started/getStartedSectionInstructions.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,18 @@ export default function GetStartedSectionInstructions({sectionType}) {
</div>
<div className={`anchors-container`}>
<Link href="/code-of-conduct" className={`anchor`}>Code of Conduct</Link>
<a href="/" className={`anchor`}>New Member Form</a>
<a className={`anchor`} href="https://www.meetup.com/code4sac/" target="_blank" rel="noopener noreferrer" aria-label="Link to Meetup.">Meeting Link</a>
<a
className={`anchor`}
href="https://docs.google.com/forms/d/e/1FAIpQLSfvzzvz8lCwUD8TEDiPt7ZmN34AB0dhG61590KM_scxYoZf5w/viewform"
target="_blank"
rel="noopener noreferrer"
aria-label="Link to new member form.">New Member Form</a>
<a
className={`anchor`}
href="https://www.meetup.com/code4sac/"
target="_blank"
rel="noopener noreferrer"
aria-label="Link to Meetup.">Meeting Link</a>
</div>
</div>
</section>
Expand Down
15 changes: 12 additions & 3 deletions src/app/projects/[project]/singleProject.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,11 @@ import SingleProjectsScreenshots from "./singleProjectsScreenshots";
import SingleProjectsRoadmap from "./singleProjectsRoadmap";
import SingleProjectsContribute from "./singleProjectsContribute";
import SingleProjectsDeveloper from "./singleProjectsDeveloper";
import SingleProjectsDesigner from "./singleProjectsDesigner";
import SingleProjectsOther from "./singleProjectsOther";
import SingleProjectsResources from "./singleProjectsResources";
import SingleProjectsVolunteer from "./singleProjectsVolunteer";
import Link from "next/link";
import { useState } from "react";

/**
* Section type. Displays light or dark themes.
Expand All @@ -34,6 +36,8 @@ const fetcher = (...args) =>
* @returns {JSX.Element}
*/
export default function SingleProject({ githubFullName }) {
const [contributeAs, setContributeAs] = useState('developer');

const { data, error, isLoading } = useSWR(
`https://api.github.com/repos/${githubFullName}`,
fetcher,
Expand All @@ -52,8 +56,13 @@ export default function SingleProject({ githubFullName }) {
<SingleProjectsBrief sectionType={SectionType.dark} data={data}/>
<SingleProjectsScreenshots sectionType={SectionType.dark} data={data}/>
<SingleProjectsRoadmap sectionType={SectionType.dark} data={data}/>
<SingleProjectsContribute sectionType={SectionType.dark} data={data}/>
<SingleProjectsDeveloper sectionType={SectionType.dark} data={data}/>
<SingleProjectsContribute
sectionType={SectionType.dark}
contributeAs={contributeAs}
setContributeAs={setContributeAs}/>
{contributeAs === 'developer' ? <SingleProjectsDeveloper sectionType={SectionType.dark} data={data}/>:
contributeAs === 'designer' ? <SingleProjectsDesigner sectionType={SectionType.dark} data={data}/>:
<SingleProjectsOther sectionType={SectionType.dark} data={data}/>}
<SingleProjectsResources sectionType={SectionType.dark} data={data}/>
<SingleProjectsVolunteer sectionType={SectionType.dark} data={data}/>
</div>
Expand Down
78 changes: 38 additions & 40 deletions src/app/projects/[project]/singleProjectsBrief.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,58 +2,56 @@ import { upperFirst } from "@/utils/string";

export default function SingleProjectsBrief({ sectionType, data }) {
return (
<>
<section id="project-brief" className="project-brief-container">
<div className="project-main-heading-container projects-main-heading-underline">
<h2 className="project-heading">
<section id="project-brief" className={`project-brief-container`}>
<div className={`project-main-heading-container projects-main-heading-underline`}>
<h2 className={`project-heading`}>
Project Brief
</h2>
</div>
<hr className="project-brief-info-line-top-first"/>
<div className="project-info-container project-info-line-top">
<p className="project-info-label">Status</p>{" "}
<p className=".project-info-text project-brief-status">
<hr className={`project-brief-info-line-top-first`}/>
<div className={`project-info-container project-info-line-top`}>
<p className={`project-info-label`}>Status</p>{" "}
<p className={`project-info-text project-brief-status`}>
{upperFirst(data.meta.project_status)}
</p>
</div>
<hr className="project-brief-info-line-top"/>
<div className="project-info-container project-info-line-top">
<p className="project-info-label">Description</p>{" "}
<p className="project-paragraph-alt">{data.meta.description}</p>
</div>
<hr className="project-brief-info-line-top"/>
<div className="project-info-container project-info-line-top">
<p className="project-info-label">Comments</p>
<p className="project-paragraph-alt">{upperFirst(data.meta.project_status)}</p>
</div>
<hr className="project-brief-info-line-top"/>
<div className="project-info-container">
<p className="project-info-label">Communications</p>
<p className="project-info-text project-brief-paragraph-communications">{data.meta.communications}</p>
<p className="project-info-label project-info-label-channels">Channels</p>
<hr className={`project-brief-info-line-top`}/>
<div className={`project-info-container project-info-line-top`}>
<p className={`project-info-label`}>Description</p>{" "}
<p className={`project-paragraph-alt`}>{data.meta.description}</p>
</div>
<hr className={`project-brief-info-line-top`}/>
<div className={`project-info-container project-info-line-top`}>
<p className={`project-info-label`}>Comments</p>
<p className={`project-paragraph-alt`}>{upperFirst(data.meta.project_status)}</p>
</div>
<hr className={`project-brief-info-line-top`}/>
<div className={`project-info-container`}>
<p className={`project-info-label`}>Communications</p>
<p className={`project-info-text project-brief-paragraph-communications`}>{data.meta.communications}</p>
<p className={`project-info-label project-info-label-channels`}>Channels</p>

</div>
<hr className="project-brief-info-line-top"/>
<div className="project-info-container project-info-line-top">
<p className="project-info-label">Project Partner</p>{" "}
<p className="project-info-text">{data.meta.project_partner}</p>
<hr className={`project-brief-info-line-top`}/>
<div className={`project-info-container project-info-line-top`}>
<p className={`project-info-label`}>Project Partner</p>{" "}
<p className={`project-info-text`}>{data.meta.project_partner}</p>
</div>
<hr className="project-brief-info-line-top"/>
<div className="project-info-container project-info-line-top">
<p className="project-info-label">Project Lead</p>{" "}
<p className="project-info-text">{data.meta.technical_lead}</p>
<hr className={`project-brief-info-line-top`}/>
<div className={`project-info-container project-info-line-top`}>
<p className={`project-info-label`}>Project Lead</p>{" "}
<p className={`project-info-text`}>{data.meta.technical_lead}</p>
</div>
<hr className="project-brief-info-line-top"/>
<div className="project-info-container project-info-line-top">
<p className="project-info-label">Technical Lead</p>{" "}
<p className="project-info-text">{data.meta.technical_lead}</p>
<hr className={`project-brief-info-line-top`}/>
<div className={`project-info-container project-info-line-top`}>
<p className={`project-info-label`}>Technical Lead</p>{" "}
<p className={`project-info-text`}>{data.meta.technical_lead}</p>
</div>
<hr className="project-brief-info-line-top"/>
<div className="project-info-container project-info-line-top">
<p className="project-info-label">Lead Designer</p>{" "}
<p className="project-info-text">{data.meta.lead_designer}</p>
<hr className={`project-brief-info-line-top`}/>
<div className={`project-info-container project-info-line-top`}>
<p className={`project-info-label`}>Lead Designer</p>{" "}
<p className={`project-info-text`}>{data.meta.lead_designer}</p>
</div>
</section>
</>
);
}
24 changes: 10 additions & 14 deletions src/app/projects/[project]/singleProjectsContribute.jsx
Original file line number Diff line number Diff line change
@@ -1,23 +1,19 @@
import Link from "next/link";

export default function SingleProjectsContribute({ sectionType, data }) {
export default function SingleProjectsContribute({ sectionType, contributeAs, setContributeAs }) {
return (
<>
<section id="how-to-contribute" className="project-contribute-container">
<div className="project-main-heading-container projects-main-heading-underline">
<h2 className="project-heading project-heading-underline">How to Contribute</h2>
<section id="how-to-contribute" className={`project-contribute-container`}>
<div className={`project-main-heading-container projects-main-heading-underline`}>
<h2 className={`project-heading project-heading-underline`}>How to Contribute</h2>
</div>
<p className="project-paragraph half-width">
<p className={`project-paragraph`}>
Open Sacramento is run by volunteers. We are always looking for help.
Explore the various ways you can make a difference.
</p>
<h4 className="project-info-label">Get Involved As</h4>
<div className = "project-button-container">
<Link className = "project-button project-button-alt" href=".">Developer</Link> {/*TODO: FILL IN LINKS*/}
<Link className = "project-button" href=".">Designer</Link>
<Link className = "project-button" href=".">Other</Link>
<h4 className={`project-info-label`}>Get Involved As</h4>
<div className = {`project-button-container`}>
<button className = {`project-button ${contributeAs === 'developer' && 'project-button-alt'}`} onClick={() => setContributeAs("developer")}>Developer</button>
<button className={`project-button ${contributeAs === 'designer' && 'project-button-alt'}`} onClick={() => setContributeAs("designer")}>Designer</button>
<button className={`project-button ${contributeAs === 'other' && 'project-button-alt'}`} onClick={() => setContributeAs("other")}>Other</button>
</div>
</section>
</>
);
}
63 changes: 63 additions & 0 deletions src/app/projects/[project]/singleProjectsDesigner.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import { upperFirst } from "@/utils/string";

export default function SingleProjectsDesigner({ sectionType, data }) {
return (
<section id="designer" className={`project-contributor-container`}>
<div className={`project-main-heading-container projects-main-heading-underline`}>
<h2 className={`project-heading project-heading-underline`}>Designer</h2>
</div>
<p className={`project-section-paragraph`}>
Designers can actively contribute to the project by creating content, updating Figma files, and more.
</p>
<hr className={`project-info-line-top-2`}/>
<div className={`project-info-container project-info-line-top`}>
<p className={`project-info-label`}>Difficulty</p>
<p className={`project-info-text`}>
{upperFirst(data.meta.contributing.designer.difficulty)}
</p>
</div>
<hr className={`project-info-line-top-2`}/>
<div className={`project-info-container project-info-line-top`}>
<p className={`project-info-label`}>Prototyping Tool</p>
<p className={`project-info-text`}>
Figma
</p>
</div>
<hr className={`project-info-line-top-2`}/>
<div className={`project-info-container project-info-line-top`}>
<p className={`project-info-label`}>Version</p>
<p className={`project-info-text`}>
2
</p>
</div>
<hr className={`project-info-line-top-2`}/>
<div className={`project-info-container project-info-line-top`}>
<p className={`project-info-label`}>Technologies</p>
<p className={`project-info-text`}>
{data.meta.contributing.designer.technologies}
</p>
</div>
<hr className={`project-info-line-top-2`}/>
<div className={`project-info-line-top`}>
<div className={`project-info-container`}>
<p className={`project-info-label`}>Version Control</p>
<p className={`project-info-text`}>
{data.meta.contributing.developer.version_control}
</p>
<p className={`project-info-label`}>Repo</p>
<p className={`project-info-text`}>
{data.meta.contributing.developer.repo}
</p>
</div>
</div>
<hr className={`project-info-line-top-2`}/>
<div className={`project-info-container project-info-line-top project-info-line-bottom`}>
<p className={`project-info-label`}>Ways to Contribute</p>
<p className={`project-info-text`}>
{data.meta.contributing.designer.ways_to_contribute}
</p>
</div>
<hr className={`project-info-line-top-2`}/>
</section>
);
}
62 changes: 30 additions & 32 deletions src/app/projects/[project]/singleProjectsDeveloper.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,66 +2,64 @@ import { upperFirst } from "@/utils/string";

export default function SingleProjectsDeveloper({ sectionType, data }) {
return (
<>
<section id="developer" className="project-developer-container">
<div className="project-main-heading-container projects-main-heading-underline">
<h2 className="project-heading project-heading-underline">Developer</h2>
<section id="developer" className={`project-contributor-container`}>
<div className={`project-main-heading-container projects-main-heading-underline`}>
<h2 className={`project-heading project-heading-underline`}>Developer</h2>
</div>
<p className="project-section-paragraph">
<p className={`project-section-paragraph`}>
Developers can actively contribute to the project by submitting pull
requests with code enhancements or bug fixes via the project's GitHub
repository.
</p>
<hr className="project-info-line-top-2" />
<div className="project-info-container project-info-line-top">
<p className="project-info-label">Difficulty</p>
<p className="project-info-text">
<hr className={`project-info-line-top-2`}/>
<div className={`project-info-container project-info-line-top`}>
<p className={`project-info-label`}>Difficulty</p>
<p className={`project-info-text`}>
{upperFirst(data.meta.contributing.developer.difficulty)}
</p>
</div>
<hr className="project-info-line-top-2" />
<div className="project-info-container project-info-line-top">
<p className="project-info-label">Frontend</p>
<p className="project-info-text">
<hr className={`project-info-line-top-2`}/>
<div className={`project-info-container project-info-line-top`}>
<p className={`project-info-label`}>Frontend</p>
<p className={`project-info-text`}>
{data.meta.contributing.developer.frontend}
</p>
</div>
<hr className="project-info-line-top-2" />
<div className="project-info-container project-info-line-top">
<p className="project-info-label">Backend</p>
<p className="project-info-text">
<hr className={`project-info-line-top-2`}/>
<div className={`project-info-container project-info-line-top`}>
<p className={`project-info-label`}>Backend</p>
<p className={`project-info-text`}>
{data.meta.contributing.developer.backend}
</p>
</div>
<hr className="project-info-line-top-2" />
<div className="project-info-container project-info-line-top">
<p className="project-info-label">Technologies</p>
<p className="project-info-text">
<hr className={`project-info-line-top-2`}/>
<div className={`project-info-container project-info-line-top`}>
<p className={`project-info-label`}>Technologies</p>
<p className={`project-info-text`}>
{data.meta.contributing.developer.technologies}
</p>
</div>
<hr className="project-info-line-top-2" />
<hr className={`project-info-line-top-2`}/>
<div className="project-info-line-top">
<div className="project-info-container">
<p className="project-info-label">Version Control</p>
<p className="project-info-text">
<p className={`project-info-label`}>Version Control</p>
<p className={`project-info-text`}>
{data.meta.contributing.developer.version_control}
</p>
<p className="project-info-label">Repo</p>
<p className="project-info-text">
<p className={`project-info-label`}>Repo</p>
<p className={`project-info-text`}>
{data.meta.contributing.developer.repo}
</p>
</div>
</div>
<hr className="project-info-line-top-2" />
<div className="project-info-container project-info-line-top project-info-line-bottom">
<p className="project-info-label">Ways to Contribute</p>
<p className="project-info-text">
<hr className={`project-info-line-top-2`}/>
<div className={`project-info-container project-info-line-top project-info-line-bottom`}>
<p className={`project-info-label`}>Ways to Contribute</p>
<p className={`project-info-text`}>
{data.meta.contributing.developer.ways_to_contribute}
</p>
</div>
<hr className="project-info-line-top-2" />
<hr className={`project-info-line-top-2`}/>
</section>
</>
);
}
15 changes: 6 additions & 9 deletions src/app/projects/[project]/singleProjectsLinks.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,25 +5,22 @@ const SingleProjectsLinks = () => {
<section
className={`project-info-line-top project-info-line-bottom project-link-container`}
>
<Link className="project-heading-alt" href="#project-brief">
<Link className={`project-heading-alt`} href="#project-brief">
Project Brief
</Link>
<Link className="project-heading-alt" href="#screenshots">
<Link className={`project-heading-alt`} href="#screenshots">
Screenshots
</Link>
<Link className="project-heading-alt" href="#roadmap">
<Link className={`project-heading-alt`} href="#roadmap">
Roadmap
</Link>
<Link className="project-heading-alt" href="#how-to-contribute">
<Link className={`project-heading-alt`} href="#how-to-contribute">
How to Contribute
</Link>
{/* <Link className="project-heading-alt" href="#developer">
Developer
</Link> */}
<Link className="project-heading-alt" href="#resources">
<Link className={`project-heading-alt`} href="#resources">
Resources
</Link>
<Link className="project-heading-alt" href="#how-to-volunteer">
<Link className={`project-heading-alt`} href="#how-to-volunteer">
How to Volunteer
</Link>
</section>
Expand Down
Loading

0 comments on commit 4378ba5

Please sign in to comment.