Integrate ReoDev (#951)

Author: nortonandreev

docs/.vuepress/client.ts

@@ -8,6 +8,7 @@ import KapaWidget from './components/KapaWidget.vue';
 import UserFeedback from './components/TocWithFeedback';
 import SidebarLayout from "./layouts/SidebarLayout.vue";
 import {usePostHog} from "./lib/usePosthog";
+import { useReoDev } from "./lib/useReoDev";
 
 declare const __VERSIONS__: {
     latest: string,
@@ -57,8 +58,9 @@ export default defineClientConfig({
     layouts: {
         Layout: SidebarLayout
     },
-    enhance({app, router, _}) {
+    enhance({app, router}) {
         const { hasConsent, posthog } = usePostHog();
+        useReoDev();
 
         const captureEvent = (event: string, properties?: Record<string, any>) => {
             if (!hasConsent()) return;

docs/.vuepress/lib/consent.ts

@@ -0,0 +1,24 @@
+// Type declarations for Cookiebot
+declare global {
+  interface Window {
+    Cookiebot?: {
+      consent?: {
+        necessary?: boolean;
+        preferences?: boolean;
+        statistics?: boolean;
+        marketing?: boolean;
+      };
+      renew?: () => void;
+      withdraw?: () => void;
+    };
+  }
+}
+
+/**
+ * Checks if the user has given consent for statistics cookies.
+ * This is used for analytics tools like PostHog and Reo.dev.
+ */
+export function hasStatisticsConsent(): boolean {
+  if (typeof window === "undefined") return false;
+  return window.Cookiebot?.consent?.statistics === true;
+}

docs/.vuepress/lib/usePosthog.ts

@@ -1,4 +1,5 @@
 import posthog from "posthog-js";
+import { hasStatisticsConsent } from "./consent";
 
 const POSTHOG_CONFIG = {
   apiKey: "phc_DeHBgHGersY4LmDlADnPrsCPOAmMO7QFOH8f4DVEVmD",
@@ -8,11 +9,6 @@ const POSTHOG_CONFIG = {
 let isInitialized = false;
 let listenersRegistered = false;
 
-function hasStatisticsConsent(): boolean {
-  if (typeof window === "undefined") return false;
-  return window.Cookiebot?.consent?.statistics === true;
-}
-
 function initializePostHog(): void {
   if (isInitialized) return;
   try {
@@ -86,19 +82,3 @@ export function usePostHog() {
     hasConsent: hasStatisticsConsent,
   };
 }
-
-// Type declarations for Cookiebot
-declare global {
-  interface Window {
-    Cookiebot?: {
-      consent?: {
-        necessary?: boolean;
-        preferences?: boolean;
-        statistics?: boolean;
-        marketing?: boolean;
-      };
-      renew?: () => void;
-      withdraw?: () => void;
-    };
-  }
-}

docs/.vuepress/lib/useReoDev.ts

@@ -0,0 +1,111 @@
+import { loadReoScript } from "reodotdev";
+import { hasStatisticsConsent } from "./consent";
+
+let listenersRegistered = false;
+let isInitialized = false;
+let reoInstance: any | null = null;
+let reoPromise: Promise<any> | null = null;
+
+declare global {
+  interface Window {
+    Reo?: unknown;
+  }
+}
+
+const CLIENT_ID = "f1c2b9fbebbf202";
+
+function stopReoDev(): void {
+  if (typeof window === "undefined" || typeof document === "undefined") return;
+
+  try {
+    const reoPrefix = "__sec__"; 
+    Object.keys(localStorage).forEach((key) => {
+      if (key.startsWith(reoPrefix)) {
+        localStorage.removeItem(key);
+      }
+    });
+  } catch (_error) {
+    console.error("Error clearing Reo LocalStorage");
+  }
+
+  try {
+    const cookies = document.cookie.split(";");
+    const expiry = "expires=Thu, 01 Jan 1970 00:00:00 GMT";
+    
+    const domainParts = window.location.hostname.split('.');
+    const mainDomain = domainParts.length > 2 ? `.${domainParts.slice(-2).join('.')}` : '';
+
+    for (let i = 0; i < cookies.length; i++) {
+      const name = cookies[i].split("=")[0].trim();
+      
+      if (name.startsWith("__sec__")) {
+        document.cookie = `${name}=;${expiry};path=/;`;
+        if (mainDomain) {
+          document.cookie = `${name}=;${expiry};path=/;domain=${mainDomain};`;
+        }
+      }
+    }
+  } catch (_error) {
+    console.error("Error resetting Reo cookies");
+  }
+
+  const Reo: any = (window.Reo ?? reoInstance) as any;
+  try {
+    Reo?.unload?.();
+    Reo?.reset?.();
+  } catch (error) {
+    console.error("Error stopping Reo instance");
+  }
+
+  document.querySelectorAll('script[src*="reo.dev"]').forEach(el => el.remove());
+
+  isInitialized = false;
+  reoInstance = null;
+  reoPromise = null;
+  window.Reo = undefined;
+}
+
+async function initializeReoDev(): Promise<void> {
+  if (typeof window === "undefined") return;
+  if (!hasStatisticsConsent()) return;
+  if (isInitialized || reoInstance || reoPromise || typeof window.Reo !== 'undefined') return;
+
+  try {
+    reoPromise = loadReoScript({ clientID: CLIENT_ID });
+    reoInstance = await reoPromise;
+    reoInstance.init({ clientID: CLIENT_ID });
+    isInitialized = true;
+  } catch (error) {
+    console.error("Error loading Reo");
+    reoInstance = null;
+  } finally {
+    reoPromise = null;
+  }
+}
+
+function applyConsentState(): void {
+  if (hasStatisticsConsent()) void initializeReoDev();
+  else stopReoDev();
+}
+
+function setupConsentListeners(): void {
+  if (typeof window === "undefined") return;
+  if (listenersRegistered) return;
+  listenersRegistered = true;
+
+  window.addEventListener("CookiebotOnAccept", applyConsentState);
+  window.addEventListener("CookiebotOnDecline", applyConsentState);
+  window.addEventListener("CookiebotOnConsentReady", applyConsentState);
+}
+
+export function useReoDev() {
+  if (typeof window !== "undefined") {
+    setupConsentListeners();
+    applyConsentState();
+  }
+
+  return {
+    hasConsent: hasStatisticsConsent,
+    init: initializeReoDev,
+  };
+}

docs/.vuepress/types/reodotdev.d.ts

@@ -0,0 +1,13 @@
+declare module "reodotdev" {
+  export type ReoClient = {
+    init: (options: { clientID: string }) => void;
+    [key: string]: unknown;
+  };
+
+  export function loadReoScript(options: {
+    clientID: string;
+    scriptUrlPattern?: string | string[];
+    version?: string;
+  }): Promise<ReoClient>;
+}
+

package-lock.json

@@ -49,6 +49,7 @@
     "iconify-icon": "^2.1.0",
     "mermaid": "^11.4.0",
     "posthog-js": "^1.235.0",
+    "reodotdev": "^1.0.0",
     "sass-loader": "^16.0.5",
     "uglify-js": "^3.19.3",
     "vue": "^3.5.17",

package.json

@@ -8,6 +8,7 @@
     "declaration": false,
     "allowJs": true
   },
+  "files": ["docs/.vuepress/types/reodotdev.d.ts"],
   "include": ["**/.vuepress/**/*"],
   "exclude": ["node_modules", ".cache", ".temp", "dist"]
 }