feat: 历史时间轴 perf: SEO fix: 链接错误

docs/history/history-river.md

@@ -0,0 +1,107 @@
+---
+sidebar_position: 1
+---
+
+# 社区大事记
+
+import HistoryTimeline from '@site/src/components/HistoryTimeline/HistoryTimeline';
+
+<HistoryTimeline
+events={[
+{
+date: "2021-12-21",
+title: "服务器前身成立",
+description: "fuck(即 CreeperHenlv) 作为服主。此时服务器称作 “喵奈-很绿生存双服“。"
+},
+{
+date: "2022-01-11",
+title: "第一个宣传片发布",
+description: "但是流量寥寥无几。"
+},
+{
+date: "2022-01-14",
+title: "我们的宗旨是给玩家带来快乐",
+description: "宗旨被提出并延续至今。"
+},
+{
+date: "2022-01",
+title: "第一个管理条例制定完成",
+description: "制度的开始。"
+},
+{
+date: "2022-02-07",
+title: "服务器更名为 MINEIMPACT",
+description: "简称 MI。"
+},
+{
+date: "2022-04-04",
+title: "繁星联盟成立",
+description: "pingguo 担任负责人，CreeperHenlv 聚集了部分腐竹打算一同开服。"
+},
+{
+date: "2022-05-21",
+title: "繁星联盟解体",
+description: "发生内讧，联盟群群主账号被封禁。联盟解体。"
+},
+{
+date: "2022-08-7",
+title: "管理组成立",
+description: "管理组成立标志着集体决策机制的形成。"
+},
+{
+date: "2022-10-6",
+title: "RedStarMC 社区成立",
+description: "历史的车轮滚滚向前。"
+},
+{
+date: "2023-07-29",
+title: "wenjian 购买了新的物理机。",
+description: "后续服务器均运行在这台物理机上，同年 9 月份 wenjian 担任了腐竹。"
+},
+{
+date: "2023-07",
+title: "生存一服开服",
+description: "生存一服开启，版本为 1.19.4。"
+},
+{
+date: "2023-11-21",
+title: "域名正式启用",
+description: "redstarmc.top 域名注册。"
+},
+{
+date: "2024-01-24",
+title: "生存一服宣传片发布",
+description: "“这 是 一 个 核 邪 铀 碍 的 服 务 器”",
+url: "https://www.bilibili.com/video/BV1ZK411a7Gy/"
+},
+{
+date: "2024-06-15",
+title: "社区 Github 组织成立",
+description: "官网托管到仓库",
+url: "https://github.com/RedStarMC"
+},
+{
+date: "2024-12-29",
+title: "2025 新春地图发布",
+description: "新年快乐！地图里包含了许多小游戏。",
+url: "https://www.bilibili.com/video/BV17y68YdEqs"
+},
+{
+date: "2025-01-20",
+title: "生存二服（现称 粘液生存服）",
+description: "粘液生存服开启，版本为 1.21.1。"
+},
+{
+date: "2025-01-23",
+title: "生存二服宣传片发布",
+description: "“粘液科技服务器！离线可进！公益不跑路！趣味小游戏",
+url: "https://www.bilibili.com/video/BV1EDfBY8Ec6"
+},
+{
+date: "2025-04-06",
+title: "社区维基建立",
+description: "RedStarMC社区的百科全书",
+url: "https://wiki.redstarmc.top/"
+},
+]}
+/>

docusaurus.config.js

@@ -52,7 +52,7 @@ const config = {
           showLastUpdateAuthor: true,
           showLastUpdateTime: true,
           editUrl:
-            'https://github.com/redstarmc/Wiki/'
+            'https://github.com/redstarmc/Wiki/tree/main/'
         },
         blog: false,
         theme: {
@@ -68,8 +68,8 @@ const config = {
       // Replace with your project's social card
       image: 'img/docusaurus-social-card.jpg',
       metadata: [
-        {name: 'keywords', content: 'redstarmc,红星我的世界社区,Wiki,维基,文档,服务器,红星'},
-        {name: 'description', content: '红星我的世界社区维基'},
+        {name: 'keywords', content: 'redstarmc,红星我的世界社区,MC,我的世界,Minecraft,Wiki,维基,文档,服务器,红星,RS,RedStar,推荐,Java,优质,怎么'},
+        {name: 'description', content: '红星我的世界社区（www.redstarmc.top)，是一个致力于为玩家带来快乐的游戏社区。这里是它的维基，我们可以为你的游玩过程提供许多帮助！也能从这里即时获取服务器的最新消息。'},
       ],
       navbar: {
         title: '红星我的世界社区维基',
@@ -103,23 +103,21 @@ const config = {
             type: 'docSidebar',
             sidebarId: 'tutorialSidebar',
             position: 'right',
-            label: '管理人员必看',
+            label: '管理人员页面',
             docsPluginId: 'admin'
           },
-//          {
-//            type: 'docSidebar',
-//            sidebarId: 'tutorialSidebar',
-//            position: 'left',
-//            label: '日志',
-//            docsPluginId: 'logs'
-//          },
           // 搜索框
           {
             type: 'search',
             position: 'right',
           },
           {
-            href: 'https://github.com/redstarmc/Wiki',
+            href: 'https://www.redstarmc.top',
+            position: 'right',
+            label: '官网',
+          },
+          {
+            href: 'https://github.com/RedStarMC',
             position: 'right',
             label: 'GitHub',
           },
@@ -203,7 +201,7 @@ const config = {
         ],
         // 底部版权信息
         // copyright: `Copyright © 2021 - ${new Date().getFullYear()} RedStarMC Community, All Rights Reserved.`
-        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">`
+        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">`
       },
       // 深浅主题
       prism: {

src/components/HistoryTimeline/HistoryTimeline.css

@@ -0,0 +1,123 @@
+/*
+ * 使用 AI 生成并人工修改。
+ */
+.rsmc-timeline {
+    position: relative;
+    max-width: 1200px;
+    margin: 2rem auto;
+    padding: 0 1rem;
+}
+
+.rsmc-timeline__toggle {
+    position: relative;
+    z-index: 10;
+    margin: 0 0 2rem auto;
+    padding: 0.5rem 1.25rem;
+    background-color: var(--balance-2);
+    color: var(--bg-container);
+    border: none;
+    border-radius: 4px;
+    font-size: 0.9rem;
+    cursor: pointer;
+    display: block;
+    /*display: none;*/
+}
+
+.rsmc-timeline__axis {
+    position: absolute;
+    left: 50%;
+    top: 0;
+    bottom: 0;
+    width: 4px;
+    background: linear-gradient(to bottom, var(--primary-light), var(--balance-2), var(--primary-dark));
+    transform: translateX(-50%);
+    z-index: 1;
+}
+
+.rsmc-timeline__item {
+    position: relative;
+    width: 45%;
+    margin-bottom: 3rem;
+    opacity: 0;
+    transform: translateY(20px);
+    transition: all 0.5s ease;
+}
+
+.rsmc-timeline__item--left { left: 0; }
+.rsmc-timeline__item--right { left: 55%; }
+.rsmc-timeline__item.visible { opacity: 1; transform: translateY(0); }
+
+.rsmc-timeline__content {
+    background-color: var(--bg-container);
+    border: 1px solid var(--border-medium);
+    border-radius: 8px;
+    padding: 1.25rem;
+    box-shadow: var(--shadow-sm);
+}
+
+.rsmc-timeline__item--left .rsmc-timeline__content { border-left: 3px solid var(--balance-2); }
+.rsmc-timeline__item--right .rsmc-timeline__content { border-left: 3px solid var(--primary); }
+
+.rsmc-timeline__date {
+    color: var(--balance-2);
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+    font-size: 0.9rem;
+}
+
+.rsmc-timeline__title {
+    margin: 0 0 0.75rem 0;
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: var(--balance-1);
+}
+
+.rsmc-timeline__title-link {
+    color: inherit;
+    text-decoration: none;
+    font-size: inherit;
+    font-weight: inherit;
+}
+
+.rsmc-timeline__title-link:hover {
+    color: var(--primary);
+    text-decoration: underline;
+}
+
+.rsmc-timeline__description {
+    color: var(--text-secondary);
+    font-size: 0.95rem;
+    line-height: 1.6;
+}
+
+.rsmc-timeline__dot {
+    position: absolute;
+    top: 1.5rem;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background-color: var(--bg-container);
+    border: 3px solid var(--balance-2);
+    z-index: 5;
+}
+
+.rsmc-timeline__item--left .rsmc-timeline__dot { right: -12px; }
+.rsmc-timeline__item--right .rsmc-timeline__dot { left: -12px; }
+
+@media (max-width: 768px) {
+    .rsmc-timeline__axis {
+        left: 30px;
+        transform: none;
+    }
+    .rsmc-timeline__item {
+        width: 100%;
+        left: 0 !important;
+        padding-left: 60px;
+    }
+    .rsmc-timeline__dot {
+        left: 30px !important;
+        right: auto !important;
+        transform: translateX(-50%);
+    }
+}
+

src/components/HistoryTimeline/HistoryTimeline.jsx

@@ -0,0 +1,84 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import clsx from 'clsx';
+import './HistoryTimeline.css';
+
+const HistoryTimeline = ({ events }) => {
+    const [visibleEvents, setVisibleEvents] = useState([]);
+    const [isAscending, setIsAscending] = useState(false);
+
+    const sortedEvents = useMemo(() => {
+        return [...events].sort((a, b) => {
+            const dateA = new Date(a.date);
+            const dateB = new Date(b.date);
+            return isAscending ? dateA - dateB : dateB - dateA;
+        });
+    }, [events, isAscending]);
+
+    useEffect(() => {
+        const handleScroll = () => {
+            const newVisible = sortedEvents.map((_, index) => {
+                const element = document.getElementById(`timeline-item-${index}`);
+                if (!element) return false;
+                const rect = element.getBoundingClientRect();
+                return rect.top < window.innerHeight * 0.85;
+            });
+            setVisibleEvents(newVisible);
+        };
+
+        handleScroll();
+        window.addEventListener('scroll', handleScroll);
+        return () => window.removeEventListener('scroll', handleScroll);
+    }, [sortedEvents]);
+
+    const toggleOrder = () => {
+        setIsAscending(!isAscending);
+        setVisibleEvents([]);
+    };
+
+    return (
+        <div className="rsmc-timeline">
+            <button
+                className="rsmc-timeline__toggle"
+                onClick={toggleOrder}
+            >
+                {isAscending ? '最新在前' : '最早在前'}
+            </button>
+
+            <div className="rsmc-timeline__axis"></div>
+
+            {sortedEvents.map((event, index) => (
+                <div
+                    key={`${event.date}-${event.title}`}
+                    id={`timeline-item-${index}`}
+                    className={clsx(
+                        'rsmc-timeline__item',
+                        index % 2 === 0 ? 'rsmc-timeline__item--left' : 'rsmc-timeline__item--right',
+                        visibleEvents[index] ? 'visible' : ''
+                    )}
+                >
+                    <div className="rsmc-timeline__content">
+                        <div className="rsmc-timeline__date">{event.date}</div>
+                        <h3 className="rsmc-timeline__title">
+                            {event.url ? (
+                                <a
+                                    href={event.url}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    className="rsmc-timeline__title-link"
+                                >
+                                    {event.title}
+                                </a>
+                            ) : (
+                                event.title
+                            )}
+                        </h3>
+                        <div className="rsmc-timeline__description">{event.description}</div>
+                    </div>
+                    {/*<div className="rsmc-timeline__dot"></div>*/}
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export default HistoryTimeline;