Skip to content

Commit 830e73e

Browse files
sanjay-kvsanjay-kv
authored
Merge pull request #1138 from MastanSayyad/main
Added Repository Statistics
2 parents a561356 + 1134e88 commit 830e73e

File tree

2 files changed

+187
-21
lines changed

2 files changed

+187
-21
lines changed

‎Website/index.html‎

Lines changed: 120 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,17 +26,136 @@ <h2>Welcome to the Machine Learning Repositories</h2>
2626
<p>This website provides an overview of various machine learning repositories available on GitHub, brought to you by the RecodeHive organization.</p>
2727
<a href="https://github.com/recodehive/machine-learning-repos" class="cta-button">Visit the Repository</a>
2828
</section>.
29+
30+
<!-- Repository Information -->
31+
<section id="repository-info">
32+
<h2>Repository Information</h2>
33+
<div>
34+
<h3 id="repo-name"></h3>
35+
<p>Owner: <a id="repo-owner-link"><span id="repo-owner-name"></span></a></p>
36+
<img id="repo-owner-avatar" src="" alt="Owner Avatar" width="100" />
37+
<p><a id="repo-link">View on GitHub</a></p>
38+
</div>
39+
</section>
40+
41+
<!-- Statistics Cards -->
42+
<section id="statistics-cards">
43+
<h2>Repository Statistics</h2>
44+
<div class="stats-grid">
45+
<div class="stat-card">
46+
<h3>Total Stars</h3>
47+
<div id="total-stars">0</div>
48+
</div>
49+
<div class="stat-card">
50+
<h3>Total Forks</h3>
51+
<div id="total-forks">0</div>
52+
</div>
53+
<div class="stat-card">
54+
<h3>Open Issues</h3>
55+
<div id="open-issues">0</div>
56+
</div>
57+
<div class="stat-card">
58+
<h3>License</h3>
59+
<div id="license">No License</div>
60+
</div>
61+
<div class="stat-card">
62+
<h3>Repository Size</h3>
63+
<div id="repo-size">0 MB</div>
64+
</div>
65+
<div class="stat-card">
66+
<h3>Total Contributors</h3>
67+
<div id="contributors-count">0</div>
68+
</div>
69+
<div class="stat-card">
70+
<h3>Total Projects</h3>
71+
<div id="total-projects">10</div>
72+
</div>
73+
<div class="stat-card">
74+
<h3>Most Used Language</h3>
75+
<div id="most-used-language">N/A</div>
76+
</div>
77+
</div>
78+
</section>
79+
80+
<!-- Languages -->
81+
<section id="languages">
82+
<h2>Languages Used</h2>
83+
<ul id="language-list"></ul>
84+
</section>
85+
2986
<section id="repo-list">
3087
<h2>Repositories</h2>
3188
<ul id="directories">
3289
</ul>
3390
</section>
91+
3492
</main>
3593

3694
<footer>
3795
<p>&copy; 2024 Machine Learning Repos - <a href="https://github.com/recodehive">RecodeHive</a>. All rights reserved.</p>
3896
</footer>
3997

40-
<script src="js/script.js"></script>
98+
<script>
99+
100+
document.addEventListener('DOMContentLoaded', async function () {
101+
const repoOwner = 'recodehive'; // Your GitHub username
102+
const repoName = 'machine-learning-repos'; // The repository name
103+
const apiUrl = `https://api.github.com/repos/${repoOwner}/${repoName}`;
104+
105+
try {
106+
// Fetch repository data
107+
const repoResponse = await fetch(apiUrl);
108+
const repoData = await repoResponse.json();
109+
110+
// Populate repository info
111+
document.getElementById('repo-name').innerText = repoData.name;
112+
document.getElementById('repo-owner-name').innerText = repoData.owner.login;
113+
document.getElementById('repo-owner-avatar').src = repoData.owner.avatar_url;
114+
document.getElementById('repo-owner-link').href = repoData.owner.html_url;
115+
document.getElementById('repo-link').href = repoData.html_url;
116+
117+
// Populate statistics cards
118+
document.getElementById('total-stars').innerText = repoData.stargazers_count;
119+
document.getElementById('total-forks').innerText = repoData.forks_count;
120+
document.getElementById('open-issues').innerText = repoData.open_issues_count;
121+
document.getElementById('license').innerText = repoData.license ? repoData.license.spdx_id : 'No License';
122+
document.getElementById('repo-size').innerText = (repoData.size / 1024).toFixed(2) + ' MB';
123+
124+
125+
// Fetch languages
126+
const languagesResponse = await fetch(`${apiUrl}/languages`);
127+
const languagesData = await languagesResponse.json();
128+
const languageList = document.getElementById('language-list');
129+
const totalBytes = Object.values(languagesData).reduce((acc, val) => acc + val, 0);
130+
let mostUsedLanguage = { name: '', bytes: 0 };
131+
132+
for (const [language, bytes] of Object.entries(languagesData)) {
133+
const percentage = ((bytes / totalBytes) * 100).toFixed(2);
134+
const listItem = document.createElement('li');
135+
listItem.innerHTML = `
136+
<span>${language}</span>
137+
<div class="progress-bar" style="width: ${percentage}%;"></div>
138+
`;
139+
languageList.appendChild(listItem);
140+
141+
if (bytes > mostUsedLanguage.bytes) {
142+
mostUsedLanguage = { name: language, bytes: bytes };
143+
}
144+
}
145+
146+
document.getElementById('most-used-language').innerText = mostUsedLanguage.name;
147+
148+
// Populate total projects (assuming this is a static value)
149+
// Replace this with a dynamic calculation if you have a method to determine the total number of projects
150+
document.getElementById('total-projects').innerText = "10";
151+
152+
153+
154+
} catch (error) {
155+
console.error('Error fetching data from GitHub API:', error);
156+
}
157+
});
158+
159+
</script>
41160
</body>
42161
</html>

‎Website/styles.css‎

Lines changed: 67 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,34 +3,18 @@ body {
33
margin: 0;
44
padding: 0;
55
background-color: #f4f4f4;
6-
overflow-y: auto; /* Ensure vertical scrollbar appears if needed */
6+
overflow-y: auto;
77
}
88

9-
::-webkit-scrollbar {
10-
width: 10px; /* Set the width of the scrollbar */
11-
}
12-
13-
::-webkit-scrollbar-track {
14-
background: #f4f4f4; /* Background color of the track */
15-
}
16-
17-
::-webkit-scrollbar-thumb {
18-
background: #007bff; /* Color of the scrollbar thumb */
19-
border-radius: 5px; /* Round the corners of the scrollbar thumb */
20-
}
21-
22-
::-webkit-scrollbar-thumb:hover {
23-
background: #0056b3; /* Darker color on hover */
24-
}
259

10+
/* Header Styles */
2611
header {
2712
background-color: #333;
2813
color: white;
29-
padding: 10px 0;
14+
padding: 20px 20px;
3015
display: flex;
3116
justify-content: space-between;
3217
align-items: center;
33-
padding: 20px 20px;
3418
}
3519

3620
header h1 {
@@ -55,6 +39,7 @@ nav ul li a {
5539
font-weight: bold;
5640
}
5741

42+
/* Main Section Styles */
5843
main {
5944
padding: 20px;
6045
text-align: center;
@@ -70,6 +55,58 @@ main {
7055
margin-top: 20px;
7156
}
7257

58+
/* Statistics Cards Styles */
59+
.stats-grid {
60+
display: grid;
61+
grid-template-columns: repeat(4, 1fr);
62+
gap: 1rem;
63+
margin-top: 2rem;
64+
padding: 20px;
65+
}
66+
67+
.stat-card {
68+
background-color: #fff;
69+
padding: 20px;
70+
border-radius: 10px;
71+
text-align: center;
72+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
73+
}
74+
75+
.stat-card h3 {
76+
margin-bottom: 0.5rem;
77+
color: #007bff;
78+
}
79+
80+
/* Responsive Adjustments */
81+
@media (max-width: 768px) {
82+
.stats-grid,
83+
.contributors-grid {
84+
grid-template-columns: 1fr;
85+
}
86+
}
87+
88+
/* Language List Styles */
89+
#languages ul {
90+
list-style: none;
91+
padding: 0;
92+
margin: 0;
93+
}
94+
95+
#languages li {
96+
margin-bottom: 0.5rem;
97+
display: flex;
98+
align-items: center;
99+
}
100+
101+
.language-bar {
102+
flex-grow: 1;
103+
height: 10px;
104+
border-radius: 5px;
105+
margin-left: 0.5rem;
106+
background-color: #007bff;
107+
}
108+
109+
/* Footer Styles */
73110
footer {
74111
background-color: #333;
75112
color: white;
@@ -140,4 +177,14 @@ footer a {
140177
flex: 1 1 100%;
141178
max-width: 100%;
142179
}
143-
}
180+
}
181+
/* Additional Styles for Responsiveness */
182+
@media (max-width: 768px) {
183+
.stats-grid {
184+
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
185+
}
186+
187+
.contributors-grid {
188+
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
189+
}
190+
}

0 commit comments

Comments
 (0)