feat: add the ability to have multiple github account

.env.local.example

@@ -1,4 +1,7 @@
 DEV_TO_API_KEY = your-api-key
-NEXT_PUBLIC_GITHUB_USERNAME = itsnitinr
+
+NEXT_PUBLIC_GITHUB_USERNAME = itsnitinr Snouzy mathias-bradi
+NEXT_PUBLIC_GITHUB_REPOS_LENGTH = 2
+
 NOTION_API_TOKEN = secret_hmVZxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxIXEQ
 NOTION_DATABASE_ID = c494cxxxxxxxxxxxxxxxxxxxxxx3b050

constants/config.js

@@ -0,0 +1,5 @@
+export const FETCH_CONFIG = {
+  headers: {
+    Authorization: `token ${process.env.NEXT_GITHUB_ACCESS_TOKEN}`,
+  },
+};

pages/github.jsx

@@ -2,8 +2,10 @@ import Image from 'next/image';
 import GitHubCalendar from 'react-github-calendar';
 import RepoCard from '../components/RepoCard';
 import styles from '../styles/GithubPage.module.css';
+import { FETCH_CONFIG } from '../constants/config';
+import React from 'react';
 
-const GithubPage = ({ repos, user }) => {
+const GithubPage = ({ entities }) => {
   const theme = {
     level0: '#161B22',
     level1: '#0e4429',
@@ -12,58 +14,63 @@ const GithubPage = ({ repos, user }) => {
     level4: '#39d353',
   };
 
+  const reposLength = Number(process.env.NEXT_PUBLIC_GITHUB_REPOS_LENGTH);
   return (
     <>
-      <div className={styles.user}>
-        <div>
-          <Image
-            src={user.avatar_url}
-            className={styles.avatar}
-            alt={user.login}
-            width={50}
-            height={50}
-          />
-          <h3 className={styles.username}>{user.login}</h3>
-        </div>
-        <div>
-          <h3>{user.public_repos} repos</h3>
-        </div>
-        <div>
-          <h3>{user.followers} followers</h3>
-        </div>
-      </div>
-      <h2>6 Latest Updated Repositories</h2>
-      <div className={styles.container}>
-        {repos.map((repo) => (
-          <RepoCard key={repo.id} repo={repo} />
-        ))}
-      </div>
-      <div className={styles.contributions}>
-        <GitHubCalendar
-          username={process.env.NEXT_PUBLIC_GITHUB_USERNAME}
-          theme={theme}
-          hideColorLegend
-        />
-      </div>
+      {entities.map(({ user, repos }) => (
+        <React.Fragment key={user.id}>
+          <div className={styles.user}>
+            <div>
+              <Image src={user.avatar_url} className={styles.avatar} alt={user.login} width={50} height={50} />
+              <h3 className={styles.username}>{user.login}</h3>
+            </div>
+            <div>
+              <h3>{user.public_repos} repos</h3>
+            </div>
+            <div>
+              <h3>{user.followers} followers</h3>
+            </div>
+          </div>
+          <h2>
+            {String(reposLength)} Latest{reposLength > 1 ? 's' : ''} Updated Repositories
+          </h2>
+          <div className={styles.container}>
+            {repos.map((repo) => (
+              <RepoCard key={repo.id} repo={repo} />
+            ))}
+          </div>
+          <div className={styles.contributions}>
+            <GitHubCalendar username={user.login} theme={theme} hideColorLegend />
+          </div>
+        </React.Fragment>
+      ))}
     </>
   );
 };
 
 export async function getStaticProps() {
-  const userRes = await fetch(
-    `https://api.github.com/users/${process.env.NEXT_PUBLIC_GITHUB_USERNAME}`
-  );
-  const user = await userRes.json();
+  const names = process.env.NEXT_PUBLIC_GITHUB_USERNAME.split(' ');
 
-  const repoRes = await fetch(
-    `https://api.github.com/users/${process.env.NEXT_PUBLIC_GITHUB_USERNAME}/repos?sort=created_at&per_page=6`
-  );
-  const repos = await repoRes.json();
+  try {
+    const entities = await Promise.all(
+      names.map(async (name) => {
+        const all = await Promise.all([fetch(`https://api.github.com/users/${name}`, FETCH_CONFIG), fetch(`https://api.github.com/users/${name}/repos?sort=created_at&per_page=${process.env.NEXT_PUBLIC_GITHUB_REPOS_LENGTH}`, FETCH_CONFIG)]);
 
-  return {
-    props: { title: 'GitHub', repos, user },
-    revalidate: 10,
-  };
+        const entity = {
+          user: await all[0].json(),
+          repos: await all[1].json(),
+        };
+
+        return entity;
+      })
+    );
+
+    return {
+      props: { title: 'Github', entities },
+    };
+  } catch (err) {
+    return { props: { title: 'Github', entities: [] } };
+  }
 }
 
 export default GithubPage;