lucavallin / verto Goto Github PK
View Code? Open in Web Editor NEWYour Gateway to Open-Source Collaboration.
Home Page: https://verto.sh
License: MIT License
Your Gateway to Open-Source Collaboration.
Home Page: https://verto.sh
License: MIT License
It would be nice to have a small section in the "sidebar" to list sponsors of the project. Current sponsors are:
The performance of the website is not the best, understandably so, given that it is a static website loading ~1.5MB of json data. This is not the only thing that needs addressing, however:
Hey @cloudhoy! No token errors in the workflow, however, we are being rate-limited, see https://github.com/lucavallin/first-issue/actions/runs/5815296740/job/15766591898#step:7:27. How would you address this?
Originally posted by @lucavallin in #150 (comment)
We have done a good job at writing quality code, but it is important to always review the state of the codebase to improve it and update itL
This is an on-going "issue" that will remain open: do you see anything that could be improved? Let us know and feel free to open a pull request.
Information about repositories is now fetched by the script generate.py
. The script retrieves data from the GitHub API and then compiles it in data/generated.json
and data/tags.json
.
It should be possible to use https://nextjs.org/docs/basic-features/data-fetching/get-static-props to achieve this so that the process is perfectly integrated with Next.js. Also, we'd lose the dependency on Python and we wouldn't need those json files anymore. If this is not possible, it would still be nice to convert the generate.py
script to Typescript to have only one language/ecosystem in the project.
When doing this, let's also convert repositories.toml
to JSON so it can be handled natively by Typescript.
There is an inconsistency in the design of RespositoryIssueNumberIndicator component as shown below:
The current CSS of the component does not work for viewports lesser than 950px. (Please note that this component is hidden in smaller devices)
The CSS should be fixed in order to maintain a consistent UI.
The current CSS of the component does not work for viewports lesser than 950px.
Fix the width and padding for the particular html element.
Go to firstissue.dev and resize the window to 950px.
Slowly start decreasing the size and observe the bug.
At this time, repositories are loaded all at once. This is a problem for users on less performant machines or on mobile. We should look into using react-window
or other libraries for lazy-loading and infinite scrolling to render repositories only when needed.
We want a way to let users subscribe to the newsletter so that they can be notified when new repos / issues are available.
Let's discuss the best approach to do this. Whatever the decision is, I should be able to configure the credentials needed for the service we are going to use via secrets in the deployment pipeline (so credentials remain secret and owned by myself).
We are currently filtering repositories in different places, for example:
I think this should be done in the AppDataContext so that all the repositories we get from there are already filtered.
This will allow a nicer implementation of the search bar, which is currently half-done here. What is missing is to use the query users enter to filter repositories including only those where the query appears in the repository name or owner, topic, issue title. Also, we should use Kbar or Algolia to do the searching.
We should generate a sitemap for indexing purpose and review performance and SEO-related configuration.
I think first-issue
should integrate with social networks so that we can increase our reach. A possible strategy would be to post a link to a "random" repository with new issues (or some other metric) at every deployment. The platforms could be:
Doing this requires registering the accounts, put together some script that publishes posts (or use an intermediary that can take care of the implementation details for each platform for us) and then publishing the post as the last step in the deployment pipeline.
They are currently commented out in next.config.js
.
We should consider adding a search page (and a search bar). When a user enters a search string, we can look for matches in languages, topic, repository's owner - name - description - topics - issues.
I already did some groundwork in /pages/search/[tag].tsx
but not much else. I can foresee this search to be a bit slow (since it's a static website it will have to be done via JS, in-memory, by checking arrays in a for loop).
Since we have multiple reasons why a project is not added (namely stars count and issues count) and we have different places where we do filter those out (for GitHub is a mix of GraphQL query and manual filter, for GitLab is only manual filter).
Probably, a good way to handle this would do all the queries and then iterate over the repos coming from a source and see if it's there or not, and log those results.
Originally posted by @zillemarco in #171 (comment)
We have done a good job at writing quality code, but it is important to always review the state of the codebase to improve it and update itL
This is an on-going "issue" that will remain open: do you see anything that could be improved? Let us know and feel free to open a pull request.
The current behavior is annoying because it toggles the repository item card isOpen state whenever you click on anything within the repo card, including links.
A few problems for the (near) future:
We are missing a button in the list of repositories on the website to sort by stars, last updated and by new issues. The data is already available, but the sort button and functionality are not.
The components for the app can be split into smaller and more reusable ones. We would like to look into it and make changes where useful.
When on a language-specific or topic-specific page, if one reloads the page, then 404 is returned. This is because of how Next.js exports the static website. It would be nice to look into this and find a solution.
Hello, I hope you are feeling well. First I must say that I love the project, I've been waiting for a while to be able to contribute and I didn't see anything.
My proposal is to be in tune with the UI and the whole project, put color to the scroll bar so that it has more consistency on the web. Here I leave an image of the proposal:
Hi @lucavallin,
Would it be complex to add support for GitLab repositories? It would make this project stand out and we could solve DeepSourceCorp/good-first-issue#455 together.
I would love it if we can change this before Hacktoberfest starts, so that we can give new contributors the chance to break out of the GitHub island. Perhaps a mechanism that allows to pull information from GitLab, which could be a new entry in your json? https://github.com/lucavallin/first-issue/blob/main/firstissue.json. Right now you don't prefix it with the source, but that seems rather simple to do? I'm not super versed in typescript, but I do want to give it a shot?
The sidebar currently stays stuck at the top, so it is not visible anymore when scrolling through the list of repos. We should consider giving it a fixed position so it is always visible in the page.
I have left a bunch of TODO comments around, mostly minor fixes/improvements that need to be resolved.
It would be nice to scrape trending repositories everyday and add the ones meeting the criteria to the list. Unfortunately there is no API from GitHub for this, and the third-party solutions don't seem to work anymore, but we'll keep this issue here for the future. Same for discovering repositories by topic.
Test with https://pagespeed.web.dev and address the issues.
generate.ts
is the script used to pull data from GitHub and and compile the JSON file containing it for the static website. It can be split into smaller, more readable functions.
The ID is fine for now, but make sure to create a follow-up issue to replace that with the repo name
Originally posted by @lucavallin in #171 (comment)
After going through the README.md, I came across that firstissue is based on goodfirstissue. Bringing beginner-friendly issues to open-source newbies is an appreciated effort. However, I believe we can add tutorials/screenshots/videos/guides to the How It Works? section so that we truly accompany beginners to make their first contribution with us! @lucavallin
Each time the project is built, we remove repositories that don't meet the requirements from firstissue.json
. There is an action to push the updated file to the main
branch, but it wasn't working and I commented it out from .github/workflows/deploy.yml
. The goal is to re-enable it and make sure it works.
We have done a good job at writing quality code, but it is important to always review the state of the codebase to improve it and update itL
This is an on-going "issue" that will remain open: do you see anything that could be improved? Let us know and feel free to open a pull request.
Can we have the site filter based on multiple parameters, like Language, Tags simultaneously?
For example, we can filter by language: "JavaScript" and tag: "good first issue" at the same time.
The URL will look something like this https://firstissue.dev/?language=JavaScript&tags=good+first+issue
We can also add the facility to filter by multiple tags and languages.
We have done a good job at writing quality code, but it is important to always review the state of the codebase to improve it and update itL
This is an on-going "issue" that will remain open: do you see anything that could be improved? Let us know and feel free to open a pull request.
On mobile the menu takes a lot of space and users needs to scroll a while before getting to the list of repositories, see:
I suggest the following:
An error occurred during the build process after merging PR #139:
Hey @cloudhoy! I merged the PR but in the pipeline an error seems to come up, my bad, I should have enabled Actions on PRs. Would you be able to open a new PR and have a look at https://github.com/lucavallin/first-issue/actions/runs/5793919555/job/15702527904? ๐๐ผ
Originally posted by @lucavallin in #139 (comment)
We would like to be able to sort repositories, probably by:
This repo is missing some important files that are considered as OSS best practices. The files that i have listed below will improve the experience of the contributors and also will make sure the Hacktoberfest participants will get their PRs accepted.
Kindly add the following files in the repo:
Contributing.md
Code of conduct.md
@chidame is working on a redesign for the website. Once she's done with it, I'll need help implementing it. Leave a comment in this issue if you're interested in helping when the time comes.
The schedule-deploy
workflow at https://github.com/lucavallin/first-issue/blob/main/.github/workflows/schedule_deploy.yml is used to run the Deploy to firstissue.dev
once a day: it fetches new data and deploys to the website. Unfortunately the script it runs is rate-limited by GitHub after just a few calls when the pipeline is triggered by schedule-deploy
. I think this might be due to some token not being set properly for schedule-deploy
.
The file ReposiroryIssueNumberIndicator.tsx
should be renamed RepositoryIssueNumberIndicator.tsx
. I don't know how I missed this (considering I have spell check in my VSCode ๐
). I introduced this file, in this PR #69 ๐คฆโโ๏ธ (sorry about that ๐ ) .
The actual component in the file has the correct name, it's just the file name that's incorrect, along with the import statement in RepositoryItemTopBar.tsx
.
It would be nice to be able to filter for repositories that are CNCF projects. We will probably need to apply a tag manually to the repos defined here:
https://github.com/cncf/landscape/blob/master/landscape.yml
In the UI, we can have a way to list "special tags", in this case CNCF.
At this time, we can see all issues for a specific language at a URL like https://gfi.cavall.in/language/Go. But:
Go
) should follow "URL" best practicesA few points we could improve on:
generate.ts
is the script used to pull data from GitHub and and compile the JSON file containing it for the static website. It can be split into smaller, more readable functions.It is currently possible to filter repositories by language, but nothing else. It would be nice to be able to filter by topic (and show the topics).
The UI is fine at the moment, but some alignments are wonky and the UX could use some polishing.
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.