Add contributors

.github/workflows/ci.yml

@@ -21,6 +21,8 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: 20
+        env:
+            GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: 'Install dependencies'
         run: npm install
@@ -32,6 +34,7 @@ jobs:
         run: |
           git restore src/app/projects/assets/upcomingProjects.json
           git restore src/app/projects/assets/projects.json
+          git restore src/app/projects/assets/contributors.json
 
       - name: 'Fetch branches'
         run: git fetch origin

src/app/contributors/page.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import Link from "next/link";
+import React from "react";
+import github from "../../../public/images/social-media/github.png";
+import Image from "next/image";
+import contributorList from "../projects/assets/contributors.json";
+
+const Contributors = () => {
+  const contributorsArray = Object.values(contributorList);
+  return (
+    <>
+      <section className='bg-slate-50'>
+        <div className='container mx-auto text-center'>
+          <h1 className='text-4xl leading-10 md:text-5xl md:!leading-[3.5rem] tracking-wide text-mindfire-text-black mt-10'>
+            Our Contributors
+          </h1>
+          <p className='mt-6 text-xl text-mf-light-grey tracking-wide mb-10'>
+            We’re a dynamic group of individuals who are passionate about what
+            we do.
+          </p>
+          {contributorsArray ? (
+            <div className='grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4'>
+              {contributorsArray.map((contributor) => (
+                <div
+                  key={contributor.id}
+                  className='bg-white border border-gray-200 rounded-lg shadow-lg transition-transform duration-300 transform hover:scale-105'
+                >
+                  <div className='p-4'>
+                    <img
+                      className='w-24 h-24 mb-3 rounded-full shadow-lg mx-auto transition-transform duration-300 transform hover:scale-105'
+                      src={contributor.avatar_url}
+                      alt={`Contributor ${contributor.login}`}
+                    />
+                    <h5 className='text-xl font-medium text-gray-900 text-center'>
+                      {contributor.login}
+                    </h5>
+                    <p className='text-sm text-gray-500 text-center'>
+                      Contributions: {contributor.contributions}
+                    </p>
+                    <div className='flex justify-center mt-4'>
+                      <Link href={contributor.html_url!} target='_blank'>
+                        <Image
+                          src={github}
+                          height={20}
+                          width={20}
+                          alt='github_img'
+                        />
+                      </Link>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div
+              style={{
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                height: "50vh",
+              }}
+            >
+              <p className='mt-6 text-xl text-mf-light-grey tracking-wide mb-10'>
+                No records found!
+              </p>
+            </div>
+          )}
+        </div>
+      </section>
+    </>
+  );
+};
+
+export default Contributors;

src/app/projects/assets/contributors.json

@@ -0,0 +1,9 @@
+{
+  "lakinmindfire": {
+    "id": 80667930,
+    "contributions": 116,
+    "html_url": "https://github.com/lakinmindfire",
+    "avatar_url": "https://avatars.githubusercontent.com/u/80667930?v=4",
+    "login": "lakinmindfire"
+  }
+}

src/app/projects/components/ProjectCard.tsx

@@ -33,7 +33,7 @@ export default function ProjectCard({
           <div className='flex gap-4 justify-end mt-6 pt-6 border-t-2'>
             {githubUrl && githubUrl !== "NA" ? (
               <Link href={githubUrl!} target='_blank'>
-                <Image src={github} height={20} width={20} alt='facebook_img' />
+                <Image src={github} height={20} width={20} alt='github_img' />
               </Link>
             ) : null}
             {documentationUrl && documentationUrl !== "NA" ? (

src/constants/index.ts

@@ -22,6 +22,10 @@ const navigations: Navigation[] = [
     name: "Projects",
     path: ["/projects", "/current-projects", "/upcoming-projects"],
   },
+  {
+    name: "Contributors",
+    path: ["/contributors"],
+  },
   {
     name: "GitHub",
     path: ["https://github.com/mindfiredigital"],

tsconfig.json

@@ -15,19 +15,19 @@
     "incremental": true,
     "plugins": [
       {
-        "name": "next",
-      },
+        "name": "next"
+      }
     ],
     "paths": {
-      "@/*": ["./src/*"],
-    },
+      "@/*": ["./src/*"]
+    }
   },
   "include": [
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",
     ".next/types/**/*.ts",
-    "build/types/**/*.ts",
+    "build/types/**/*.ts"
   ],
-  "exclude": ["node_modules"],
+  "exclude": ["node_modules"]
 }

updateProject.mjs

@@ -122,5 +122,88 @@ async function getUpcomingProjects() {
   }
 }
 
+//get list of contributors from github repo
+async function getContributorsList() {
+  const githubApiUrl = "https://api.github.com/users/mindfiredigital/repos";
+  const githubToken = process.env.GITHUB_TOKEN;
+
+  try {
+    const github_response = await fetch(githubApiUrl, {
+      method: "GET",
+      headers: {
+        Authorization: `token ${githubToken}`,
+        Accept: "application/vnd.github.v3+json",
+      },
+    });
+
+    if (!github_response.ok) {
+      throw new Error(
+        `Failed to fetch repositories. Status: ${github_response.status}`
+      );
+    }
+    const repositories = await github_response.json();
+    const repoNames = repositories.map((repo) => repo.name);
+
+    const contributorsObject = {};
+    for (const repoName of repoNames) {
+      const repoContributorsUrl = `https://api.github.com/repos/mindfiredigital/${repoName}/contributors`;
+
+      const contributorsResponse = await fetch(repoContributorsUrl, {
+        method: "GET",
+        headers: {
+          Authorization: `token ${githubToken}`,
+          Accept: "application/vnd.github.v3+json",
+        },
+      });
+
+      if (!contributorsResponse.ok) {
+        console.error(
+          `Failed to fetch contributors for ${repoName}. Status: ${contributorsResponse.status}`
+        );
+        continue;
+      }
+
+      const contributors = await contributorsResponse.json();
+      contributorsObject[repoName] = contributors;
+    }
+    let contributionsMap = {};
+
+    for (let repo in contributorsObject) {
+      contributorsObject[repo].forEach((contributor) => {
+        const { login, contributions, id, avatar_url, html_url } = contributor;
+        if (contributionsMap.hasOwnProperty(login)) {
+          contributionsMap[login].contributions += contributions;
+        } else {
+          contributionsMap[login] = {
+            id,
+            contributions,
+            html_url,
+            avatar_url,
+            login,
+          };
+        }
+      });
+    }
+    let sortedContributions = Object.fromEntries(
+      Object.entries(contributionsMap).sort(
+        ([, a], [, b]) => b.contributions - a.contributions
+      )
+    );
+
+    const projectsJsonPath = path.join(
+      __dirname,
+      "src/app/projects/assets/contributors.json"
+    );
+
+    fs.writeFileSync(
+      projectsJsonPath,
+      JSON.stringify(sortedContributions, null, 2)
+    );
+  } catch (error) {
+    console.log(error);
+  }
+}
+
 getCurrentProjects();
 getUpcomingProjects();
+getContributorsList();