TechForPalestine · hanadi92 · Jan 21, 2025
diff --git a/next.config.js b/next.config.js
@@ -14,6 +14,12 @@ const nextConfig = {
       {
         hostname: 'gitlab.com',
       },
+      {
+        protocol: 'https',
+        // todo this does not work. is it possible to include all mastodon servers...
+        hostname: '**',
+        pathname: '/**/account/avatar/**',
+      },
     ],
   },
 };

diff --git a/src/app/api/retrieve-profile-pic/route.ts b/src/app/api/retrieve-profile-pic/route.ts
@@ -6,13 +6,15 @@ export async function GET(request: NextRequest) {
   const searchParams = request.nextUrl.searchParams;
   const username = searchParams.get('username');
   const platform = searchParams.get('platform') as SocialPlatform;
+  const servername = searchParams.get('servername');
 
   let profilePicUrl = '/user.jpg';
 
   if (
     !username ||
     !platform ||
-    !Object.values(SocialPlatform).includes(platform)
+    !Object.values(SocialPlatform).includes(platform) ||
+    (platform == SocialPlatform.Mastodon && !servername)
   ) {
     // just return back default image for now - not handling this kind of error yet
     return NextResponse.json({ profilePicUrl }, { status: 200 });
@@ -28,6 +30,9 @@ export async function GET(request: NextRequest) {
     case SocialPlatform.Gitlab:
       profilePicUrl = await fetchGitlabProfilePic(username);
       break;
+    case SocialPlatform.Mastodon:
+      profilePicUrl = await fetchMastodonProfilePic(username, servername);
+      break;
   }
 
   if (profilePicUrl === null) {
@@ -74,3 +79,19 @@ const fetchGitlabProfilePic = async (username: string) => {
   }
   return response[0].avatar_url;
 };
+
+const fetchMastodonProfilePic = async (
+  username: string,
+  servername: string | null,
+) => {
+  const endpoint = `https://${servername}/api/v1/accounts/lookup?acct=${username}`;
+  const response = await fetch(endpoint).then((res) =>
+    res.ok ? res.json() : null,
+  );
+
+  if (response === null) {
+    return null;
+  }
+
+  return response.avatar;
+};
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -10,6 +10,7 @@ import {
   FaGithub,
   FaGitlab,
   FaXTwitter,
+  FaMastodon,
 } from 'react-icons/fa6';
 
 export default function Home() {
@@ -60,13 +61,23 @@ export default function Home() {
 
   const handleRetrieveProfilePicture = async (platform: SocialPlatform) => {
     const userProvidedUsername = prompt(`Enter your ${platform} username:`);
+    const userProvidedServername =
+      platform == SocialPlatform.Mastodon
+        ? prompt(`Enter your ${platform} servername:`)
+        : null;
 
-    if (userProvidedUsername) {
+    if (
+      (userProvidedUsername && platform != SocialPlatform.Mastodon) ||
+      // mastodon needs a servername and a username
+      (platform == SocialPlatform.Mastodon &&
+        userProvidedServername &&
+        userProvidedUsername)
+    ) {
       setFilePostfix(platform);
       try {
         setLoader(true);
         const response = await fetch(
-          `/api/retrieve-profile-pic?username=${userProvidedUsername}&platform=${platform}`,
+          `/api/retrieve-profile-pic?username=${userProvidedUsername}&platform=${platform}&servername=${userProvidedServername}`,
         ).then((res) => (res.ok ? res.json() : null));
         setLoader(false);
         if (response === null) {
@@ -252,6 +263,14 @@ export default function Home() {
               >
                 Use <FaGitlab className="inline mb-1" /> Profile Pic
               </button>
+              <button
+                 () =>
+                  await handleRetrieveProfilePicture(SocialPlatform.Mastodon)
+                }
+                className="rounded-full my-2 py-3 px-2 w-full border border-gray-900 text-xl"
+              >
+                Use <FaMastodon className="inline mb-1" /> Profile Pic
+              </button>
             </>
           )}
         </div>

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -2,4 +2,5 @@ export enum SocialPlatform {
   Twitter = 'twitter',
   Github = 'github',
   Gitlab = 'gitlab',
+  Mastodon = 'Mastodon',
 }