feat(chore): one trust cookie consent (#2887)

* feat(chore): one trust cookie consent

* feat(chore): comments and improvements solved

packages/website/docusaurus.config.mjs

@@ -2,6 +2,7 @@ import { themes } from 'prism-react-renderer';
 
 import myLoaders from './plugins/my-loaders.mjs';
 import tailwindLoader from './plugins/tailwind-loader.mjs';
+import { trackingHeadTags } from './src/tracking-head-tags.mjs';
 
 const SIGNUP_LINK =
   'https://dashboard.algolia.com/users/sign_up?selected_plan=docsearch&utm_source=docsearch.algolia.com&utm_medium=referral&utm_campaign=docsearch&utm_content=apply';
@@ -20,6 +21,7 @@ export default {
   favicon: 'img/favicon.ico',
   organizationName: 'Algolia',
   projectName: 'DocSearch',
+  headTags: trackingHeadTags,
   onBrokenLinks: 'throw',
   markdown: {
     hooks: {

packages/website/src/components/CookieSettingsButton.js

@@ -0,0 +1,51 @@
+import React from 'react';
+
+const ONE_TRUST_POLL_INTERVAL_MS = 100;
+const ONE_TRUST_POLL_TIMEOUT_MS = 10_000;
+
+function isOneTrustLoaded() {
+  return typeof window !== 'undefined' && (window.OneTrust !== undefined || window.Optanon !== undefined);
+}
+
+function useOneTrustAvailable() {
+  const [isAvailable, setIsAvailable] = React.useState(false);
+
+  React.useEffect(() => {
+    if (isOneTrustLoaded()) {
+      setIsAvailable(true);
+      return undefined;
+    }
+
+    const intervalId = window.setInterval(() => {
+      if (isOneTrustLoaded()) {
+        setIsAvailable(true);
+        window.clearInterval(intervalId);
+      }
+    }, ONE_TRUST_POLL_INTERVAL_MS);
+
+    const timeoutId = window.setTimeout(() => {
+      window.clearInterval(intervalId);
+    }, ONE_TRUST_POLL_TIMEOUT_MS);
+
+    return () => {
+      window.clearInterval(intervalId);
+      window.clearTimeout(timeoutId);
+    };
+  }, []);
+
+  return isAvailable;
+}
+
+export function CookieSettingsButton() {
+  const isOneTrustAvailable = useOneTrustAvailable();
+
+  if (!isOneTrustAvailable) {
+    return null;
+  }
+
+  return (
+    <button type="button" id="ot-sdk-btn" className="ot-sdk-show-settings">
+      Cookie settings
+    </button>
+  );
+}

packages/website/src/css/custom.css

@@ -720,6 +720,29 @@ html[data-theme='dark'] .shimmer-effect {
   @apply bg-neutral-100 dark:bg-zinc-800 py-16 rounded-2xl ring-1 ring-neutral-200 dark:ring-neutral-700 ring-offset-3 dark:ring-offset-neutral-900;
 }
 
+.footer__copyright--with-cookie-settings {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem 1.5rem;
+}
+
+.footer__copyright--with-cookie-settings .ot-sdk-show-settings {
+  background: transparent;
+  border: none;
+  color: var(--ifm-footer-link-color);
+  cursor: pointer;
+  font-size: var(--ifm-footer-link-font-size);
+  padding: 0;
+  text-decoration: underline;
+}
+
+.footer__copyright--with-cookie-settings .ot-sdk-show-settings:hover {
+  color: var(--ifm-footer-link-hover-color);
+  text-decoration: underline;
+}
+
 .DocSearch-Button:focus,
 .DocSearch-Button:hover {
   box-shadow:

packages/website/src/theme/Footer/Copyright/index.js

@@ -0,0 +1,11 @@
+import { CookieSettingsButton } from '@site/src/components/CookieSettingsButton';
+import React from 'react';
+
+export default function FooterCopyright({ copyright }) {
+  return (
+    <div className="footer__copyright footer__copyright--with-cookie-settings">
+      {copyright ? <div dangerouslySetInnerHTML={{ __html: copyright }} /> : null}
+      <CookieSettingsButton />
+    </div>
+  );
+}

packages/website/src/theme/Root.js

@@ -0,0 +1,24 @@
+import { useLocation } from '@docusaurus/router';
+import React from 'react';
+
+/**
+ * Fires Segment page events on client-side navigations (Docusaurus SPA).
+ * Initial page view is handled by the Segment snippet in the document head.
+ */
+export default function Root({ children }) {
+  const { pathname } = useLocation();
+  const isInitialPageView = React.useRef(true);
+
+  React.useEffect(() => {
+    if (isInitialPageView.current) {
+      isInitialPageView.current = false;
+      return;
+    }
+
+    if (typeof window !== 'undefined' && window.analytics?.page) {
+      window.analytics.page();
+    }
+  }, [pathname]);
+
+  return children;
+}

packages/website/src/tracking-head-tags.mjs

@@ -0,0 +1,30 @@
+/** @type {import('@docusaurus/types').HtmlTags} */
+export const trackingHeadTags = [
+  // OneTrust must load before other tracking scripts (see cookielaw.org docs).
+  {
+    tagName: 'script',
+    attributes: {
+      src: 'https://cdn.cookielaw.org/scripttemplates/otSDKStub.js',
+      type: 'text/javascript',
+      charset: 'UTF-8',
+      'data-domain-script': '5e9f5149-bde8-4a13-b973-b7a9385e8ebb',
+    },
+  },
+  {
+    tagName: 'script',
+    attributes: {
+      type: 'text/javascript',
+    },
+    innerHTML: 'function OptanonWrapper() { }',
+  },
+  {
+    tagName: 'script',
+    attributes: {
+      type: 'text/javascript',
+    },
+    innerHTML: `!function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware"];analytics.factory=function(e){return function(){var t=Array.prototype.slice.call(arguments);t.unshift(e);analytics.push(t);return analytics}};for(var e=0;e<analytics.methods.length;e++){var key=analytics.methods[e];analytics[key]=analytics.factory(key)}analytics.load=function(key,e){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.src="https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n);analytics._loadOptions=e};analytics._writeKey="eEj3ERCjH7KxK1jEMjQF7uzmtZGALFHn";;analytics.SNIPPET_VERSION="4.15.3";
+  analytics.load("eEj3ERCjH7KxK1jEMjQF7uzmtZGALFHn");
+  analytics.page();
+  }}();`,
+  },
+];