open-sauced/hot

🍕The site that recommends the hottest projects on GitHub.

🍕 hot.opensauced.pizza 🍕

The site that recommends the hottest sauce. Inspired by daily.dev

Prerequisites

In order to run the project we need the following software binaries installed on our development machines:

• node>=16.7.0
• npm>=8.0.0

We can also use one of the listed cloud providers we support:

🖥️ Local development

To install the application:

npm ci

To start a local copy of the app on port 3000:

npm start

🧪 Test

For running the test suite, use the following command. Since the tests run in watch mode by default, some users may encounter errors about too many files being open. In this case, it may be beneficial to install watchman.

npm test

You can request a coverage report by running the following command:

npm run test:coverage

For writing tests, the rule is move business or service logic to the lib folder and write unit tests. Logic that needs to be in a React component, then leverage tools like Cypress or Vitest mocking to write tests.

📦 Docker builds

A development preview can also be run from docker:

docker build -t open-sauced-hot .
docker run -p 8080:80 open-sauced-hot

Alternatively you can pull the production container and skip all builds:

docker run -dit -p 8080:80 ghcr.io/open-sauced/hot

🎨 Code linting

To check the code and styles quality, use the following command:

npm run lint

This will also display during development, but not break on errors.

To fix the linting errors, use the following command:

npm run format

It is advised to run this command before committing or opening a pull request.

📕 Types

We have a couple of scripts to check and adjust missing types.

In order to dry run what types would be added to package.json:

npm run types:auto-check

In order to add any missing types to package.json:

npm run types:auto-add

🚀 Production deployment

A production deployment is a complete build of the project, including the build of the static assets.

npm run build

🤝 Contributing

We encourage you to contribute to Open Sauced! Please check out the Contributing guide for guidelines about how to proceed.

We have a commit utility called @open-sauced/conventional-commit that helps you write your commits in a way that is easy to understand and process by others.

It is generally integrated as an npm script but you can run it with npx as well:

npm run push

For any other npm based project or dotnpmrc defaulting to --yes:

npx -y @open-sauced/conventional-commit

🍕 Community

Got Questions? Join the conversation in our Discord.
Find Open Sauced videos and release overviews on our YouTube Channel.

🎦 Repository Visualization

⚖️ LICENSE

MIT © Open Sauced

hot's Issues

Feature: Include version number in the console.

Type of feature

🍕 Feature

Current behavior

This app relies on semantic versioning and it would be ideal to let the user know what version they are using.

Suggested solution

In the flagship app we highlight the version in the console.

1. Include fetch version lib similar to open sauced.
2. Add ascii art to the index page.

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Include the Open Sauced Persisted query data fetching and API from OneGraph

1. I think we will need to recreate this persisted query file in this repository.
2. We will introduce data fetching from github in this project
3. Use the existing contributors_oneGraph item to display avatars.

Feature: Loader should be added

Type of feature

🍕 Feature

Current behavior

A preloader should be added to the application

Suggested solution

Adding a loader will make it look good and improve user experience

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Feature: Implement prettier linting in this project

Type of feature

CI

Current behavior

Currently, it is free for all and with our first contribution, I am seeing inconsistencies. I would love to mimic the code style in open-sauced

This came up in this PR https://github.com/open-sauced/hot-sauce/pulls

Desired solution

• https://github.com/open-sauced/open-sauced/blob/main/.eslintrc.js
• https://github.com/open-sauced/open-sauced/blob/main/.stylelintrc

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Bug: Accessibility issues, not able to navigate the page using the keyboard

Describe the bug

1. Start the dev server and open http://localhost:3000 in the browser
2. Try to tab through the page using the tab key

You'll notice that the focus only goes to the logo and nothing else which kind of limits users that rely on assistive technologies to navigate the internet

Steps to reproduce

The steps to reproduce were outlined above but my recommendation would be to start thinking about accessibility now and get into the habit of using semantic HTML tags as well as using these resources as a reference when creating components / pages.

Resources

https://www.w3.org/TR/wai-aria-practices/
https://developer.mozilla.org/en-US/docs/Learn/Accessibility
https://dequeuniversity.com/resources/

Tools
Axe accessibility tool - https://www.deque.com/axe/ (they list the chrome extension on their site but there is a firefox version as well)

HeadingsMap, checks to see if you're using headings in the correct order - https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi?hl=en

WAVE accessibility checker - https://wave.webaim.org/

In my experience I've been good with just using axe and HeadingsMap but I'm open to more suggestions if people have them. I think if we were to also start introducing testing, jest-axe would also help catch a lot of the common mistakes. I'm happy to take this issue on but if anyone else would like to dive into it that would be fine too. 😊

Affected services

opensauced.pizza

Platforms

Desktop, Mobile

Browsers

Chrome, Firefox, Safari, Edge, Opera

Environment

Production, Development

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Feature: Add Repository Search

Type of feature

🍕 Feature

Current behavior

Repositories are displayed based on the Links at the top of the page

These links filter the repositories based on pre-defined filters. Currently, if a repository is outside of these filters it will never be displayed on the page making it unavailable for actions such as upvoting.

Suggested solution

Add the ability to search for a repository so that queries outside of the filters can be found.

This will require an update to the UI to add a search box to allow the user to type in a repository to search for. A couple of things to consider for this functionality:

• Will the search bar always be visible or only when the user wants to search?
• It would be nice if the search returns repositories while the user is typing. This should implement the concept of debouncing to limit the number of requests to the database. This article gives a good description of this concept and how to implement it.

Additional context

No additial no context

Code of Conduct

• I agree to follow this project's Code of Conduct

Feature: Progressive Web Application feature included

Type of feature

🍕 Feature

Current behavior

the site needs to be installable

## The sites needs to be installable because sometimes many people do like the feel of a native app

Suggested solution

I fixed that by adding a service worker and a manifest.json file

Site can now be installed and have a native behaviour

Site now work offline ( from cached items )

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Feature: Tooltip for Avatars

Type of feature

Feature

Current behavior

Each card has a list of contributors with no context of who they are. I would love to add a tooltip on wh

similar to #21

Desired solution

This may be accomplished through a react tooltip library or similar.

1. Add a tooltip on hover
2. Ensure the cursor-pointer is added with Tailwind

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Feature: Need a social card for this site.

Type of feature

Feature

Current behavior

When sharing this site on social, there is no social card

Desired solution

Set up a social card with the following image.

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Feature: Need the open sauced dev setup

Type of feature

CI

Current behavior

There are no GitHub Actions or release automation.

Desired solution

Add what other projects have.

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Feature: Create a Stafftool bar when user is logged in

Type of feature

🍕 Feature

Current behavior

Currently, when you log in, there is not staff tool bar.

Suggested solution

Been chatting with Brian, and some applications have this feature for projects ..when you press the ` on your keyboard it should toggle a black bar that gives details about the version number, the branch, and admin access (if that's a thing in this project).

I spoke with Brian about working on this, if that's okay ❤️

Additional context

Questioning if the staff tool bar should be available to everyone or only admins. Do admins exist in this project?

Code of Conduct

• I agree to follow this project's Code of Conduct

PostList and PostGrid toggle and nav bar

Looking to implement a toggle for the PostList and PostGrid display.

This issue is dependent on #6 and #7 being complement before being started

Link to it working in the Next app:

1. Code
2. Live

2021-12-15.07-03-37.mp4

Feature: Better Dependabot badge (readme)

Type of feature

📝 Documentation

Current behavior

Currently, the badge just shows the dependabot badge, with just the word "dependabot", and could be replaced with another.

Suggested solution

A better badge has the "active" status next to the word "dependabot" to show that dependabot is active in this project.

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Bug: Unusual size of SVG issues icon

Describe the bug

1. Go to https://hot.opensauced.pizza/
2. Switch post display toggle to list
3. See the unusual size
   

Steps to reproduce

1. Go to https://hot.opensauced.pizza/
2. Switch and see error

Affected services

opensauced.pizza

Platforms

Desktop, Mobile

Browsers

Chrome

Environment

Production

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Feature: Need to add CI as part of the development.yml

Type of feature

CI

Current behavior

Jest test now work thanks to #27, but they are not run during the CI

Desired solution

Add the CI from open sauced here.

Additional context

https://github.com/open-sauced/open-sauced/blob/main/.github/workflows/development.yml#L13-L32

Code of Conduct

• I agree to follow this project's Code of Conduct

Enable Tailwind in this project

Tailwind needs to be accessible to this project.

https://daily-dev-tips.com/posts/how-to-use-tailwind-css-in-astro/

npm install -D tailwindcss

there are some follow up config files needed.

// tailwind.config.js

module.exports = {
  mode: 'jit',
  purge: ['./public/**/*.html', './src/**/*.{astro,js,jsx,ts,tsx,vue}'],
};

// astro.config.js
devOptions: {
  tailwindConfig: './tailwind.config.js';
}

// global.css 

@tailwind base;
@tailwind components;
@tailwind utilities;

Bug: login return URL does not work with local development

Describe the bug

Need .env populated with local development database and have its Auth set up for localhost:3000 redirect.

Steps to reproduce

1. start local development
2. login
3. get redirected to https://hot.opensauced.pizza

Affected services

hot.opensauced.pizza

Platforms

No response

Browsers

No response

Environment

No response

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Feature: Make Jest work with this project.

Type of feature

Test

Current behavior

There is now one test included in this project. It will not run using Vite. From my research, this is possible with the inclusion of Babel.

#25

Desired solution

Make npm t work

https://github.com/open-sauced/hot/blob/main/src/lib/humanizeNumber.test.js

Additional context

https://vitest.dev/ is another solution, but currently in alpha

Code of Conduct

• I agree to follow this project's Code of Conduct

Infinite scroll and incremental data loads.

After some research, I think this can be completed as an infinite scroll and incremental data loads.

https://medium.com/suyeonme/react-how-to-implement-an-infinite-scroll-749003e9896a

Originally posted by @bdougie in #38 (comment)

Bug: PostList component overlapping in mobile viewport

Describe the bug

When using the toggle to change Post from Grid to List, the list form overlaps the mobile viewport. Causing poor UX

Present behavior

Expected behavior

Steps to reproduce

1. Visit https://hot.opensauced.pizza/ in any mobile browser, preferable chrome
2. Click the LayoutToggle to allow from Grid to PostList
3. Confirm the behavior

Affected services

opensauced.pizza

Platforms

Mobile

Browsers

Chrome

Environment

Production

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Feature: Link to user profile in the user dropdown.

Type of feature

🍕 Feature

Current behavior

When logged in the user name is shown. That should be a hyperlink to their github profile (i.e. github.com/bdougie)

Suggested solution

This line https://github.com/open-sauced/hot/blob/main/src/components/PrimaryNav.jsx#L40

Should be wrapped with an anchor tag and dynamic hyperlink

<a href={`https://github.com/${user.user_metadata.user_name}`}>............</a>

Additional context

Localhost will not allow you to log in, so you will not be able to test this. #108 will fix this

Code of Conduct

• I agree to follow this project's Code of Conduct

Feature: Switch from static json to live data

Type of feature

Feature

Current behavior

The API is currently a static file. This was meant to be temporary while the UI was being integrated.

Desired solution

Fetch from https://api.opensauced.pizza instead of the data/posts.json.

Note:

1. Caching may be needed
2. Pagination will need to be considered.

Additional context

@bdougie will be working on this in multiple steps.

• open-sauced/actions#20
• #41

Code of Conduct

• I agree to follow this project's Code of Conduct

Feature: UI Component Implementation

Type of feature

Tailwind powered React components

Current behavior

This project is powered by api.opensauced.pizza, a list of popular open source projects. I am looking to add React components (powered by Tailwind) to display the repos.

Desired solution

This is the mock-up https://hot-open-sauced.vercel.app/ link to code coming soon. Link to the repo with a working solution in Next (note this project is Astro).

Astro provides the ability to add React components to

• #5
• #6
• #7
• #8
• #9
• #10

Additional context

Code of Conduct

• I agree to follow this project's Code of Conduct

Feature: Add a favicon

Type of feature

Feature

Current behavior

currently no favicon present.

Desired solution

This can be grabbed from https://github.com/open-sauced/open-sauced/blob/main/public/favicon.ico

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Feature: clean up tooling and remove astro (breaking)

Type of feature

Build

Current behavior

We are unable to use astro in several instances:

• code listing and formatting (due to missing eslint parser and language tools)
• cloud IDE providers (due to astro vs vite config mismatch)
• language completion and assistance in local IDEs (language tools need manual install and are not bundled with astro)
• production builds due to unresolved bugs (see #76)
• the technology is in perpetual alpha/beta since 2017
• partial hydration the only feature we are missing, is not fully working and requires additional code

Desired solution

1. strip .astro files into .jsx
2. apply vite bundler configuration from open-sauced so we can contribute without local install
3. replace head component with hydrated react-helmet or similar
4. switch to pre-rendered static content globally
5. apply service worker

Additional context

doing this now will fix a lot of headaches for existing and future contributors

Code of Conduct

• I agree to follow this project's Code of Conduct

Implement the weekly goal modal

Need to implement the encouragement modal. This is will be for display only, the logic for this will be implement in the future.

Link to elements:

1. Code
2. Live App

Feature: Replace the discussion svg with the github issue one.

Type of feature

Fix

Current behavior

This icon is for comments, but should be for issues

Desired solution

Should be the circle with a dot.

https://fontawesome.com/v5.15/icons/dot-circle?style=regular

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Feature:Add font-awesome icons

Type of feature

Feature

Current behavior

Some components were added without font-awesome

Desired solution

Additional context

The PR #13 introduce these components but did not introduce the font icons

Code of Conduct

• I agree to follow this project's Code of Conduct

Feature: GitHub Avatar for logged in user

Type of feature

Feature

Current behavior

Login works but not signout. Also still has a placeholder image.

Desired solution

Fetch the logged-in user's image.

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Feature: Replace placeholder avatars with contributor avatars

Type of feature

Feature

Current behavior

Within each repo card, the list avatars are placeholders. This was needed to figure out the design, but they will need to be replaced with the avatars of the contributors.

Desired solution

In the opensauced.pizza app, we grab the avatars using graphql. We can do something similar here.

Example in the opensauced dashboard

Additional context

This can be completed without a github OAuth

Code of Conduct

• I agree to follow this project's Code of Conduct

Update:

This issue is blocked on the need for a proper data fetching pattern from GitHub.

• #23

Feature: Avatars should be clickable links into profiles

Type of feature

Feature

Current behavior

These avatars currently are not clickable and provide no context.

Desired solution

Similar to the title link, these be click github.com links to the user github profile.

Additional context

This should be a dynamic and reusable solution.

Code of Conduct

• I agree to follow this project's Code of Conduct

Feature: Set up filter logic

Type of feature

Feature

Current behavior

The filters on the page exist as empty links. These are meant filters based on their relevantly named label.

Desired solution

Some sort of Filter State logic should get added, similar to the LayoutToggle (state).

Label	How it should work
Popular	Default API filter (by most starred by open sauced users)
Upvoted	Not yet implemented #12
Discussed	Filter by issue count
Recent	Filter by lowest avg_recency_score

Additional context

This feature should apply a filter and re-order how the repos are listed on the page. This is a common feature and there are a number of examples out there.

https://medium.com/suyeonme/react-how-to-implement-an-infinite-scroll-749003e9896a

Code of Conduct

• I agree to follow this project's Code of Conduct

Bug: variable container width in post list view mode

Describe the bug

The icons in the list view mode are spread out based on how long the repository description is, it should have full width and min/max height sensible defaults

Steps to reproduce

1. go to https://hot.opensauced.pizza
2. toggle the list view mode

Affected services

opensauced.pizza

Platforms

Desktop, Mobile, Tablet, TV, VR

Browsers

Chrome, Firefox, Safari, Edge, Opera

Environment

Production

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Create PostList components

Today the site content looks like this when displaying GitHub repos.

What we would like it to look like

Steps to implement:

1. Apply Tailwind UI to a reusable React component
2. Add the component to the render repo

Link to CSS:

1. PostList

Feature: document supabase

Type of feature

📝 Documentation

Current behavior

This issue is related to #68 . I think it would be helpful to have documentation of the supabase details for this repo.

Suggested solution

I’d suggest:

• docs for database schema
• Docs for queries used
• Sample data set

One nice-to-have could be https://github.com/zernonia/supabase-schema 👀

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Feature: Replace placeholder image with repo social card

Type of feature

Feature

Current behavior

Prior to #13, this app was pulling in the social cards from GitHub.

https://github.com/open-sauced/hot-sauce/blob/main/src/components/SocialImage.jsx

This is the previous fetching of the social card image.

https://github.com/open-sauced/hot-sauce/blob/c3e28250cc27ee7b43b5134b1e883bc8c2864338/src/pages/index.astro#L14-L21

Previous PR where this was working https://github.com/open-sauced/hot-sauce/pull/1/files

Desired solution

Add the social image in replace of the placeholder. See the previous PR where this was:

Example pulling images from open graph.

Additional context

Previous site with social card

Code of Conduct

• I agree to follow this project's Code of Conduct

Feature: Implement voting logic for repos

Type of feature

Feature

Current behavior

Today the api is listing repos based on relevancy in open sauced.

• api.opensauced.pizza
• The above is powered by a private DB hosted on supabase

Desired solution

We need a global state that can store votes from users

• Add local state to fetch vote data
• Implement vote column in supabase db
• Alternatively we could use a public JSON file to store votes as an intermediary.

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Bug: Data in the PostList view is dupluicated

Type of feature

Fix

Current behavior

Desired solution

Voting needs to be added back in.

Additional context

Found this while on stream.

Code of Conduct

• I agree to follow this project's Code of Conduct

Feature: Feature: menu/other UI from header avatar with username

Type of feature

🍕 Feature

Current behavior

When you login to the app the GitHub profile avatar appears in the top right-hand corner. The avatar doubles as a logout button and that are not clear to the user who may be trying to click through a profile..

Suggested solution

It would be ideal to make the profile a dropdown so the user can get details of the app. This was done in opensauzed.pizza by @blackgirlbytes https://github.com/open-sauced/open-sauced/pull/1129/files

Additional context

Please use Taildwind to accomplish this.

Code of Conduct

• I agree to follow this project's Code of Conduct

Testing the filter Navlinks

Describe the bug

1. On your laptop, open this project with your code editor, paste gh pr checkout 57 in the terminal and run it, to have a copy of the changes reflecting on this pull request #57
2. run npm ci then npm start to spin up a server and go to localhost:3000 to start testing. If you click on any of the secondary nav links it should highlight that link alone with a yellow background

Steps to reproduce

1. Click on any of the links (Popular | Upvoted | Discussed | Recent) to make sure it sorts the cards based on the criteria given on issue #41
2. Popular and Upvoted Link should return the same result, while Discussed and Recent should return different order of the cards displayed
3. If you refresh the page, it should return back to default

Popular

Upvoted

Discussed

Recent

Affected services

opensauced.pizza

Platforms

Desktop, Mobile, Tablet

Browsers

Chrome, Firefox, Safari, Edge, Opera

Environment

Development

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Add navigation/filter

Navigation and filter submenu needs to be implemented on the page.

All CSS and elements can be found in the example Next App.

1. Code
2. Live site

Feature: Local developer env

Type of feature

Feature

Current behavior

The PR #67 was merge and intentionally including public env vars. https://github.com/open-sauced/hot/blob/main/src/lib/database.js#L4

The ideal approach will be adding that to the .env file since the DB does currently have security and everything accessible.

Desired solution

I think we should include context on how folks and generate their own local database using the mock data in https://github.com/open-sauced/hot/blob/main/src/data/hot.json file.

1. Discover the steps to reproduce the DB per user (this require them to sign up for supabase)
2. Include the above steps in the README
3. Add new local dev supabaseurl and anon public key to an .env

Additional context

Open to suggestions, but this will be temporary until login is enabled

Code of Conduct

• I agree to follow this project's Code of Conduct

Feature: Add ability for a user to see the repos they have voted for

Type of feature

🍕 Feature

Current behavior

Currently there is no way for a user to see the repos that they have voted for.

Suggested solution

Add a My Votes link to the secondary navbar that filters the repos based on the repos they have voted for.

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Contributing Docs

• I agree to follow this project's Contribution Docs

Bug: README badge

Describe the bug

In the badges, the dependabot badge doesn't load properly.

Steps to reproduce

1. Go to the README.md
2. Go to the badges

Affected services

hot.opensauced.pizza

Platforms

Desktop

Browsers

Other (add additional context)

Environment

Development

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Feature: Make images clickable links

Type of feature

Feature

Current behavior

When view the PostGrid components, images are shown but not clickable.

https://github.com/open-sauced/hot/blob/main/src/components/PostGrid.jsx#L41-L45

Desired solution

Use the repolink to make them clickable.

https://github.com/open-sauced/hot/blob/main/src/components/PostList.jsx#L16-L19

Additional context

As a bonus, this should really be reuable from the PostWrap component.

Code of Conduct

• I agree to follow this project's Code of Conduct

Bug: Make the title link to the github repo

Type of feature

Feature

Current behavior

Currently the title of their repo is not clickable.

Desired solution

Make the title a hyper link and link to the GitHub repository.

Additional context

This should be a dynamic solution that is reproducible.

Code of Conduct

• I agree to follow this project's Code of Conduct

Create Repo card components

Today the site content looks like this when displaying GitHub repos.

What we would like it to look like

Steps to implement:

1. Apply Tailwind UI to a reusable React component
2. Add the component to the render repo

Link to CSS:

1. PostGrid

Feature: Supabase Studio

Type of feature

Feature

Current behavior

At the moment the only person that contributes to any database changes is @bdougie. While getting the project off the ground is fine, but this will be a limitation for future contributors as the site grows to be more complicated.

Desired solution

Connect the database to a local studio instance that folks run locally. This will require some sort RLS and user management which is still actively being worked on in #20

If anyone has Supabase experience, feel free to comment here or in the discord.

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Need Open Sauced GitHub Login

Type of feature

Feature

Current behavior

The user profile is currently a placeholder. Need a GitHub login to confirm the following

• stars
• Open sauced goals account
• public comments

Desired solution

We can mirror the logging from github.com/bdougie/live or github.com/open-sauced/open-sauced

1. Add login functionally to the Astro app
2. Replaces the Generic Avatar with the logged in user Avatar

Additional context

The open sauced login is powered by a GitHub App Id

Code of Conduct

• I agree to follow this project's Code of Conduct

Bug: eslint rules not applied on cli formatter

Describe the bug

ESlint in VSC/WS should have the same rules but running npm run lint does not register any files

Steps to reproduce

1. Use Visual Studio or JetBrains IDE
2. In-flight eslint issues should pop up for .jsx files
3. run npm run lint or npm run format
4. .eslintrc rules are ignored

Affected services

opensauced.pizza

Platforms

Desktop

Browsers

Other (add additional context)

Environment

Production, Development, Testing

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct