Merge branch 'main' into main

Author: prithvi2k2

.all-contributorsrc

@@ -305,6 +305,53 @@
       "contributions": [
         "design"
       ]
+    },
+    {
+      "login": "sadiksaifi",
+      "name": "Sadik Saifi",
+      "avatar_url": "https://avatars.githubusercontent.com/u/86684667?v=4",
+      "profile": "http://www.sadiksaifi.dev",
+      "contributions": [
+        "design",
+        "code"
+      ]
+    },
+    {
+      "login": "donno2048",
+      "name": "Elisha Hollander",
+      "avatar_url": "https://avatars.githubusercontent.com/u/61805754?v=4",
+      "profile": "https://donno2048.github.io/Portfolio/",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "NishidhJain",
+      "name": "Nishidh Jain",
+      "avatar_url": "https://avatars.githubusercontent.com/u/61869195?v=4",
+      "profile": "https://github.com/NishidhJain",
+      "contributions": [
+        "design",
+        "code"
+      ]
+    },
+    {
+      "login": "beyzanur-seyhan",
+      "name": "Beyzanur Seyhan",
+      "avatar_url": "https://avatars.githubusercontent.com/u/80166639?v=4",
+      "profile": "https://github.com/beyzanur-seyhan",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "maitri-vv",
+      "name": "maitri-vv",
+      "avatar_url": "https://avatars.githubusercontent.com/u/87691594?v=4",
+      "profile": "https://maitri-vv.github.io/Maitri-sPortfolio/",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,

.github/workflows/check-linting-and-format.yml

@@ -14,19 +14,28 @@ jobs:
   run-linters:
     name: Run linters
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [18]
 
     steps:
       - name: Check out Git repository
         uses: actions/checkout@v2
 
-      - name: Set up Node.js
-        uses: actions/setup-node@v1
+      - name: Set up pnpm
+        uses: pnpm/action-setup@v2
         with:
-          node-version: 18
+          version: 8
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'pnpm'
 
       # ESLint and Prettier must be in `package.json`
-      - name: Install Node.js dependencies
-        run: npm ci
+      - name: Install dependencies
+        run: pnpm install
 
       - name: Run linters
         uses: wearerequired/lint-action@v2

README.md

@@ -1,15 +1,25 @@
 # Hacktoberfest Projects 🎉
 
-A Web app which lets you find eligible repositories for Hacktoberfest!
+
+A Web app that lets you find eligible repositories for Hacktoberfest!
+
+Use it here - https://finder.usmans.me
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-31-orange.svg?style=flat-square)](#contributors-)
+[![All Contributors](https://img.shields.io/badge/all_contributors-36-orange.svg?style=flat-square)](#contributors-)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 <a href="https://gitmoji.dev">
   <img src="https://img.shields.io/badge/gitmoji-%20😜%20😍-FFDD67.svg?style=flat-square" alt="Gitmoji">
 </a>
 
-## Run Locally
+
+## Contributing
+
+Contributions are always welcome!
+
+> Pull Requests about adding languages will not be merged, if you want to suggest adding a new language, please [create an issue](https://github.com/max-programming/hacktoberfest-projects/issues/new) for that 🙂
+
+### Run Locally
 
 Clone the project
 
@@ -23,20 +33,16 @@ Go to the project directory
 cd hacktoberfest-projects
 ```
 
-Install dependencies
+Install dependencies (if you want to use `npm` you can use but its recommended to use `pnpm`)
 
 ```bash
-yarn
-# or
-npm install
+pnpm i
 ```
 
 Start the server
 
 ```bash
-yarn dev
-# or
-npm run dev
+pnpm dev
 ```
 
 ## Tech Stack
@@ -46,11 +52,6 @@ npm run dev
 - [Tailwind CSS](https://tailwindcss.com/)
 - [Daisy UI](http://daisyui.com)
 
-## Contributing
-
-Contributions are always welcome!
-
-> Pull Requests about adding languages will not be merged, if you want to suggest adding a new language, please [create an issue](https://github.com/max-programming/hacktoberfest-projects/issues/new) for that 🙂
 
 ## Feedback
 
@@ -114,6 +115,13 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="14.28%"><a href="https://lynxsumit.vercel.app"><img src="https://avatars.githubusercontent.com/u/114245865?v=4?s=100" width="100px;" alt="Sumit Upadhyay"/><br /><sub><b>Sumit Upadhyay</b></sub></a><br /><a href="#design-LynxSumit" title="Design">🎨</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://p7u.tech"><img src="https://avatars.githubusercontent.com/u/112266318?v=4?s=100" width="100px;" alt="Priyanshu Verma"/><br /><sub><b>Priyanshu Verma</b></sub></a><br /><a href="#design-p7uverma" title="Design">🎨</a> <a href="https://github.com/max-programming/hacktoberfest-projects/issues?q=author%3Ap7uverma" title="Bug reports">🐛</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://snehafarkya.vercel.app"><img src="https://avatars.githubusercontent.com/u/63949465?v=4?s=100" width="100px;" alt="Sneha Farkya"/><br /><sub><b>Sneha Farkya</b></sub></a><br /><a href="#design-snehafarkya" title="Design">🎨</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="http://www.sadiksaifi.dev"><img src="https://avatars.githubusercontent.com/u/86684667?v=4?s=100" width="100px;" alt="Sadik Saifi"/><br /><sub><b>Sadik Saifi</b></sub></a><br /><a href="#design-sadiksaifi" title="Design">🎨</a> <a href="https://github.com/max-programming/hacktoberfest-projects/commits?author=sadiksaifi" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://donno2048.github.io/Portfolio/"><img src="https://avatars.githubusercontent.com/u/61805754?v=4?s=100" width="100px;" alt="Elisha Hollander"/><br /><sub><b>Elisha Hollander</b></sub></a><br /><a href="https://github.com/max-programming/hacktoberfest-projects/commits?author=donno2048" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/NishidhJain"><img src="https://avatars.githubusercontent.com/u/61869195?v=4?s=100" width="100px;" alt="Nishidh Jain"/><br /><sub><b>Nishidh Jain</b></sub></a><br /><a href="#design-NishidhJain" title="Design">🎨</a> <a href="https://github.com/max-programming/hacktoberfest-projects/commits?author=NishidhJain" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/beyzanur-seyhan"><img src="https://avatars.githubusercontent.com/u/80166639?v=4?s=100" width="100px;" alt="Beyzanur Seyhan"/><br /><sub><b>Beyzanur Seyhan</b></sub></a><br /><a href="https://github.com/max-programming/hacktoberfest-projects/commits?author=beyzanur-seyhan" title="Code">💻</a></td>
+    </tr>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://maitri-vv.github.io/Maitri-sPortfolio/"><img src="https://avatars.githubusercontent.com/u/87691594?v=4?s=100" width="100px;" alt="maitri-vv"/><br /><sub><b>maitri-vv</b></sub></a><br /><a href="https://github.com/max-programming/hacktoberfest-projects/commits?author=maitri-vv" title="Code">💻</a></td>
     </tr>
   </tbody>
 </table>

assets/languages.json

@@ -29,6 +29,7 @@
     "Sql",
     "Perl",
     "Groovy",
+    "Assembly",
     "WebAssembly",
     "Pascal",
     "CoffeeScript",
@@ -70,6 +71,7 @@
     "Sql",
     "Perl",
     "Groovy",
+    "Assembly",
     "WebAssembly",
     "Pascal",
     "CoffeeScript",

components/Card.tsx

@@ -8,83 +8,97 @@ interface Props {
 
 function Card({ repo }: Props) {
   return (
-    <div className="shadow-sm card bg-2023-void-2 ring-1 ring-2023-manga-3">
-      <div className="relative card-body">
-        <div className="avatar">
-          <div className="w-10 h-10 mb-2 rounded-full">
+    <section className="shadow-sm card bg-2023-void-2 ring-1 ring-2023-manga-3 transition duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-2023-bavarian-gold-2/30">
+      <div className="relative card-body p-6">
+        <div className="flex-1">
+          <div className="flex gap-4 items-center justify-start">
             <a
+              className="border-2 rounded-full h-14 aspect-square p-1.5 border-neutral-100"
               href={repo.owner.html_url}
               title={repo.owner.login}
               target="_blank"
               rel="noreferrer"
             >
               <img
                 src={repo.owner.avatar_url}
-                width={50}
-                height={50}
                 alt={repo.owner.login}
-                className="rounded-xl"
+                className="rounded-full"
               />
             </a>
+            <h2 className="text-3xl cursor-pointer hover:underline text-2023-bavarian-gold-2 whitespace-nowrap overflow-hidden text-ellipsis max-w-full">
+              <a
+                href={repo.html_url}
+                title={repo.name}
+                target="_blank"
+                rel="noreferrer"
+              >
+                {repo.name}
+              </a>
+            </h2>
           </div>
-        </div>
-
-        <a
-          href={repo.html_url}
-          title={repo.name}
-          target="_blank"
-          rel="noreferrer"
-          className={`text-3xl card-title link link-hover text-2023-bavarian-gold-2`}
-        >
-          {repo.name}
-        </a>
 
-        <p className="mb-2 text-neutral-100">{emojify(repo.description)}</p>
+          <h6 className="my-5 text-lg">{emojify(repo.description)}</h6>
 
-        <div className="card-actions">
-          {repo.topics.map((topic: string) => (
-            <a
-              key={topic}
-              href={`https://github.com/topics/${topic}`}
-              target="_blank"
-              rel="noreferrer"
-              className={`badge ${
-                topic === 'hacktoberfest'
-                  ? 'bg-2023-bavarian-gold-1 text-2023-void-2'
-                  : 'bg-2023-bavarian-blue-2 text-2023-void-2'
-              }`}
-            >
-              {topic}
-            </a>
-          ))}
+          <div className="card-actions gap-y-3">
+            {repo.topics.map((topic: string) => (
+              <a
+                key={topic}
+                href={`https://github.com/topics/${topic}`}
+                target="_blank"
+                rel="noreferrer"
+                className={`badge inline px-3 py-0.5 h-auto ${
+                  topic === 'hacktoberfest'
+                    ? 'bg-2023-bavarian-gold-1 text-2023-void-2'
+                    : 'bg-2023-bavarian-blue-2 text-2023-void-2'
+                }`}
+              >
+                {topic}
+              </a>
+            ))}
+          </div>
         </div>
 
-        <div className="items-end justify-center h-full card-actions">
-          <div className="shadow stats bg-transparent ring-1 ring-2023-manga-2">
-            <div className="stat">
-              <div className="text-center stat-title items-center inline-flex">
-                <GoStar color="rgb(163 163 163 / var(--tw-text-opacity))"/>{' '}
-                <span className="ml-0.5 text-neutral-400">Stars</span>
-              </div>
-              <div className="text-center stat-value text-neutral-400">
+        {/* stars and forks cards */}
+        <div className="w-full flex gap-3 xl:gap-5 text-neutral-100 cursor-pointer mt-8">
+          <a
+            href={`${repo.html_url}/stargazers`}
+            target="_blank"
+            className="group w-full border rounded-xl p-3 xl:px-4 flex items-center gap-2 xl:gap-3 relative"
+          >
+            <GoStar className="text-yellow-200 text-2xl" />
+            <div className="flex flex-col">
+              <div className="text-lg xl:text-2xl font-semibold mb-0.5">
                 {repo.stargazers_count}
               </div>
+              <div className="text-neutral-300 text-xs lg:text-sm">Stars</div>
             </div>
-          </div>
-          <div className="shadow stats bg-transparent ring-1 ring-2023-manga-2">
-            <div className="stat">
-              <div className="text-center stat-title items-center inline-flex">
-                <GoRepoForked color="rgb(163 163 163 / var(--tw-text-opacity))" />{' '}
-                <span className="ml-0.5 text-neutral-400">Forks</span>
-              </div>
-              <div className="text-center stat-value text-neutral-400">
-                {repo.forks}
-              </div>
+            <div
+              id="tooltip"
+              className="hidden group-hover:block absolute bg-2023-void-2 text-2023-bavarian-gold-2 px-2 py-1 rounded-md"
+            >
+              Checkout all the stars here!
             </div>
-          </div>
+          </a>
+          <a
+            href={`${repo.html_url}/forks`}
+            target="_blank"
+            className="group w-full border rounded-xl p-3 flex items-center gap-3 relative"
+          >
+            <GoRepoForked className="text-yellow-200 text-2xl" />
+            <div className="flex flex-col">
+              <div className="text-lg xl:text-2xl font-semibold mb-0.5">{repo.forks}</div>
+              <div className="text-neutral-300 text-xs lg:text-sm">Forks</div>
+            </div>
+            <div
+              id="tooltip"
+              className="hidden group-hover:block absolute bg-2023-void-2 text-2023-bavarian-gold-2 px-2 py-1 rounded-md"
+            >
+              Checkout all the forks here!
+            </div>
+          </a>
         </div>
       </div>
-    </div>
+    </section>
   );
 }
 

components/ContributorCard.tsx

@@ -1,3 +1,5 @@
+import { env } from 'env.mjs';
+import { CldImage, getCldImageUrl } from 'next-cloudinary';
 import { IoLogoGithub } from 'react-icons/io';
 
 interface Contributor {
@@ -13,6 +15,15 @@ interface Props {
 }
 
 export default function ContributorCard({ contributor }: Props) {
+  const url = env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME
+    ? getCldImageUrl({
+        src: contributor.avatar_url,
+        deliveryType: 'fetch',
+        width: 250,
+        height: 250
+      })
+    : contributor.avatar_url;
+
   return (
     <div className="text-center shadow-2xl card">
       <a
@@ -21,16 +32,15 @@ export default function ContributorCard({ contributor }: Props) {
         rel="noreferrer"
       >
         <figure className="px-10 pt-10">
-          <img
-            src={contributor.avatar_url}
-            alt={contributor.name}
-            className="rounded-xl"
-          />
+          <img src={url} alt={contributor.name} className="rounded-xl" />
         </figure>
       </a>
       <div className="card-body items-center text-center">
         <h2 className="card-title text-neutral-100">{contributor.name}</h2>
-        <a href={contributor.profile} className="link text-neutral-100 hover:text-[#dbe8d9]">
+        <a
+          href={contributor.profile}
+          className="link text-neutral-100 hover:text-[#dbe8d9]"
+        >
           {contributor.profile}
         </a>
         <div className="justify-center card-actions">