feat: enhance homepage with subscriber count and GitHub star button

Author: skeptrunedev

website/src/pages/index.astro

@@ -2,6 +2,7 @@
 import HomeLayout from "@layouts/HomeLayout.astro";
 import { keystatic } from "@lib/keystatic/client";
 import invariant from "tiny-invariant";
+import { Icon } from "astro-icon/components"; // Assuming astro-icon is installed and Icon can be imported like this
 
 const i18n = await keystatic.singletons.homepage.read({
   resolveLinkedFiles: true,
@@ -31,20 +32,29 @@ invariant(i18n, "No homepage content found");
         <input
           type="email"
           placeholder={i18n.waitlist.inputPlaceholder}
-          class="border border-btcgray-300 p-3 rounded mb-4 focus:ring-2 focus:ring-brand-500 outline-none"
+          class="border border-btcgray-300 p-3 rounded mb-1 focus:ring-2 focus:ring-brand-500 outline-none"
         />
+        <p class="text-sm text-btcgray-600">
+          &rarr; <span id="subscriber-count-value">4</span>
+          {i18n.waitlist.numberSuffix}
+        </p>
         <button
           type="submit"
-          class="bg-btcgray-800 text-white p-3 rounded hover:bg-btcgray-700 hover:cursor-pointer disabled:cursor-not-allowed"
+          class="bg-btcgray-800 mt-4 text-white p-3 rounded hover:bg-btcgray-700 hover:cursor-pointer disabled:cursor-not-allowed"
         >
           {i18n.waitlist.buttonText}
         </button>
+        <a
+          href="https://github.com/devflowinc/threshold"
+          target="_blank"
+          rel="noopener noreferrer"
+          id="star-repo-button"
+          class="mt-4 flex items-center justify-center bg-white text-btcgray-800 border border-btcgray-800 p-3 rounded hover:bg-btcgray-100 hover:cursor-pointer w-full"
+        >
+          <Icon name="simple-icons:github" class="w-5 h-5 mr-2" />
+          <span id="star-repo-text">Star Us | 4</span>
+        </a>
       </form>
-      <p class="mt-2
-          text-sm
-          text-btcgray-600">
-        &rarr; 1,070 {i18n.waitlist.numberSuffix}
-      </p>
     </section>
 
     <section class="flex-1">
@@ -78,6 +88,10 @@ invariant(i18n, "No homepage content found");
   const form = document.querySelector("form");
   const emailInput = document.querySelector('input[type="email"]');
   const submitButton = document.querySelector('button[type="submit"]');
+  const starRepoButtonText = document.getElementById("star-repo-text");
+  const subscriberCountValue = document.getElementById(
+    "subscriber-count-value"
+  );
 
   if (form && emailInput && submitButton) {
     const htmlEmailInput = emailInput as HTMLInputElement;
@@ -120,18 +134,50 @@ invariant(i18n, "No homepage content found");
               email: email,
               name: name,
               status: "enabled",
-              lists: [1],
+              lists: [3],
             }),
           }
         );
 
-        if (response.ok || response.status === 201 || response.status === 409) {
+        if (response.ok) {
           htmlSubmitButton.textContent = "Subscribed!";
           htmlSubmitButton.classList.remove(
             "bg-btcgray-800",
             "hover:bg-btcgray-700"
           );
           htmlSubmitButton.classList.add("bg-green-500");
+
+          // incrase the subscriber count by 1
+          const currentCount = parseInt(
+            subscriberCountValue?.textContent || "0",
+            10
+          );
+          if (subscriberCountValue) {
+            subscriberCountValue.textContent = (
+              currentCount + 1
+            ).toLocaleString();
+          }
+        } else if (response.status === 409) {
+          // If the email already exists, we can handle it gracefully
+          htmlSubmitButton.textContent = "Already Subscribed";
+          htmlSubmitButton.disabled = false;
+          htmlSubmitButton.classList.remove(
+            "bg-btcgray-800",
+            "hover:bg-btcgray-700",
+            "bg-green-500"
+          );
+          htmlSubmitButton.classList.add("bg-yellow-500");
+
+          setTimeout(() => {
+            if (htmlSubmitButton.textContent === "Already Subscribed") {
+              htmlSubmitButton.textContent = originalButtonText;
+              htmlSubmitButton.classList.remove("bg-yellow-500");
+              htmlSubmitButton.classList.add(
+                "bg-btcgray-800",
+                "hover:bg-btcgray-700"
+              );
+            }
+          }, 3000);
         } else {
           const errorData = await response.json();
           console.error("Failed to subscribe:", response.status, errorData);
@@ -181,4 +227,82 @@ invariant(i18n, "No homepage content found");
   } else {
     console.error("Form, email input, or submit button not found.");
   }
+
+  async function fetchListmonkSubscriberCount() {
+    if (!subscriberCountValue) {
+      console.error("Subscriber count value element not found.");
+      return;
+    }
+    const apiKey = import.meta.env.PUBLIC_LISTMONK_API_KEY;
+    const apiUsername = "skeptrune-api-key";
+
+    if (!apiKey) {
+      console.error(
+        "PUBLIC_LISTMONK_API_KEY is not set in environment variables."
+      );
+      return;
+    }
+
+    try {
+      const response = await fetch(
+        "https://listmonk.skeptrune.com/api/lists/3",
+        {
+          method: "GET",
+          headers: {
+            Authorization: `Basic ${btoa(`${apiUsername}:${apiKey}`)}`,
+          },
+        }
+      );
+
+      if (response.ok) {
+        const data = await response.json();
+        if (
+          data &&
+          data.data &&
+          typeof data.data.subscriber_count === "number"
+        ) {
+          subscriberCountValue.textContent =
+            data.data.subscriber_count.toLocaleString();
+        } else {
+          console.error(
+            "Failed to parse subscriber count from Listmonk API response:",
+            data
+          );
+        }
+      } else {
+        console.error(
+          "Failed to fetch Listmonk subscriber count:",
+          response.status
+        );
+      }
+    } catch (error) {
+      console.error("Error fetching Listmonk subscriber count:", error);
+    }
+  }
+
+  async function fetchGitHubStars() {
+    if (!starRepoButtonText) {
+      console.error("Star repo button text element not found.");
+      return;
+    }
+    try {
+      const response = await fetch(
+        "https://api.github.com/repos/devflowinc/threshold"
+      );
+      if (response.ok) {
+        const data = await response.json();
+        const starCount = data.stargazers_count;
+        starRepoButtonText.textContent = `Star Us | ${starCount}`;
+      } else {
+        console.error("Failed to fetch GitHub stars:", response.status);
+      }
+    } catch (error) {
+      console.error("Error fetching GitHub stars:", error);
+    }
+  }
+
+  document.addEventListener("astro:page-load", () => {
+    fetchGitHubStars();
+    fetchListmonkSubscriberCount();
+  });
 </script>