Docs: Cookie banner fix (#34163)

Fixes a bug with the cookie banner.

GitOrigin-RevId: ab6ec931d34683e7374788656c58962f78afc6dc

Author: mikewheaton

npm-packages/docs/src/components/Analytics/CookieBanner.tsx

@@ -1,15 +1,18 @@
+import useIsBrowser from "@docusaurus/useIsBrowser";
 import { useAnalyticsCookies } from "@site/src/components/Analytics/useAnalyticsCookies";
-import React, { useEffect, useState } from "react";
+import React from "react";
 
 export default function CookieBanner() {
+  const isBrowser = useIsBrowser();
   const { allowsCookies, setAllowsCookies } = useAnalyticsCookies();
-  const [isDeployPreview, setIsDeployPreview] = useState(false);
 
-  useEffect(() => {
-    setIsDeployPreview(window.location.hostname.includes("netlify.app"));
-  }, []);
+  // Don't render during SSR.
+  if (!isBrowser) {
+    return null;
+  }
 
-  if (isDeployPreview || allowsCookies !== undefined) {
+  // Don't render if the user has accepted or rejected previously.
+  if (allowsCookies !== undefined) {
     return null;
   }
 

npm-packages/docs/src/components/Analytics/PostHog.tsx

@@ -23,6 +23,7 @@ export default function PostHog() {
     // write-only and PostHog says is safe to use in public apps.
     const key = siteConfig.customFields.POST_HOG_KEY as string;
     const api_host = siteConfig.customFields.POST_HOG_HOST as string;
+    // Note that this is a production build, which includes deploy previews.
     const isProduction = siteConfig.customFields.NODE_ENV === "production";
 
     if (!isProduction || !key || !api_host) {

npm-packages/docs/src/components/Analytics/useAnalyticsCookies.ts

@@ -1,5 +1,5 @@
-import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import { useCookies } from "react-cookie";
+import useIsBrowser from "@docusaurus/useIsBrowser";
 
 // Ensure this is the same for the website, dashboard, Stack, etc. as they all
 // share the same cookie. This allows a user to consent once across all of the
@@ -8,20 +8,20 @@ const COOKIE_NAME = "allowsCookies";
 
 export function useAnalyticsCookies() {
   const [cookies, setCookie] = useCookies([COOKIE_NAME]);
-  const { siteConfig } = useDocusaurusContext();
-
-  const isProduction = siteConfig.customFields.NODE_ENV === "production";
+  const isBrowser = useIsBrowser();
 
   // An undefined value indicates that the cookie is not present, so the user
   // has not yet accepted or rejected the cookie banner.
   const allowsCookies = cookies[COOKIE_NAME];
 
   const setAllowsCookies = (value: boolean) => {
-    setCookie(COOKIE_NAME, value, {
-      domain: isProduction ? ".convex.dev" : undefined,
-      path: "/",
-      maxAge: 34560000,
-    });
+    if (isBrowser) {
+      setCookie(COOKIE_NAME, value, {
+        domain: `.${window.location.hostname}`,
+        path: "/",
+        maxAge: 34560000,
+      });
+    }
   };
 
   return { allowsCookies, setAllowsCookies };