Accessibility bug

I came to the website to check out some issues for Hacktober Fest and noticed the contrast between the foreground text and background does not meet WCAG 2 AA minimum ratio thresholds for the following on the landing page:

• h1
• p
• span
• input

Screenshots

Current contrast ratio

The current WACAG 22 color contract ratio is 1.32 : 1

WCAG2 Acceptance Criteria

• WCAG2 AA minimum is 4.5 : 1
• suggest WCAG2 AAA minimum is 4.5: 1 and 7 : 1

Suggested solution for text color

Device:

Desktop
Browser: Chrome latest version

Comments

Additional contrast issues are found on the search results for projects but I think this would be a great first issue for some people and would make Hacktober Fest more inclusive for all people :)

Right now the 404 page looks like this.

Resource: Custom 404 page in NextJS

I will make the header of the website responsive, attaching the screenshots of before and after. If you like this, please assign this to me, would be happy to contribute for the same.

Before

After

Mobile Device Screenshot

Thank You,
Nishidh Jain

These codes can be improved by using JavaScript objects and the map function, making it easier to read and maintain.

I want to work on this issue. @max-programming

            <li>
              <Link href={{ query: { ...router.query } }}>Best match</Link>
            </li>
            <li>
              <Link
                href={{ query: { ...router.query, s: 'stars', o: 'desc' } }}
              >
                Most stars
              </Link>
            </li>
            <li>
              <Link href={{ query: { ...router.query, s: 'stars', o: 'asc' } }}>
                Fewest stars
              </Link>
            </li>
            <li>
              <Link
                href={{ query: { ...router.query, s: 'forks', o: 'desc' } }}
              >
                Most forks
              </Link>
            </li>
            <li>
              <Link href={{ query: { ...router.query, s: 'forks', o: 'asc' } }}>
                Fewest forks
              </Link>
            </li>
            <li>
              <Link
                href={{
                  query: { ...router.query, s: 'help-wanted-issues', o: 'desc' }
                }}
              >
                Most help wanted issues
              </Link>
            </li>
            <li>
              <Link
                href={{ query: { ...router.query, s: 'updated', o: 'desc' } }}
              >
                Recently updated
              </Link>
            </li>
            <li>
              <Link
                href={{ query: { ...router.query, s: 'updated', o: 'asc' } }}
              >
                Least recently updated
              </Link>
            </li>

Right now, there are no icons for the buttons. It would be better if monotone icons are used before the name of the language.

Please consider using simpleicons.org

Issue Description:
I would like to request the addition of left and right padding to the repository card displayed on the GitHub repository page. Currently, the repository card appears to be lacking padding, and this affects the overall visual aesthetics and readability of the content.

• Please consider the impact of this change on responsive design, ensuring that it works well on various screen sizes.
• It's important that the padding is consistent and does not interfere with other elements on the page.

I would like to work on this issue. Thank you in advance.

In the readme file there is not link for the deployed live website url. If the url is present then we can just click on it and see the all the eligible repositories without cloning and running locally.

Search bar not centrally aligned to the page but moved slightly in the right

Solution :

Centrally Align the navbar without compromising responsiveness of the website

From home page I chose C language. Then I filtered according to Most Help Wanted Issues.
The page doesn't come up but sometimes it does.

After clicking on the language dropdown and selecting an option, the relevant results appear, but the dropdown options continue to appear. Dropdown menu disappears when you click anywhere. I think this is a bug.

Can you assign me to this issue?

Hi, @max-programming! I'm Sneha from India, a Frontend developer, and a Technical writer. I saw your website and it looks dope however there are some UI-related changes.
This unequal space doesn't look good. I'll give it an equal spacing
Assign this task to me under hacktoberfest label ✨

Thank you and have a nice day!

Describe the Bug

• Users Does not find signin Button bcz of text-color (black && Css)

To Reproduce

• Checkout Header Part

Expected Behavior

• Make visible signbutton to write Change Css of button.

There is no light mod toggle button in the nav

Currently manual updation of year is required in meta description for Hacktoberfest year, which we might forget it to update every year. So, we can use the current year from the date and update the value automatically with manual intervention.

Please assign this to me, I would be happy to work on it

Thank You,
Nishidh Jain

The idea about this is to implement a report button for repositories that are spam but also have the "hacktoberfest" label.

Once a repo is reported, it should be manually reviewed by either me or someone else and then it can be added to a list of filtered repositories

There's history of searched items visible over clicking on the search button, it should be kept "autocomplete off" to prevent it from invading privacy of user. Also it takes cookies data, which displays vague items searched by user in context to some other search bar.
Screenshot:

Please assign under hacktoberfest 2023 :)

currently, if we hover over the button it will show a bg but we should add a border/bg. I want to work on this issue.

Screenshot for reference:

I'd like to work on this issue @max-programming.
Could you please assign it to me?

When we chose a language to see hacktoberfest projects repository on that page we don't have any language selection list to directly switch to different language project repos...

Please assign this to me

Text should be visible.

Due to this, text written on the webpage is not properly visible. I would like to change it. Kindly assign me this issue.
Thanks.

On the contributors page of the website right now normal img tags are used. It would be better to use the Image component from Next.js with a placeholder of blur.

Refer to the docs for more information.

Hey there! 👋 I've noticed some issues with the text and icon/button colors in these images. The colors are currently black which is making them a bit hard to read. To improve the overall readability, we should change these to a lighter color, like white or a contrasting shade.

When the user changes the language after apply stars filter, the new url does not contains the stars filter but the value in the stars input still remains the same as old.

Selecting any language & applying stars filter

Now updating the language again

The query params for stars filter is removed but the values in the filter is still their, this should get cleared instead.

Steps to reproduce:

1. Go to https://hacktoberfest-projects.vercel.app/
2. Select or search any language
3. Apply stars rating filter
4. Now update the language to something else, and not the query params and stars filter values

@max-programming I would be happy to work on this issue.

If it looks good to you then please assign this to me

Thank You,
Nishidh Jain

On the homepage, when we click on search🔍 button directly, without providing any input text or providing just blank spaces takes the user to a 404 page.

Expected: Prompt user to provide input
Actual: Considers empty field as input and couldn't perform a proper search

If this issue is concerning, allow me to fix it.

The ScrollToTop button in the repo pages is huge, and the arrow is not aligned with the center.

I will work on it!

When the link is visited directly with the startStars and endStars and the q or the search query parameters, that should be put in the respective inputs directly. But that does not happen by default

Visit this link for example

Pagination still shows up when there are no more repos to show.

For example on this page:

Current design has typography issue and spacing issue, which is leading to readability issue. This can be fixed by adding some spacing and fixing typography issue. We can also add some hover effect to the card.

Before:

After:

@max-programming If you like the new UI, then please assign this to me, would be happy to contribute for the same

Thank You,
Nishidh Jain

As at the time i am writing this, the description of each repo in the card is not visible, i propose to make the color white to match with the border colors of each card.

@max-programming Kindly assign this to me.

Currently, we are using npm for this project, but npm has a few problems.

pnpm:

• Saves disk space by not duplicating packages.
• Faster installations due to shared packages.
• Reduces bandwidth usage by downloading packages once.
• Uses efficient linking for quicker operations.
• Ensures better project isolation.

npm:

• May consume more disk space due to duplicated packages.
• Slower installations compared to pnpm.
• May use more bandwidth by downloading packages for each project.
• Performs standard package installations.

pnpm docs: https://pnpm.io/benchmarks

Note: I want to work on this issue

👋 Hacktoberfest allows for folks to contribute both to projects on GitHub as well as on GitLab. Looking at the code here, it appears to only fetch opted-in projects on GitHub. It'd be great to see support for GitLab added as well! Cheers.

Screenshot for reference:

I can work on it if you want, @max-programming.

The cards are not having left and right padding in mobile view. I would like to take up this issue and resolve it.

Star filter input fields accept negative values. When I search, it redirects me to a 404 page. I think this is a bug. Inputs should not accept negative values. There should not be a situation where negative values ​​can be accepted. Please assign me to this issue. I think I can solve this issue.

Hi I'm @p7uverma,
When we shrink website page repo name gets overflow.

I fixed this and the pull request is => #117

Color contrast should be at least 4.5 : 1 between background and foreground colors. Orange and offwhite is too low and therefore inaccessible to many people with visual impairments. Orange and black would pass.

The current design for the Repo cards does not utilize the spacing correctly and it has spacing and visual hierarchy issues. I would like to suggest some changes to this design and I am attaching a new design for the same.

Old Design:

New Design:

@max-programming Please share your opinion as well, if something needs to be improved in new design.

If you liked the new design, I would be happy to pick this issue up.

Thank You,
Nishidh

In my opinion, the Most help wanted issues option should not appear in the "sort types" dropdown menu. This is because users may want to sort repositories based on the most stars, most forks, or best match, while also being able to view the repository with the most help wanted issues.
Perhaps we could create a separate dropdown menu for the Most help wanted issues option? What do you guys think about this?

I would love to work on this!

Placing the search button at the top of the interface will enhance the user experience significantly. Furthermore, increasing its width will ensure that the placeholder text is displayed correctly. This combination of design choices can contribute positively to the overall usability of the system.

Elixir is fun and one of the most loved languages by programmers! It's one that many people would like to learn or use more often, so perfect for Hacktoberfest.

Hi, I'd like to propose adding the Clojure lang as a new language

I'm creating two new libs that I'd like to make available to the community to participate.

I think this project can help projects in Clojure to participate to the Hacktoberfest

I would like to point out that the favicon for this website of hacktoberfest 2022 😅 .

I would love to change it to the latest ones

Pls, assign this issue to me so that I can start working on this issue. @max-programming

An image might be really nice to add when people share this. Maybe the Hacktoberfest logo is a good one for this

Currently, the site only allows us to search repositories by single language. A support to search by multiple languages might be a great feature.

Right now in responsive design, the size of these elements is uneven. It'll be better to make them the same-sized. With that, also comes the uneven margin