minor: Add Cookie Consent Dialog box

.cspell/computer-terms.txt

@@ -337,6 +337,7 @@ rockpi
 rockpro
 Rocktech
 rollouts
+RSSPM
 rulefilename
 ruuvitag
 rwxr

static/css/cookie-consent.css

@@ -0,0 +1,56 @@
+.cc-container.cc-noselect.displayed .cc-box {
+  color: var(--color-text);
+  font-family: 'Source Sans 3', 'Source Sans Pro', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  border-radius: 16px;
+}
+
+.cc-container.cc-noselect.displayed .cc-box .cc-buttons {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+}
+
+.cc-container.cc-noselect.displayed .cc-box .cc-btn {
+  border-radius: 24px;
+  border: 1px solid var(--color-border-accent);
+  color: var(--color-text);
+  width: 100%;
+  background: white;
+  text-align: center;
+}
+
+.cc-container.cc-noselect.displayed .cc-box .cc-btn.cc-btn-accept {
+  background: var(--color-bg-accent-strong);
+  color: var(--color-text-inverse);
+  border-color: transparent;
+}
+
+.cc-container.cc-noselect.displayed .cc-box a {
+  color: var(--color-text-accent);
+}
+
+.cc-container.cc-noselect.displayed .cc-box [role="link"] {
+  border-bottom: 0;
+}
+
+.cc-container.cc-noselect.displayed .cc-box [role="link"]:hover {
+  color: var(--color-text-accent);
+}
+
+.cc-container.cc-noselect.displayed .cc-box [role="checkbox"]::before {
+  border: 1px solid var(--color-border-strong);
+  padding: 1.5px;
+  background: white;
+  border-radius: 5px;
+  margin-top: 1px;
+}
+
+.cc-container.cc-noselect.displayed .cc-box [role="checkbox"]::after {
+  background: white;
+  border-color: var(--color-border-accent);
+  margin-top: 1px;
+}
+
+.cc-container.cc-noselect.displayed .cc-box h3 {
+  display: none;
+}

static/scripts/main.js

@@ -24,6 +24,7 @@ require('../css/main.css')
 require('../css/menu-top.css')
 require('../css/search.css')
 require('../css/tooltips.css')
+require('../css/cookie-consent.css')
 
 hljs.highlightAll()
 

templates/_track.html

@@ -1,47 +1,105 @@
-<!-- GA -->
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@klaxit/[email protected]/dist/cookie-consent.js"></script>
+
 <script>
-  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+const GTM_TAG = 'GTM-598RSSPM';
 
-  ga('create', 'UA-45671959-1', 'auto');
-  ga('send', 'pageview');
-</script>
+window.dataLayer = window.dataLayer || [];
+function gtag() { dataLayer.push(arguments); }
 
-<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/bundle.js"></script>
-
-<!-- start balena analytics -->
-<script type="text/javascript">
-  var urlParamsHandler = new analyticsClient.AnalyticsUrlParams();
-  var newQuery = urlParamsHandler.consumeUrlParameters(window.location.search);
-  if (newQuery != null && `?${newQuery}` !== window.location.search) {
-    window.location.search = newQuery;
-  }
-
-  var client = analyticsClient.createClient({
-    projectName: 'balena-main',
-    componentName: 'docs',
-    endpoint: 'data.{{ $names.cloud_domain }}',
-    deviceId: urlParamsHandler.getPassedDeviceId(),
-  });
-  urlParamsHandler.setClient(client);
+gtag('consent', 'default', {
+  'analytics_storage': 'denied'
+});
+
+function addAnalyticsClient() {
+  const el = document.createElement('script');
+  el.type = 'text/javascript';
+  el.crossOrigin = 'anonymous';
+  el.async = true;
+  el.src =
+    'https://cdn.jsdelivr.net/npm/analytics-client@latest/dist/bundle.js';
+
+  el.onload = function (_) {
+    var urlParamsHandler = new analyticsClient.AnalyticsUrlParams();
+    var newQuery = urlParamsHandler.consumeUrlParameters(window.location.search);
+    if (newQuery != null && `?${newQuery}` !== window.location.search) {
+      window.location.search = newQuery;
+    }
+
+    var client = analyticsClient.createClient({
+      projectName: 'balena-main',
+      componentName: 'docs',
+      endpoint: 'data.{{ $names.cloud_domain }}',
+      deviceId: urlParamsHandler.getPassedDeviceId(),
+    });
+    urlParamsHandler.setClient(client);
 
-  var webTracker = analyticsClient.createWebTracker(client, 'Docs');
-  webTracker.trackPageView();
+    var webTracker = analyticsClient.createWebTracker(client, 'Docs');
+    webTracker.trackPageView();
 
-  var dashboardBaseUrl = '{{ $links.dashboardUrl }}';
-  var githubBaseUrl = '{{ $links.githubMain }}';
+    var dashboardBaseUrl = '{{ $links.dashboardUrl }}';
+    var githubBaseUrl = '{{ $links.githubMain }}';
 
-  // Since the dashboard is on a different domain, we need to explicitly
-  // set the anonymous id, so that we don't have disconnected timelines.
-  window.jQuery('a[href^="' + dashboardBaseUrl + '"]').attr('href', function(i, h) {
-    return (h + (h.indexOf('?') != -1 ? '&' : '?') + urlParamsHandler.getQueryString());
+    // Since the dashboard is on a different domain, we need to explicitly
+    // set the anonymous id, so that we don't have disconnected timelines.
+    window.jQuery('a[href^="' + dashboardBaseUrl + '"]').attr('href', function(i, h) {
+      return (h + (h.indexOf('?') != -1 ? '&' : '?') + urlParamsHandler.getQueryString());
+    });
+    window.jQuery('a[href^="' + githubBaseUrl + '"]').click(function() {
+      var this_href = window.jQuery(this).attr('href');
+      webTracker.trackNavigationClick(href= this_href);
+    });
+  };
+
+  const firstElement = document.getElementsByTagName('script')[0];
+  firstElement.parentNode.insertBefore(el, firstElement);
+}
+
+function addGTM() {
+  (function (w, d, s, l, i) {
+    w[l] = w[l] || [];
+    w[l].push({
+      'gtm.start':
+        new Date().getTime(), event: 'gtm.js',
+    });
+    var f = d.getElementsByTagName(s)[0],
+      j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : '';
+    j.async = true;
+    j.src =
+      'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
+    f.parentNode.insertBefore(j, f);
+  })(window, document, 'script', 'dataLayer', GTM_TAG);
+}
+
+if (window.CookieConsent) {
+  const cc = new window.CookieConsent({
+    title: 'We use cookies 🍪',
+    description: 'We use cookies to enhance your browsing experience and analyze our traffic. By clicking "Accept All" you consent to our use of cookies. Read more about our <a href="https://www.balena.io/privacy-policy" target="_blank">privacy policy</a>.',
+    buttons: {
+      acceptAll: 'Accept all',
+      acceptSelected: 'Save selection',
+      reject: 'Reject all',
+      showSettings: 'Customize',
+      hideSettings: 'Back',
+    },
+    cookie: {
+      secure: false,
+    },
+  })
+
+  cc.on('accept', () => {
+    addAnalyticsClient();
+    gtag('consent', 'update', {
+      'analytics_storage': 'granted'
+    });
   });
-  window.jQuery('a[href^="' + githubBaseUrl + '"]').click(function() {
-    var this_href = window.jQuery(this).attr('href');
-    webTracker.trackNavigationClick(href= this_href);
+}
+
+if (window.CookieConsent?.acceptedCategories?.includes('analytics')) {
+  gtag('consent', 'update', {
+    'analytics_storage': 'granted'
   });
+  addAnalyticsClient();
+}
 
+addGTM()
 </script>
-<!-- end balena analytics -->

templates/default.html

@@ -19,6 +19,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://unpkg.com/@balena/design-tokens@0/build/css/tokens.css">
     <link rel="stylesheet" href="/dist/style.css">
     <!-- Algolia search styles -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3" />
@@ -100,4 +101,4 @@
     {% endif %}
   </body>
 
-</html>
+</html>