[WEB-3464] Adds TrustArc cookie consent banner (vectordotdev#18741)

* Add TrustArc cookie consent banner

* Update config.toml

* Update cookie-banner.js

website/assets/js/app.js

@@ -3,6 +3,7 @@
 {{ $siteGeneration := site.Params.site_generation }}
 import '@ryangjchandler/spruce';
 import 'alpinejs';
+import './cookie-banner'
 
 const sayHello = () => {
   console.log('Welcome to the Vector website and documentation!');

website/assets/js/cookie-banner.js

@@ -0,0 +1,41 @@
+window.addEventListener('load', function () {
+    const { env } = document.documentElement.dataset;
+
+    if (env !== 'development') {
+        // add trustarc script to head
+        const trustarc = document.createElement('script');
+        trustarc.setAttribute('src','https://consent.trustarc.com/v2/notice/ufocto');
+        document.head.appendChild(trustarc);
+
+        // add divs
+        const divA = document.createElement("div");
+        const divB = document.createElement("div");
+        divA.id = "teconsent";
+        divA.style = "cursor: pointer; color:#fff"
+        divB.id = "consent-banner";
+        divB.style = "position:fixed; bottom:0px; right:0px; width:100%;";
+        document.body.appendChild(divA);
+        document.body.appendChild(divB);
+
+        // update Cookie link
+        this.setTimeout(function () {
+            const banner = document.getElementById('consent-banner');
+            const prefsElement = document.getElementById('teconsent');
+            const cookieLink = document.querySelector('footer a[href*="/cookies"]');
+            prefsElement.className = cookieLink.className;
+
+            if (banner) {
+                // listen for click and remove banner to avoid interfering with 
+                document.addEventListener('click', function (event) {
+                    const targetElement = event.target;
+                    if (targetElement.matches('#truste-consent-required') || targetElement.matches('#truste-consent-button')) {
+                        banner.remove();
+                    }
+                });
+            }
+
+            // replace Cookie link with Prefs div
+            return (cookieLink && document.getElementById('teconsent').innerHTML.length > 0) ? cookieLink.replaceWith(prefsElement) : false;
+        }, 200);
+    }
+});

website/config.toml

@@ -175,6 +175,12 @@ url = "https://www.datadoghq.com/legal/privacy/"
 parent = "about"
 weight = 3
 
+[[languages.en.menus.footer]]
+name = "Cookies"
+url = "https://www.datadoghq.com/legal/cookies/"
+parent = "about"
+weight = 4
+
 [[languages.en.menus.footer]]
 name = "Components"
 url = "/components"

website/layouts/partials/meta.html

@@ -16,6 +16,10 @@
 <meta name="author" content="{{ . }}">
 {{ end }}
 
+{{/* TrustArc */}}
+<script type="text/javascript" src="https://consent.trustarc.com/v2/autoblockasset/core.min.js?cmId=ufocto"></script>
+<script type="text/javascript" src="https://consent.trustarc.com/v2/autoblock?cmId=ufocto"></script>
+
 {{ hugo.Generator }}
 
 <link rel="shortcut icon" href="{{ $favicon }}">