From 4dfeb5537e67e38f72e39ae8ad5408e57f245ff6 Mon Sep 17 00:00:00 2001
From: Wojtek Majewski <wojciech.majewski@pm.me>
Date: Mon, 10 Nov 2025 12:14:21 +0100
Subject: [PATCH] chore: add code overlay click and scroll tracking

---
 pkgs/website/astro.config.mjs                 |  4 ++
 pkgs/website/src/components/CodeOverlay.astro | 37 +++++++++++++++++++
 2 files changed, 41 insertions(+)

diff --git a/pkgs/website/astro.config.mjs b/pkgs/website/astro.config.mjs
index aa1ba1477..03339cfa0 100644
--- a/pkgs/website/astro.config.mjs
+++ b/pkgs/website/astro.config.mjs
@@ -86,6 +86,10 @@ export default defineConfig({
             src: PLAUSIBLE_PROXY.url + PLAUSIBLE_PROXY.scriptPath,
           },
         },
+        {
+          tag: 'script',
+          content: `window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }`,
+        },
         {
           tag: 'meta',
           attrs: {
diff --git a/pkgs/website/src/components/CodeOverlay.astro b/pkgs/website/src/components/CodeOverlay.astro
index 24cb27b21..a3d565eb8 100644
--- a/pkgs/website/src/components/CodeOverlay.astro
+++ b/pkgs/website/src/components/CodeOverlay.astro
@@ -317,9 +317,22 @@
 </style>
 
 <script>
+  // TypeScript declaration for Plausible
+  declare global {
+    interface Window {
+      plausible?: (event: string, options?: { props?: Record<string, string | number> }) => void;
+    }
+  }
+
   // Global flag to track if auto-scroll animation is running
   let isAutoScrolling = false;
 
+  // Flag to track if programmatic scroll is happening (auto-scroll or scroll-to-top)
+  let isProgrammaticScroll = false;
+
+  // Flag to track if manual scroll event has been sent (only send once)
+  let hasTrackedManualScroll = false;
+
   const handleRevealButton = () => {
     const button = document.querySelector('.reveal-button') as HTMLElement | null;
     const overlay = document.querySelector('.code-overlay') as HTMLElement | null;
@@ -329,6 +342,11 @@
     if (!button || !overlay || !scrollableContainer || !scrollableInner) return;
 
     button.addEventListener('click', async () => {
+      // Track custom event in Plausible
+      if (typeof window.plausible !== 'undefined') {
+        window.plausible('home:reveal-code');
+      }
+
       const wait = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
 
       // Helper to animate scroll with custom duration (cancellable on user interaction)
@@ -445,6 +463,14 @@
         return;
       }
 
+      // Track manual scroll event (only once, and only if not programmatic)
+      if (!hasTrackedManualScroll && !isProgrammaticScroll) {
+        hasTrackedManualScroll = true;
+        if (typeof window.plausible !== 'undefined') {
+          window.plausible('home:code-scroll');
+        }
+      }
+
       if (scrollableInner.scrollTop > 50) {
         button.style.display = 'block';
       } else {
@@ -456,7 +482,14 @@
     scrollableInner.addEventListener('scroll', updateButtonVisibility);
 
     button.addEventListener('click', () => {
+      // Mark as programmatic scroll to avoid tracking
+      isProgrammaticScroll = true;
       scrollableInner.scrollTo({ top: 0, behavior: 'smooth' });
+
+      // Reset flag after scroll completes
+      setTimeout(() => {
+        isProgrammaticScroll = false;
+      }, 1000);
     });
   };
 
@@ -480,6 +513,10 @@
       if (scrollTopButton) {
         scrollTopButton.style.display = 'none';
       }
+
+      // Note: hasTrackedManualScroll is NOT reset here
+      // This means we track manual scroll only once per page session,
+      // even if user reveals, resets, and reveals again
     });
   };