From 30368c348cf14753117a7c2b009f2e3ff41142a5 Mon Sep 17 00:00:00 2001
From: Madhurima Rawat <105432776+madhurimarawat@users.noreply.github.com>
Date: Tue, 30 Jul 2024 23:15:55 +0530
Subject: [PATCH] Enhanced repo details, improved CSS layout.

Added additional repository details and improved CSS styling

- Included watchers, forks, updated, and deployment status for each repository in the display.
- Adjusted CSS to refine link appearance, ensuring consistency and visual appeal.
- Implemented a two-column layout for better organization and readability of repository information.
- Enhanced mobile device responsiveness by adjusting the user information card to fit smaller screens seamlessly.
---
 css/index.css | 74 +++++++++++++++++++++++++++++++++++++++++++++++++++
 index.html    |  2 ++
 js/index.js   | 45 +++++++++++++++++++++++++++++--
 3 files changed, 119 insertions(+), 2 deletions(-)

diff --git a/css/index.css b/css/index.css
index d75a5a9..ff9b276 100644
--- a/css/index.css
+++ b/css/index.css
@@ -259,4 +259,78 @@ h3 {
     text-align: center;
     /* Vertically align content */
     vertical-align: middle;
+}
+
+.spacer {
+    height: 2em;
+    /* This creates space equivalent to two line breaks */
+}
+
+.repo-actions {
+    display: grid;
+    grid-template-columns: 1fr;
+    /* Default to a single column */
+    gap: 10px;
+    /* Add space between grid items */
+}
+
+@media (min-width: 768px) {
+
+    /* Adjust breakpoint as needed */
+    .repo-actions {
+        grid-template-columns: 1fr 1fr;
+        /* Two columns for larger screens */
+    }
+}
+
+/* Media query for smaller devices */
+@media (max-width: 767px) {
+    .user-info-card table {
+        display: block;
+    }
+
+    .user-info-card td {
+        display: block;
+        width: 100%;
+        text-align: center;
+    }
+
+    .user-details {
+        padding-left: 0;
+        text-align: center;
+    }
+
+    .user-details p {
+        margin-bottom: 10px;
+    }
+
+    #userProfileLink a {
+        display: inline-block;
+        margin-top: 10px;
+    }
+
+    .repo-actions {
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: 10px;
+    }
+
+    .repo-actions p {
+        margin: 0;
+        /* Removes margin between paragraphs */
+        margin-bottom: 5px;
+        /* Adjust this value to decrease or increase space */
+        padding: 0;
+        /* Removes padding inside paragraphs */
+    }
+
+    .centered-td img {
+        display: block;
+        margin: 0 auto;
+        /* Center the image horizontally */
+        padding-top: 10px;
+        /* Add space before the image */
+        padding-bottom: 10px;
+        /* Add space after the image */
+    }
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index cdae3af..edc7a03 100644
--- a/index.html
+++ b/index.html
@@ -114,6 +114,8 @@ <h3 id="userName" style="text-align: center;"></h3>
                     </table>
                 </div>
             </div>
+            <!-- Spacer -->
+            <div class="col-md-12 spacer"></div>
             <div class="col-md-12">
                 <!-- Loader for fetching data -->
                 <div id="loaderContainer" class="loader-container" style="display: none;">
diff --git a/js/index.js b/js/index.js
index 8b65b73..5903f91 100644
--- a/js/index.js
+++ b/js/index.js
@@ -186,7 +186,7 @@ function displayRepositories(page) {
     const displayedRepos = repositoriesData.slice(startIndex, endIndex);
 
     repositoriesDiv.innerHTML = displayedRepos.map(repo => {
-        const { name, description, html_url, topics, license, stargazers_count, open_issues_count, pulls_url } = repo;
+        const { name, description, html_url, topics, license, stargazers_count, open_issues_count, forks_count, watchers_count, language, updated_at, pulls_url } = repo;
         return `
             <div class="col-md-4">
                 <div class="card mb-4 repo-card">
@@ -197,10 +197,18 @@ function displayRepositories(page) {
                             ${topics.map(topic => `<button type="button" class="btn topic-button btn-sm">${topic}</button>`).join(' ')}
                         </div>
                         <div class="repo-link">
+                        <div class = "repo-actions">
                             <p>📜 License: ${license ? license.spdx_id : 'None'}</p>
+                            <p>📚 Language: ${language || 'None'}</p>
                             <p>⭐ Stars: ${stargazers_count}</p>
                             <p>❗ Issues: ${open_issues_count}</p>
                             <p id="pull-requests-${name}">🔃 Pull Requests: Fetching...</p>
+                            <p id="commits-${name}">📊 Commits: Fetching...</p>
+                            <p id="deployments-${name}">🚀 Deployments: Fetching...</p>
+                            <p>🍴 Forks: ${forks_count}</p>
+                            <p>👁️ Watchers: ${watchers_count}</p>
+                            <p>📅 Updated: ${new Date(updated_at).toLocaleDateString()}</p>
+                            </div>
                             <a href="${html_url}" target="_blank" class="btn btn-primary">View on GitHub</a>
                         </div>
                     </div>
@@ -210,15 +218,48 @@ function displayRepositories(page) {
     }).join('');
 
     displayedRepos.forEach(repo => {
-        const { name, pulls_url } = repo;
+        const { name, pulls_url, owner } = repo;
         fetchPullRequests(pulls_url).then(count => {
             document.getElementById(`pull-requests-${name}`).textContent = `🔃 Pull Requests: ${count}`;
         });
+        fetchCommits(repo).then(count => {
+            document.getElementById(`commits-${name}`).textContent = `📊 Commits: ${count}`;
+        });
+        fetchDeployments(repo).then(count => {
+            document.getElementById(`deployments-${name}`).textContent = `🚀 Deployments: ${count}`;
+        });
     });
 
     displayPagination();
 }
 
+async function fetchCommits(repo) {
+    const { owner, name } = repo;
+    const response = await fetch(`${API_URL}/repos/${owner.login}/${name}/commits?per_page=1`);
+    if (!response.ok) {
+        return 'Error';
+    }
+    const linkHeader = response.headers.get('link');
+    if (linkHeader) {
+        const lastPageMatch = linkHeader.match(/&page=(\d+)>; rel="last"/);
+        if (lastPageMatch) {
+            return parseInt(lastPageMatch[1], 10);
+        }
+    }
+    return 0;
+}
+
+async function fetchDeployments(repo) {
+    const { owner, name } = repo;
+    const response = await fetch(`${API_URL}/repos/${owner.login}/${name}/deployments`);
+    if (!response.ok) {
+        return 0;
+    }
+    const deployments = await response.json();
+    return deployments.length || 0;
+}
+
+
 function displayPagination() {
     const totalPages = Math.ceil(repositoriesData.length / 9);
     let paginationHTML = `