init

src/github_dynamic_fetch.ts

@@ -0,0 +1,94 @@
+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";
+  }
+}