refactor: change page name and remove jquery

Signed-off-by: frank-zsy <[email protected]>

i18n/en/code.json

@@ -384,5 +384,14 @@
   },
   "communityLeaderboard.banner.title": {
     "message": "Community OpenRank Leaderboard"
+  },
+  "communityLeaderboard.fetchingData": {
+    "message": "Fetching data..."
+  },
+  "communityLeaderboard.fetchDataError": {
+    "message": "Error on fetching data"
+  },
+  "communityLeaderboard.noDataForMonth": {
+    "message": "No data found for this month"
   }
 }

i18n/zh/code.json

@@ -384,5 +384,14 @@
   },
   "communityLeaderboard.banner.title": {
     "message": "OpenRank 贡献度排行榜"
+  },
+  "communityLeaderboard.fetchingData": {
+    "message": "正在获取数据..."
+  },
+  "communityLeaderboard.fetchDataError": {
+    "message": "获取数据错误"
+  },
+  "communityLeaderboard.noDataForMonth": {
+    "message": "当月数据未找到"
   }
 }

package.json

@@ -25,7 +25,6 @@
     "docusaurus-plugin-image-zoom": "^2.0.0",
     "echarts": "^5.5.1",
     "echarts-for-react": "^3.0.2",
-    "jquery": "^3.7.1",
     "katex": "^0.16.11",
     "lodash": "^4.17.21",
     "prism-react-renderer": "^2.3.1",
@@ -43,7 +42,6 @@
     "@simbathesailor/use-what-changed": "^2.0.0",
     "@types/lodash": "^4.17.7",
     "antd": "^5.20.5",
-    "moment": "^2.30.1",
     "typescript": "^5.5.4"
   },
   "browserslist": {

src/components/DevLeaderboard/index.tsx → src/components/CommunityOpenRankLeaderboard/index.tsx

@@ -1,19 +1,20 @@
 import React, { useEffect, useState } from 'react';
-import $ from 'jquery';
+import axios from 'axios';
 import { message } from 'antd';
 import Leaderboard from './Leaderboard';
 import Details from './Details';
 import Graph from './Graph';
 import Banner from './Banner';
+import { translate } from '@docusaurus/Translate';
 
 const DevLeaderboard = () => {
   const [graph, setGraph] = useState(null);
   const [selectedNodeId, setSelectedNodeId] = useState(null);
 
-  const [platform, setPlatform] = useState<string>("github");
-  const [date, setDate] = useState<string>("202407");
+  const [platform, setPlatform] = useState<string>('');
+  const [date, setDate] = useState<string>('');
   const [dateKeys, setDateKeys] = useState<string[]>([]);
-  const [datePlaceholder, setDatePlaceholder] = useState<string>("");
+  const [datePlaceholder, setDatePlaceholder] = useState<string>('');
 
   const baseUrl = "https://oss.x-lab.info/open_digger/";
   const typeMap = new Map([
@@ -24,29 +25,24 @@ const DevLeaderboard = () => {
   ]);
 
   const loadData = async (platform: string, repoName: string) => {
-    const hide = message.loading("正在获取数据...", 0);
+    const hide = message.loading(translate({ id: 'communityLeaderboard.fetchingData' }), 0);
     try {
-      console.time('fetchData')
-      const data = await $.getJSON(
-        `${baseUrl}${platform}/${repoName}/community_openrank.json`
-      );
+      const data = (await axios.get(`${baseUrl}${platform}/${repoName}/community_openrank.json`)).data;
       if (!data || Object.keys(data).length === 0) {
-        message.warning("未查询到相关信息");
-      } else {
-        const keys = Object.keys(data.data);
-        const lastKey = keys[keys.length - 1];
-        const formattedLastKey = `${lastKey.slice(0, 4)}-${lastKey.slice(4)}`;
-        setGraph(data);
-        setDate(lastKey);
-        setDatePlaceholder(formattedLastKey);
-        setDateKeys(keys);
-        setPlatform(platform);
+        throw ('No valid data found');
       }
-      console.timeEnd('fetchData')
-      hide();
+      const keys = Object.keys(data.data);
+      const lastKey = keys[keys.length - 1];
+      const formattedLastKey = `${lastKey.slice(0, 4)}-${lastKey.slice(4)}`;
+      setGraph(data);
+      setDate(lastKey);
+      setDatePlaceholder(formattedLastKey);
+      setDateKeys(keys);
+      setPlatform(platform);
     } catch (error) {
-      message.error("获取数据时出错");
+      message.error(translate({ id: 'communityLeaderboard.fetchDataError' }));
       console.error(error);
+    } finally {
       hide();
     }
   };
@@ -55,7 +51,7 @@ const DevLeaderboard = () => {
     if (graph) {
       const keys = Object.keys(graph.data);
       if (!keys.includes(date)) {
-        message.error("该月份无数据");
+        message.error(translate({ id: 'communityLeaderboard.noDataForMonth' }));
         return;
       }
       setSelectedNodeId(-1);

src/components/DevLeaderboard/styles.module.css → src/components/CommunityOpenRankLeaderboard/styles.module.css

@@ -13,22 +13,23 @@
   left: 50%;
   transform: translateX(-50%);
   width: 700px;
-  height: 130px;
-  background-color: rgba(255, 255, 255, 0.5);
+  height: 140px;
+  background-color: rgba(241, 246, 250, 0.5);
   backdrop-filter: blur(2px);
   -webkit-backdrop-filter: blur(2px);
   border-radius: 1rem;
   padding: 1rem;
-  border: 1px solid grey;
+}
+
+[data-theme='dark'] .bannerBox {
+  background-color: rgba(35, 43, 67, 0.5);
 }
 
 .bannerTitle {
   margin-bottom: 0.5rem;
   text-align: center;
-  font-size: 1.5rem;
+  font-size: 1.8rem;
   font-weight: bold;
-  color: black;
-  text-shadow: 0 0 10px white;
 }
 
 .bannerContent {
@@ -38,14 +39,14 @@
 
 .leftBox {
   position: absolute;
-  top: 20%;
+  top: 30%;
   left: 20px;
-  height: 60%;
+  height: 50%;
 }
 
 .rightBox {
   position: absolute;
   right: 20px;
-  top: 20%;
-  height: 60%;
+  top: 30%;
+  height: 50%;
 }

src/pages/community_openrank_leaderboard.tsx

@@ -1,11 +1,11 @@
 import Layout from '@theme/Layout';
-import DevLeaderboard from '../components/DevLeaderboard';
+import CommunityOpenRankLeaderboard from '../components/CommunityOpenRankLeaderboard';
 
 export default (): JSX.Element => {
   return (
     <div className='no-footer'>
       <Layout>
-        <DevLeaderboard />
+        <CommunityOpenRankLeaderboard />
       </Layout>
     </div>
   );