Skip to content

Commit 61d7301

Browse files
majunze2001majunze2001
authored
Fix OSS GitHub metric load and responsiveness (#304)
1 parent 2e300a7 commit 61d7301

File tree

3 files changed

+112
-65
lines changed

3 files changed

+112
-65
lines changed

‎custom/layouts/_scripts/index.njk‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,6 @@
55
{{- next_js('motion.js') }}
66
{%- endif %}
77

8-
{%- if theme.scheme === 'Muse' or theme.scheme === 'Mist' %}
9-
{{- next_js('schemes/muse.js') }}
10-
{%- endif %}
11-
128
{{- next_js('next-boot.js') }}
139
{%- if theme.bookmark.enable %}
1410
{{- next_js('bookmark.js') }}

‎custom/layouts/_scripts/pjax.njk‎

Lines changed: 64 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,70 @@ document.addEventListener('pjax:success', () => {
2424
.add(NexT.motion.middleWares.postList)
2525
.bootstrap();
2626
}
27-
const hasTOC = document.querySelector('.post-toc');
28-
document.querySelector('.sidebar-inner').classList.toggle('sidebar-nav-active', hasTOC);
29-
document.querySelector(hasTOC ? '.sidebar-nav-toc' : '.sidebar-nav-overview').click();
3027
NexT.utils.updateSidebarPosition();
3128
});
29+
30+
// Create a persistent cache object for OSS page repos
31+
if (!window.githubDataCache) {
32+
window.githubDataCache = {};
33+
}
34+
35+
// A hook for fetching and loading data for OSS page
36+
// Function to update project information from GitHub API
37+
function updateProjectsFromGitHub() {
38+
// Check if we're on the Open Source page
39+
if (document.title !== "Open Source") {
40+
return;
41+
}
42+
43+
const projects = document.querySelectorAll('.project');
44+
45+
projects.forEach(project => {
46+
const githubUrl = project.getAttribute('data-repo');
47+
if (!githubUrl) return;
48+
49+
// Construct the GitHub API URL
50+
const apiUrl = githubUrl.replace('https://github.com/', 'https://api.github.com/repos/');
51+
52+
// Use project name or the full URL as a cache key
53+
const cacheKey = githubUrl;
54+
55+
if (window.githubDataCache[cacheKey]) {
56+
// Use cached data if available
57+
updateProjectDOM(project, window.githubDataCache[cacheKey]);
58+
} else {
59+
// Fetch from API if not in cache
60+
fetch(apiUrl)
61+
.then(response => response.json())
62+
.then(data => {
63+
// Store in cache
64+
window.githubDataCache[cacheKey] = data;
65+
// Update DOM
66+
updateProjectDOM(project, data);
67+
})
68+
.catch(error => console.error('Error fetching GitHub data:', error));
69+
}
70+
});
71+
}
72+
73+
// Helper function to update the DOM for a project
74+
function updateProjectDOM(project, data) {
75+
// Use project name to generate IDs
76+
const idPrefix = data.name.toLowerCase().replace(/ /g, '-');
77+
78+
const languageElement = document.getElementById(`${idPrefix}-language`);
79+
const starsElement = document.getElementById(`${idPrefix}-stars`);
80+
const forksElement = document.getElementById(`${idPrefix}-forks`);
81+
82+
// Only update if elements exist
83+
if (languageElement) languageElement.textContent = data.language || 'N/A';
84+
if (starsElement) starsElement.textContent = data.stargazers_count || 0;
85+
if (forksElement) forksElement.textContent = data.forks_count || 0;
86+
}
87+
88+
// Hook into pjax:success event
89+
document.addEventListener('pjax:success', updateProjectsFromGitHub);
90+
91+
// Also run on initial page load to handle direct navigation
92+
updateProjectsFromGitHub();
3293
</script>

‎custom/layouts/open-source.njk‎

Lines changed: 48 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@
1616
margin: 0;
1717
padding: 0;
1818
}
19-
2019
.project {
2120
width: 48%; /* Full width for each project */
2221
padding: 15px;
@@ -33,69 +32,87 @@
3332
flex-direction: column;
3433
gap: 10px;
3534
}
36-
3735
.project:hover {
3836
cursor: pointer;
3937
border-color: #bbb;
4038
}
41-
4239
.project-header {
4340
display: flex;
4441
align-items: center;
4542
justify-content: space-between;
4643
margin-bottom: 10px;
4744
}
48-
45+
.logo-container {
46+
width: 120px;
47+
height: 50px;
48+
display: flex;
49+
align-items: center;
50+
justify-content: flex-end; /* Right align the logo */
51+
flex-shrink: 0; /* Prevent logo container from shrinking */
52+
margin-left: 10px; /* Add some space between text and logo */
53+
}
4954
.project-logo {
50-
max-height: 50px;
55+
max-width: 100%;
56+
max-height: 100%;
5157
object-fit: contain;
52-
margin-right: 2px;
5358
}
5459
60+
.project-info {
61+
flex-grow: 1;
62+
overflow: hidden; /* Prevent text from overflowing */
63+
}
5564
.project-name {
5665
font-size: 20px;
5766
font-weight: bold;
58-
flex-grow: 1;
67+
white-space: nowrap;
68+
overflow: hidden;
69+
text-overflow: ellipsis;
5970
}
60-
6171
.project-description {
6272
font-size: 14px;
6373
}
64-
6574
.project-details {
6675
display: flex;
6776
justify-content: flex-start;
6877
gap: 20px; /* Add space between details */
6978
font-size: 12px;
7079
color: #666;
7180
}
72-
7381
/* Fixed widths for consistent vertical alignment */
7482
.project-details .language {
7583
width: 50px; /* Fixed width for language */
7684
}
77-
78-
.project-details .stars, .project-details .forks {
85+
.project-details .stars {
7986
width: 30px; /* Fixed width for stars and forks */
8087
}
81-
88+
.project-details .forks {
89+
width: 30px; /* Fixed width for stars and forks */
90+
justify-content: flex-start;
91+
}
8292
.project-details span {
8393
display: flex;
8494
align-items: center;
8595
gap: 5px;
8696
justify-content: space-between;
8797
}
88-
98+
/* Only change the styles for the fork count text */
99+
.project-details .forks span {
100+
justify-content: flex-start; /* Left-align the text */
101+
padding-left: 2px; /* Add a bit of padding */
102+
}
103+
.project-details .forks span span {
104+
text-align: left;
105+
}
89106
.project-details i {
90107
color: #333;
108+
width: 12px; /* Fixed width for icons */
109+
text-align: center; /* Center the icon */
91110
}
92-
93111
@media (max-width: 800px) {
94112
.project {
95113
width: calc(100% - 20px); /* Full width on smaller screens */
96114
margin: 0 auto;
97115
}
98-
99116
/* Remove fixed widths on smaller screens for flexibility */
100117
.project-details .language,
101118
.project-details .stars,
@@ -116,27 +133,26 @@
116133
{% if section.description %}
117134
<p>{{ section.description }}</p>
118135
{% endif %}
119-
120136
<div class="project-container">
121137
{% for item in section.items %}
122138
<a href="{{ item.url or item.github_url }}" class="project" data-repo="{{ item.github_url }}">
123139
<div class="project-header">
124-
<span>
125-
<div class="project-name">{{ item.name }}</div>
126-
{% if item.github_url %}
127-
<div class="project-details">
128-
<!-- Fixed width for consistent alignment, using FontAwesome icons -->
129-
<span class="language"><i class="fas fa-code"></i> <span id="{{ item.name | lower | replace(' ', '-') }}-language">...</span></span>
130-
<span class="stars"><i class="far fa-star"></i> <span id="{{ item.name | lower | replace(' ', '-') }}-stars">...</span></span>
131-
<span class="forks"><i class="fas fa-code-branch"></i> <span id="{{ item.name | lower | replace(' ', '-') }}-forks">...</span></span>
140+
<div class="project-info">
141+
<div class="project-name">{{ item.name }}</div>
142+
{% if item.github_url %}
143+
<div class="project-details">
144+
<!-- Fixed width for consistent alignment, using FontAwesome icons -->
145+
<span class="language"><i class="fas fa-code"></i> <span id="{{ item.name | lower | replace(' ', '-') }}-language">...</span></span>
146+
<span class="stars"><i class="far fa-star"></i> <span id="{{ item.name | lower | replace(' ', '-') }}-stars">...</span></span>
147+
<span class="forks"><i class="fas fa-code-branch"></i> <span id="{{ item.name | lower | replace(' ', '-') }}-forks">...</span></span>
148+
</div>
149+
{% endif %}
132150
</div>
133-
{% endif %}
134-
</span>
135-
{% if item.logo %}
136-
<span style="width: {{ item.logo_scale or '100%' }}">
137-
<img src="{{ item.logo }}" alt="{{ item.name }} logo" class="project-logo">
138-
</span>
139-
{% endif %}
151+
{% if item.logo %}
152+
<div class="logo-container">
153+
<img src="{{ item.logo }}" alt="{{ item.name }} logo" class="project-logo">
154+
</div>
155+
{% endif %}
140156
</div>
141157
<div class="project-description">{{ item.description }}</div>
142158
</a>
@@ -145,30 +161,4 @@
145161
</section>
146162
{% endfor %}
147163

148-
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> <!-- FontAwesome Kit -->
149-
<script>
150-
document.addEventListener('DOMContentLoaded', function () {
151-
const projects = document.querySelectorAll('.project');
152-
153-
projects.forEach(project => {
154-
const githubUrl = project.getAttribute('data-repo');
155-
if (githubUrl) {
156-
// Construct the GitHub API URL by inserting "api." after "https://"
157-
const apiUrl = githubUrl.replace('https://github.com/', 'https://api.github.com/repos/');
158-
159-
fetch(apiUrl)
160-
.then(response => response.json())
161-
.then(data => {
162-
// Use project name to generate IDs
163-
const idPrefix = data.name.toLowerCase().replace(/ /g, '-');
164-
165-
document.getElementById(`${idPrefix}-language`).textContent = data.language || 'N/A';
166-
document.getElementById(`${idPrefix}-stars`).textContent = data.stargazers_count || 0;
167-
document.getElementById(`${idPrefix}-forks`).textContent = data.forks_count || 0;
168-
})
169-
.catch(error => console.error('Error fetching GitHub data:', error));
170-
}
171-
});
172-
});
173-
</script>
174164
{% endblock %}

0 commit comments

Comments
 (0)