From 9841351866bba915f5758397a13281c8de30e25b Mon Sep 17 00:00:00 2001
From: zhengyi <admin@mczhengyi.top>
Date: Mon, 25 Dec 2023 16:54:49 +0800
Subject: [PATCH] :lipstick: Modify git block style

Link https://git.mczhengyi.top/zhengyi/halo-render/issues/1
---
 src/constant.ts                          |  6 +++
 src/less/git.less                        | 48 +++++++++++++++++++++++-
 src/utils/git-processor/git-processor.ts | 24 ++++++++++--
 src/utils/git-processor/github-utils.ts  |  1 +
 4 files changed, 75 insertions(+), 4 deletions(-)

diff --git a/src/constant.ts b/src/constant.ts
index 358c9d5..abce746 100644
--- a/src/constant.ts
+++ b/src/constant.ts
@@ -1 +1,7 @@
 export const RENDER_CLASS = "halo-render halo-render-wrapper"
+
+
+export const LANGUAGE_COLOR: {[key: string]: string} = {
+    "Java": "#3478CD",
+    "Default": "#333333"
+}
diff --git a/src/less/git.less b/src/less/git.less
index f37c14f..b233245 100644
--- a/src/less/git.less
+++ b/src/less/git.less
@@ -1,6 +1,10 @@
 @import "constant";
 
+@git-color: #3478CD;
+
 .git {
+  display: flex;
+  gap: 10px;
   border: 1px solid #ececec;
   padding: 10px;
   border-radius: @border-radius;
@@ -12,10 +16,52 @@
 
   & .repo-name a {
     font-size: 18px;
-    color: #0052d9;
+    color: @git-color;
     text-decoration: none;
   }
 
+  & .icon {
+    font-family: "iconfont", serif;
+    font-size: 24px;
+    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;
diff --git a/src/utils/git-processor/git-processor.ts b/src/utils/git-processor/git-processor.ts
index 2cc4b66..2e12cd1 100644
--- a/src/utils/git-processor/git-processor.ts
+++ b/src/utils/git-processor/git-processor.ts
@@ -1,4 +1,5 @@
 import {getGitHubInfo} from "./github-utils";
+import {LANGUAGE_COLOR, RENDER_CLASS} from "../../constant";
 
 export const cache: {[key: string]: RepoInfo|-1} = {}
 
@@ -6,6 +7,13 @@ export const utils: {[key: string]: (args: IGitArgs) => Promise<RepoInfo>} = {
     "github": getGitHubInfo
 }
 
+export const icons: {[key: string]: string} = {
+    "gitlab": "&#xe881;",
+    "github": "&#xe885;",
+    "gitee": "&#xe7d5;",
+    "gitea": "&#xeba0;"
+}
+
 export function fillContent(id: string,
                             func: string,
                             args: IGitArgs): string | null {
@@ -32,7 +40,7 @@ export function fillContent(id: string,
         })
     }).catch(e => {
         document.querySelectorAll("." + id).forEach(el => {
-            el.innerHTML = "<div class='error'>Error Fetch: " + e.code + `(${e.msg})</div>`
+            el.innerHTML = `<div class='${RENDER_CLASS} git error'>Error Fetch: ` + e.code + `(${e.msg})</div>`
         })
         delete cache[id]
     })
@@ -40,9 +48,18 @@ export function fillContent(id: string,
 }
 
 function fill(id: string, info: RepoInfo):string {
-    return `<div class="repo-name"><a href="${info.url}">${info.owner}/${info.name}</a></div>` +
+    const languageColor = LANGUAGE_COLOR[info.language||"Default"] || "#333333"
+    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>` +
+        `</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">Stars: ${info.stars} / Watchers: ${info.watchers} / OpenIssues: ${info.openIssues}</div>`
+        `<div class="info">${lang} ${count}</div>` +
+        `</div>`
 }
 
 export declare interface IGitArgs {
@@ -51,6 +68,7 @@ export declare interface IGitArgs {
 }
 
 export declare interface RepoInfo {
+    platform?: string
     name?: string
     owner?: string
     url?: string
diff --git a/src/utils/git-processor/github-utils.ts b/src/utils/git-processor/github-utils.ts
index 1d28928..359d765 100644
--- a/src/utils/git-processor/github-utils.ts
+++ b/src/utils/git-processor/github-utils.ts
@@ -11,6 +11,7 @@ export async function getGitHubInfo(args: IGitArgs): Promise<RepoInfo> {
         })
     })
     return {
+        platform: "github",
         url: json["html_url"],
         owner: json["owner"]["login"],
         name: json["name"],