reonokiy/blog
1
0
Fork 0
mirror of https://github.com/reonokiy/blog.nokiy.net.git synced 2025-06-16 19:51:07 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

perf: optimize loading timing for github cards and lightbox, clean up redundant head tags, and improve css organization

Browse source
This commit is contained in:
radishzzz 2025-05-08 01:24:03 +01:00
parent d3c78a559a
commit d3d6561f4d
7 changed files with 124 additions and 110 deletions
Download patch file Download diff file Expand all files Collapse all files

99
src/components/Widgets/GithubCard.astro
View file

@ -4,54 +4,65 @@ function setupGithubCards() {
if (githubCards.length === 0)
return
githubCards.forEach(async (card) => {
const repo = (card as HTMLElement).dataset.repo
if (!repo)
return
const avatarEl = card.querySelector('.gc-owner-avatar') as HTMLElement
const descEl = card.querySelector('.gc-repo-description') as HTMLElement
const starsEl = card.querySelector('.gc-stars-count') as HTMLElement
const forksEl = card.querySelector('.gc-forks-count') as HTMLElement
const licenseEl = card.querySelector('.gc-license-info') as HTMLElement
try {
const response = await fetch(`https://api.github.com/repos/${repo}`)
if (response.ok) {
const data = await response.json()
if (avatarEl && data.owner?.avatar_url)
avatarEl.style.backgroundImage = `url(${data.owner.avatar_url})`
if (descEl && data.description)
descEl.textContent = data.description
if (starsEl) {
starsEl.textContent = new Intl.NumberFormat('en', {
notation: 'compact',
maximumFractionDigits: 1,
}).format(data.stargazers_count)
}
if (forksEl) {
forksEl.textContent = new Intl.NumberFormat('en', {
notation: 'compact',
maximumFractionDigits: 1,
}).format(data.forks_count)
}
if (licenseEl)
licenseEl.textContent = data.license?.spdx_id || 'No License'
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
loadCardData(entry.target as HTMLElement)
observer.unobserve(entry.target)
}
else {
if (descEl)
descEl.textContent = 'Loading failed.'
})
}, { rootMargin: '200px' })
githubCards.forEach(card => observer.observe(card))
}
async function loadCardData(card: HTMLElement) {
const repo = card.dataset.repo
if (!repo)
return
const avatarEl = card.querySelector('.gc-owner-avatar') as HTMLElement
const descEl = card.querySelector('.gc-repo-description') as HTMLElement
const starsEl = card.querySelector('.gc-stars-count') as HTMLElement
const forksEl = card.querySelector('.gc-forks-count') as HTMLElement
const licenseEl = card.querySelector('.gc-license-info') as HTMLElement
try {
const response = await fetch(`https://api.github.com/repos/${repo}`)
if (response.ok) {
const data = await response.json()
if (avatarEl && data.owner?.avatar_url)
avatarEl.style.backgroundImage = `url(${data.owner.avatar_url})`
if (descEl && data.description)
descEl.textContent = data.description
if (starsEl) {
starsEl.textContent = new Intl.NumberFormat('en', {
notation: 'compact',
maximumFractionDigits: 1,
}).format(data.stargazers_count)
}
if (forksEl) {
forksEl.textContent = new Intl.NumberFormat('en', {
notation: 'compact',
maximumFractionDigits: 1,
}).format(data.forks_count)
}
if (licenseEl)
licenseEl.textContent = data.license?.spdx_id || 'No License'
}
catch {
console.error(`Failed to fetch ${repo}`)
else {
if (descEl)
descEl.textContent = 'Loading failed.'
}
})
}
catch {
console.error(`Failed to fetch ${repo}`)
}
}
setupGithubCards()