Adding more robust cookie consent notification modal/manager

Author: mcclowes

docusaurus.config.js

@@ -107,6 +107,25 @@ const config = {
     "@docusaurus/theme-live-codeblock",
     "docusaurus-plugin-image-zoom",
 
+    [
+      "docusaurus-plugin-cookie-consent",
+      {
+        title: "Cookie Consent",
+        description:
+          "We use cookies to enhance your browsing experience and analyze our traffic.",
+        links: [
+          { label: "Privacy Policy", href: "https://www.codat.io/privacy-policy/" },
+        ],
+        toastMode: true,
+        googleConsentMode: {
+          enabled: true,
+          waitForUpdate: 500,
+          adsDataRedaction: true,
+          urlPassthrough: false,
+        },
+      },
+    ],
+
     [
       "docusaurus-plugin-module-alias",
       {

package-lock.json

@@ -33,6 +33,7 @@
     "@stoplight/elements": "^8.4.6",
     "buffer": "^6.0.3",
     "clsx": "^2.1.1",
+    "docusaurus-plugin-cookie-consent": "^4.1.0",
     "docusaurus-plugin-image-zoom": "^2.0.0",
     "docusaurus-plugin-module-alias": "^0.0.2",
     "docusaurus-plugin-sass": "^0.2.5",
@@ -43,7 +44,6 @@
     "prism-react-renderer": "^2.3.0",
     "process": "^0.11.10",
     "react": "^18.3.1",
-    "react-cookie-consent": "^9.0.0",
     "react-diff-viewer-continued": "^3.4.0",
     "react-dom": "^18.3.1",
     "react-helmet": "^6.1.0",

package.json

@@ -21,8 +21,6 @@ import styles from './styles.module.css';
 import PageHeader from '@components/PageHeader'
 import Vote from './Vote';
 
-import CookieConsent from "react-cookie-consent";
-
 import useZendesk from './useZendesk';
 
 /**
@@ -84,16 +82,6 @@ export default function DocItemLayout(props) {
 
   return (
     <>
-      <CookieConsent
-        location="bottom"
-        buttonText="Accept"
-        cookieName="cookieConsent3"
-        style={{ background: "#556680" }}
-        buttonStyle={{ backgroundColor: "white", fontSize: "12px", borderRadius: "4px" }}
-      >
-        This website uses cookies to enhance your experience.
-      </CookieConsent>
-
       {
         bannerTitle
         &&