feat: install GrowthBook SDK for feature flags

.gitignore

@@ -25,3 +25,4 @@ pnpm-debug.log*
 .DS_Store
 
 .superpowers/
+.env.local

astro.config.mjs

@@ -92,6 +92,7 @@ export default defineConfig({
           "/home-new/",
           "/endorsements-new/",
           "/e4p/pledge-new/",
+          "/growthbook-test/",
         ];
         return !exclude.some((path) => page.endsWith(path));
       },

package.json

@@ -29,6 +29,7 @@
     "@emotion/styled": "^11.14.1",
     "@fontsource/fraunces": "^5.2.9",
     "@fontsource/outfit": "^5.2.8",
+    "@growthbook/growthbook-react": "^1.7.0",
     "@iconify-json/simple-icons": "^1.2.54",
     "@mui/icons-material": "^6.5.0",
     "@mui/material": "^6.5.0",

src/components/GrowthBookProvider.tsx

@@ -0,0 +1,14 @@
+import { GrowthBookProvider as GBProvider } from "@growthbook/growthbook-react";
+import type { ReactNode } from "react";
+import { growthbook } from "../growthbook";
+
+interface Props {
+  children: ReactNode;
+}
+
+// Wrap a client:only="react" island in this to read GrowthBook flags with
+// useFeatureIsOn / useFeatureValue. Each island mounts its own React root, so
+// there's no single app entry point to wrap once — use this per island instead.
+export default function GrowthBookProvider({ children }: Props) {
+  return <GBProvider growthbook={growthbook}>{children}</GBProvider>;
+}

src/components/GrowthBookTestBanner.tsx

@@ -0,0 +1,21 @@
+import { useFeatureIsOn } from "@growthbook/growthbook-react";
+import GrowthBookProvider from "./GrowthBookProvider";
+
+// Throwaway banner to confirm the GrowthBook SDK is wired end to end.
+// Safe to delete once the connection shows as Connected in the dashboard.
+function Banner() {
+  const enabled = useFeatureIsOn("growthbook-test");
+  return (
+    <div style={{ padding: "1rem", fontFamily: "monospace" }}>
+      growthbook-test flag is {enabled ? "ON" : "OFF"}
+    </div>
+  );
+}
+
+export default function GrowthBookTestBanner() {
+  return (
+    <GrowthBookProvider>
+      <Banner />
+    </GrowthBookProvider>
+  );
+}

src/growthbook.ts

@@ -0,0 +1,22 @@
+import { GrowthBook } from "@growthbook/growthbook-react";
+
+const clientKey = import.meta.env.PUBLIC_GROWTHBOOK_CLIENT_KEY;
+
+if (!clientKey) {
+  // Fail loudly. A missing key makes every flag return its default instead,
+  // which looks like working code that simply never turns anything on.
+  throw new Error(
+    "Missing PUBLIC_GROWTHBOOK_CLIENT_KEY — GrowthBook flags will not load without it.",
+  );
+}
+
+export const growthbook = new GrowthBook({
+  apiHost: "https://cdn.growthbook.io",
+  clientKey,
+  enableDevMode: true,
+});
+
+// streaming: false — fetch the payload once on load. Flag changes then land on the
+// next page load. Streaming holds an SSE connection open per client; opt in only
+// if you want live updates.
+export const ready = growthbook.init({ streaming: false });

src/middleware/csp.ts

@@ -27,7 +27,7 @@ export const csp = defineMiddleware(async (context, next) => {
     `style-src 'nonce-${nonce}' 'self' https://fonts.googleapis.com https://secure.qgiv.com`,
     "font-src 'self' https://fonts.gstatic.com https://gallery.eo.page",
     "img-src 'self' data: https:",
-    "connect-src 'self' https://plausible.io https://pal-chat.net https://eomail4.com https://www.google.com https://1k0gztb8b2.execute-api.us-east-2.amazonaws.com https://www.charitystack.com https://www.donation.charitystack.com https://*.ingest.sentry.io https://*.ingest.de.sentry.io",
+    "connect-src 'self' https://plausible.io https://pal-chat.net https://eomail4.com https://www.google.com https://1k0gztb8b2.execute-api.us-east-2.amazonaws.com https://www.charitystack.com https://www.donation.charitystack.com https://*.ingest.sentry.io https://*.ingest.de.sentry.io https://cdn.growthbook.io",
     "frame-src https://secure.qgiv.com https://calendly.com https://www.youtube.com https://www.youtube-nocookie.com https://www.google.com https://validaid.org https://www.charitystack.com",
     "object-src 'none'",
     "base-uri 'self'",

src/pages/growthbook-test.astro

@@ -0,0 +1,10 @@
+---
+import Layout from "../layouts/Layout.astro";
+import GrowthBookTestBanner from "../components/GrowthBookTestBanner";
+---
+
+<Layout title="GrowthBook test">
+  <main class="flex flex-1 items-center justify-center px-6 py-24">
+    <GrowthBookTestBanner client:only="react" />
+  </main>
+</Layout>