feat: add PostHog analytics integration

package.json

@@ -25,6 +25,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "motion": "^12.42.2",
+    "posthog-js": "^1.399.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "relume-icons": "^1.2.0",

pnpm-workspace.yaml

@@ -1,4 +1,5 @@
 allowBuilds:
+  core-js: false
   esbuild: true
   sharp: true
 onlyBuiltDependencies:

src/components/posthog.astro

@@ -0,0 +1,10 @@
+---
+// PostHog analytics snippet — is:inline prevents Astro/TS from processing window.posthog
+---
+<script is:inline define:vars={{ apiKey: import.meta.env.PUBLIC_POSTHOG_PROJECT_TOKEN, apiHost: import.meta.env.PUBLIC_POSTHOG_HOST }}>
+  !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys getNextSurveyStep onSessionId".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
+  posthog.init(apiKey || '', {
+    api_host: apiHost || 'https://eu.i.posthog.com',
+    defaults: '2026-01-30'
+  });
+</script>

src/components/react/Hero.tsx

@@ -49,25 +49,52 @@ export function Hero({ tagline, mission, cta, secondaryCta, image }: Props) {
             >
               {tagline}
             </motion.h1>
-            <motion.p {...item(0.16)} className="mt-6 max-w-[36rem] text-medium text-neutral-dark">
+            <motion.p
+              {...item(0.16)}
+              className="mt-6 max-w-[36rem] text-medium text-neutral-dark"
+            >
               {mission}
             </motion.p>
             <motion.div {...item(0.24)} className="mt-8 flex flex-wrap gap-4">
               {cta && (
                 <Button asChild variant="primary">
-                  <a href={cta.to}>{cta.label}</a>
+                  <a
+                    href={cta.to}
+                    onClick={() =>
+                      window.posthog?.capture("hero_cta_clicked", {
+                        cta_label: cta.label,
+                        cta_type: "primary",
+                      })
+                    }
+                  >
+                    {cta.label}
+                  </a>
                 </Button>
               )}
               {secondaryCta && (
                 <Button asChild variant="secondary">
-                  <a href={secondaryCta.to}>{secondaryCta.label}</a>
+                  <a
+                    href={secondaryCta.to}
+                    onClick={() =>
+                      window.posthog?.capture("hero_cta_clicked", {
+                        cta_label: secondaryCta.label,
+                        cta_type: "secondary",
+                      })
+                    }
+                  >
+                    {secondaryCta.label}
+                  </a>
                 </Button>
               )}
             </motion.div>
           </div>
 
           <motion.div
-            initial={{ opacity: 0, scale: reduce ? 1 : 0.96, y: reduce ? 0 : 24 }}
+            initial={{
+              opacity: 0,
+              scale: reduce ? 1 : 0.96,
+              y: reduce ? 0 : 24,
+            }}
             animate={{ opacity: 1, scale: 1, y: 0 }}
             transition={{ duration: 0.8, delay: 0.15, ease }}
             className="relative"

src/components/react/Navbar.tsx

@@ -14,7 +14,11 @@ type Props = {
 };
 
 const defaults: Required<Omit<Props, "currentPath">> = {
-  logo: { src: "/logo/okbe-withname.svg", alt: "Open Knowledge Belgium", url: "/" },
+  logo: {
+    src: "/logo/okbe-withname.svg",
+    alt: "Open Knowledge Belgium",
+    url: "/",
+  },
   navLinks: [
     { title: "About", url: "/about" },
     { title: "Activities", url: "/activities" },
@@ -50,7 +54,11 @@ export function Navbar(props: Props) {
       }
     >
       <div className="mx-auto flex min-h-16 w-full max-w-[1280px] items-center justify-between px-[5%] md:min-h-18">
-        <a href={logo.url} className="flex items-center" aria-label="Open Knowledge Belgium home">
+        <a
+          href={logo.url}
+          className="flex items-center"
+          aria-label="Open Knowledge Belgium home"
+        >
           <img src={logo.src} alt={logo.alt} className="h-9 w-auto md:h-11" />
         </a>
 
@@ -75,7 +83,12 @@ export function Navbar(props: Props) {
 
         <div className="hidden lg:block">
           <Button asChild variant="primary" size="sm">
-            <a href={cta.url}>{cta.title}</a>
+            <a
+              href={cta.url}
+              onClick={() => window.posthog?.capture("get_involved_clicked")}
+            >
+              {cta.title}
+            </a>
           </Button>
         </div>
 
@@ -122,7 +135,12 @@ export function Navbar(props: Props) {
             </a>
           ))}
           <Button asChild variant="primary" className="mt-4 w-full">
-            <a href={cta.url}>{cta.title}</a>
+            <a
+              href={cta.url}
+              onClick={() => window.posthog?.capture("get_involved_clicked")}
+            >
+              {cta.title}
+            </a>
           </Button>
         </nav>
       </motion.div>

src/components/react/NewsletterCTA.tsx

@@ -26,6 +26,7 @@ export function NewsletterCTA({
   const [done, setDone] = useState(false);
 
   const onSubmit = (e: React.FormEvent) => {
+    window.posthog?.capture("newsletter_subscribed");
     if (action) return; // let the real endpoint handle it
     e.preventDefault();
     if (!email) return;
@@ -52,7 +53,11 @@ export function NewsletterCTA({
         <div className="relative grid grid-cols-1 items-center gap-8 lg:grid-cols-2">
           <div>
             <h2 className="text-h3 font-bold">{heading}</h2>
-            {subheading && <p className="mt-3 max-w-[28rem] text-medium text-white/80">{subheading}</p>}
+            {subheading && (
+              <p className="mt-3 max-w-[28rem] text-medium text-white/80">
+                {subheading}
+              </p>
+            )}
           </div>
           <div>
             <form
@@ -71,12 +76,18 @@ export function NewsletterCTA({
                 onChange={(e) => setEmail(e.target.value)}
                 className="border-white/20 bg-white/95"
               />
-              <Button type="submit" variant="primary" className="shrink-0 bg-electric">
+              <Button
+                type="submit"
+                variant="primary"
+                className="shrink-0 bg-electric"
+              >
                 Subscribe
               </Button>
             </form>
             {done ? (
-              <p className="mt-3 text-small text-white/80">Thanks! Check your email client to confirm.</p>
+              <p className="mt-3 text-small text-white/80">
+                Thanks! Check your email client to confirm.
+              </p>
             ) : (
               <p className="mt-3 text-small text-white/60">
                 No spam — just occasional updates on open knowledge in Belgium.

src/layouts/BaseLayout.astro

@@ -1,5 +1,6 @@
 ---
 import "@/styles/global.css";
+import PostHog from "@/components/posthog.astro";
 
 interface Props {
   title?: string;
@@ -43,6 +44,8 @@ const canonical = new URL(Astro.url.pathname, Astro.site).toString();
     <meta name="twitter:description" content={description} />
     <meta name="twitter:image" content={new URL(image, Astro.site).toString()} />
 
+    <PostHog />
+
     <!-- Progressive enhancement: if JS is off, reveal-animated content (rendered
          with inline opacity:0 by motion) must still be visible. -->
     <noscript>