From 31cbe13872c1fdbc3fcdc97b5f97dd42b434a635 Mon Sep 17 00:00:00 2001
From: zhengyi <admin@mczhengyi.top>
Date: Mon, 25 Dec 2023 17:27:22 +0800
Subject: [PATCH] :sparkles: Fix
 https://git.mczhengyi.top/zhengyi/halo-render/issues/3

---
 src/constant.ts                          |   2 +-
 src/less/git.less                        | 132 +++++++++++++++--------
 src/provider/git-provider.ts             |   2 +-
 src/utils/git-processor/git-processor.ts |  16 ++-
 src/utils/git-processor/github-utils.ts  |   4 +-
 5 files changed, 105 insertions(+), 51 deletions(-)

diff --git a/src/constant.ts b/src/constant.ts
index 56d766d..c2b0df3 100644
--- a/src/constant.ts
+++ b/src/constant.ts
@@ -6,4 +6,4 @@ export const LANGUAGE_COLOR: {[key: string]: string} = {
     "Default": "#333333"
 }
 
-export const HALO_RENDER_CACHE_VERSION = "v1.1.0-1"
+export const HALO_RENDER_CACHE_VERSION = "v1.1.0-2"
diff --git a/src/less/git.less b/src/less/git.less
index b233245..c586000 100644
--- a/src/less/git.less
+++ b/src/less/git.less
@@ -9,6 +9,94 @@
   padding: 10px;
   border-radius: @border-radius;
 
+  & .information {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    & .info {
+      font-size: 14px;
+      display: flex;
+      align-items: center;
+      gap: 15px;
+
+      & .topics {
+        position: relative;
+        display: flex;
+        gap: 5px;
+        color: #ffffff;
+        font-size: 12px;
+        max-width: 30%;
+        overflow: hidden;
+        transition: max-width .2s;
+        cursor: pointer;
+
+        &:after {
+          position: absolute;
+          display: block;
+          width: 20px;
+          height: 30px;
+          right: 0;
+          background: linear-gradient(to right ,transparent, #ffffff);
+          content: '';
+          transition: width .2s;
+        }
+
+        &:hover:after {
+          width: 0;
+        }
+
+        &:hover {
+          max-width: 70%;
+        }
+
+        & .topic {
+          background-color: #3478CD;
+          padding: 3px 5px;
+          border-radius: 3px;
+        }
+      }
+
+      & .language {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+
+        & .dot {
+          width: 14px;
+          height: 14px;
+          border-radius: 50%;
+        }
+      }
+
+      & .count {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+
+        & .count-item {
+          display: flex;
+          align-items: center;
+          gap: 5px;
+        }
+
+        & .icon {
+          font-size: 18px;
+          color: #818181;
+        }
+      }
+    }
+
+    .description {
+      font-size: 14px;
+    }
+
+    .info {
+      font-size: 14px;
+      color: #999999;
+    }
+  }
+
   .error {
     color: darkred;
     text-align: center;
@@ -26,49 +114,5 @@
     color: #333333;
   }
 
-  & .info {
-    font-size: 14px;
-    display: flex;
-    align-items: center;
-    gap: 15px;
 
-    & .language {
-      display: flex;
-      align-items: center;
-      gap: 5px;
-
-      & .dot {
-        width: 14px;
-        height: 14px;
-        border-radius: 50%;
-      }
-    }
-
-    & .count {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-
-      & .count-item {
-        display: flex;
-        align-items: center;
-        gap: 5px;
-      }
-
-      & .icon {
-        font-size: 18px;
-        color: #818181;
-      }
-    }
-  }
-
-  .description {
-    font-size: 14px;
-    margin: 10px 0;
-  }
-
-  .info {
-    font-size: 14px;
-    color: #999999;
-  }
 }
diff --git a/src/provider/git-provider.ts b/src/provider/git-provider.ts
index c89ee30..4ef3c22 100644
--- a/src/provider/git-provider.ts
+++ b/src/provider/git-provider.ts
@@ -18,7 +18,7 @@ export class GitProvider implements Provider {
     process(type: string, content: string): string {
         let list = type.split(":");
         let rp = list[1]
-        if (!rp || !rp.endsWith("]")) return "<div class='git'><div class='error'>Git: Syntax Error</div></div>"
+        if (!rp || !rp.endsWith("]")) return `<div class='${RENDER_CLASS} git'><div class='error'>Git: Syntax Error</div></div>`
         rp = rp.replace("[", "")
             .replace("]", "")
         const [platformRaw, owner, repo] = rp.split("/");
diff --git a/src/utils/git-processor/git-processor.ts b/src/utils/git-processor/git-processor.ts
index e9d4033..674951b 100644
--- a/src/utils/git-processor/git-processor.ts
+++ b/src/utils/git-processor/git-processor.ts
@@ -50,7 +50,7 @@ export function fillContent(id: string,
         })
     }).catch(e => {
         document.querySelectorAll("." + id).forEach(el => {
-            el.innerHTML = `<div class='${RENDER_CLASS} git error'>Error Fetch: ` + e.code + `(${e.msg})</div>`
+            el.innerHTML = `<div class='error'>Error Fetch: ` + e.code + `(${e.msg})</div>`
         })
         delete cache[id]
     })
@@ -62,13 +62,21 @@ function fill(id: string, info: RepoInfo):string {
     const lang = `<span class="language" style="color: ${languageColor}">` +
         `<span class="dot" style="background-color: ${languageColor};"></span>${info.language}</span>`
     const count = `<div class="count">`+
-        `<span class="count-item"><span class="icon">&#xe7df;</span>${info.stars}</span>`+
-        `<span class="count-item"><span class="icon">&#xe764;</span>${info.openIssues}</span>` +
+        `<span class="count-item"><span class="icon">&#xe7df;</span>${info.stars||0}</span>`+
+        `<span class="count-item"><span class="icon">&#xe641;</span>${info.forks||0}</span>` +
+        `<span class="count-item"><span class="icon">&#xe764;</span>${info.openIssues||0}</span>` +
         `</div>`
+    let topics = `<div class="topics">`
+    let topicsCount = 0
+    info.topic?.forEach(topic => {
+        if (topicsCount < 5)
+            topics += `<span class='topic'>${topic}</span>`
+    })
+    topics += "</div>"
     return `<span class="icon">${icons[info.platform || "github"]}</span>` +
     `<div class="information"><div class="repo-name"><a href="${info.url}">${info.owner}/${info.name}</a></div>` +
         `<div class="description">${info.description}</div>` +
-        `<div class="info">${lang} ${count}</div>` +
+        `<div class="info">${lang} ${info.topic?.length ? topics : ""} ${count}</div>` +
         `</div>`
 }
 
diff --git a/src/utils/git-processor/github-utils.ts b/src/utils/git-processor/github-utils.ts
index 359d765..9477b11 100644
--- a/src/utils/git-processor/github-utils.ts
+++ b/src/utils/git-processor/github-utils.ts
@@ -20,6 +20,8 @@ export async function getGitHubInfo(args: IGitArgs): Promise<RepoInfo> {
         language: json["language"],
         description: json["description"],
         openIssues: json["open_issues"],
-        lastPush: json["pushed_at"]
+        lastPush: json["pushed_at"],
+        forks: json["forks"],
+        topic: json["topics"]
     }
 }