lucavallin / verto Goto Github PK

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?

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).

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:

• Reddit
• Twitter/X
• LinkedIn
• ...
• I am not sure which ones next because I only really use Reddit and LinkedIn.

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.

We are currently filtering repositories in different places, for example:

• pages/index.tsx
• pages/tag/[tag].tsx
• pages/language/[tag].tsx

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 would like to be able to sort repositories, probably by:

• Stars
• Number of issues
• ???

It would be nice to have a small section in the "sidebar" to list sponsors of the project. Current sponsors are:

• Myself, cavall.in

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.

Repository items currently look like this:

• The font is all different
• Hard to read
• The title of different issues has different lengths and it looks all wonky

Feel free to look into this and come up with something that looks better!

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.

Text overflow occurs for issue titles with long words. See for example mattermost/mattermost in the gif below:

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:

• When a tag or language is selected, the page should scroll automatically to the repository list (could be done with a URL anchor)
• Make it possible to collapse language/tags and open the list only when the section title is clicked.

Bug description

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)

Expected Behavior

The CSS should be fixed in order to maintain a consistent UI.

Current Behavior

The current CSS of the component does not work for viewports lesser than 950px.

Possible Solution

Fix the width and padding for the particular html element.

Steps to Reproduce

Go to firstissue.dev and resize the window to 950px.
Slowly start decreasing the size and observe the bug.

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.

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

• Are we following TypeScript's best practices?
• Is our use of TypeScript up-to-date?

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.

Some repositories have duplicated issues, see for example catboost/catboost: #863 and #1860 are duplicated.

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.

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

• Are we following TailwindCSS' best practices?
• Is our use of TailwindCSS up-to-date?

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.

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)

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.

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.

The 404 page doesn't appear often, but when it does, it looks out of place:

Let's discuss ideas and update itso it looks nice!

General

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.

See https://firstissue.dev/language/lua/ page for example. In the screenshot below, the repository list does not take up the full width of the content area (empty space indicated by the red rectangle).

A few points we could improve on:

• We want to check and make sure that we are using Next.js and React in the good, correct, best-practice way.
• We are just within GitHub's API limits at this time. We need to find a solution to the amount of requests we are making. Possible solutions are include increasing timeout between calls and getting data in chunks (run the script fetching the data multiple times a day, get data for a fraction of the repositories and append it to the generated file - clear the file once a day)
• Searching is not optimal, maybe Algolia could help here.
• The JSON used by the static website is huge. Maybe something like jsonbin.io could help us ship a lighter website and retrieve the data (bit by bit) from some API. Obviously hosting our own API could be a solution, but I really don't want to bother with running anything.
• Test with https://pagespeed.web.dev/ and address 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 current behavior is annoying because it toggles the repository item card isOpen state whenever you click on anything within the repo card, including links.

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 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

• Are we following React's and Next.js best practices?
• Is our use of React and Next.js up-to-date?

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.

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:

Test with https://pagespeed.web.dev and address the issues.

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.

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)

I have left a bunch of TODO comments around, mostly minor fixes/improvements that need to be resolved.

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 UI is fine at the moment, but some alignments are wonky and the UX could use some polishing.

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.

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.

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)

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

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 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).

@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.

We should generate a sitemap for indexing purpose and review performance and SEO-related configuration.

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.

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:

• Run pagespeed or a similar too
• Find performance issues that can be improved
• Address those issues
• Think of a way to reduce the impact of the json data (maybe not possible? maybe it can be loaded in chunks?)

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

I deeply appreciate the author and maintainers of this repo for their time and efforts. Thanks.

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

• Are we following Next.js' best practices?
• Is our use of Next.js up-to-date?

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.

They are currently commented out in next.config.js .

          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)

A few problems for the (near) future:

• We are just within GitHub's API limits at this time. We need to find a solution to the amount of requests we are making. Possible solutions are include increasing timeout between calls and getting data in chunks (run the script fetching the data multiple times a day, get data for a fraction of the repositories and append it to the generated file - clear the file once a day)
• Searching is not optimal, maybe Algolia could help here.
• The JSON used by the static website is huge. Maybe something like jsonbin.io could help us ship a lighter website and retrieve the data (bit by bit) from some API. Obviously hosting our own API could be a solution, but I really don't want to bother with running anything.
• Test with https://pagespeed.web.dev/ and address issues

At this time, we can see all issues for a specific language at a URL like https://gfi.cavall.in/language/Go. But:

• The language part of the URL (Go) should follow "URL" best practices
• We probably need to change or add a field in the generate json to make this work nicely