Skip to content

Commit 85aee76

Browse files
sunnylqmsunnylqm
committed
remove github button
1 parent f4a4183 commit 85aee76

6 files changed

Lines changed: 227 additions & 17 deletions

File tree

‎site/bun.lock‎

Lines changed: 0 additions & 13 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎site/components/home/Banner.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import GitHubButton from "react-github-button";
21
import logo from "../../pages/public/images/logo.svg";
2+
import GitHubButton from "./GitHubButton";
33
import ParticleNetwork from "./ParticleNetwork";
44

55
interface BannerProps {
@@ -66,4 +66,3 @@ function Banner({ isMobile }: BannerProps) {
6666
}
6767

6868
export default Banner;
69-

‎site/components/home/GitHubButton.tsx‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import type { HTMLAttributes } from "react";
2+
import { useEffect, useMemo, useState } from "react";
3+
4+
type GitHubButtonType = "stargazers" | "watchers" | "forks";
5+
6+
const typeToLabel: Record<GitHubButtonType, string> = {
7+
stargazers: "Star",
8+
watchers: "Watch",
9+
forks: "Fork",
10+
};
11+
12+
const typeToPath: Partial<Record<GitHubButtonType, string>> = {
13+
forks: "network",
14+
};
15+
16+
type CountResponse = Partial<Record<`${GitHubButtonType}_count`, number>>;
17+
18+
export interface GitHubButtonProps extends Omit<HTMLAttributes<HTMLSpanElement>, "type"> {
19+
type: GitHubButtonType;
20+
namespace: string;
21+
repo: string;
22+
size?: "large";
23+
}
24+
25+
function GitHubButton({
26+
className,
27+
type,
28+
size,
29+
namespace,
30+
repo,
31+
...rest
32+
}: GitHubButtonProps) {
33+
const [count, setCount] = useState<number | null>(null);
34+
35+
useEffect(() => {
36+
const controller = new AbortController();
37+
38+
const fetchCount = async () => {
39+
try {
40+
const response = await fetch(`https://api.github.com/repos/${namespace}/${repo}`, {
41+
signal: controller.signal,
42+
headers: {
43+
Accept: "application/vnd.github+json",
44+
},
45+
});
46+
47+
if (!response.ok) {
48+
return;
49+
}
50+
51+
const data = (await response.json()) as CountResponse;
52+
const nextCount = data[`${type}_count`];
53+
54+
if (typeof nextCount === "number") {
55+
setCount(nextCount);
56+
}
57+
} catch {
58+
// Ignore network/cancel errors and keep the count hidden.
59+
}
60+
};
61+
62+
void fetchCount();
63+
64+
return () => {
65+
controller.abort();
66+
};
67+
}, [namespace, repo, type]);
68+
69+
const buttonClassName = useMemo(() => {
70+
return ["github-btn", size === "large" ? "github-btn-large" : "", className]
71+
.filter(Boolean)
72+
.join(" ");
73+
}, [className, size]);
74+
75+
const repoUrl = `https://github.com/${namespace}/${repo}/`;
76+
const countUrl = `https://github.com/${namespace}/${repo}/${typeToPath[type] || type}/`;
77+
78+
return (
79+
<span {...rest} className={buttonClassName}>
80+
<a className="gh-btn" href={repoUrl} target="_blank" rel="noopener noreferrer">
81+
<span className="gh-ico" aria-hidden="true" />
82+
<span className="gh-text">{typeToLabel[type]}</span>
83+
</a>
84+
<a
85+
className="gh-count"
86+
href={countUrl}
87+
target="_blank"
88+
rel="noopener noreferrer"
89+
style={count !== null ? { display: "block" } : undefined}
90+
>
91+
{count}
92+
</a>
93+
</span>
94+
);
95+
}
96+
97+
export default GitHubButton;

‎site/package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@
2020
"postcss": "^8.5.8",
2121
"react": "^19.2.4",
2222
"react-dom": "^19.2.4",
23-
"react-github-button": "^0.1.11",
2423
"rspress-plugin-mermaid": "^1.0.1",
2524
"sass": "^1.97.3",
2625
"tailwindcss": "^4.2.1",

‎site/rspress.config.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@ import { pluginSass } from '@rsbuild/plugin-sass';
44
import rspressPluginMermaid from 'rspress-plugin-mermaid';
55

66
export default defineConfig({
7+
ssg: {
8+
experimentalWorker: true,
9+
},
710
llms: true,
811
outDir: 'out',
912
root: path.join(__dirname, 'pages'),

‎site/styles/index.scss‎

Lines changed: 126 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
@import "tailwindcss";
22

33
// @import '~antd/es/style/themes/default.less';
4-
@import "react-github-button/assets/style.css";
54
// import 'rc-drawer-menu/assets/index.css';
65
// @import './index.less';
76
@import "./common";
@@ -14,6 +13,132 @@
1413
height: 2.2rem;
1514
}
1615

16+
.github-btn {
17+
font: bold 11px/14px "Helvetica Neue", Helvetica, Arial, sans-serif;
18+
height: 20px;
19+
overflow: hidden;
20+
}
21+
22+
.gh-btn,
23+
.gh-count,
24+
.gh-ico {
25+
float: left;
26+
}
27+
28+
.gh-btn,
29+
.gh-count {
30+
padding: 2px 5px 2px 4px;
31+
color: #333;
32+
text-decoration: none;
33+
white-space: nowrap;
34+
cursor: pointer;
35+
border-radius: 3px;
36+
}
37+
38+
.gh-btn {
39+
background-color: #eee;
40+
background-image: linear-gradient(to bottom, #fcfcfc 0, #eee 100%);
41+
border: 1px solid #d5d5d5;
42+
}
43+
44+
.gh-btn:hover,
45+
.gh-btn:focus {
46+
text-decoration: none;
47+
background-color: #ddd;
48+
background-image: linear-gradient(to bottom, #eee 0, #ddd 100%);
49+
border-color: #ccc;
50+
}
51+
52+
.gh-btn:active {
53+
background-image: none;
54+
background-color: #dcdcdc;
55+
border-color: #b5b5b5;
56+
box-shadow: inset 0 2px 4px rgb(0 0 0 / 15%);
57+
}
58+
59+
.gh-ico {
60+
width: 14px;
61+
height: 14px;
62+
margin-right: 4px;
63+
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjQwcHgiIGhlaWdodD0iNDBweCIgdmlld0JveD0iMTIgMTIgNDAgNDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMTIgMTIgNDAgNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiMzMzMzMzMiIGQ9Ik0zMiAxMy40Yy0xMC41IDAtMTkgOC41LTE5IDE5YzAgOC40IDUuNSAxNS41IDEzIDE4YzEgMC4yIDEuMy0wLjQgMS4zLTAuOWMwLTAuNSAwLTEuNyAwLTMuMiBjLTUuMyAxLjEtNi40LTIuNi02LjQtMi42QzIwIDQxLjYgMTguOCA0MSAxOC44IDQxYy0xLjctMS4yIDAuMS0xLjEgMC4xLTEuMWMxLjkgMC4xIDIuOSAyIDIuOSAyYzEuNyAyLjkgNC41IDIuMSA1LjUgMS42IGMwLjItMS4yIDAuNy0yLjEgMS4yLTIuNmMtNC4yLTAuNS04LjctMi4xLTguNy05LjRjMC0yLjEgMC43LTMuNyAyLTUuMWMtMC4yLTAuNS0wLjgtMi40IDAuMi01YzAgMCAxLjYtMC41IDUuMiAyIGMxLjUtMC40IDMuMS0wLjcgNC44LTAuN2MxLjYgMCAzLjMgMC4yIDQuNyAwLjdjMy42LTIuNCA1LjItMiA1LjItMmMxIDIuNiAwLjQgNC42IDAuMiA1YzEuMiAxLjMgMiAzIDIgNS4xYzAgNy4zLTQuNSA4LjktOC43IDkuNCBjMC43IDAuNiAxLjMgMS43IDEuMyAzLjVjMCAyLjYgMCA0LjYgMCA1LjJjMCAwLjUgMC40IDEuMSAxLjMgMC45YzcuNS0yLjYgMTMtOS43IDEzLTE4LjFDNTEgMjEuOSA0Mi41IDEzLjQgMzIgMTMuNHoiLz48L3N2Zz4=");
64+
background-size: 100% 100%;
65+
background-repeat: no-repeat;
66+
}
67+
68+
.gh-count {
69+
position: relative;
70+
display: none;
71+
margin-left: 4px;
72+
background-color: #fafafa;
73+
border: 1px solid #d4d4d4;
74+
}
75+
76+
.gh-count:hover,
77+
.gh-count:focus {
78+
color: #4183c4;
79+
}
80+
81+
.gh-count::before,
82+
.gh-count::after {
83+
content: "";
84+
position: absolute;
85+
display: inline-block;
86+
width: 0;
87+
height: 0;
88+
border-color: transparent;
89+
border-style: solid;
90+
}
91+
92+
.gh-count::before {
93+
top: 50%;
94+
left: -3px;
95+
margin-top: -4px;
96+
border-width: 4px 4px 4px 0;
97+
border-right-color: #fafafa;
98+
}
99+
100+
.gh-count::after {
101+
top: 50%;
102+
left: -4px;
103+
z-index: -1;
104+
margin-top: -5px;
105+
border-width: 5px 5px 5px 0;
106+
border-right-color: #d4d4d4;
107+
}
108+
109+
.github-btn-large {
110+
height: 30px;
111+
}
112+
113+
.github-btn-large .gh-btn,
114+
.github-btn-large .gh-count {
115+
padding: 3px 10px 3px 8px;
116+
font-size: 16px;
117+
line-height: 22px;
118+
border-radius: 4px;
119+
}
120+
121+
.github-btn-large .gh-ico {
122+
width: 20px;
123+
height: 20px;
124+
}
125+
126+
.github-btn-large .gh-count {
127+
margin-left: 6px;
128+
}
129+
130+
.github-btn-large .gh-count::before {
131+
left: -5px;
132+
margin-top: -6px;
133+
border-width: 6px 6px 6px 0;
134+
}
135+
136+
.github-btn-large .gh-count::after {
137+
left: -6px;
138+
margin-top: -7px;
139+
border-width: 7px 7px 7px 0;
140+
}
141+
17142
html:not(.dark) .rp-nav__title__logo-image--dark {
18143
display: none !important;
19144
}

0 commit comments

Comments
 (0)