feature: add contributors react component in the website (#163)

* ⚙️ added script for fetching contributors

* 🛠️  Added gh workflow for fetching contributors every midnight

* aaded react component for contributors

* 🚃 moved contributors section from home page to about us page

* 🛠️  Rectified about us

* Update src/components/Contributors/styles.module.css

* ⚡ rectified the section style

* Update src/components/Contributors/styles.module.css

---------

Co-authored-by: Abhijay Jain <[email protected]>

.github/workflows/fetchContributors.yml

@@ -0,0 +1,23 @@
+name: Fetch Contributors
+
+on:
+  schedule:
+    - cron: "0 0 * * *" # Run every day at midnight
+
+jobs:
+  fetch-contributors:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: "14"
+
+      - name: Run Fetch Contributors Script
+        run: node scripts/fetchContributors.js
+        env:
+          ACCESS_TOKEN: ${{ secrets.GH_ACCESS_TOKEN }}

learn-more/about.md → learn-more/about.mdx

@@ -3,6 +3,8 @@ sidebar_position: 11
 title: About Us
 ---
 
+import Contributors from "@site/src/components/Contributors"
+
 # About Us
 
 Uptane is an open software update strategy that was initially conceived and developed in partnership with OEMs and suppliers within the automotive industry. Today, the Standard continues to evolve based on the direct input of current users and new adopters, from automakers to newer implementers in fields like robotics, industrial controls, and more.
@@ -95,3 +97,5 @@ have their names, or the names of their organizations listed.
 - André Weimerskirch
 - Phil Wise
 - David Zage
+
+<Contributors />

scripts/fetchContributors.js

@@ -0,0 +1,45 @@
+const axios = require('axios');
+const fs = require('fs');
+
+const accessToken = process.env.REACT_APP_GITHUB_ACCESS_TOKEN;
+
+const getRepositories = async () => {
+    const url = `https://api.github.com/orgs/uptane/repos`;
+    const response = await axios.get(url, {
+        headers: {
+            Authorization: `Bearer ${accessToken}`,
+        },
+    });
+    return response.data;
+}
+
+const getContributors = async (repoName) => {
+    const url = `https://api.github.com/repos/uptane/${repoName}/contributors`;
+    const response = await axios.get(url, {
+        headers: {
+            Authorization: `Bearer ${accessToken}`,
+        },
+    });
+    return response.data;
+}
+
+const fetchContributors = async () => {
+    try {
+        const repositories = await getRepositories();
+
+        const contributorsList = [];
+
+        for (const repo of repositories) {
+            const contributors = await getContributors(repo.name);
+            contributorsList.push({ repository: repo.name, contributors });
+        }
+
+        const jsonContent = JSON.stringify(contributorsList, null, 2);
+        fs.writeFileSync('./contributors.json', jsonContent);
+        console.log('SUCCESS :: scripts/fetchContributors.js :: Contributors list saved to contributors.json');
+    } catch (error) {
+        console.error('ERROR :: scripts/fetchContributors.js :: ', error.message);
+    }
+}
+
+fetchContributors();

src/components/Contributors/index.jsx

@@ -0,0 +1,39 @@
+import React, { useEffect, useState } from "react";
+import styles from './styles.module.css';
+import ContributorList from './../../../contributors.json';
+
+const Contributors = () => {
+
+  const [allContributors, setAllContributors] = useState([]);
+
+  useEffect(() => {
+    const uniqueContributors = new Map();
+
+    for (const repo of ContributorList) {
+      repo.contributors.forEach((contributor) => {
+        uniqueContributors.set(contributor.id, contributor);
+      });
+    }
+
+    const uniqueContributorsArray = Array.from(uniqueContributors.values());
+
+    setAllContributors(uniqueContributorsArray);
+  }, []);
+
+  return <div className={[styles.contributors].join(' ')}>
+    <div className={styles.uptane_contributors}>
+      <h1>Uptane Contributors</h1>
+    </div>
+    <div className={styles.contributor_list}>
+      {
+        allContributors.map((contributor) => (
+          <a className={styles.contributor} href={contributor?.html_url} target="_blank">
+            <img src={contributor?.avatar_url} />
+          </a>
+        ))
+      }
+    </div>
+  </div>
+}
+
+export default Contributors;

src/components/Contributors/styles.module.css

@@ -0,0 +1,50 @@
+.contributors {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.uptane_contributors {
+    width: 100%;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 2rem;
+}
+
+.uptane_contributors h1 {
+    font-weight: 600;
+    font-size: 40px;
+    line-height: 55px;
+    color: var(--ifm-color-primary);
+}
+
+.contributor_list {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: 2em;
+    padding: 0;
+}
+
+.contributor {
+    height: 70px;
+    width: 70px;
+    border-radius: 50%;
+    border: 2px solid var(--ifm-color-primary);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.contributor img {
+    height: 60px;
+    width: 60px;
+    border-radius: 50%;
+    object-fit: cover;
+}

src/pages/index.jsx

@@ -4,6 +4,7 @@ import Layout from '@theme/Layout';
 import Header from '@site/src/components/Header';
 import WhatIsUptane from '@site/src/components/WhatIsUptane';
 // import Workflow from '@site/src/components/Workflow';
+import Contributors from '../components/Contributors';
 import Community from '../components/JoinCommunity';
 import Adopters from '../components/Adopters';
 import PuttingUptane from '../components/PuttingUptane';