Skip to content

Commit 3d39348

Browse files
mgksmgks
committed
popular repos update
1 parent 3576909 commit 3d39348

File tree

1 file changed

+37
-193
lines changed

1 file changed

+37
-193
lines changed

‎popular-repos.html‎

Lines changed: 37 additions & 193 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,55 @@
11
---
22
layout: minimal
3-
title: "Popular GitHub Repositories - GitHub Tree Explorer"
3+
title: "Popular GitHub Repositories - GitHub repo explorer"
44
description: "Explore the most popular GitHub repositories with GitHubTree. Browse code structures, visualize directories, and navigate GitHub projects without cloning."
55
keywords: "GitHub repositories, popular GitHub projects, code structure explorer, GitHub navigator, trending repositories, open source projects, GitHub directory viewer"
66
canonical_path: "/popular-repos"
77
sitemap: true
88
last_modified_at: 2023-08-21T12:00:00+00:00
99
permalink: /popular-repos
1010
---
11+
<div class="pop-page-header">
12+
<h1>Popular GitHub Repositories</h1>
13+
<p>Browse these popular GitHub repositories and visualize their file structures with GitHubTree.</p>
14+
</div>
15+
1116
<div class="tree-container" id="popular-repos-container" style="display: block;">
1217
<div class="tree-header">
13-
<h1>Popular GitHub Repositories</h1>
14-
<p>Browse these popular GitHub repositories and visualize their file structures with GitHubTree.</p>
15-
16-
<div class="category-buttons">
17-
<button class="category-btn active" data-category="all">All</button>
18-
<button class="category-btn" data-category="frameworks">Frameworks</button>
19-
<button class="category-btn" data-category="tools">Tools</button>
20-
<button class="category-btn" data-category="learning">Learning</button>
21-
<button class="category-btn" data-category="ai">AI & ML</button>
22-
<div class="dropdown">
23-
<button class="dropdown-btn">More Categories</button>
24-
<div class="dropdown-content">
25-
<a href="#" class="category-option" data-category="languages">Languages</a>
26-
<a href="#" class="category-option" data-category="databases">Databases</a>
27-
<a href="#" class="category-option" data-category="os">OS & Systems</a>
28-
<a href="#" class="category-option" data-category="blockchain">Blockchain</a>
29-
<a href="#" class="category-option" data-category="gamedev">Game Dev</a>
30-
<a href="#" class="category-option" data-category="other">Other</a>
18+
<div class="action-buttons">
19+
<div class="category-buttons">
20+
<button class="category-btn active" data-category="all">All</button>
21+
<button class="category-btn" data-category="frameworks">Frameworks</button>
22+
<button class="category-btn" data-category="tools">Tools</button>
23+
<button class="category-btn" data-category="learning">Learning</button>
24+
<button class="category-btn" data-category="ai">AI & ML</button>
25+
<div class="dropdown">
26+
<button class="dropdown-btn">More Categories</button>
27+
<div class="dropdown-content">
28+
<a href="#" class="category-option" data-category="languages">Languages</a>
29+
<a href="#" class="category-option" data-category="databases">Databases</a>
30+
<a href="#" class="category-option" data-category="os">OS & Systems</a>
31+
<a href="#" class="category-option" data-category="blockchain">Blockchain</a>
32+
<a href="#" class="category-option" data-category="gamedev">Game Dev</a>
33+
<a href="#" class="category-option" data-category="other">Other</a>
34+
</div>
3135
</div>
3236
</div>
3337
</div>
3438
</div>
3539

36-
<pre id="repo-tree">
37-
<div class="line-numbers">
38-
{% for repository in site.data.repositories %}
39-
<span class="line-number" data-repo="{{ repository.repo }}">{{ forloop.index }}</span>
40-
{% endfor %}
41-
</div>
42-
<div class="line-content">
43-
{% for repository in site.data.repositories %}
44-
<span class="repo-entry{% if repository.category %} {{ repository.category }}{% endif %}" data-repo="{{ repository.repo }}">
45-
<i class="fas {% if repository.category == 'frameworks' %}fa-cubes{% elsif repository.category == 'languages' %}fa-code{% elsif repository.category == 'tools' %}fa-tools{% elsif repository.category == 'learning' %}fa-book{% elsif repository.category == 'ai' %}fa-brain{% elsif repository.category == 'os' %}fa-microchip{% else %}fa-code-branch{% endif %}"></i>
46-
<a href="/repo/{{ repository.repo }}/{{ repository.branch | default: 'main' }}/">{{ repository.repo }}</a>
47-
<small>({{ repository.branch | default: 'main' }})</small>
48-
{% if repository.description %}
49-
- {{ repository.description }}
50-
{% endif %}
51-
</span>
52-
{% endfor %}
53-
</div>
54-
</pre>
40+
<div id="repo-list">
41+
{% for repository in site.data.repositories %}
42+
<div class="repo-entry{% if repository.category %} {{ repository.category }}{% endif %}" data-repo="{{ repository.repo }}" style="display: none;">
43+
<i class="fas {% if repository.category == 'frameworks' %}fa-cubes{% elsif repository.category == 'languages' %}fa-code{% elsif repository.category == 'tools' %}fa-tools{% elsif repository.category == 'learning' %}fa-book{% elsif repository.category == 'ai' %}fa-brain{% elsif repository.category == 'os' %}fa-microchip{% else %}fa-code-branch{% endif %}"></i>
44+
<a href="/repo/{{ repository.repo }}/{{ repository.branch | default: 'main' }}/">{{ repository.repo }}</a>
45+
<small>({{ repository.branch | default: 'main' }})</small>
46+
{% if repository.description %}
47+
- {{ repository.description }}
48+
{% endif %}
49+
</div>
50+
{% endfor %}
51+
</div>
52+
<button id="load-more-btn">Load More</button>
5553
</div>
5654

5755
<script type="application/ld+json">
@@ -75,158 +73,4 @@ <h1>Popular GitHub Repositories</h1>
7573
]
7674
}
7775
}
78-
</script>
79-
80-
<style>
81-
#popular-repos-container .tree-header {
82-
margin-bottom: 20px;
83-
}
84-
85-
#popular-repos-container .tree-header h1 {
86-
margin-bottom: 10px;
87-
}
88-
89-
#popular-repos-container a {
90-
text-decoration: none;
91-
}
92-
93-
#popular-repos-container a:hover {
94-
text-decoration: underline;
95-
}
96-
97-
#repo-tree {
98-
display: flex;
99-
overflow: auto;
100-
}
101-
102-
.category-buttons {
103-
margin: 15px 0;
104-
display: flex;
105-
flex-wrap: wrap;
106-
align-items: center;
107-
}
108-
109-
.category-btn, .dropdown-btn {
110-
background: #f1f1f1;
111-
border: 1px solid #ddd;
112-
padding: 5px 10px;
113-
margin-right: 5px;
114-
margin-bottom: 5px;
115-
border-radius: 4px;
116-
cursor: pointer;
117-
}
118-
119-
.category-btn.active {
120-
background: #0366d6;
121-
color: white;
122-
border-color: #0366d6;
123-
}
124-
125-
/* Dropdown styles */
126-
.dropdown {
127-
position: relative;
128-
display: inline-block;
129-
}
130-
131-
.dropdown-content {
132-
display: none;
133-
position: absolute;
134-
background-color: #f9f9f9;
135-
min-width: 160px;
136-
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
137-
z-index: 1;
138-
border-radius: 4px;
139-
}
140-
141-
.dropdown-content a {
142-
color: black;
143-
padding: 8px 12px;
144-
text-decoration: none;
145-
display: block;
146-
}
147-
148-
.dropdown-content a:hover {
149-
background-color: #f1f1f1;
150-
}
151-
152-
.dropdown:hover .dropdown-content {
153-
display: block;
154-
}
155-
156-
.dark-mode .category-btn, .dark-mode .dropdown-btn {
157-
background: #333;
158-
border-color: #444;
159-
color: #eee;
160-
}
161-
162-
.dark-mode .category-btn.active {
163-
background: #58a6ff;
164-
border-color: #58a6ff;
165-
}
166-
167-
.dark-mode .dropdown-content {
168-
background-color: #222;
169-
}
170-
171-
.dark-mode .dropdown-content a {
172-
color: #eee;
173-
}
174-
175-
.dark-mode .dropdown-content a:hover {
176-
background-color: #333;
177-
}
178-
179-
.hidden {
180-
display: none !important;
181-
}
182-
</style>
183-
184-
<script>
185-
document.addEventListener('DOMContentLoaded', function() {
186-
const categoryButtons = document.querySelectorAll('.category-btn');
187-
const categoryOptions = document.querySelectorAll('.category-option');
188-
const repoEntries = document.querySelectorAll('.repo-entry');
189-
const lineNumbers = document.querySelectorAll('.line-number');
190-
191-
// Function to filter repositories by category
192-
function filterByCategory(category) {
193-
// Update active button
194-
categoryButtons.forEach(btn => btn.classList.remove('active'));
195-
document.querySelector(`[data-category="${category}"]`).classList.add('active');
196-
197-
// Show all repos if 'all' category selected
198-
if (category === 'all') {
199-
repoEntries.forEach(entry => entry.classList.remove('hidden'));
200-
lineNumbers.forEach(num => num.classList.remove('hidden'));
201-
return;
202-
}
203-
204-
// Hide all entries first
205-
repoEntries.forEach(entry => entry.classList.add('hidden'));
206-
lineNumbers.forEach(num => num.classList.add('hidden'));
207-
208-
// Show only entries matching the selected category
209-
document.querySelectorAll(`.${category}`).forEach(entry => {
210-
entry.classList.remove('hidden');
211-
// Show corresponding line number
212-
const repo = entry.getAttribute('data-repo');
213-
document.querySelector(`.line-number[data-repo="${repo}"]`).classList.remove('hidden');
214-
});
215-
}
216-
217-
// Filter repositories when category button is clicked
218-
categoryButtons.forEach(button => {
219-
button.addEventListener('click', function() {
220-
filterByCategory(this.getAttribute('data-category'));
221-
});
222-
});
223-
224-
// Filter repositories when dropdown option is clicked
225-
categoryOptions.forEach(option => {
226-
option.addEventListener('click', function(e) {
227-
e.preventDefault();
228-
filterByCategory(this.getAttribute('data-category'));
229-
});
230-
});
231-
});
232-
</script>
76+
</script>

0 commit comments

Comments
 (0)