Skip to content

Commit bba262b

Browse files
CC11001100CC11001100
committed
feat: redesign navbar with GitHub badge and improved JSREI button
- Replace GitHub button with authentic GitHub-style badge showing star count - Add 'Star me on GitHub' tooltip on hover for better call-to-action - Implement 1-hour localStorage cache for GitHub API to reduce requests - Move JSREI button to left side with updated text 'JSREI组织首页' - Create GitHub badge with official styling: * Dark GitHub colors (#24292f) * Separate sections for 'Star' text and star count * Star icon with proper GitHub styling * Hover effects with subtle animations - Add comprehensive caching system: * 1-hour cache duration to respect API limits * Automatic cache invalidation and refresh * Fallback to cached data when API fails - Improve visual hierarchy with JSREI button on left, GitHub badge on right The new design provides better user engagement with the GitHub repository while maintaining professional appearance and respecting API rate limits.
1 parent 076098d commit bba262b

File tree

1 file changed

+148
-83
lines changed

1 file changed

+148
-83
lines changed

‎website/index.html‎

Lines changed: 148 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -702,67 +702,17 @@
702702
.navbar-links {
703703
display: flex;
704704
align-items: center;
705-
gap: 20px;
705+
gap: 16px;
706706
}
707707

708-
.navbar-link {
708+
/* JSREI 组织按钮样式 */
709+
.jsrei-link {
709710
display: flex;
710711
align-items: center;
711712
gap: 8px;
712713
padding: 10px 18px;
713714
border-radius: 12px;
714715
text-decoration: none;
715-
color: #4a5568;
716-
font-weight: 500;
717-
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
718-
border: 1px solid transparent;
719-
position: relative;
720-
overflow: hidden;
721-
}
722-
723-
.navbar-link:hover {
724-
background: rgba(66, 153, 225, 0.1);
725-
color: #4299e1;
726-
border-color: rgba(66, 153, 225, 0.2);
727-
}
728-
729-
.navbar-link.github {
730-
background: linear-gradient(135deg, #0d1117 0%, #21262d 50%, #30363d 100%);
731-
color: #f0f6fc;
732-
border: 1px solid rgba(240, 246, 252, 0.1);
733-
box-shadow:
734-
0 1px 3px rgba(0, 0, 0, 0.12),
735-
0 1px 2px rgba(0, 0, 0, 0.24),
736-
inset 0 1px 0 rgba(255, 255, 255, 0.1);
737-
}
738-
739-
.navbar-link.github::before {
740-
content: '';
741-
position: absolute;
742-
top: 0;
743-
left: 0;
744-
right: 0;
745-
bottom: 0;
746-
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
747-
opacity: 0;
748-
transition: opacity 0.3s ease;
749-
}
750-
751-
.navbar-link.github:hover {
752-
background: linear-gradient(135deg, #161b22 0%, #30363d 50%, #484f58 100%);
753-
transform: translateY(-2px);
754-
box-shadow:
755-
0 4px 12px rgba(0, 0, 0, 0.15),
756-
0 2px 4px rgba(0, 0, 0, 0.12),
757-
inset 0 1px 0 rgba(255, 255, 255, 0.2);
758-
border-color: rgba(240, 246, 252, 0.2);
759-
}
760-
761-
.navbar-link.github:hover::before {
762-
opacity: 1;
763-
}
764-
765-
.navbar-link.jsrei {
766716
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
767717
color: white;
768718
border: 1px solid rgba(255, 255, 255, 0.2);
@@ -771,9 +721,11 @@
771721
0 1px 2px rgba(102, 126, 234, 0.2),
772722
inset 0 1px 0 rgba(255, 255, 255, 0.2);
773723
position: relative;
724+
overflow: hidden;
725+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
774726
}
775727

776-
.navbar-link.jsrei::before {
728+
.jsrei-link::before {
777729
content: '';
778730
position: absolute;
779731
top: 0;
@@ -785,7 +737,7 @@
785737
transition: opacity 0.3s ease;
786738
}
787739

788-
.navbar-link.jsrei:hover {
740+
.jsrei-link:hover {
789741
background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 50%, #ec4899 100%);
790742
transform: translateY(-2px);
791743
box-shadow:
@@ -795,23 +747,89 @@
795747
border-color: rgba(255, 255, 255, 0.3);
796748
}
797749

798-
.navbar-link.jsrei:hover::before {
750+
.jsrei-link:hover::before {
799751
opacity: 1;
800752
}
801753

802-
.navbar-link svg {
754+
.jsrei-link span {
755+
font-weight: 600;
756+
letter-spacing: 0.025em;
757+
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
758+
}
759+
760+
.jsrei-link svg {
803761
width: 18px;
804762
height: 18px;
805763
fill: currentColor;
806764
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
807765
}
808766

809-
.navbar-link span {
767+
/* GitHub 徽标样式 */
768+
.github-badge {
769+
display: flex;
770+
align-items: center;
771+
text-decoration: none;
772+
background: #24292f;
773+
color: #f0f6fc;
774+
border-radius: 6px;
775+
overflow: hidden;
776+
transition: all 0.3s ease;
777+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
778+
position: relative;
779+
}
780+
781+
.github-badge:hover {
782+
transform: translateY(-1px);
783+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
784+
}
785+
786+
.github-info {
787+
display: flex;
788+
align-items: center;
789+
gap: 6px;
790+
padding: 6px 10px;
791+
background: #24292f;
792+
}
793+
794+
.github-info svg {
795+
width: 16px;
796+
height: 16px;
797+
fill: currentColor;
798+
}
799+
800+
.github-info span {
801+
font-size: 12px;
810802
font-weight: 600;
811-
letter-spacing: 0.025em;
812-
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
813803
}
814804

805+
.github-stars {
806+
display: flex;
807+
align-items: center;
808+
gap: 4px;
809+
padding: 6px 8px;
810+
background: #f6f8fa;
811+
color: #24292f;
812+
border-left: 1px solid #d1d9e0;
813+
}
814+
815+
.github-stars svg {
816+
width: 12px;
817+
height: 12px;
818+
fill: #656d76;
819+
}
820+
821+
.github-stars span {
822+
font-size: 12px;
823+
font-weight: 600;
824+
color: #24292f;
825+
}
826+
827+
.github-badge[title] {
828+
cursor: pointer;
829+
}
830+
831+
832+
815833
/* 为页面内容添加顶部间距 */
816834
body {
817835
padding-top: 60px;
@@ -1170,18 +1188,26 @@
11701188
</a>
11711189

11721190
<div class="navbar-links">
1173-
<a href="https://github.com/JSREI/userscript-template" target="_blank" class="navbar-link github">
1174-
<svg viewBox="0 0 16 16">
1175-
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
1176-
</svg>
1177-
<span>GitHub</span>
1178-
</a>
1179-
1180-
<a href="https://jsrei.org/" target="_blank" class="navbar-link jsrei">
1191+
<a href="https://jsrei.org/" target="_blank" class="jsrei-link">
11811192
<svg viewBox="0 0 24 24">
11821193
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="currentColor"/>
11831194
</svg>
1184-
<span>JSREI</span>
1195+
<span>JSREI组织首页</span>
1196+
</a>
1197+
1198+
<a href="https://github.com/JSREI/userscript-template" target="_blank" class="github-badge" title="Star me on GitHub">
1199+
<div class="github-info">
1200+
<svg viewBox="0 0 16 16">
1201+
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
1202+
</svg>
1203+
<span>Star</span>
1204+
</div>
1205+
<div class="github-stars">
1206+
<svg viewBox="0 0 16 16">
1207+
<path d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25z"/>
1208+
</svg>
1209+
<span id="navbar-star-count">...</span>
1210+
</div>
11851211
</a>
11861212
</div>
11871213
</nav>
@@ -1572,21 +1598,60 @@ <h3>开发调试</h3>
15721598
</div>
15731599

15741600
<script>
1575-
// 获取仓库 star 数并更新到所有显示位置
1576-
fetch('https://api.github.com/repos/JSREI/userscript-template')
1577-
.then(response => response.json())
1578-
.then(data => {
1579-
const starCount = data.stargazers_count.toLocaleString();
1580-
// 更新页面中所有显示 star 数的元素
1581-
document.querySelectorAll('[id$="star-count"]').forEach(el => {
1582-
el.textContent = starCount;
1583-
});
1584-
})
1585-
.catch(() => {
1586-
document.querySelectorAll('[id$="star-count"]').forEach(el => {
1587-
el.textContent = 'N/A';
1588-
});
1601+
// GitHub Star 数缓存管理
1602+
const CACHE_KEY = 'github_stars_cache';
1603+
const CACHE_DURATION = 60 * 60 * 1000; // 1小时缓存
1604+
1605+
function getCachedStarCount() {
1606+
const cached = localStorage.getItem(CACHE_KEY);
1607+
if (cached) {
1608+
const { data, timestamp } = JSON.parse(cached);
1609+
if (Date.now() - timestamp < CACHE_DURATION) {
1610+
return data;
1611+
}
1612+
}
1613+
return null;
1614+
}
1615+
1616+
function setCachedStarCount(starCount) {
1617+
const cacheData = {
1618+
data: starCount,
1619+
timestamp: Date.now()
1620+
};
1621+
localStorage.setItem(CACHE_KEY, JSON.stringify(cacheData));
1622+
}
1623+
1624+
function updateStarCount(starCount) {
1625+
// 更新页面中所有显示 star 数的元素
1626+
document.querySelectorAll('[id$="star-count"]').forEach(el => {
1627+
el.textContent = starCount;
15891628
});
1629+
}
1630+
1631+
// 获取仓库 star 数
1632+
function fetchStarCount() {
1633+
// 先检查缓存
1634+
const cachedStarCount = getCachedStarCount();
1635+
if (cachedStarCount) {
1636+
updateStarCount(cachedStarCount);
1637+
return;
1638+
}
1639+
1640+
// 缓存过期或不存在，从 API 获取
1641+
fetch('https://api.github.com/repos/JSREI/userscript-template')
1642+
.then(response => response.json())
1643+
.then(data => {
1644+
const starCount = data.stargazers_count.toLocaleString();
1645+
updateStarCount(starCount);
1646+
setCachedStarCount(starCount);
1647+
})
1648+
.catch(() => {
1649+
updateStarCount('N/A');
1650+
});
1651+
}
1652+
1653+
// 页面加载时获取 star 数
1654+
fetchStarCount();
15901655

15911656
// 导航栏激活状态
15921657
const navLinks = document.querySelectorAll('nav a');

0 commit comments

Comments
 (0)