From 4ad56f1bd9fd001dc2a09f21a479e26bd02006ab Mon Sep 17 00:00:00 2001 From: David Carlson Berg Date: Tue, 15 Sep 2026 11:39:31 -0400 Subject: [PATCH 1/3] GRWMK-494: Add Consent Banner --- package.json | 1 + src/css/custom.css | 45 +++++++--- src/theme/Footer/index.js | 109 ++++++++++++++++------- src/theme/Root.tsx | 15 ++++ static/scripts/amplitude-cta-tracking.js | 12 +++ static/scripts/googletag.js | 40 +++++++++ yarn.lock | 49 ++++++++++ 7 files changed, 230 insertions(+), 41 deletions(-) create mode 100644 src/theme/Root.tsx diff --git a/package.json b/package.json index 0194a4d87..c67d07854 100644 --- a/package.json +++ b/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", diff --git a/src/css/custom.css b/src/css/custom.css index 05f493108..d7ab1d07b 100644 --- a/src/css/custom.css +++ b/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); -} \ No newline at end of file +} diff --git a/src/theme/Footer/index.js b/src/theme/Footer/index.js index 17bdb8ca6..c2f3e89bd 100644 --- a/src/theme/Footer/index.js +++ b/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 ( -
- - Feedback - -
- ); + return ( +
+ + Feedback + +
+ ); } export default function FooterWrapper(props) { - return ( - <> -