Skip to content

Commit dc591e0

Browse files
MastanSayyadMastanSayyad
committed
Update index.html
1 parent a561356 commit dc591e0

File tree

1 file changed

+162
-1
lines changed

1 file changed

+162
-1
lines changed

‎Website/index.html‎

Lines changed: 162 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,12 +31,173 @@ <h2>Repositories</h2>
3131
<ul id="directories">
3232
</ul>
3333
</section>
34+
35+
<!-- Repository Information -->
36+
<section id="repository-info">
37+
<h2>Repository Information</h2>
38+
<div>
39+
<h3 id="repo-name"></h3>
40+
<p>Owner: <a id="repo-owner-link"><span id="repo-owner-name"></span></a></p>
41+
<img id="repo-owner-avatar" src="" alt="Owner Avatar" width="100" />
42+
<p><a id="repo-link">View on GitHub</a></p>
43+
</div>
44+
</section>
45+
46+
<!-- Statistics Cards -->
47+
<section id="statistics-cards">
48+
<h2>Repository Statistics</h2>
49+
<div class="stats-grid">
50+
<div class="stat-card">
51+
<h3>Total Stars</h3>
52+
<div id="total-stars">0</div>
53+
</div>
54+
<div class="stat-card">
55+
<h3>Total Forks</h3>
56+
<div id="total-forks">0</div>
57+
</div>
58+
<div class="stat-card">
59+
<h3>Open Issues</h3>
60+
<div id="open-issues">0</div>
61+
</div>
62+
<div class="stat-card">
63+
<h3>License</h3>
64+
<div id="license">No License</div>
65+
</div>
66+
<div class="stat-card">
67+
<h3>Repository Size</h3>
68+
<div id="repo-size">0 MB</div>
69+
</div>
70+
<div class="stat-card">
71+
<h3>Total Contributors</h3>
72+
<div id="contributors-count">0</div>
73+
</div>
74+
<div class="stat-card">
75+
<h3>Total Projects</h3>
76+
<div id="total-projects">10</div>
77+
</div>
78+
<div class="stat-card">
79+
<h3>Most Used Language</h3>
80+
<div id="most-used-language">N/A</div>
81+
</div>
82+
</div>
83+
</section>
84+
85+
<!-- Contributors -->
86+
<section id="contributors">
87+
<h2>Contributors</h2>
88+
<div id="contributors-list" class="contributors-grid"></div>
89+
</section>
90+
91+
<!-- Languages -->
92+
<section id="languages">
93+
<h2>Languages Used</h2>
94+
<ul id="language-list"></ul>
95+
</section>
96+
97+
<!-- Milestones -->
98+
<section id="milestones">
99+
<h2>Project Milestones</h2>
100+
<div id="milestones-chart" class="milestones-grid"></div>
101+
</section>
34102
</main>
35103

36104
<footer>
37105
<p>&copy; 2024 Machine Learning Repos - <a href="https://github.com/recodehive">RecodeHive</a>. All rights reserved.</p>
38106
</footer>
39107

40-
<script src="js/script.js"></script>
108+
<script>
109+
110+
document.addEventListener('DOMContentLoaded', async function () {
111+
const repoOwner = 'recodehive'; // Your GitHub username
112+
const repoName = 'machine-learning-repos'; // The repository name
113+
const apiUrl = `https://api.github.com/repos/${repoOwner}/${repoName}`;
114+
115+
try {
116+
// Fetch repository data
117+
const repoResponse = await fetch(apiUrl);
118+
const repoData = await repoResponse.json();
119+
120+
// Populate repository info
121+
document.getElementById('repo-name').innerText = repoData.name;
122+
document.getElementById('repo-owner-name').innerText = repoData.owner.login;
123+
document.getElementById('repo-owner-avatar').src = repoData.owner.avatar_url;
124+
document.getElementById('repo-owner-link').href = repoData.owner.html_url;
125+
document.getElementById('repo-link').href = repoData.html_url;
126+
127+
// Populate statistics cards
128+
document.getElementById('total-stars').innerText = repoData.stargazers_count;
129+
document.getElementById('total-forks').innerText = repoData.forks_count;
130+
document.getElementById('open-issues').innerText = repoData.open_issues_count;
131+
document.getElementById('license').innerText = repoData.license ? repoData.license.spdx_id : 'No License';
132+
document.getElementById('repo-size').innerText = (repoData.size / 1024).toFixed(2) + ' MB';
133+
134+
// Fetch number of contributors
135+
const contributorsResponse = await fetch(`${apiUrl}/contributors`);
136+
const contributorsData = await contributorsResponse.json();
137+
document.getElementById('contributors-count').innerText = contributorsData.length;
138+
139+
// Fetch languages
140+
const languagesResponse = await fetch(`${apiUrl}/languages`);
141+
const languagesData = await languagesResponse.json();
142+
const languageList = document.getElementById('language-list');
143+
const totalBytes = Object.values(languagesData).reduce((acc, val) => acc + val, 0);
144+
let mostUsedLanguage = { name: '', bytes: 0 };
145+
146+
for (const [language, bytes] of Object.entries(languagesData)) {
147+
const percentage = ((bytes / totalBytes) * 100).toFixed(2);
148+
const listItem = document.createElement('li');
149+
listItem.innerHTML = `
150+
<span>${language}</span>
151+
<div class="progress-bar" style="width: ${percentage}%;"></div>
152+
`;
153+
languageList.appendChild(listItem);
154+
155+
if (bytes > mostUsedLanguage.bytes) {
156+
mostUsedLanguage = { name: language, bytes: bytes };
157+
}
158+
}
159+
160+
document.getElementById('most-used-language').innerText = mostUsedLanguage.name;
161+
162+
// Populate total projects (assuming this is a static value)
163+
// Replace this with a dynamic calculation if you have a method to determine the total number of projects
164+
document.getElementById('total-projects').innerText = "10";
165+
166+
// Fetch milestones (if any)
167+
const milestonesResponse = await fetch(`${apiUrl}/milestones`);
168+
const milestonesData = await milestonesResponse.json();
169+
const milestonesChart = document.getElementById('milestones-chart');
170+
171+
milestonesData.forEach(milestone => {
172+
const milestoneDiv = document.createElement('div');
173+
milestoneDiv.className = 'milestone';
174+
milestoneDiv.innerHTML = `
175+
<h4>${milestone.title}</h4>
176+
<div class="progress">
177+
<div class="progress-bar" style="width: ${(milestone.closed_issues / (milestone.open_issues + milestone.closed_issues)) * 100}%;"></div>
178+
</div>
179+
`;
180+
milestonesChart.appendChild(milestoneDiv);
181+
});
182+
183+
// Populate contributors list
184+
const contributorsList = document.getElementById('contributors-list');
185+
contributorsData.forEach(contributor => {
186+
const contributorCard = document.createElement('div');
187+
contributorCard.className = 'contributor-card';
188+
contributorCard.innerHTML = `
189+
<a href="${contributor.html_url}" target="_blank">
190+
<img src="${contributor.avatar_url}" alt="${contributor.login}">
191+
</a>
192+
`;
193+
contributorsList.appendChild(contributorCard);
194+
});
195+
196+
} catch (error) {
197+
console.error('Error fetching data from GitHub API:', error);
198+
}
199+
});
200+
201+
</script>
41202
</body>
42203
</html>

0 commit comments

Comments
 (0)