mozilla-frontend-infra / codetribute Goto Github PK
View Code? Open in Web Editor NEWA site that guides contributors to their first contribution
Home Page: https://codetribute.mozilla.org/
License: Mozilla Public License 2.0
A site that guides contributors to their first contribution
Home Page: https://codetribute.mozilla.org/
License: Mozilla Public License 2.0
The last updated column in the project table shows the date in the long format (2018-05-04T21:58:21Z). It would be nice if we can have last updated to be something like "2 days ago". We can achieve that with https://date-fns.org/v2.0.0-alpha.9/docs/formatDistance.
Scrolling the table horizontally scrolls "Bugs & Issues" and the filter icon as well. The expected outcome is to only have the table content be scrolled.
This include creating a loader file which read the yaml files to be exported.
Tags like that are a little bit hard to scan. Let's find a better way to display tags in the UI. We can probably show each tag in a Chip.
Add filter based on the project in the Toolbar on top of the task table
On table header click, we are now able to sort based on the clicked header. Yet, the url stays the same. It may be better to have query string with parameter of sort on and sort direction so that people can bookmark it and return to it without too much clicking. It will also help later when we add filter by
Fetch data using graphql to get the issue and related info and display them on the table.
We should try to have links inside the project introduction open in a new tab since they are external to the app.
For developers looking at the codetribute pages, they may want to know how to edit the source, or fix items in the source.
Can we put a link to this github repo on the page somewhere?
Now that we have each project's information, the data.yaml is not used anymore.
In a11y.yaml, we actually need to add additional keyword to the query on top of the good-first-bug that we implement
The current error panel has transparent white text and a black arrow on a red background.
Let's add more contrast by making the text and arrow both white. You can see how we do it in taskcluster-web.
The button when clicked will redirect user to one of the bugs page
Add a README file to tell other people what is this project, how can they use it (Usages / Installation), how can they contribute, etc.
Example:
https://github.com/mozilla-frontend-infra/bugzilla-graphql-gateway/blob/master/README.md
Clicking on "I'm Feeling Adventurous" currently opens a new window. Let's have it open a new tab instead.
Info button when clicked will show information about the bug / issue.
Clicking on the "Tag" column throws an error in the console: referenceElement.match is not a function
.
Now on the project page, there is a filter icon, which when clicked will show the filters. It would be nice to have reset button to reset all the filter back to the default state.
Based on this https://help.github.com/articles/searching-issues-and-pull-requests/#search-by-label, we need to add " before and after the label, for issue with space.
Organize the .yaml files (one .yaml file per repository) and put them in an appropriate directory
Add documentation
It would be neat to be able to hide the project introduction if a user does not want to be bothered by it. Material UI offers the expansion panel which we could make use of it. When a user enters the page, we could have the panel expanded by default.
One of the benefits of bugsahoy was that you could filter by language (c++/js/etc). There's lots of people that don't know all languages, so it would help people when finding associated bugs.
codetribute could maybe just list the languages, and add a filter, or just do a filter.
I believe it is generally the mentored bugs that have been annotated in the past (not always the good-first-bugs). There are generally annotated in the whiteboard with one of:
[lang=js][lang=xul]
[lang=js,xul]
[lang=js/xul]
The material design is designed to be used with the Roboto font. The project is currently defaulting to the Helvetica font. You can see that by opening the dev-tools in Firefox and inspecting which font has the underline:
We can make use of react-fout-stager
to load the font in stages so that we maintain the UX.
The description is in the format of ( ID - title ), sorting by using string may not be suitable for ID which is a number.
Create search bar to filter based on projects
When user clicks on the chip, it should filter the bugs that has that tag
Project introductions take a lot of vertical space. Let's have the panel closed by default so contributors can see the list of tasks on page load.
It will only display the last label because of the mergeAll
implementation.
using the bugzilla graphql gateway repository inside mozilla frontend infra
STR:
Expected: The focus is now on the first project and the user is able to traverse the list of projects via the tabs key.
Actual: The focus goes somewhere besides the URL.
As of now, the bugs we are fetching from bugzilla are those labeled 'good-first-bug' as its tag, when I check on a few website linking to bugsahoy, most of the site mentioned that BugsAhoy are meant for mentored bugs so i think we may need to add capabilities for mentored bugs
TODO: find appropriate query to query mentored bugs
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.