95 lines
2.7 KiB
TypeScript
95 lines
2.7 KiB
TypeScript
interface Repository {
|
|
stargazers_count: number;
|
|
forks_count: number;
|
|
}
|
|
|
|
class GithubCard extends HTMLElement {
|
|
public owner: string;
|
|
public repo: string;
|
|
private cachedData: Repository | null = null;
|
|
public cached: boolean;
|
|
|
|
constructor() {
|
|
super();
|
|
this.repo = this.getAttribute("repo") as string;
|
|
this.owner = this.getAttribute("owner") as string;
|
|
}
|
|
|
|
static async fetchRepository(owner: string, repo: string): Promise<Repository | null> {
|
|
const response = await fetch(`https://api.github.com/repos/${owner}/${repo}`);
|
|
if (!response.ok) {
|
|
console.log('Failed to fetch repository');
|
|
return null;
|
|
} else {
|
|
const data: Repository = await response.json();
|
|
return data;
|
|
}
|
|
}
|
|
|
|
update_string() {
|
|
if (this.cachedData) {
|
|
if (this.cachedData.forks_count != 0) {
|
|
showElement(this, "gh_fork_icon");
|
|
setString(this, "gh_forks", this.cachedData.forks_count.toString());
|
|
}
|
|
if (this.cachedData.stargazers_count != 0) {
|
|
showElement(this, "gh_star_icon");
|
|
setString(this, "gh_stars", this.cachedData.stargazers_count.toString());
|
|
}
|
|
}
|
|
}
|
|
|
|
async update(): Promise<void> {
|
|
const cachedDataKey = `githubCardData_${this.owner}_${this.repo}`;
|
|
let cachedData = localStorage.getItem(cachedDataKey);
|
|
if (cachedData) {
|
|
this.cached = true
|
|
this.cachedData = JSON.parse(cachedData);
|
|
this.update_string();
|
|
}
|
|
|
|
try {
|
|
const freshData = await GithubCard.fetchRepository(this.owner, this.repo);
|
|
if (freshData) {
|
|
this.cachedData = freshData;
|
|
localStorage.setItem(cachedDataKey, JSON.stringify(freshData));
|
|
this.update_string();
|
|
}
|
|
} catch (error) {
|
|
console.log('Failed to fetch repository data:', error);
|
|
}
|
|
}
|
|
}
|
|
|
|
customElements.define('gh-card', GithubCard);
|
|
async function updateCards() {
|
|
const notCachedCards = Array.from(document.querySelectorAll('gh-card') as NodeListOf<GithubCard>).filter(card =>
|
|
!card.cached
|
|
);
|
|
await Promise.all(notCachedCards.map(async (card) => {
|
|
await card.update();
|
|
}));
|
|
|
|
const cachedCards = Array.from(document.querySelectorAll('gh-card') as NodeListOf<GithubCard>).filter(card =>
|
|
card.cached
|
|
);
|
|
await Promise.all(cachedCards.map(async (card) => {
|
|
await card.update();
|
|
}));
|
|
}
|
|
updateCards()
|
|
|
|
function setString(card: GithubCard, elementID: string, value: string | number) {
|
|
const element = card.querySelector(`#${elementID}`);
|
|
if (element) {
|
|
element.textContent = value.toString();
|
|
}
|
|
}
|
|
|
|
function showElement(card: GithubCard, elementID: string) {
|
|
const element: HTMLElement = card.querySelector(`#${elementID}`);
|
|
if (element) {
|
|
element.style.visibility = "initial";
|
|
}
|
|
}
|