From 0d8d4a8d09bb81d97132bbf316c76246a25f3d35 Mon Sep 17 00:00:00 2001
From: Atridad Lahiji <me@atri.dad>
Date: Sun, 4 Jan 2026 01:42:00 -0700
Subject: [PATCH] This should fix it... turns out prerendering broke the status

---
 src/components/StatusIndicator.tsx        | 63 +++++++++++++++++++++++
 src/components/sections/HeroSection.astro | 32 +-----------
 src/pages/api/status.ts                   | 26 ++++++++++
 3 files changed, 91 insertions(+), 30 deletions(-)
 create mode 100644 src/components/StatusIndicator.tsx
 create mode 100644 src/pages/api/status.ts

diff --git a/src/components/StatusIndicator.tsx b/src/components/StatusIndicator.tsx
new file mode 100644
index 0000000..f04bae7
--- /dev/null
+++ b/src/components/StatusIndicator.tsx
@@ -0,0 +1,63 @@
+import { createSignal, createEffect, onCleanup } from "solid-js";
+
+type StatusColor = "green" | "yellow" | "red";
+
+interface StatusResponse {
+  text: string;
+  color: StatusColor;
+}
+
+const colorClasses: Record<StatusColor, string> = {
+  green: "bg-success",
+  yellow: "bg-warning",
+  red: "bg-error",
+};
+
+export default function StatusIndicator() {
+  const [statusText, setStatusText] = createSignal("Accepting new clients");
+  const [statusColor, setStatusColor] = createSignal<StatusColor>("green");
+  const [isLoaded, setIsLoaded] = createSignal(false);
+
+  createEffect(() => {
+    const controller = new AbortController();
+
+    const fetchStatus = async () => {
+      try {
+        const response = await fetch("/api/status", {
+          signal: controller.signal,
+        });
+        if (response.ok) {
+          const data: StatusResponse = await response.json();
+          setStatusText(data.text);
+          setStatusColor(data.color);
+        }
+      } catch (error) {
+        if (error instanceof Error && error.name !== "AbortError") {
+          console.error("Failed to fetch status:", error);
+        }
+      } finally {
+        setIsLoaded(true);
+      }
+    };
+
+    fetchStatus();
+
+    onCleanup(() => controller.abort());
+  });
+
+  return (
+    <div
+      class={`inline-flex items-center gap-2 bg-white/10 text-white px-4 py-2 rounded-full text-sm font-medium mb-8 border border-white/10 transition-opacity duration-300 ${isLoaded() ? "opacity-100" : "opacity-0"}`}
+    >
+      <span class="relative flex h-2 w-2">
+        <span
+          class={`animate-ping absolute inline-flex h-full w-full rounded-full ${colorClasses[statusColor()]} opacity-75`}
+        ></span>
+        <span
+          class={`relative inline-flex rounded-full h-2 w-2 ${colorClasses[statusColor()]}`}
+        ></span>
+      </span>
+      {statusText()}
+    </div>
+  );
+}
diff --git a/src/components/sections/HeroSection.astro b/src/components/sections/HeroSection.astro
index c7d098e..7773d9c 100644
--- a/src/components/sections/HeroSection.astro
+++ b/src/components/sections/HeroSection.astro
@@ -1,23 +1,7 @@
 ---
 import { siteConfig } from "../../config/site";
 import { Icon } from "astro-icon/components";
-
-const statusText = process.env.STATUS_TEXT
-    ? process.env.STATUS_TEXT
-    : import.meta.env.STATUS_TEXT || "Accepting new clients";
-
-const statusColorConfig = (
-    process.env.STATUS_COLOR
-        ? process.env.STATUS_COLOR
-        : import.meta.env.STATUS_COLOR || "green"
-) as "green" | "yellow" | "red";
-
-const statusColor =
-    {
-        green: "bg-success",
-        yellow: "bg-warning",
-        red: "bg-error",
-    }[statusColorConfig] || "bg-success";
+import StatusIndicator from "../StatusIndicator.tsx";
 
 const rotatingText = (siteConfig.hero as any).rotatingText as
     | { text: string; className: string }[]
@@ -32,19 +16,7 @@ const rotatingText = (siteConfig.hero as any).rotatingText as
 
     <div class="relative max-w-7xl mx-auto px-6 py-20 lg:py-32">
         <div class="text-center max-w-4xl mx-auto">
-            <div
-                class="inline-flex items-center gap-2 bg-white/10 text-white px-4 py-2 rounded-full text-sm font-medium mb-8 border border-white/10"
-            >
-                <span class="relative flex h-2 w-2">
-                    <span
-                        class={`animate-ping absolute inline-flex h-full w-full rounded-full ${statusColor} opacity-75`}
-                    ></span>
-                    <span
-                        class={`relative inline-flex rounded-full h-2 w-2 ${statusColor}`}
-                    ></span>
-                </span>
-                {statusText}
-            </div>
+            <StatusIndicator client:load />
 
             <h1
                 class="text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-extrabold text-white leading-tight tracking-tight mb-6"
diff --git a/src/pages/api/status.ts b/src/pages/api/status.ts
new file mode 100644
index 0000000..01cefc1
--- /dev/null
+++ b/src/pages/api/status.ts
@@ -0,0 +1,26 @@
+import type { APIRoute } from "astro";
+
+export const prerender = false;
+
+export const GET: APIRoute = async () => {
+  const statusText = process.env.STATUS_TEXT
+    ? process.env.STATUS_TEXT
+    : import.meta.env.STATUS_TEXT || "Accepting new clients";
+  const statusColor = process.env.STATUS_COLOR
+    ? process.env.STATUS_COLOR
+    : import.meta.env.STATUS_COLOR || "green";
+
+  return new Response(
+    JSON.stringify({
+      text: statusText,
+      color: statusColor,
+    }),
+    {
+      status: 200,
+      headers: {
+        "Content-Type": "application/json",
+        "Cache-Control": "no-cache, no-store, must-revalidate",
+      },
+    },
+  );
+};