Skip to content

Commit 742c51e

Browse files
sanjay-kvsanjay-kv
authored
Merge pull request #1140 from aditya-bhaumik/ui
Improved ui of the website template
2 parents ec66332 + fd0b9a8 commit 742c51e

File tree

4 files changed

+251
-222
lines changed

4 files changed

+251
-222
lines changed

‎Website/index.html‎

Lines changed: 126 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -5,37 +5,39 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Machine Learning Repositories</title>
77
<link rel="stylesheet" href="styles.css">
8+
<link rel="icon" href="logo.png" type="image/png"> <!-- Added favicon -->
89
</head>
910
<body>
1011
<header>
11-
<h1>Machine Learning Repos</h1>
12-
<nav>
13-
<ul>
12+
<nav class="navbar">
13+
<div class="logo-container">
14+
<img src="logo.png" alt="RecodeHive Logo" width="50" height="50"> <!-- Added logo to navbar -->
15+
<span class="brand-name">RecodeHive</span>
16+
</div>
17+
<ul class="nav-links">
1418
<li><a href="#">Home</a></li>
1519
<li><a href="#">About</a></li>
1620
<li><a href="#">Organization</a></li>
1721
<li><a href="#">FAQ</a></li>
1822
<li><a href="#">Contact</a></li>
23+
<li>
24+
<a href="https://github.com/recodehive/machine-learning-repos" target="_blank">
25+
<img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="GitHub" width="25" height="25"> <!-- GitHub Icon -->
26+
</a>
27+
</li>
1928
</ul>
2029
</nav>
2130
</header>
22-
31+
2332
<main>
24-
<section>
33+
<section class="welcome-section">
2534
<h2>Welcome to the Machine Learning Repositories</h2>
26-
<p>This website provides an overview of various machine learning repositories available on GitHub, brought to you by the RecodeHive organization.</p>
27-
<a href="https://github.com/recodehive/machine-learning-repos" class="cta-button">Visit the Repository</a>
28-
</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>
35+
<p>Explore a curated collection of diverse machine learning repositories available on GitHub, presented by the RecodeHive community.</p>
36+
</section>
37+
38+
<!-- Toggle button for Repository Statistics -->
39+
<section>
40+
<button id="toggle-stats">Show/Hide Repository Statistics</button>
3941
</section>
4042

4143
<!-- Statistics Cards -->
@@ -44,44 +46,36 @@ <h2>Repository Statistics</h2>
4446
<div class="stats-grid">
4547
<div class="stat-card">
4648
<h3>Total Stars</h3>
47-
<div id="total-stars">0</div>
49+
<p id="total-stars">Loading...</p>
4850
</div>
4951
<div class="stat-card">
5052
<h3>Total Forks</h3>
51-
<div id="total-forks">0</div>
53+
<p id="total-forks">Loading...</p>
5254
</div>
5355
<div class="stat-card">
5456
<h3>Open Issues</h3>
55-
<div id="open-issues">0</div>
57+
<p id="open-issues">Loading...</p>
5658
</div>
5759
<div class="stat-card">
5860
<h3>License</h3>
59-
<div id="license">No License</div>
61+
<p id="license">Loading...</p>
6062
</div>
6163
<div class="stat-card">
6264
<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>
65+
<p id="repo-size">Loading...</p>
7266
</div>
7367
<div class="stat-card">
7468
<h3>Most Used Language</h3>
75-
<div id="most-used-language">N/A</div>
69+
<p id="most-used-language">Loading...</p>
7670
</div>
7771
</div>
7872
</section>
7973

80-
<!-- Languages -->
81-
<section id="languages">
82-
<h2>Languages Used</h2>
83-
<ul id="language-list"></ul>
84-
</section>
74+
<!-- Languages -->
75+
<section id="languages">
76+
<h2>Languages Used</h2>
77+
<ul id="language-list"></ul>
78+
</section>
8579

8680
<section id="repo-list">
8781
<h2>Repositories</h2>
@@ -91,71 +85,114 @@ <h2>Repositories</h2>
9185

9286
</main>
9387

94-
<footer>
88+
<footer class="footer">
9589
<p>&copy; 2024 Machine Learning Repos - <a href="https://github.com/recodehive">RecodeHive</a>. All rights reserved.</p>
9690
</footer>
9791

92+
<!-- Existing JavaScript code -->
9893
<script>
94+
document.addEventListener('DOMContentLoaded', function () {
95+
const directoriesList = document.getElementById('directories');
96+
97+
async function fetchDirectories() {
98+
try {
99+
const response = await fetch('/api/github/repos');
99100

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 };
101+
if (!response.ok) {
102+
throw new Error(`HTTP error! status: ${response.status}`);
103+
}
104+
105+
const data = await response.json();
106+
107+
const directories = data.filter(item => item.type === 'dir' && item.name !== 'Website');
108+
109+
directories.forEach(directory => {
110+
const li = document.createElement('li');
111+
li.classList.add('card');
112+
113+
const h3 = document.createElement('h3');
114+
h3.textContent = directory.name;
115+
116+
const a = document.createElement('a');
117+
a.href = directory.html_url;
118+
a.textContent = 'View Repository';
119+
a.classList.add('btn-view-repo');
120+
121+
li.appendChild(h3);
122+
li.appendChild(a);
123+
directoriesList.appendChild(li);
124+
});
125+
} catch (error) {
126+
console.error('Error fetching directories:', error);
127+
directoriesList.innerHTML = '<li class="card">Failed to load directories.</li>';
143128
}
144129
}
145130

146-
document.getElementById('most-used-language').innerText = mostUsedLanguage.name;
131+
fetchDirectories();
132+
});
133+
</script>
134+
135+
<!-- JavaScript for toggling statistics section -->
136+
<script>
137+
document.addEventListener('DOMContentLoaded', async function () {
138+
const repoOwner = 'recodehive';
139+
const repoName = 'machine-learning-repos';
140+
const apiUrl = `https://api.github.com/repos/${repoOwner}/${repoName}`;
141+
142+
try {
143+
// Fetch repository data
144+
const repoResponse = await fetch(apiUrl);
145+
const repoData = await repoResponse.json();
146+
147+
// Populate statistics cards
148+
document.getElementById('total-stars').innerText = repoData.stargazers_count;
149+
document.getElementById('total-forks').innerText = repoData.forks_count;
150+
document.getElementById('open-issues').innerText = repoData.open_issues_count;
151+
document.getElementById('license').innerText = repoData.license ? repoData.license.spdx_id : 'No License';
152+
document.getElementById('repo-size').innerText = (repoData.size / 1024).toFixed(2) + ' MB';
153+
154+
// Fetch languages
155+
const languagesResponse = await fetch(`${apiUrl}/languages`);
156+
const languagesData = await languagesResponse.json();
157+
const languageList = document.getElementById('language-list');
158+
const totalBytes = Object.values(languagesData).reduce((acc, val) => acc + val, 0);
159+
let mostUsedLanguage = { name: '', bytes: 0 };
160+
161+
for (const [language, bytes] of Object.entries(languagesData)) {
162+
const percentage = ((bytes / totalBytes) * 100).toFixed(2);
163+
const listItem = document.createElement('li');
164+
listItem.innerHTML = `
165+
<span>${language}</span>
166+
<div class="progress-bar" style="width: ${percentage}%;"></div>
167+
`;
168+
languageList.appendChild(listItem);
169+
170+
if (bytes > mostUsedLanguage.bytes) {
171+
mostUsedLanguage = { name: language, bytes: bytes };
172+
}
173+
}
147174

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";
175+
document.getElementById('most-used-language').innerText = mostUsedLanguage.name;
151176

177+
} catch (error) {
178+
console.error('Error fetching data from GitHub API:', error);
179+
}
152180

181+
// Toggle statistics section
182+
const toggleButton = document.getElementById('toggle-stats');
183+
const statsSection = document.getElementById('statistics-cards');
184+
statsSection.style.display = 'none';
153185

154-
} catch (error) {
155-
console.error('Error fetching data from GitHub API:', error);
156-
}
157-
});
186+
toggleButton.addEventListener('click', function () {
187+
if (statsSection.style.display === 'none') {
188+
statsSection.style.display = 'block';
189+
} else {
190+
statsSection.style.display = 'none';
191+
}
192+
});
158193

194+
});
159195
</script>
196+
<script src="js/script.js"></script>
160197
</body>
161198
</html>

‎Website/js/script.js‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,4 +36,26 @@ document.addEventListener('DOMContentLoaded', function() {
3636
}
3737

3838
fetchDirectories();
39-
});
39+
});
40+
41+
42+
document.addEventListener('DOMContentLoaded', async function () {
43+
// Existing code...
44+
45+
// Toggle languages section
46+
const toggleLanguagesButton = document.createElement('button');
47+
toggleLanguagesButton.id = 'toggle-languages';
48+
toggleLanguagesButton.textContent = 'Show/Hide Languages Used';
49+
document.getElementById('languages').insertBefore(toggleLanguagesButton, document.getElementById('language-list'));
50+
51+
const languagesList = document.getElementById('language-list');
52+
languagesList.style.display = 'none';
53+
54+
toggleLanguagesButton.addEventListener('click', function () {
55+
if (languagesList.style.display === 'none') {
56+
languagesList.style.display = 'block';
57+
} else {
58+
languagesList.style.display = 'none';
59+
}
60+
});
61+
});

‎Website/logo.png‎

5.01 KB
Loading

0 commit comments

Comments
 (0)