Merge pull request #27 from kohrVid/add-gitlab-support

Add support for GitLab profile pictures

next.config.js

@@ -7,6 +7,12 @@ const nextConfig = {
       },
       {
         hostname: 'avatars.githubusercontent.com'
+      },
+      {
+        hostname: 'secure.gravatar.com'
+      },
+      {
+        hostname: 'gitlab.com'
       }
     ],
   },

src/app/api/retrieve-profile-pic/route.ts

@@ -21,6 +21,9 @@ export async function GET(request: NextRequest) {
         case SocialPlatform.Github:
             profilePicUrl = await fetchGithubProfilePic(username);
             break;
+        case SocialPlatform.Gitlab:
+            profilePicUrl = await fetchGitlabProfilePic(username);
+            break;
     }
 
     if (profilePicUrl === null) {
@@ -51,4 +54,14 @@ const fetchGithubProfilePic = async (username: string) => {
         return null;
     }
     return response.avatar_url;
-}
+}
+
+const fetchGitlabProfilePic = async (username: string) => {
+    const endpoint = `https://gitlab.com/api/v4/users?username=${username}`;
+    const response = await fetch(endpoint).then(res => res.ok ? res.json() : null);
+
+    if (response === null) {
+        return null;
+    }
+    return response[0].avatar_url;
+}

src/app/page.tsx

@@ -4,7 +4,7 @@ import download from 'downloadjs';
 import { toPng } from 'html-to-image';
 import Image from 'next/image';
 import { useEffect, useRef, useState } from "react";
-import { FaArrowRotateLeft, FaDownload, FaGithub, FaShare, FaXTwitter } from "react-icons/fa6";
+import { FaArrowRotateLeft, FaDownload, FaGithub, FaGitlab, FaShare, FaXTwitter } from "react-icons/fa6";
 
 export default function Home() {
   const ref = useRef<HTMLDivElement>(null)
@@ -173,6 +173,9 @@ export default function Home() {
             <button onClick={async () => await handleRetrieveProfilePicture(SocialPlatform.Github)} className="rounded-full my-2 py-3 px-2 w-full border border-gray-900 text-xl">
               Use <FaGithub className="inline mb-1" /> Profile Pic
             </button>
+            <button onClick={async () => await handleRetrieveProfilePicture(SocialPlatform.Gitlab)} className="rounded-full my-2 py-3 px-2 w-full border border-gray-900 text-xl">
+              Use <FaGitlab className="inline mb-1" /> Profile Pic
+            </button>
           </>
         }
         </div>

src/types/index.ts

@@ -1,4 +1,5 @@
 export enum SocialPlatform {
     Twitter = "twitter",
-    Github = "github"
+    Github = "github",
+    Gitlab = "gitlab",
 }