✨ Fix #3

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"

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;
-  }
 }

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("/");

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>`
 }
 

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"]
     }
 }