Skip to content

Commit fce7103

Browse files
matthewcn56matthewcn56
authored
added contributing page (#97)
* added contributing page and adjusted project request * addressed lint changes and initil gfi refactor * addressed changes restructured the gfi projects, and addressed some content changes * added images and fixed committee topics * added acm-w topic * fixed search query
1 parent bf28328 commit fce7103

File tree

8 files changed

+464
-28
lines changed

8 files changed

+464
-28
lines changed

‎components/ContributeProject.tsx

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
import Image from 'next/image';
2+
import React, { useState } from 'react';
3+
import { GFIProject, GitHubColors, GithubIssueAssignees } from '../util';
4+
import ELink from './ELink';
5+
6+
7+
interface ContributeProjectProps {
8+
project: GFIProject,
9+
githubColors: GitHubColors
10+
}
11+
12+
export default function ContributeProject({
13+
project,
14+
githubColors,
15+
}: ContributeProjectProps): JSX.Element {
16+
const {issues} = project;
17+
const proppedProject = project.project;
18+
const {
19+
name,
20+
description,
21+
repo,
22+
lang,
23+
topics,
24+
image,
25+
alt,
26+
} = proppedProject;
27+
28+
const numIssues = issues.length;
29+
30+
const [displayGfis, setDisplayGfis] = useState(false);
31+
32+
const displayedIssues = (
33+
<table>
34+
<tbody>
35+
{
36+
issues.map(issue=> (
37+
<tr key={issue.url} >
38+
<td>#{issue.number}</td>
39+
<td><ELink link={issue.html_url}>{issue.title}</ELink></td>
40+
<td><AssignedIssueUsers assignees={issue.assignees ?? []}/></td>
41+
<td>
42+
<span className='vertically-aligned-row'>
43+
<span className='comment-icon'><Image src={'/comment.svg'} height="15" width="15"/></span>
44+
{issue.comments}
45+
</span>
46+
</td>
47+
</tr>
48+
))
49+
}
50+
</tbody>
51+
</table>
52+
);
53+
return (
54+
<>
55+
<div className="spaced-row">
56+
<div className='gfi-title'>
57+
<div className='gfi-image'>
58+
<Image
59+
src={ image ?? '/logo.png'}
60+
alt={alt}
61+
width="75"
62+
height="75"
63+
layout="responsive"
64+
/>
65+
</div>
66+
<h3><ELink link={repo + '/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22'}>{name}</ELink></h3>
67+
</div>
68+
69+
<p>
70+
<span
71+
className="dev-language-badge"
72+
style={{
73+
backgroundColor: githubColors[lang]
74+
? githubColors[lang].color
75+
: 'black',
76+
}}
77+
></span>{' '}
78+
{lang || 'Markdown'}
79+
</p>
80+
</div>
81+
{topics.length > 0 &&
82+
<span>
83+
<dl>
84+
<dt>Topics • </dt>
85+
<dd> {topics.join(', ')}</dd>
86+
</dl>
87+
</span>
88+
}
89+
<div>{description}</div>
90+
<div className='spaced-row vertically-aligned-row'>
91+
<h4>good first issues</h4>
92+
<button
93+
type='button'
94+
onClick={() => setDisplayGfis(prevVal => !prevVal)}
95+
className={displayGfis ? 'gfi-button-displayed' : 'gfi-button'}
96+
>
97+
{numIssues} {numIssues > 1 ? ' issues' : ' issue'}
98+
</button>
99+
</div>
100+
{ displayGfis && displayedIssues}
101+
<hr />
102+
</>
103+
);
104+
}
105+
106+
interface AssignedIssueUsersProps {
107+
assignees: GithubIssueAssignees
108+
}
109+
function AssignedIssueUsers(props: AssignedIssueUsersProps ){
110+
const displayedAssignees = props.assignees.map(assignee =>
111+
assignee ?
112+
(<div key={assignee.login}>
113+
<ELink link={assignee.html_url}>
114+
<div className='assignee-image'>
115+
<Image
116+
src={assignee.avatar_url}
117+
alt={`${assignee.login}'s profile picture`}
118+
width="30"
119+
height="30"
120+
layout="responsive"
121+
title={assignee.login}
122+
/>
123+
</div>
124+
</ELink>
125+
</div>
126+
)
127+
: <></>,
128+
);
129+
return(
130+
<div style={{display: 'flex'}}>
131+
{displayedAssignees}
132+
</div>
133+
);
134+
}

‎pages/contribute.tsx

Lines changed: 147 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,22 @@
1+
2+
import { writeFile } from 'fs';
3+
import { GetStaticProps } from 'next';
14
import { NextSeo } from 'next-seo';
25
import React from 'react';
6+
import ContributeProject from '../components/ContributeProject';
7+
import ELink from '../components/ELink';
38
import Layout from '../components/Layout';
9+
import { getGoodFirstIssueProjects, getGithubColors, GitHubColors, GFIProject } from '../util';
10+
11+
interface ContributeProps {
12+
gfiProjects: GFIProject[],
13+
githubColors: GitHubColors
14+
}
415

5-
function Contribute(): JSX.Element {
16+
function Contribute({ gfiProjects, githubColors }: ContributeProps): JSX.Element {
17+
const displayedgfiProjects = gfiProjects.map((project) =>
18+
<ContributeProject project={project} githubColors={githubColors} key={project.project.repo} />,
19+
);
620
return (
721
<Layout>
822
<div className="container">
@@ -19,12 +33,140 @@ function Contribute(): JSX.Element {
1933
site_name: 'open source at ACM at UCLA',
2034
}}
2135
/>
22-
<h1>
23-
get started
24-
</h1>
36+
<div className='row spaced-row'>
37+
<h1>get started </h1>
38+
<a href='#good-first-issues'><button>good first issues</button></a>
39+
</div>
40+
<hr />
41+
<h2>
42+
what is open source?
43+
</h2>
44+
<p>
45+
Open source software is code that is made freely available for <b>anyone</b> to
46+
use or enhance! Here at ACM, we take pride in <strong>all</strong> of our projects being open-source
47+
and open for anyone to work on.
48+
</p>
49+
<h2>
50+
what makes open source possible?
51+
</h2>
52+
<p>
53+
The main backbone of open source initiatives are tools that simplify collaboration and sharing of code.
54+
Git and <ELink link='https://github.com/'>Github</ELink> are two popular tools used by researchers,
55+
companies, and students; at ACM, we use both.
56+
</p>
57+
<h2>
58+
how can i contribute?
59+
</h2>
60+
<p>
61+
We&apos;ll quickly go over how we can use git/github to work on some open source projects. If
62+
you want to learn more about the specifics of what we&apos;ll cover, you can check out {' '}
63+
<ELink link='https://git-scm.com/doc'>git&apos;s documentation</ELink>
64+
{' '} or our writeups on {' '}
65+
<ELink link='https://github.com/uclaacm/centralized-intern-training/tree/main/01_html_css_github#git-vs-github'>
66+
git workflows
67+
</ELink>
68+
{' '} and {' '}
69+
<ELink link='https://github.com/uclaacm/centralized-intern-training/tree/main/02_intermediate_css_github_workflows#github-as-a-collaboration-tool'>
70+
github as a collaboration tool
71+
</ELink>
72+
{' '}
73+
to get a closer look at what we&apos;re doing!
74+
</p>
75+
<h3>
76+
jumping into contributing on a project
77+
</h3>
78+
<p>
79+
There are thousands of open-source projects out there - it&apos;s hard to even find out where to start!
80+
Luckily, some <strong>repositories</strong>, or the main hub of projects, have <strong>issues</strong>, or
81+
project tasks, marked as <strong>good first issue</strong>.
82+
These are great starting points for people to hop in and contribute!
83+
</p>
84+
85+
<p className='spaced-row'>Check out some of our projects tagged with good first issues here!<a href='#good-first-issues'><button>ACM&apos;s Good First Issues</button></a></p>
86+
87+
<h2>contribution workflow</h2>
88+
<p>
89+
Repositories normally tell you how the steps you need to take to get to work, usually within their
90+
README.mdor their CONTRIBUTING.md but generally, there&apos;s generally a standard couple steps
91+
you&apos;ll have to take. For a detailed contribution guide, check out github&apos;s {' '}
92+
<ELink link='https://docs.github.com/en/get-started/quickstart/contributing-to-projects'>
93+
contribution guide
94+
</ELink>!
95+
</p>
96+
<h3>forking and cloning a repo</h3>
97+
<p>By clicking fork on a project that you want to contribute to, GitHub generates a personal copy of that
98+
repo under your account. To clone it onto your computer, you can click the code button above the list of files
99+
and run
100+
</p>
101+
<p><code>$ git clone git@github.com:uclaacm/opensource.git</code></p>
102+
<p>to get it onto your machine.</p>
103+
<h3>branching, making changes</h3>
104+
<p>
105+
Generally, when you want to make a specific change to a project, you make a branch,
106+
so that you can work on a new feature without affecting other people&apos;s work.
107+
To do so, run the <code>git checkout -b BRANCH_NAME</code> command
108+
to generate a new branch or <code>git checkout BRANCH_NAME</code> to switch between branches.
109+
</p>
110+
<p>
111+
After you&apos;ve made your changes, run {' '}
112+
<code>git add .</code> then <code>git commit -m &quot;a short commit description&quot;</code> {' '}
113+
to take a snapshot of all the changes you&apos;ve made and <code>git push</code> to push the changes you
114+
made to GitHub.
115+
</p>
116+
<h3>making a pull request</h3>
117+
<p>
118+
Now that you&apos;ve successfully made the changes you want on your fork of the project,
119+
if you head over to the original project repository and click <strong>Open a pull request</strong>,
120+
you can put in a title and description of your changes.
121+
</p>
122+
<p>
123+
After making a pull request, the maintainers of the project will check if your code is up to snuff
124+
and request changes as necessary. Once they approve your changes however, you can merge your changes
125+
in and you&apos;ve successfully contributed to the project!
126+
</p>
127+
<p className='action'>what are you waiting for? go work on some projects!</p>
128+
129+
<h2 id='good-first-issues'>
130+
acm&apos;s projects w/ good first issues
131+
</h2>
132+
<p>
133+
<span>acm currently has </span>
134+
<strong>{displayedgfiProjects.length}</strong>
135+
{
136+
`
137+
${displayedgfiProjects.length>1 ? 'projects' : 'project' }
138+
with good first issues!`
139+
}
140+
</p>
141+
<div className='card'>
142+
<div className='card-body'>
143+
{displayedgfiProjects}
144+
</div>
145+
</div>
25146
</div>
26-
</Layout>
147+
</Layout >
27148
);
28149
}
29150

30151
export default Contribute;
152+
153+
154+
export const getStaticProps: GetStaticProps = async () => {
155+
// TODO(mattxwang): change the auth scope and get members, etc.
156+
// see: https://docs.github.com/en/rest/reference/orgs
157+
158+
const gfiProjects = await getGoodFirstIssueProjects();
159+
const gfisJson = JSON.stringify(gfiProjects);
160+
writeFile('./test/fixtures/gfiProjects.json', gfisJson, () => {
161+
return;
162+
});
163+
164+
const githubColors = await getGithubColors();
165+
return {
166+
props: {
167+
gfiProjects,
168+
githubColors,
169+
},
170+
revalidate: 3600,
171+
};
172+
};

‎public/comment.svg

Lines changed: 1 addition & 0 deletions
Loading

‎styles/globals.css

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,24 @@ body {
3333
height: 100%;
3434
}
3535

36+
.assignee-image {
37+
border-radius: 50%;
38+
overflow: hidden;
39+
width: 30px;
40+
height: 30px;
41+
}
42+
3643
/* this overrides a child div's display, which is useful for nullifying next/image's wrapper */
3744
.force-child-display-block > div {
3845
display: block !important;
3946
}
4047

48+
.spaced-row {
49+
display: flex;
50+
justify-content: space-between;
51+
align-items: center;
52+
}
53+
4154
/* overriding the WestwoodCSS default */
4255
.navbar-link a {
4356
padding-left: 1em !important;
@@ -81,3 +94,59 @@ body {
8194
.dev-language-badge.lang-rust {
8295
background-color: #DEA584;
8396
}
97+
98+
.vertically-aligned-row {
99+
display: flex;
100+
flex-direction: row;
101+
align-content: center;
102+
align-items: center;
103+
}
104+
105+
.vertically-aligned-row > * {
106+
align-items: center;
107+
align-content: center;
108+
}
109+
110+
.gfi-title {
111+
display: flex;
112+
flex-direction: row;
113+
align-items: center;
114+
align-content: center;
115+
text-align: center;
116+
vertical-align: top;
117+
text-align: center;
118+
}
119+
120+
.gfi-title > h3 {
121+
margin: 0
122+
}
123+
124+
.gfi-image {
125+
width: 75px;
126+
height: 75px;
127+
}
128+
129+
.gfi-button {
130+
background-color: #1E6CFF;
131+
color: white;
132+
}
133+
134+
.gfi-button-displayed {
135+
color: #1E6CFF;
136+
background-color: rgb(244, 244, 244);
137+
}
138+
139+
.comment-icon {
140+
margin-right: 5px;
141+
}
142+
143+
dl * {
144+
display: inline;
145+
margin: 0;
146+
}
147+
148+
.action {
149+
font-weight: bold;
150+
color: black;
151+
font-size: 36px;
152+
}

‎test/fixtures/gfiProjects.json

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

‎util/constants.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
// Good First Issue Projects Constants
2+
export const GFI_ISSUES_SEARCH_QUERY =
3+
'org:uclaacm+label:"good+first+issue"+is:open';
4+
export const GFI_REPOS_SEARCH_QUERY = 'good-first-issues:>0+org:uclaacm';

0 commit comments

Comments
 (0)