✨ Fix #3
This commit is contained in:
parent
40d76bd7a3
commit
31cbe13872
|
@ -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"
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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("/");
|
||||
|
|
|
@ -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"></span>${info.stars}</span>`+
|
||||
`<span class="count-item"><span class="icon"></span>${info.openIssues}</span>` +
|
||||
`<span class="count-item"><span class="icon"></span>${info.stars||0}</span>`+
|
||||
`<span class="count-item"><span class="icon"></span>${info.forks||0}</span>` +
|
||||
`<span class="count-item"><span class="icon"></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>`
|
||||
}
|
||||
|
||||
|
|
|
@ -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"]
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue