Skip to content

Added Repository Statistics #1138

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Aug 24, 2024
Merged

Added Repository Statistics #1138

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
dc591e0
Update index.html
MastanSayyad Aug 24, 2024
d331465
Update styles.css
MastanSayyad Aug 24, 2024
fc65ee4
Update index.html
MastanSayyad Aug 24, 2024
2f01fb7
Update index.html
MastanSayyad Aug 24, 2024
1134e88
Update styles.css
MastanSayyad Aug 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
121 changes: 120 additions & 1 deletion Website/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,17 +26,136 @@ <h2>Welcome to the Machine Learning Repositories</h2>
<p>This website provides an overview of various machine learning repositories available on GitHub, brought to you by the RecodeHive organization.</p>
<a href="https://github.com/recodehive/machine-learning-repos" class="cta-button">Visit the Repository</a>
</section>.

<!-- Repository Information -->
<section id="repository-info">
<h2>Repository Information</h2>
<div>
<h3 id="repo-name"></h3>
<p>Owner: <a id="repo-owner-link"><span id="repo-owner-name"></span></a></p>
<img id="repo-owner-avatar" src="" alt="Owner Avatar" width="100" />
<p><a id="repo-link">View on GitHub</a></p>
</div>
</section>

<!-- Statistics Cards -->
<section id="statistics-cards">
<h2>Repository Statistics</h2>
<div class="stats-grid">
<div class="stat-card">
<h3>Total Stars</h3>
<div id="total-stars">0</div>
</div>
<div class="stat-card">
<h3>Total Forks</h3>
<div id="total-forks">0</div>
</div>
<div class="stat-card">
<h3>Open Issues</h3>
<div id="open-issues">0</div>
</div>
<div class="stat-card">
<h3>License</h3>
<div id="license">No License</div>
</div>
<div class="stat-card">
<h3>Repository Size</h3>
<div id="repo-size">0 MB</div>
</div>
<div class="stat-card">
<h3>Total Contributors</h3>
<div id="contributors-count">0</div>
</div>
<div class="stat-card">
<h3>Total Projects</h3>
<div id="total-projects">10</div>
</div>
<div class="stat-card">
<h3>Most Used Language</h3>
<div id="most-used-language">N/A</div>
</div>
</div>
</section>

<!-- Languages -->
<section id="languages">
<h2>Languages Used</h2>
<ul id="language-list"></ul>
</section>

<section id="repo-list">
<h2>Repositories</h2>
<ul id="directories">
</ul>
</section>

</main>

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

<script src="js/script.js"></script>
<script>

document.addEventListener('DOMContentLoaded', async function () {
const repoOwner = 'recodehive'; // Your GitHub username
const repoName = 'machine-learning-repos'; // The repository name
const apiUrl = `https://api.github.com/repos/${repoOwner}/${repoName}`;

try {
// Fetch repository data
const repoResponse = await fetch(apiUrl);
const repoData = await repoResponse.json();

// Populate repository info
document.getElementById('repo-name').innerText = repoData.name;
document.getElementById('repo-owner-name').innerText = repoData.owner.login;
document.getElementById('repo-owner-avatar').src = repoData.owner.avatar_url;
document.getElementById('repo-owner-link').href = repoData.owner.html_url;
document.getElementById('repo-link').href = repoData.html_url;

// Populate statistics cards
document.getElementById('total-stars').innerText = repoData.stargazers_count;
document.getElementById('total-forks').innerText = repoData.forks_count;
document.getElementById('open-issues').innerText = repoData.open_issues_count;
document.getElementById('license').innerText = repoData.license ? repoData.license.spdx_id : 'No License';
document.getElementById('repo-size').innerText = (repoData.size / 1024).toFixed(2) + ' MB';


// Fetch languages
const languagesResponse = await fetch(`${apiUrl}/languages`);
const languagesData = await languagesResponse.json();
const languageList = document.getElementById('language-list');
const totalBytes = Object.values(languagesData).reduce((acc, val) => acc + val, 0);
let mostUsedLanguage = { name: '', bytes: 0 };

for (const [language, bytes] of Object.entries(languagesData)) {
const percentage = ((bytes / totalBytes) * 100).toFixed(2);
const listItem = document.createElement('li');
listItem.innerHTML = `
<span>${language}</span>
<div class="progress-bar" style="width: ${percentage}%;"></div>
`;
languageList.appendChild(listItem);

if (bytes > mostUsedLanguage.bytes) {
mostUsedLanguage = { name: language, bytes: bytes };
}
}

document.getElementById('most-used-language').innerText = mostUsedLanguage.name;

// Populate total projects (assuming this is a static value)
// Replace this with a dynamic calculation if you have a method to determine the total number of projects
document.getElementById('total-projects').innerText = "10";



} catch (error) {
console.error('Error fetching data from GitHub API:', error);
}
});

</script>
</body>
</html>
87 changes: 67 additions & 20 deletions Website/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,34 +3,18 @@ body {
margin: 0;
padding: 0;
background-color: #f4f4f4;
overflow-y: auto; /* Ensure vertical scrollbar appears if needed */
overflow-y: auto;
}

::-webkit-scrollbar {
width: 10px; /* Set the width of the scrollbar */
}

::-webkit-scrollbar-track {
background: #f4f4f4; /* Background color of the track */
}

::-webkit-scrollbar-thumb {
background: #007bff; /* Color of the scrollbar thumb */
border-radius: 5px; /* Round the corners of the scrollbar thumb */
}

::-webkit-scrollbar-thumb:hover {
background: #0056b3; /* Darker color on hover */
}

/* Header Styles */
header {
background-color: #333;
color: white;
padding: 10px 0;
padding: 20px 20px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 20px;
}

header h1 {
Expand All @@ -55,6 +39,7 @@ nav ul li a {
font-weight: bold;
}

/* Main Section Styles */
main {
padding: 20px;
text-align: center;
Expand All @@ -70,6 +55,58 @@ main {
margin-top: 20px;
}

/* Statistics Cards Styles */
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
margin-top: 2rem;
padding: 20px;
}

.stat-card {
background-color: #fff;
padding: 20px;
border-radius: 10px;
text-align: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.stat-card h3 {
margin-bottom: 0.5rem;
color: #007bff;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
.stats-grid,
.contributors-grid {
grid-template-columns: 1fr;
}
}

/* Language List Styles */
#languages ul {
list-style: none;
padding: 0;
margin: 0;
}

#languages li {
margin-bottom: 0.5rem;
display: flex;
align-items: center;
}

.language-bar {
flex-grow: 1;
height: 10px;
border-radius: 5px;
margin-left: 0.5rem;
background-color: #007bff;
}

/* Footer Styles */
footer {
background-color: #333;
color: white;
Expand Down Expand Up @@ -140,4 +177,14 @@ footer a {
flex: 1 1 100%;
max-width: 100%;
}
}
}
/* Additional Styles for Responsiveness */
@media (max-width: 768px) {
.stats-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.contributors-grid {
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
}
}