GRWMK-494: Add Consent Banner

package.json

@@ -28,6 +28,7 @@
     "@docusaurus/plugin-content-docs": "^3.10.1",
     "@docusaurus/preset-classic": "^3.10.1",
     "@mdx-js/react": "^3.0.0",
+    "@temporalio-web/consent-banner": "^1.0.1",
     "algoliasearch": "^5.49.2",
     "chart.js": "3.7.1",
     "clsx": "^1.1.1",

src/css/custom.css

@@ -7,6 +7,32 @@
 
 /* You can override the default Infima variables here. */
 
+temporal-consent-banner:not(:defined) {
+  display: none;
+}
+
+.footer__copyright {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem 2rem;
+}
+
+.footer__privacy-choices {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0;
+  margin: 0;
+  background: none;
+  border: 0;
+  color: var(--ifm-footer-link-color);
+  cursor: pointer;
+  font: inherit;
+  text-decoration: underline;
+}
+
 :root {
   /* --ifm-color-primary: #f2633f;
   --ifm-color-primary-dark: #111827; */
@@ -165,12 +191,10 @@ h1 {
   }
 }
 
-
 .navbar__logo img {
   height: 35px;
 }
 
-
 .header-link {
   text-decoration: none;
 }
@@ -296,8 +320,9 @@ h1 {
 }
 
 /* Buttons should not have underlined text. */
-a.button { text-decoration: none; }
-
+a.button {
+  text-decoration: none;
+}
 
 /* light theme buttons are somewhat harsh - soften the colors */
 html[data-theme="light"] a.button--primary {
@@ -310,11 +335,11 @@ html[data-theme="light"] a.button--primary:hover {
   border: 1px solid var(--ifm-link-color);
 }
 
- /* adds unselectable prompt to CLI commands - use ```command   instead of ```bash */
- pre.prism-code.language-command > code::before {
-   content: "$ ";
-   font-weight: bolder;
- }
+/* adds unselectable prompt to CLI commands - use ```command   instead of ```bash */
+pre.prism-code.language-command > code::before {
+  content: "$ ";
+  font-weight: bolder;
+}
 
 @media only screen and (min-width: 1400px) {
   .navbar__items--right {
@@ -349,4 +374,4 @@ feedback-button {
   --feedback-button-background: #1a1a1a;
   --feedback-button-color: #ffffff;
   transform: scale(4);
-}
+}

src/theme/Footer/index.js

@@ -1,39 +1,86 @@
-import React, { useEffect } from 'react';
-import Footer from '@theme-original/Footer';
-import { FeedbackButton } from 'pushfeedback-react';
-import { defineCustomElements } from 'pushfeedback/loader';
-import 'pushfeedback/dist/pushfeedback/pushfeedback.css';
+import React, {useEffect, useState} from "react";
+import {createPortal} from "react-dom";
+import Footer from "@theme-original/Footer";
+import {FeedbackButton} from "pushfeedback-react";
+import {defineCustomElements} from "pushfeedback/loader";
+import "pushfeedback/dist/pushfeedback/pushfeedback.css";
+
+const openConsentBanner = () => {
+  window.dispatchEvent(new Event("temporal:consent-banner-open"));
+};
 
 function FeedbackWidget() {
-    const projectId = '1kn2tyqqpk';
+  const projectId = "1kn2tyqqpk";
 
-    useEffect(() => {
-        if (typeof window !== 'undefined') {
-            defineCustomElements(window);
-        }
-    }, []);
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      defineCustomElements(window);
+    }
+  }, []);
 
-    return (
-        <div className="feedback-widget">
-            <FeedbackButton
-                project={projectId}
-                button-position="center-right"
-                button-style="dark"
-                modal-position="sidebar-right"
-                modal-title="Share your feedback"
-                rating-placeholder="Was this page helpful?"
-            >
-                Feedback
-            </FeedbackButton>
-        </div>
-    );
+  return (
+    <div className="feedback-widget">
+      <FeedbackButton
+        project={projectId}
+        button-position="center-right"
+        button-style="dark"
+        modal-position="sidebar-right"
+        modal-title="Share your feedback"
+        rating-placeholder="Was this page helpful?"
+      >
+        Feedback
+      </FeedbackButton>
+    </div>
+  );
 }
 
 export default function FooterWrapper(props) {
-    return (
-        <>
-            <Footer {...props} />
-            <FeedbackWidget />
-        </>
-    );
+  const [footerCopyright, setFooterCopyright] = useState(null);
+
+  useEffect(() => {
+    setFooterCopyright(document.querySelector(".footer__copyright"));
+  }, []);
+
+  return (
+    <>
+      <Footer {...props} />
+      {footerCopyright &&
+        createPortal(
+          <button
+            type="button"
+            className="footer__link-item footer__privacy-choices"
+            onClick={openConsentBanner}
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="30"
+              height="14"
+              viewBox="0 0 30 14"
+              aria-hidden="true"
+              focusable="false"
+            >
+              <path
+                d="M7.4 12.8h6.8l3.1-11.6H7.4C4.2 1.2 1.6 3.8 1.6 7s2.6 5.8 5.8 5.8Z"
+                fill="#fff"
+              />
+              <path
+                d="M22.6 0H7.4a7 7 0 1 0 0 14h15.2a7 7 0 1 0 0-14ZM1.6 7c0-3.2 2.6-5.8 5.8-5.8h9.9l-3.1 11.6H7.4A5.8 5.8 0 0 1 1.6 7Z"
+                fill="#0066ff"
+              />
+              <path
+                d="M24.6 4c.2.2.2.6 0 .8L22.5 7l2.2 2.2c.2.2.2.6 0 .8-.2.2-.6.2-.8 0L21.7 7.8 19.5 10c-.2.2-.6.2-.8 0-.2-.2-.2-.6 0-.8L20.8 7l-2.2-2.2c-.2-.2-.2-.6 0-.8.2-.2.6-.2.8 0l2.2 2.2L23.8 4c.2-.2.6-.2.8 0Z"
+                fill="#fff"
+              />
+              <path
+                d="M12.7 4.1c.2.2.3.6.1.8L8.6 9.8c-.1.1-.2.2-.3.2-.2.1-.5.1-.7-.1L5.4 7.7c-.2-.2-.2-.6 0-.8.2-.2.6-.2.8 0L8 8.6l3.8-4.5c.2-.2.6-.2.9 0Z"
+                fill="#0066ff"
+              />
+            </svg>
+            Your Privacy Choices
+          </button>,
+          footerCopyright
+        )}
+      <FeedbackWidget />
+    </>
+  );
 }

src/theme/Root.tsx

@@ -0,0 +1,15 @@
+import React, {type ReactNode} from "react";
+import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
+
+if (ExecutionEnvironment.canUseDOM) {
+  import("@temporalio-web/consent-banner");
+}
+
+export default function Root({children}: {children: ReactNode}): ReactNode {
+  return (
+    <>
+      {children}
+      {React.createElement("temporal-consent-banner")}
+    </>
+  );
+}

static/scripts/amplitude-cta-tracking.js

@@ -15,6 +15,17 @@
   // if the `amplitude` global is ever unavailable.
   var CTA_URL_FRAGMENT = "pages.temporal.io/get-updates-education";
 
+  function hasAnalyticsConsent() {
+    var match = document.cookie.match(/(?:^|;\s*)consent=([^;]*)/);
+    if (!match) return false;
+
+    try {
+      return JSON.parse(decodeURIComponent(match[1])).analytics === true;
+    } catch {
+      return false;
+    }
+  }
+
   document.addEventListener(
     "click",
     function (event) {
@@ -25,6 +36,7 @@
       if (!link) return;
 
       if (
+        !hasAnalyticsConsent() ||
         typeof window.amplitude === "undefined" ||
         !window.amplitude ||
         typeof window.amplitude.track !== "function"

static/scripts/googletag.js

@@ -1,3 +1,43 @@
+window.dataLayer = window.dataLayer || [];
+window.gtag =
+  window.gtag ||
+  function () {
+    window.dataLayer.push(arguments);
+  };
+window.gtag("js", new Date());
+
+window.gtag("consent", "default", {
+  analytics_storage: "denied",
+  ad_storage: "denied",
+  ad_user_data: "denied",
+  ad_personalization: "denied",
+});
+
+(function () {
+  var match = document.cookie.match(/(?:^|;\s*)consent=([^;]*)/);
+  if (!match) return;
+
+  try {
+    var consent = JSON.parse(decodeURIComponent(match[1]));
+    if (
+      typeof consent.analytics !== "boolean" ||
+      typeof consent.advertising !== "boolean"
+    ) {
+      return;
+    }
+
+    var advertisingConsent = consent.advertising ? "granted" : "denied";
+    window.gtag("consent", "update", {
+      analytics_storage: consent.analytics ? "granted" : "denied",
+      ad_storage: advertisingConsent,
+      ad_user_data: advertisingConsent,
+      ad_personalization: advertisingConsent,
+    });
+  } catch {
+    // Keep the denied defaults when the shared consent cookie is malformed.
+  }
+})();
+
 (function (w, d, s, l, i) {
   w[l] = w[l] || [];
   w[l].push({"gtm.start": new Date().getTime(), event: "gtm.js"});