Merge branch 'max-programming:main' into alone-y154/local

Author: Alone-Y154

.all-contributorsrc

@@ -334,6 +334,25 @@
         "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,
   "projectName": "hacktoberfest-projects",

.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,24 @@
 # Hacktoberfest Projects 🎉
 
-A Web app which lets you find eligible repositories for Hacktoberfest 2022!
+A Web app that lets you find eligible repositories for Hacktoberfest 2022!
+
+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-34-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 +32,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 +51,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
 
@@ -116,7 +116,11 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <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/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>

components/Card.tsx

@@ -8,66 +8,69 @@ 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="flex gap-4 items-center justify-start">
-          <a
-            className="border-2 rounded-full h-14 aspect-square p-1 border-neutral-100"
-            href={repo.owner.html_url}
-            title={repo.owner.login}
-            target="_blank"
-            rel="noreferrer"
-          >
-            <img
-              src={repo.owner.avatar_url}
-              alt={repo.owner.login}
-              className="rounded-full"
-            />
-          </a>
-          <a
-            href={repo.html_url}
-            title={repo.name}
-            target="_blank"
-            rel="noreferrer"
-            className="text-3xl cursor-pointer hover:underline text-2023-bavarian-gold-2 whitespace-nowrap overflow-hidden text-ellipsis max-w-full"
-          >
-            {repo.name}
-          </a>
-        </div>
-
-        <p className="my-2 text-neutral-300">{emojify(repo.description)}</p>
-
-        <div className="card-actions">
-          {repo.topics.map((topic: string) => (
+    <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
-              key={topic}
-              href={`https://github.com/topics/${topic}`}
+              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"
-              className={`badge ${
-                topic === 'hacktoberfest'
-                  ? 'bg-2023-bavarian-gold-1 text-2023-void-2'
-                  : 'bg-2023-bavarian-blue-2 text-2023-void-2'
-              }`}
             >
-              {topic}
+              <img
+                src={repo.owner.avatar_url}
+                alt={repo.owner.login}
+                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>
+
+          <h6 className="my-5 text-lg">{emojify(repo.description)}</h6>
+
+          <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>
 
         {/* stars and forks cards */}
-        <div className="w-full flex gap-3 xl:gap-5 text-neutral-100 cursor-pointer mt-6">
+        <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="xl:text-2xl text-lg font-semibold">
+              <div className="text-lg xl:text-2xl font-semibold mb-0.5">
                 {repo.stargazers_count}
               </div>
-              <div className="text-neutral-400 text-xs lg:text-sm">Stars</div>
+              <div className="text-neutral-300 text-xs lg:text-sm">Stars</div>
             </div>
             <div
               id="tooltip"
@@ -83,8 +86,8 @@ function Card({ repo }: Props) {
           >
             <GoRepoForked className="text-yellow-200 text-2xl" />
             <div className="flex flex-col">
-              <div className="text-2xl font-semibold">{repo.forks}</div>
-              <div className="text-neutral-400 text-xs lg:text-sm">Forks</div>
+              <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"
@@ -95,7 +98,7 @@ function Card({ repo }: Props) {
           </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">

components/Header.tsx

@@ -42,7 +42,7 @@ function Header() {
               rel="noreferrer"
               className="btn btn-square btn-ghost umami--click--github-button"
             >
-              <IoLogoGithub size="1.5rem" title="GitHub" />
+              <IoLogoGithub size="1.5rem" color='white' title="GitHub" />
             </a>
           </div>
         </div>          

components/Hero.tsx

@@ -65,6 +65,7 @@ function Hero() {
                 placeholder="Search for your language"
                 className="input input-bordered w-full text-neutral-100 border-2023-bavarian-gold-2 focus:outline-2023-bavarian-gold-2 max-w-xs rounded-tr-none rounded-br-none bg-transparent"
                 name="search"
+                autoComplete="off"
               />
               <button
                 type="submit"
@@ -89,7 +90,7 @@ const SearchIcon = () => (
   <svg
     className="w-6 h-6"
     fill="none"
-    stroke="currentColor"
+    stroke="white"
     viewBox="0 0 24 24"
     xmlns="http://www.w3.org/2000/svg"
   >

components/StarsFilter.tsx

@@ -53,6 +53,7 @@ export default function StarsFilter() {
                 field.onChange(parseInt(e.target.value, 10));
               }}
               placeholder="Star's Starting Range"
+              min="0"
             />
           )}
           control={control}
@@ -68,6 +69,7 @@ export default function StarsFilter() {
                 field.onChange(parseInt(e.target.value, 10));
               }}
               placeholder="Star's Finish Range"
+              min="0"
             />
           )}
           control={control}

env.mjs

@@ -5,13 +5,12 @@ export const env = createEnv({
   server: {
     GITHUB_TOKEN: z.string().optional()
   },
-  client: {},
-  // If you're using Next.js < 13.4.4, you'll need to specify the runtimeEnv manually
+  client: {
+    NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME: z.string().optional()
+  },
   runtimeEnv: {
-    GITHUB_TOKEN: process.env.GITHUB_TOKEN
+    GITHUB_TOKEN: process.env.GITHUB_TOKEN,
+    NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME:
+      process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME
   }
-  // For Next.js >= 13.4.4, you only need to destructure client variables:
-  // experimental__runtimeEnv: {
-  //   NEXT_PUBLIC_PUBLISHABLE_KEY: process.env.NEXT_PUBLIC_PUBLISHABLE_KEY,
-  // }
 });

next.config.mjs

@@ -3,9 +3,6 @@ await import('./env.mjs');
 /** @type {import('next').NextConfig} */
 const config = {
   reactStrictMode: true,
-  images: {
-    domains: ['avatars.githubusercontent.com', 'raw.githubusercontent.com']
-  },
   async redirects() {
     return [
       {