Merge branch 'master' of github.com:hust-open-atom-club/TranslateProject

pages/package.json

@@ -14,6 +14,7 @@
     "lint": "eslint ."
   },
   "dependencies": {
+    "@ant-design/charts": "^2.1.0",
     "@astrojs/check": "^0.5.6",
     "@astrojs/rss": "^4.0.2",
     "@resvg/resvg-js": "^2.6.0",

pages/plugin/RemarkBadImage.ts

@@ -12,9 +12,10 @@ const plugin: RemarkPlugin = (_options) => (tree, file) => {
       for (var child of node.children) {
         if (child.type == "image" && child.url && !child.url.startsWith("/") && !child.url.startsWith("http")) {
           let url = child.url;
+          child.url = './' + url;
           if (url.indexOf("?") > -1) {
             url = url.substring(0, url.indexOf("?"));
-            child.url = url;
+            child.url = './' + url;
           }
           let absPath = resolve(path, url)
           if (!existsSync(absPath)) {

pages/src/components/Header.astro

@@ -60,13 +60,13 @@ const { activeNav } = Astro.props;
             </a>
           </li>
           <li>
-            <a href="/about/" class={activeNav === "about" ? "active" : ""}>
-              关于
+            <a href="/rank/" class={activeNav === "rank" ? "active" : ""}>
+              排名
             </a>
           </li>
           <li>
-            <a href="/rank/" class={activeNav === "rank" ? "active" : ""}>
-              排名
+            <a href="/about/" class={activeNav === "about" ? "active" : ""}>
+              关于
             </a>
           </li>
           <!-- <li>

pages/src/components/StatusChart.tsx

@@ -0,0 +1,43 @@
+
+import { Bar, type BarConfig } from '@ant-design/charts'
+import type { CountItem } from '@utils/getStatusCount'
+
+
+type Props = {
+    data: CountItem[]
+}
+
+export default function StatusChart({ data }: Props) {
+
+    const config: BarConfig = {
+        data: data.filter(x => x.status !== 'proofreading'),
+        xField: 'desc',
+        yField: 'count',
+        colorField: 'desc',
+        label: {
+            text: 'count',
+            position: 'inside'
+        },
+        axis: {
+            y: false,
+            x: {
+                tick: false,
+                line: false,
+                labelAutoHide: false,
+                labelFontSize: 16,
+                labelSpacing: 16,
+            }
+        },
+        theme: 'academy',
+        tooltip: (k: CountItem) => k.count,
+        legend: false
+    }
+
+    return (
+        <div style={{
+            height: '200px'
+        }}>
+            <Bar {...config}></Bar>
+        </div>
+    )
+}

pages/src/config.ts

@@ -1,9 +1,9 @@
 import type { Site, SocialObjects } from "./types";
 
 export const SITE: Site = {
-  website: "https://hctt.hust.college/", // replace this with your deployed domain
+  website: "https://hctt.hust.openatom.club/", // replace this with your deployed domain
   author: "HCTT",
-  desc: "A minimal, responsive and SEO-friendly Astro blog theme.",
+  desc: "",
   title: "HCTT",
   ogImage: "astropaper-og.jpg",
   lightAndDarkMode: true,
@@ -30,13 +30,12 @@ export const STATUS_LIST: {
   hideInTab?: boolean;
   color?: string;
 }[] = [
-    { status: "all", text: "全部" },
-    { status: "published", text: "已发布", hideInTab: true, color: "bg-green-500" },
-    { status: "proofread", text: "已校对", tabText: "待发布", color: "bg-purple-500" },
-    { status: "proofreading", text: "校对中", hideInTab: true, color: "bg-blue-500" },
     { status: "collected", text: "已收集", tabText: "待翻译", color: "bg-gray-500" },
+    { status: "translating", text: "翻译中", tabText: "翻译中", color: "bg-yellow-300" },
     { status: "translated", text: "已翻译", tabText: "待校对", color: "bg-orange-500" },
-    { status: "translating", text: "翻译中", hideInTab: true, color: "bg-yellow-300" },
+    { status: "proofread", text: "已校对", tabText: "待发布", color: "bg-purple-500" },
+    { status: "proofreading", text: "校对中", hideInTab: true, color: "bg-blue-500" },
+    { status: "published", text: "已发布", tabText: "已发布", color: "bg-green-500" },
   ];
 
 export const RANK_LIST: {

pages/src/layouts/Posts.astro

@@ -8,6 +8,9 @@ import Pagination from "@components/Pagination.astro";
 import Card from "@components/Card";
 import { SITE, STATUS_LIST } from "@config";
 import LinkButton from "@components/LinkButton.astro";
+import StatusChart from "@components/StatusChart";
+import getStatusCount from "@utils/getStatusCount";
+import { getCollection } from "astro:content";
 
 export interface Props {
   currentPage: number;
@@ -20,16 +23,19 @@ const { currentPage, totalPages, paginatedPosts } = Astro.props;
 const status = Astro.props.status || "all";
 
 function getStyle(tabStatus: string) {
-  const base = "mr-4 select-none inline-block w-20 text-center px-4 py-2 "
+  const base = "mr-4 select-none inline-block w-20 text-center px-4 py-2 ";
   return tabStatus === status
     ? base + " bg-skin-accent text-skin-inverted hover:text-skin-inverted"
     : base;
 }
+
+const countData = getStatusCount(await getCollection("posts"));
 ---
 
 <Layout title={`${SITE.title}`}>
   <Header activeNav="posts" />
   <Main pageTitle="">
+    <StatusChart data={countData} client:only />
     <nav>
       {
         STATUS_LIST.map(({status, hideInTab,text, tabText}) => !hideInTab && (

pages/src/layouts/RankLayout.astro

@@ -51,7 +51,7 @@ function getRank() {
           thisRank.count += 1;
           oneRank.set(rankPerson, thisRank);
         } else {
-          oneRank.set(rankPerson, { count: 1, avatar: "https://github.com/identicons/" + rankPerson + ".png"});
+          oneRank.set(rankPerson, { count: 1, avatar: "https://github.com/" + rankPerson + ".png"});
         }
     }
   });
@@ -107,7 +107,7 @@ async function getAllAvatar() {
   rankResult = newRankResult;
 }
 
-await getAllAvatar();
+// await getAllAvatar();
 ---
 
 <Layout title={`${SITE.title}`}>

pages/src/pages/index.astro

@@ -4,7 +4,7 @@ import { getPostByStatus } from "./[status]/[page].astro";
 import getPagination from "@utils/getPagination";
 import Posts from "@layouts/Posts.astro";
 
-const status = "all";
+const status = "collected";
 const posts = await getPostByStatus(status);
 const sortedPosts = getSortedPosts(posts);
 

pages/src/utils/getStatusCount.tsx

@@ -0,0 +1,19 @@
+import { STATUS_LIST } from "@config";
+import type { CollectionEntry } from "astro:content";
+
+
+export type CountItem = {
+    status: string;
+    desc: string;
+    count: number;
+}
+
+const getStatusCount = (posts: CollectionEntry<"posts">[]) => {
+    return STATUS_LIST.map(u => ({
+        status: u.status,
+        desc: u.tabText,
+        count: posts.filter(x => x.data.status === u.status).length
+    })) as CountItem[];
+};
+
+export default getStatusCount;