Fix glitch with displaying cookie banner for a split second (#261)

kubeshop · Aug 10, 2023 · da90286 · da90286
1 parent 4828dc6
commit da90286
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 40 deletions.
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -57,8 +57,6 @@ const config = {
     },
   ],
 
-  clientModules: [require.resolve("./src/clientModules/embed.ts")],
-
   plugins: [
     "docusaurus-plugin-sass",
     [

diff --git a/src/clientModules/embed.ts b/src/clientModules/embed.ts
diff --git a/src/components/CookieBanner/index.tsx b/src/components/CookieBanner/index.tsx
@@ -2,19 +2,24 @@ import React, { FC } from "react";
 import { Link } from "react-router-dom";
 import CookieBanner, { Cookies } from "react-cookie-banner";
 import styles from "./index.module.scss";
-import { DocsConfigWindow } from "@site/src/clientModules/embed";
+import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
+import useIsBrowser from "@docusaurus/useIsBrowser";
 
 export const CookiesMessageBanner: FC = () => {
+  const isBrowser = useIsBrowser();
+  if (!isBrowser) {
+    return null;
+  }
+
   const cookies = new Cookies();
 
-  if (
-    !cookies ||
-    cookies.get("accepts-cookies") ||
-    (typeof window !== "undefined" && (window as DocsConfigWindow).displayConfig?.cookieBanner.forceHide)
-  ) {
+  if (!cookies || cookies.get("accepts-cookies") || isSiteEmbedded()) {
+    console.log("disable cookie banner");
     return null;
   }
 
+  console.log("enable cookie banner");
+
   return (
     <CookieBanner
       disableStyle={true}
@@ -31,3 +36,13 @@ export const CookiesMessageBanner: FC = () => {
     />
   );
 };
+
+function isSiteEmbedded(): boolean {
+  if (!ExecutionEnvironment.canUseDOM || typeof window === "undefined") {
+    return false;
+  }
+
+  const urlParams = new URLSearchParams(window.location.search);
+  const embeddedValue = urlParams.get("embedded");
+  return embeddedValue === "true";
+}