Merge branch 'main' into feature/docker

Author: max-programming

.all-contributorsrc

@@ -423,6 +423,46 @@
         "design",
         "code"
       ]
+    },
+    {
+      "login": "Dhruvn-patel",
+      "name": "Dhruv Patel",
+      "avatar_url": "https://avatars.githubusercontent.com/u/87563885?v=4",
+      "profile": "https://github.com/Dhruvn-patel",
+      "contributions": [
+        "code",
+        "design"
+      ]
+    },
+    {
+      "login": "jolbol1",
+      "name": "James Shopland",
+      "avatar_url": "https://avatars.githubusercontent.com/u/5064896?v=4",
+      "profile": "http://jamesshopland.com",
+      "contributions": [
+        "code",
+        "bug"
+      ]
+    },
+    {
+      "login": "Alone-Y154",
+      "name": "Yashwanth Krishna",
+      "avatar_url": "https://avatars.githubusercontent.com/u/72192888?v=4",
+      "profile": "https://alone-y154.github.io/Portfolio-Website/",
+      "contributions": [
+        "design",
+        "code"
+      ]
+    },
+    {
+      "login": "massdx",
+      "name": "Massahoud",
+      "avatar_url": "https://avatars.githubusercontent.com/u/63166764?v=4",
+      "profile": "https://github.com/massdx",
+      "contributions": [
+        "code",
+        "ideas"
+      ]
     }
   ],
   "contributorsPerLine": 7,

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

@@ -6,7 +6,7 @@ on:
   push:
     branches:
       - main
-  pull_request:
+  pull_request_target:
     branches:
       - main
 

.gitignore

@@ -32,3 +32,4 @@ yarn-error.log*
 
 # vercel
 .vercel
+.env*.local

README.md

@@ -6,7 +6,7 @@ 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-43-orange.svg?style=flat-square)](#contributors-)
+[![All Contributors](https://img.shields.io/badge/all_contributors-47-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">
@@ -49,6 +49,28 @@ pnpm dev
 
 This project provides a development and production Dockerfiles for your needs and a docker-compose to deploy locally the project with the required configuration. The development Dockerfile creates a volume pointing to /node_modules so you can match the files between your machine and the container, while the production Dockerfile will simply compile the code. There's a Makefile to build, run, stop the containers and remove their volumes if needed, or you can execute the commands directly from the project's root.
 
+### Setup Xata
+
+You will need to sign up with Xata and set up a database for the build. After registering for an account, please proceed with the following steps.
+
+#### Installation
+
+```
+npm install -g @xata.io/cli@latest
+```
+#### Authentication
+```
+xata auth login
+```
+
+#### Migration
+
+Change DB settings in xata.ts and .xatarc (do not commit this) and run migration
+
+```
+xata push main
+```
+
 ## Tech Stack
 
 - [Next.js](https://nextjs.org/)
@@ -135,6 +157,10 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     </tr>
     <tr>
       <td align="center" valign="top" width="14.28%"><a href="https://nabarun.xyz"><img src="https://avatars.githubusercontent.com/u/64539836?v=4?s=100" width="100px;" alt="Nabarun"/><br /><sub><b>Nabarun</b></sub></a><br /><a href="#ideas-nabarvn" title="Ideas, Planning, & Feedback">🤔</a> <a href="#design-nabarvn" title="Design">🎨</a> <a href="https://github.com/max-programming/hacktoberfest-projects/commits?author=nabarvn" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Dhruvn-patel"><img src="https://avatars.githubusercontent.com/u/87563885?v=4?s=100" width="100px;" alt="Dhruv Patel"/><br /><sub><b>Dhruv Patel</b></sub></a><br /><a href="https://github.com/max-programming/hacktoberfest-projects/commits?author=Dhruvn-patel" title="Code">💻</a> <a href="#design-Dhruvn-patel" title="Design">🎨</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="http://jamesshopland.com"><img src="https://avatars.githubusercontent.com/u/5064896?v=4?s=100" width="100px;" alt="James Shopland"/><br /><sub><b>James Shopland</b></sub></a><br /><a href="https://github.com/max-programming/hacktoberfest-projects/commits?author=jolbol1" title="Code">💻</a> <a href="https://github.com/max-programming/hacktoberfest-projects/issues?q=author%3Ajolbol1" title="Bug reports">🐛</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://alone-y154.github.io/Portfolio-Website/"><img src="https://avatars.githubusercontent.com/u/72192888?v=4?s=100" width="100px;" alt="Yashwanth Krishna"/><br /><sub><b>Yashwanth Krishna</b></sub></a><br /><a href="#design-Alone-Y154" title="Design">🎨</a> <a href="https://github.com/max-programming/hacktoberfest-projects/commits?author=Alone-Y154" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/massdx"><img src="https://avatars.githubusercontent.com/u/63166764?v=4?s=100" width="100px;" alt="Massahoud"/><br /><sub><b>Massahoud</b></sub></a><br /><a href="https://github.com/max-programming/hacktoberfest-projects/commits?author=massdx" title="Code">💻</a> <a href="#ideas-massdx" title="Ideas, Planning, & Feedback">🤔</a></td>
     </tr>
   </tbody>
 </table>

assets/languages.json

@@ -76,6 +76,7 @@
     "Pascal",
     "CoffeeScript",
     "Crystal",
-    "Clojure"
+    "Clojure",
+    "Solidity"
   ]
 }

components/ContributorCard.tsx

@@ -1,5 +1,7 @@
 import { env } from 'env.mjs';
 import { CldImage, getCldImageUrl } from 'next-cloudinary';
+import { useRouter } from 'next/router';
+import { useEffect, useRef } from 'react';
 import { IoLogoGithub } from 'react-icons/io';
 
 interface Contributor {
@@ -15,6 +17,9 @@ interface Props {
 }
 
 export default function ContributorCard({ contributor }: Props) {
+  const router = useRouter();
+  const cardRef = useRef<HTMLButtonElement>(null);
+  const hash = router.asPath.split('#')[1];
   const url = env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME
     ? getCldImageUrl({
         src: contributor.avatar_url,
@@ -24,37 +29,51 @@ export default function ContributorCard({ contributor }: Props) {
       })
     : contributor.avatar_url;
 
+  useEffect(() => {
+    if (!hash) return;
+    if (hash.toLowerCase() === contributor.login.toLowerCase()) {
+      cardRef.current?.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center'
+      });
+      cardRef.current?.focus();
+    }
+  }, [hash, contributor.login]);
+
   return (
-    <div className="text-center shadow-2xl card">
-      <a
-        href={`https://github.com/${contributor.login}`}
-        target="_blank"
-        rel="noreferrer"
-      >
-        <figure className="px-10 pt-10 h-[351px] md:h-[336px] lg:h-[204px] xl:h-[268px]">
+    <button
+      className="justify-center min-w-full text-center shadow-2xl card focus-within:outline-sky-300"
+      id={contributor.login}
+      onClick={() => router.replace({ hash: contributor.login })}
+      ref={cardRef}
+    >
+      <div className="w-full pt-5 mx-auto">
+        <figure className="w-full h-full">
           <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>
+      </div>
+      <div className="w-full gap-3 text-center card-body">
+        <h2 className="text-2xl font-bold text-center text-2023-bavarian-blue-1">
+          {contributor.name}
+        </h2>
         <a
           href={contributor.profile}
-          className="link text-neutral-100 hover:text-[#dbe8d9]"
+          className="link text-2023-bavarian-blue-1 hover:text-2023-bavarian-blue-2"
         >
           {contributor.profile}
         </a>
-        <div className="justify-center card-actions mt-auto">
+        <div className="justify-center mt-auto card-actions">
           <a
-            className="text-white btn border-[#dbe8d9] hover:border-[#dbe8d9] btn-outline border-2 hover:bg-[#dbe8d9] hover:text-slate-900"
+            className="border-2 text-2023-bavarian-blue-1 btn border-2023-bavarian-blue-2 hover:border-2023-bavarian-blue-2 btn-outline hover:bg-2023-bavarian-blue-2 hover:text-2023-bavarian-blue-4"
             href={`https://github.com/${contributor.login}`}
             target="_blank"
             rel="noreferrer"
           >
-            <IoLogoGithub />
+            <IoLogoGithub className="w-5 h-5" />
             &nbsp; Profile
           </a>
         </div>
       </div>
-    </div>
+    </button>
   );
 }

components/Header.tsx

@@ -32,7 +32,8 @@ function Header() {
 
           <div className="flex gap-2 lg:ml-40">
             <button
-              className="btn btn-ghost capitalize"
+             
+              className="btn btn-ghost text-white border-1 border-white" 
               onClick={() => {
                 if (!session.data) signIn('github');
                 else signOut();

components/Hero.tsx

@@ -1,4 +1,4 @@
-import { FormEventHandler, useState } from 'react';
+import { FormEventHandler, MouseEventHandler, useRef, useState } from 'react';
 import Link from 'next/link';
 
 import languages from 'assets/languages.json';
@@ -11,7 +11,16 @@ const { main: mainLanguages, others: otherLanguages } = languages;
 
 function Hero() {
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [isSearchEmpty, setIsSearchEmpty] = useState(true);
+  const formRef = useRef<HTMLFormElement | null>(null);
   const router = useRouter();
+  const handleClear: MouseEventHandler<HTMLButtonElement> = () => {
+    if (formRef.current && !isSearchEmpty) {
+      formRef.current.reset();
+      setIsSearchEmpty(true);
+      setErrorMessage(null);
+    }
+  };
   const handleSubmit: FormEventHandler = e => {
     e.preventDefault();
     const formData = new FormData(e.target as HTMLFormElement);
@@ -34,19 +43,34 @@ function Hero() {
             Search your language
           </h1>
           <form
+            ref={formRef}
             className="form-control w-full max-w-xs mx-auto items-center mt-10 mb-12"
             onSubmit={handleSubmit}
           >
             <div className="flex w-full">
-              <input
-                type="text"
-                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"
-              />
+              <div className="flex relative w-full ">
+                <input
+                  type="text"
+                  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"
+                  onChange={e => {
+                    setIsSearchEmpty(e.target.value.trim() === '');
+                  }}
+                />
+
+                {!isSearchEmpty && (
+                  <button
+                    onClick={handleClear}
+                    className="absolute right-0 top-0 bottom-0  p-2"
+                  >
+                    <ClearIcon />
+                  </button>
+                )}
+              </div>
               <button
                 type="submit"
-                className="group btn btn-square rounded-tl-none rounded-bl-none bg-transparent border-2023-manga-3 hover:bg-2023-manga-2 hover:text-2023-void-2 hover:border-2023-manga-2"
+                className="group btn btn-square rounded-tl-none rounded-bl-none bg-transparent border-2023-bavarian-gold-2 hover:bg-2023-manga-2 hover:text-2023-void-2 hover:border-2023-manga-2"
               >
                 <SearchIcon />
               </button>
@@ -106,5 +130,23 @@ const SearchIcon = () => (
     />
   </svg>
 );
+const ClearIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className="w-4 h-4 text-white "
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M6 18L18 6M6 6l12 12"
+      />
+    </svg>
+  );
+};
 
 export default Hero;