Skip to content

Commit 44e6daf

Browse files
wenjianpaipaiwenjianpaipai
authored
feat: 历史时间轴 perf: SEO fix: 链接错误 (#96)
2 parents 95c0ef1 + e68927b commit 44e6daf

File tree

5 files changed

+325
-24
lines changed

5 files changed

+325
-24
lines changed

‎docs/history/history-river.md‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
---
2+
sidebar_position: 1
3+
---
4+
5+
# 社区大事记
6+
7+
import HistoryTimeline from '@site/src/components/HistoryTimeline/HistoryTimeline';
8+
9+
<HistoryTimeline
10+
events={[
11+
{
12+
date: "2021-12-21",
13+
title: "服务器前身成立",
14+
description: "fuck(即 CreeperHenlv) 作为服主。此时服务器称作 “喵奈-很绿生存双服“。"
15+
},
16+
{
17+
date: "2022-01-11",
18+
title: "第一个宣传片发布",
19+
description: "但是流量寥寥无几。"
20+
},
21+
{
22+
date: "2022-01-14",
23+
title: "我们的宗旨是给玩家带来快乐",
24+
description: "宗旨被提出并延续至今。"
25+
},
26+
{
27+
date: "2022-01",
28+
title: "第一个管理条例制定完成",
29+
description: "制度的开始。"
30+
},
31+
{
32+
date: "2022-02-07",
33+
title: "服务器更名为 MINEIMPACT",
34+
description: "简称 MI。"
35+
},
36+
{
37+
date: "2022-04-04",
38+
title: "繁星联盟成立",
39+
description: "pingguo 担任负责人，CreeperHenlv 聚集了部分腐竹打算一同开服。"
40+
},
41+
{
42+
date: "2022-05-21",
43+
title: "繁星联盟解体",
44+
description: "发生内讧，联盟群群主账号被封禁。联盟解体。"
45+
},
46+
{
47+
date: "2022-08-7",
48+
title: "管理组成立",
49+
description: "管理组成立标志着集体决策机制的形成。"
50+
},
51+
{
52+
date: "2022-10-6",
53+
title: "RedStarMC 社区成立",
54+
description: "历史的车轮滚滚向前。"
55+
},
56+
{
57+
date: "2023-07-29",
58+
title: "wenjian 购买了新的物理机。",
59+
description: "后续服务器均运行在这台物理机上，同年 9 月份 wenjian 担任了腐竹。"
60+
},
61+
{
62+
date: "2023-07",
63+
title: "生存一服开服",
64+
description: "生存一服开启，版本为 1.19.4。"
65+
},
66+
{
67+
date: "2023-11-21",
68+
title: "域名正式启用",
69+
description: "redstarmc.top 域名注册。"
70+
},
71+
{
72+
date: "2024-01-24",
73+
title: "生存一服宣传片发布",
74+
description: "“这 是 一 个 核 邪 铀 碍 的 服 务 器”",
75+
url: "https://www.bilibili.com/video/BV1ZK411a7Gy/"
76+
},
77+
{
78+
date: "2024-06-15",
79+
title: "社区 Github 组织成立",
80+
description: "官网托管到仓库",
81+
url: "https://github.com/RedStarMC"
82+
},
83+
{
84+
date: "2024-12-29",
85+
title: "2025 新春地图发布",
86+
description: "新年快乐！地图里包含了许多小游戏。",
87+
url: "https://www.bilibili.com/video/BV17y68YdEqs"
88+
},
89+
{
90+
date: "2025-01-20",
91+
title: "生存二服（现称 粘液生存服）",
92+
description: "粘液生存服开启，版本为 1.21.1。"
93+
},
94+
{
95+
date: "2025-01-23",
96+
title: "生存二服宣传片发布",
97+
description: "“粘液科技服务器！离线可进！公益不跑路！趣味小游戏",
98+
url: "https://www.bilibili.com/video/BV1EDfBY8Ec6"
99+
},
100+
{
101+
date: "2025-04-06",
102+
title: "社区维基建立",
103+
description: "RedStarMC社区的百科全书",
104+
url: "https://wiki.redstarmc.top/"
105+
},
106+
]}
107+
/>

‎docs/history/历史河.md‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎docusaurus.config.js‎

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ const config = {
5252
showLastUpdateAuthor: true,
5353
showLastUpdateTime: true,
5454
editUrl:
55-
'https://github.com/redstarmc/Wiki/'
55+
'https://github.com/redstarmc/Wiki/tree/main/'
5656
},
5757
blog: false,
5858
theme: {
@@ -68,8 +68,8 @@ const config = {
6868
// Replace with your project's social card
6969
image: 'img/docusaurus-social-card.jpg',
7070
metadata: [
71-
{name: 'keywords', content: 'redstarmc,红星我的世界社区,Wiki,维基,文档,服务器,红星'},
72-
{name: 'description', content: '红星我的世界社区维基'},
71+
{name: 'keywords', content: 'redstarmc,红星我的世界社区,MC,我的世界,Minecraft,Wiki,维基,文档,服务器,红星,RS,RedStar,推荐,Java,优质,怎么'},
72+
{name: 'description', content: '红星我的世界社区（www.redstarmc.top)，是一个致力于为玩家带来快乐的游戏社区。这里是它的维基，我们可以为你的游玩过程提供许多帮助！也能从这里即时获取服务器的最新消息。'},
7373
],
7474
navbar: {
7575
title: '红星我的世界社区维基',
@@ -103,23 +103,21 @@ const config = {
103103
type: 'docSidebar',
104104
sidebarId: 'tutorialSidebar',
105105
position: 'right',
106-
label: '管理人员必看',
106+
label: '管理人员页面',
107107
docsPluginId: 'admin'
108108
},
109-
// {
110-
// type: 'docSidebar',
111-
// sidebarId: 'tutorialSidebar',
112-
// position: 'left',
113-
// label: '日志',
114-
// docsPluginId: 'logs'
115-
// },
116109
// 搜索框
117110
{
118111
type: 'search',
119112
position: 'right',
120113
},
121114
{
122-
href: 'https://github.com/redstarmc/Wiki',
115+
href: 'https://www.redstarmc.top',
116+
position: 'right',
117+
label: '官网',
118+
},
119+
{
120+
href: 'https://github.com/RedStarMC',
123121
position: 'right',
124122
label: 'GitHub',
125123
},
@@ -203,7 +201,7 @@ const config = {
203201
],
204202
// 底部版权信息
205203
// copyright: `Copyright © 2021 - ${new Date().getFullYear()} RedStarMC Community, All Rights Reserved.`
206-
copyright: `<a href="https://www.redstarmc.top/Wiki">红星我的世界社区 维基</a> © 2021 - ${new Date().getFullYear()} 由 <a href="https://www.redstarmc.top">红星我的世界社区</a> 授权 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0 许可协议</a><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" style="max-width: 1em;max-height:1em;margin-left: .2em;" alt="CC"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" style="max-width: 1em;max-height:1em;margin-left: .2em;" alt="BY"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" style="max-width: 1em;max-height:1em;margin-left: .2em;" alt="Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" style="max-width: 1em;max-height:1em;margin-left: .2em;" alt="SA">`
204+
copyright: `<a href="https://www.redstarmc.top/Wiki">红星我的世界社区维基</a> © 2021 - ${new Date().getFullYear()} 由 <a href="https://www.redstarmc.top">红星我的世界社区</a> 授权 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0 许可协议</a><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" style="max-width: 1em;max-height:1em;margin-left: .2em;" alt="CC"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" style="max-width: 1em;max-height:1em;margin-left: .2em;" alt="BY"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" style="max-width: 1em;max-height:1em;margin-left: .2em;" alt="Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" style="max-width: 1em;max-height:1em;margin-left: .2em;" alt="SA">`
207205
},
208206
// 深浅主题
209207
prism: {

‎src/components/HistoryTimeline/HistoryTimeline.css‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
/*
2+
* 使用 AI 生成并人工修改。
3+
*/
4+
.rsmc-timeline {
5+
position: relative;
6+
max-width: 1200px;
7+
margin: 2rem auto;
8+
padding: 0 1rem;
9+
}
10+
11+
.rsmc-timeline__toggle {
12+
position: relative;
13+
z-index: 10;
14+
margin: 0 0 2rem auto;
15+
padding: 0.5rem 1.25rem;
16+
background-color: var(--balance-2);
17+
color: var(--bg-container);
18+
border: none;
19+
border-radius: 4px;
20+
font-size: 0.9rem;
21+
cursor: pointer;
22+
display: block;
23+
/*display: none;*/
24+
}
25+
26+
.rsmc-timeline__axis {
27+
position: absolute;
28+
left: 50%;
29+
top: 0;
30+
bottom: 0;
31+
width: 4px;
32+
background: linear-gradient(to bottom, var(--primary-light), var(--balance-2), var(--primary-dark));
33+
transform: translateX(-50%);
34+
z-index: 1;
35+
}
36+
37+
.rsmc-timeline__item {
38+
position: relative;
39+
width: 45%;
40+
margin-bottom: 3rem;
41+
opacity: 0;
42+
transform: translateY(20px);
43+
transition: all 0.5s ease;
44+
}
45+
46+
.rsmc-timeline__item--left { left: 0; }
47+
.rsmc-timeline__item--right { left: 55%; }
48+
.rsmc-timeline__item.visible { opacity: 1; transform: translateY(0); }
49+
50+
.rsmc-timeline__content {
51+
background-color: var(--bg-container);
52+
border: 1px solid var(--border-medium);
53+
border-radius: 8px;
54+
padding: 1.25rem;
55+
box-shadow: var(--shadow-sm);
56+
}
57+
58+
.rsmc-timeline__item--left .rsmc-timeline__content { border-left: 3px solid var(--balance-2); }
59+
.rsmc-timeline__item--right .rsmc-timeline__content { border-left: 3px solid var(--primary); }
60+
61+
.rsmc-timeline__date {
62+
color: var(--balance-2);
63+
font-weight: 600;
64+
margin-bottom: 0.5rem;
65+
font-size: 0.9rem;
66+
}
67+
68+
.rsmc-timeline__title {
69+
margin: 0 0 0.75rem 0;
70+
font-size: 1.25rem;
71+
font-weight: 600;
72+
color: var(--balance-1);
73+
}
74+
75+
.rsmc-timeline__title-link {
76+
color: inherit;
77+
text-decoration: none;
78+
font-size: inherit;
79+
font-weight: inherit;
80+
}
81+
82+
.rsmc-timeline__title-link:hover {
83+
color: var(--primary);
84+
text-decoration: underline;
85+
}
86+
87+
.rsmc-timeline__description {
88+
color: var(--text-secondary);
89+
font-size: 0.95rem;
90+
line-height: 1.6;
91+
}
92+
93+
.rsmc-timeline__dot {
94+
position: absolute;
95+
top: 1.5rem;
96+
width: 20px;
97+
height: 20px;
98+
border-radius: 50%;
99+
background-color: var(--bg-container);
100+
border: 3px solid var(--balance-2);
101+
z-index: 5;
102+
}
103+
104+
.rsmc-timeline__item--left .rsmc-timeline__dot { right: -12px; }
105+
.rsmc-timeline__item--right .rsmc-timeline__dot { left: -12px; }
106+
107+
@media (max-width: 768px) {
108+
.rsmc-timeline__axis {
109+
left: 30px;
110+
transform: none;
111+
}
112+
.rsmc-timeline__item {
113+
width: 100%;
114+
left: 0 !important;
115+
padding-left: 60px;
116+
}
117+
.rsmc-timeline__dot {
118+
left: 30px !important;
119+
right: auto !important;
120+
transform: translateX(-50%);
121+
}
122+
}
123+

‎src/components/HistoryTimeline/HistoryTimeline.jsx‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import React, { useState, useEffect, useMemo } from 'react';
2+
import clsx from 'clsx';
3+
import './HistoryTimeline.css';
4+
5+
const HistoryTimeline = ({ events }) => {
6+
const [visibleEvents, setVisibleEvents] = useState([]);
7+
const [isAscending, setIsAscending] = useState(false);
8+
9+
const sortedEvents = useMemo(() => {
10+
return [...events].sort((a, b) => {
11+
const dateA = new Date(a.date);
12+
const dateB = new Date(b.date);
13+
return isAscending ? dateA - dateB : dateB - dateA;
14+
});
15+
}, [events, isAscending]);
16+
17+
useEffect(() => {
18+
const handleScroll = () => {
19+
const newVisible = sortedEvents.map((_, index) => {
20+
const element = document.getElementById(`timeline-item-${index}`);
21+
if (!element) return false;
22+
const rect = element.getBoundingClientRect();
23+
return rect.top < window.innerHeight * 0.85;
24+
});
25+
setVisibleEvents(newVisible);
26+
};
27+
28+
handleScroll();
29+
window.addEventListener('scroll', handleScroll);
30+
return () => window.removeEventListener('scroll', handleScroll);
31+
}, [sortedEvents]);
32+
33+
const toggleOrder = () => {
34+
setIsAscending(!isAscending);
35+
setVisibleEvents([]);
36+
};
37+
38+
return (
39+
<div className="rsmc-timeline">
40+
<button
41+
className="rsmc-timeline__toggle"
42+
onClick={toggleOrder}
43+
>
44+
{isAscending ? '最新在前' : '最早在前'}
45+
</button>
46+
47+
<div className="rsmc-timeline__axis"></div>
48+
49+
{sortedEvents.map((event, index) => (
50+
<div
51+
key={`${event.date}-${event.title}`}
52+
id={`timeline-item-${index}`}
53+
className={clsx(
54+
'rsmc-timeline__item',
55+
index % 2 === 0 ? 'rsmc-timeline__item--left' : 'rsmc-timeline__item--right',
56+
visibleEvents[index] ? 'visible' : ''
57+
)}
58+
>
59+
<div className="rsmc-timeline__content">
60+
<div className="rsmc-timeline__date">{event.date}</div>
61+
<h3 className="rsmc-timeline__title">
62+
{event.url ? (
63+
<a
64+
href={event.url}
65+
target="_blank"
66+
rel="noopener noreferrer"
67+
className="rsmc-timeline__title-link"
68+
>
69+
{event.title}
70+
</a>
71+
) : (
72+
event.title
73+
)}
74+
</h3>
75+
<div className="rsmc-timeline__description">{event.description}</div>
76+
</div>
77+
{/*<div className="rsmc-timeline__dot"></div>*/}
78+
</div>
79+
))}
80+
</div>
81+
);
82+
};
83+
84+
export default HistoryTimeline;

0 commit comments

Comments
 (0)