Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mozilla-frontend-infra/codetribute

A site that guides contributors to their first contribution
https://github.com/mozilla-frontend-infra/codetribute

Last synced: 3 months ago
JSON representation

A site that guides contributors to their first contribution

Awesome Lists containing this project

README 

        
# Codetribute



[![Known Vulnerabilities][snyk-image]][snyk-url]



Codetribute is a site that guides contributors to

their first contribution. It helps new contributors 

find a project they want to work with, learn about 

that project, and then find a task that is suitable 

to their skills and interests and not already assigned to 

someone else.



## Development



### Prerequisites



- Node version v16.18.1

- [Yarn](https://www.npmjs.com/package/yarn)



### Building



First, fork this repository to another GitHub account (your account).

Then you can clone and install:



```

git clone https://github.com//codetribute.git

cd codetribute

yarn

```



### Web Server

Codetribute relies on two servers, namely, GitHub’s GraphQL API v4 (managed by GitHub) and

[bugzilla-graphql-gateway](https://github.com/mozilla-frontend-infra/bugzilla-graphql-gateway).

The latter is required to perform queries to the Bugzilla API. For a local setup, clone the repo 

and follow the instruction for starting it prior to launching this application. You will need to

launch the bugzilla-graphql-gateway in a terminal instance separate from this application in order 

to run both simultaneously.



### Environment variables



To get started with local development, create a file in the root of the repo named

`.env` with the following content. You can also set the variables in your shell environment.



```bash

GITHUB_PERSONAL_API_TOKEN=

BUGZILLA_ENDPOINT=http://localhost:3090

PORT=5000

```



Generate a GitHub personal access token [here](https://github.com/settings/tokens). When prompted

about scopes, access to public repositories is the only one required.



### Code Organization



- `src/`: source code

- `src/App`: top-level component

- `src/components`: generic components that can be used in any view (not view-specific)



### Tasks and Configuration



Building this project uses [Neutrino](https://github.com/mozilla-neutrino/neutrino-dev),

[neutrino-preset-mozilla-frontend-infra](https://github.com/mozilla-frontend-infra/neutrino-preset-mozilla-frontend-infra)



### Testing changes



Install npm dependencies and start it up:



- `yarn`

- `yarn start`



This will start a local development server on port 5000 (http://localhost:5000).



Additionally if you wish to query the Bugzilla GraphQL API locally instead of

the production instance, you'll need to clone and run

[mozilla-frontend-infra/bugzilla-graphql-gateway](https://github.com/mozilla-frontend-infra/bugzilla-graphql-gateway).



## Adding a project



Codetribute can read from both GitHub and Bugzilla. Regarding the latter, bugs with the `good-first-bug` keyword and mentored bugs will appear in the list.

To add a new entry to the site, create a file `.yml` in `src/data` using the [template example](#template-example) as the initial setup. 

For inspiration, check out the [Taskcluster](https://github.com/mozilla-frontend-infra/codetribute/blob/main/src/data/taskcluster.yaml) yaml file.



### Template Example



```yaml

name: 

summary: A short summary of the project

icon: An icon from https://materialdesignicons.com/

introduction: |

  ## About 



  



  ## Who Works on ?



  



  ## How Do I Get Started?



  



  ### How Do I Write the Code?



  



  ## How Do I Get Help?



  



products:

- 

- : ['', '']

# to include multiple products or components under a single label in the "Projects" menu, or customize the label:

- label: 

  products:

  - 

  - : ['', ''] 

repositories:

- / : 

- / : ['', '']



```

_Note: The `summary` and `introduction` fields are to be rendered as markdown, allowing for bullet points, links and other simple formatting._



#### Project Icons



Each project should have an icon associated to it to be displayed on the home page. To pick an icon, you could either:

1. Include an icon in `src/images/projectIcons`. The icon should have the same name as its configuration file

and have the image extension set as `.svg`.

2. Pick an icon from [materialdesignicons](https://materialdesignicons.com) and include its name in the `icon` field of the yaml file.



### Best Practices



Below is information about how to get a bug or issue appear on the site.



#### GitHub



Codetribute will read the `repositories` field from the yaml file and will take extract the issues that match the repository labels.



_Example: Display servo issues tagged with the label *E-easy*_



```yaml

repositories: 

 - servo/servo: E-easy

```



_Example: Display telemetry-dashboard issues tagged with either the *mentored* or *good first issue* label_



```yaml

repositories:

 - mozilla/telemetry-dashboard: ['mentored', 'good first issue']

```



For the `/languages/:language` route, we get issues from repositories whose primary language is the language selected & tagged with labels specified in yaml files

or any issues across Github repositories with the language lowercased as the label (e.g., `javascript`).



#### Bugzilla



Codetribute will read the `products` field from the yaml file and will extract bugs with keyword `good-first-bug`. Here are some ways to display bugs on the site.



_Example: Display all Taskcluster bugs with keyword *good-first-bug*_



```yaml

products: 

 - Taskcluster

```



_Example: Display Taskcluster bugs that are under either the Tools component or the Queue component with keyword *good-first-bug*_



```yaml

products:

 - Taskcluster: ['Tools', 'Queue']

```



## Data Flow



![data flow image](codetribute-data-flow.png)



## Contributing



This project welcomes contributors. If you are interested, please feel free to

join [the mailing list](https://mail.mozilla.org/listinfo/bugsahoy-devel)



[snyk-image]: https://snyk.io/test/github/mozilla-frontend-infra/codetribute/badge.svg

[snyk-url]: https://snyk.io/test/github/mozilla-frontend-infra/codetribute?targetFile=package.json