perf(website): fetch GitHub API at build time

website/src/components/Footer/Stars.astro

@@ -1,46 +1,27 @@
 ---
 const { owner, repo } = Astro.props;
----
-
-<project-stars data-owner={owner} data-repo={repo}>
-  <p class="star-count">0+</p>
-</project-stars>
-
-<script>
-  class ProjectStars extends HTMLElement {
-    constructor() {
-      super();
 
-      const approximate = (count: number): string => {
-        if (count >= 1000) {
-          // Show numbers over 1000 as x.yk. So 1234 becomes 1.2k.
-          const mag = Math.trunc(count / 100) / 10;
-          return `${mag}k+`;
-        } else {
-          // Show numbers below 1000 as xy0+. So 789 becomes 780.
-          // const mag = Math.trunc(count / 10) * 10;
-          // return `${mag}+`;
-          return `${count}+`;
-        }
-      }
+let starCount = 0;
+try {
+  const response = await fetch(`https://api.github.com/repos/${owner}/${repo}`);
+  if (response.ok) {
+    const data = await response.json();
+    starCount = data.stargazers_count;
+  }
+} catch (error) {
+  console.error('Failed to fetch GitHub stars:', error);
+}
 
-      const {owner, repo} = this.dataset;
-      fetch(`https://api.github.com/repos/${owner}/${repo}`)
-        .then(res => {
-          if (res.ok) {
-            return res.json();
-          } else {
-            throw new Error('Network response was not OK.');
-          }
-        })
-        .then(data => {
-          const starCountElement = document.querySelector('.star-count');
-          if (starCountElement) {
-            starCountElement.textContent = approximate(data.stargazers_count);
-          }
-        }).catch(() => {});
-    }
+const approximate = (count:number) => {
+  if (count >= 1000) {
+    const mag = Math.trunc(count / 100) / 10;
+    return `${mag}k+`;
+  } else {
+    return `${count}+`;
   }
+};
+---
 
-  customElements.define('project-stars', ProjectStars)
-</script>
+<project-stars data-owner={owner} data-repo={repo}>
+  <p class="star-count">{approximate(starCount)}</p>
+</project-stars>

website/src/components/Footer/Version.astro

@@ -1,36 +1,20 @@
 ---
 const { owner, repo } = Astro.props;
----
-
-<project-version data-owner={owner} data-repo={repo}>
-  <span id="version">0.0.0</span>
-</project-version>
 
-<script>
-  class ProjectVersion extends HTMLElement {
-    constructor() {
-      super();
-      const { owner, repo } = this.dataset;
-      fetch(`https://api.github.com/repos/${owner}/${repo}/releases`)
-        .then(res => {
-          if (res.ok) {
-            return res.json();
-          } else {
-            throw new Error("Failed to fetch the latest version.");
-          }
-        })
-        .then(data => {
-          const versionElement = this.querySelector("#version");
-          if (versionElement !== null) {
-            versionElement.textContent = data[0].name.replace(/^v/, "");
-          }
-        })
-        .catch(() => {
-          // Handle the error case (optional)
-        });
+let latestVersion = "0.0.0";
+try {
+  const response = await fetch(`https://api.github.com/repos/${owner}/${repo}/releases`);
+  if (response.ok) {
+    const data = await response.json();
+    if (data.length > 0) {
+      latestVersion = data[0].name.replace(/^v/, "");
     }
   }
+} catch (error) {
+  console.error('Failed to fetch the latest version:', error);
+}
+---
 
-  customElements.define('project-version', ProjectVersion);
-</script>
-
+<project-version data-owner={owner} data-repo={repo}>
+  <span id="version">{latestVersion}</span>
+</project-version>