Skip to content

Commit a3fa57e

Browse files
kkkky123kkkky123
committed
docs: get commits by api and add intersection to docs home
1 parent a1fe7cf commit a3fa57e

4 files changed

Lines changed: 123 additions & 20 deletions

File tree

‎docs_roll/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"octokit": "^5.0.5",
2828
"prism-react-renderer": "^2.1.0",
2929
"react": "^18.2.0",
30+
"react-countup": "^6.5.3",
3031
"react-dom": "^18.2.0"
3132
},
3233
"devDependencies": {
@@ -51,4 +52,4 @@
5152
"engines": {
5253
"node": ">=18.0"
5354
}
54-
}
55+
}

‎docs_roll/scripts/update-stats.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,14 @@ async function main() {
6666
const totalPRs = prsAll.length;
6767
const openPRs = prsOpen.length;
6868

69+
// 5. Commits (all)
70+
const commits = await octokit.paginate(octokit.rest.repos.listCommits, {
71+
owner,
72+
repo: repoName,
73+
per_page: 100,
74+
});
75+
const commitCount = commits.length;
76+
6977
// Pure issues = total issues - PRs
7078
const pureTotalIssues = totalIssues - totalPRs;
7179
const pureOpenIssues = openIssues - openPRs;
@@ -87,6 +95,7 @@ async function main() {
8795
stars,
8896
forks,
8997
contributors: contributorCount,
98+
commits: commitCount,
9099
issues: {
91100
total: pureTotalIssues,
92101
open: pureOpenIssues,

‎docs_roll/src/components/HomeContent/index.js‎

Lines changed: 82 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,71 @@
1-
import React, { useState } from 'react';
1+
import React, { useState, useEffect, useRef } from 'react';
22
import { Button, Image, Divider, Col, Row, Collapse, Modal, ConfigProvider, theme } from 'antd';
33
import { GithubOutlined, WechatOutlined, XOutlined } from '@ant-design/icons';
44
import clsx from 'clsx';
5-
import useBaseUrl from '@docusaurus/useBaseUrl';
65
import { useColorMode } from '@docusaurus/theme-common';
76
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
8-
import Translate, { translate } from '@docusaurus/Translate';
9-
import Statistic from '../Statistic';
7+
import Translate from '@docusaurus/Translate';
8+
import dayjs from 'dayjs';
9+
import CountUp from 'react-countup';
1010

1111
import styles from './styles.module.css';
1212

13+
// Intersection Observer Hook
14+
const useIntersectionObserver = (options = {}) => {
15+
const [isVisible, setIsVisible] = useState(false);
16+
const elementRef = useRef(null);
17+
18+
useEffect(() => {
19+
const observer = new IntersectionObserver(([entry]) => {
20+
if (entry.isIntersecting) {
21+
setIsVisible(true);
22+
observer.disconnect();
23+
}
24+
}, {
25+
threshold: 0.2,
26+
rootMargin: '0px',
27+
...options
28+
});
29+
30+
const currentElement = elementRef.current;
31+
if (currentElement) {
32+
observer.observe(currentElement);
33+
}
34+
35+
return () => {
36+
if (currentElement) {
37+
observer.unobserve(currentElement);
38+
}
39+
};
40+
}, [options]);
41+
42+
return [elementRef, isVisible];
43+
};
44+
1345
export default () => {
1446
const [open, setOpen] = useState(false);
47+
const [todayStat, setTodayStat] = useState({});
48+
const today = dayjs().format('YYYY-MM-DD');
1549
const { colorMode } = useColorMode();
1650
const { i18n } = useDocusaurusContext();
1751
const { currentLocale } = i18n;
1852
const isChinese = currentLocale !== 'en';
1953
const targetPath = isChinese ? '/ROLL/zh-Hans/' : '/ROLL/'
2054

55+
// Intersection Observer refs
56+
const [mainImgRef, mainImgVisible] = useIntersectionObserver();
57+
const [overviewRef, overviewVisible] = useIntersectionObserver();
58+
const [statsRef, statsVisible] = useIntersectionObserver();
59+
const [chooseRef, chooseVisible] = useIntersectionObserver();
60+
const [coreRef, coreVisible] = useIntersectionObserver();
61+
const [researchRef, researchVisible] = useIntersectionObserver();
62+
63+
useEffect(() => {
64+
fetch('/ROLL/stats.json').then(res => res.json()).then(data => {
65+
setTodayStat(data[today]);
66+
})
67+
}, []);
68+
2169
return <ConfigProvider theme={{ algorithm: colorMode === 'dark' ? theme.darkAlgorithm : theme.defaultAlgorithm }}>
2270
<div className={clsx('container', styles.container)} id="home">
2371
<div>
@@ -52,11 +100,11 @@ export default () => {
52100
<Button className={styles.github} target='_blank' href="https://deepwiki.com/alibaba/ROLL" variant="outlined" icon={<Image width={14} src="https://img.alicdn.com/imgextra/i3/O1CN01JUBft41wYcExwXCOK_!!6000000006320-55-tps-460-500.svg" preview={false}></Image>}>{"DeepWiki >"}</Button>
53101
</div>
54102

55-
<div className={styles.mainImg}>
103+
<div ref={mainImgRef} className={clsx(styles.mainImg, styles.fadeIn, mainImgVisible && styles.visible)}>
56104
<Image className={styles.img} src="https://img.alicdn.com/imgextra/i2/O1CN01ZGW6zG1sXSmML15c3_!!6000000005776-2-tps-2160-1112.png" preview={false}></Image>
57105
</div>
58106

59-
<div className={styles.overview}>
107+
<div ref={overviewRef} className={clsx(styles.overview, styles.fadeIn, overviewVisible && styles.visible)}>
60108
<div className={styles.left}>
61109
<Image className={styles.img} src="https://img.alicdn.com/imgextra/i4/O1CN01t4tcSz1ZIN1sEzNnO_!!6000000003171-55-tps-54-54.svg" preview={false}></Image>
62110
<div>ROLL</div>
@@ -73,27 +121,42 @@ export default () => {
73121

74122
<Divider style={{ borderColor: 'var(--home-divider-color)' }}></Divider>
75123

76-
<div>
124+
<div ref={statsRef} className={styles.stats}>
77125
<Row gutter={16}>
78126
<Col span={8}>
79-
<Statistic count="1.9k" content={translate({
80-
message: 'Github Stars',
81-
})} />
127+
<div className={styles.count}>
128+
{statsVisible && <CountUp end={todayStat?.stars || 2620} />}
129+
</div>
130+
<div className={styles.label}>
131+
<Translate>
132+
Github Stars
133+
</Translate>
134+
</div>
82135
</Col>
83136
<Col span={8}>
84-
<Statistic count="30+" content={translate({
85-
message: 'Contributors',
86-
})} />
137+
<div className={styles.count}>
138+
{statsVisible && <CountUp end={todayStat?.contributors || 37} />}
139+
</div>
140+
<div className={styles.label}>
141+
<Translate>
142+
Contributors
143+
</Translate>
144+
</div>
87145
</Col>
88146
<Col span={8}>
89-
<Statistic count="200+" content={translate({
90-
message: 'Commits',
91-
})} />
147+
<div className={styles.count}>
148+
{statsVisible && <CountUp end={todayStat?.commits || 371} />}
149+
</div>
150+
<div className={styles.label}>
151+
<Translate>
152+
Commits
153+
</Translate>
154+
</div>
92155
</Col>
93156
</Row>
94157
</div>
95158

96-
<div className={styles.choose}>
159+
<div ref={chooseRef} className={clsx(styles.choose, styles.fadeIn, chooseVisible && styles.visible)}>
97160
<Image className={styles.img} src="https://img.alicdn.com/imgextra/i3/O1CN01NwkUFs26qbxZhsz2J_!!6000000007713-55-tps-54-54.svg" preview={false}></Image>
98161
<div className={styles.wrap}>
99162
<div className={styles.left}>
@@ -141,7 +204,7 @@ export default () => {
141204
</div>
142205
</div>
143206

144-
<div className={styles.core} id="core">
207+
<div ref={coreRef} className={clsx(styles.core, styles.fadeIn, coreVisible && styles.visible)} id="core">
145208
<Image className={styles.img} src="https://img.alicdn.com/imgextra/i4/O1CN012UiWaS1KzDqk2EhyO_!!6000000001234-55-tps-54-54.svg" preview={false}></Image>
146209
<div>
147210
<div className={styles.title}>
@@ -218,7 +281,7 @@ export default () => {
218281
</div>
219282
</div>
220283

221-
<div className={styles.research} id="research">
284+
<div ref={researchRef} className={clsx(styles.research, styles.fadeIn, researchVisible && styles.visible)} id="research">
222285
<Image className={styles.img} src="https://img.alicdn.com/imgextra/i1/O1CN016cZT1g1tk7L6GRZ7y_!!6000000005939-55-tps-54-54.svg" preview={false}></Image>
223286
<div>
224287
<div className={styles.title}>

‎docs_roll/src/components/HomeContent/styles.module.css‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,18 @@
5757
}
5858
}
5959

60+
/* Fade in animation styles */
61+
.fadeIn {
62+
opacity: 0;
63+
transform: translateY(30px);
64+
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
65+
}
66+
67+
.fadeIn.visible {
68+
opacity: 1;
69+
transform: translateY(0);
70+
}
71+
6072
.overview {
6173
margin-top: 40px;
6274
display: flex;
@@ -218,4 +230,22 @@
218230
}
219231
}
220232
}
233+
.stats {
234+
text-align: center;
235+
margin-top: 110px;
236+
padding-bottom: 80px;
237+
.count {
238+
color: var(--home-title-primary);
239+
font-size: 44px;
240+
font-weight: 600;
241+
line-height: 54px;
242+
margin-bottom: 20px;
243+
}
244+
.label {
245+
color: var(--home-title-primary);
246+
font-size: 16px;
247+
font-weight: 500;
248+
line-height: 24px;
249+
}
250+
}
221251
}

0 commit comments

Comments
 (0)