minor: Add Cookie Consent Dialog box

Signed-off-by: Vipul Gupta (@vipulgupta2048) <[email protected]>

static/css/cookie-consent.css

@@ -0,0 +1,165 @@
+/** Import balena design tokens **/
+@import url("https://unpkg.com/@balena/design-tokens@latest/build/css/tokens.css");
+
+html {
+    -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+    --wp--style--root--padding-bottom: 0;
+}
+
+.taxonomy-category a {
+    text-decoration: none;
+}
+
+.taxonomy-category a:hover {
+    text-decoration: underline;
+}
+
+/** fix a bug in header search form **/
+.wp-block-search-is-layout-flow > * {
+    margin-block-start: 0;
+}
+
+:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) .wp-block-search__input {
+    padding-left: 1rem !important;
+}
+
+.wp-block-search__inside-wrapper {
+    background-color: var(--wp--preset--color--tertiary);
+    border: none;
+}
+
+.wp-block-search__input,
+.wp-block-search__button {
+    background: transparent;
+}
+
+.wp-block-search__input {
+    color: var(--wp--preset--color--secondary);
+}
+
+.wp-block-search__button:hover,
+.wp-block-search__button:active,
+.wp-block-search__button:focus {
+    background: var(--wp--preset--color--secondary);
+    color: white !important;
+}
+
+.wp-block-post-content img {
+    width: 100%;
+    height: auto;
+}
+
+.page-footer {
+    margin-top: 0;
+}
+
+.wp-block-social-link-anchor {
+    font-size: 90% !important;
+}
+
+
+/** Tag cloud **/
+.wp-block-tag-cloud.is-style-outline {
+    & .tag-cloud-link {
+        border-radius: 100px;
+        border: none;
+        background: var(--color-bg-accent);
+        color: var(--color-text-accent);
+        padding: 8px 16px;
+        text-transform: capitalize;
+        font-size: 14px !important;
+
+        &:hover,
+        &:active {
+            background: var(--color-bg-accent-strong);
+            color: var(--color-text-inverse);
+        }
+    }
+}
+
+
+
+.wp-block-navigation .item-highlighted a {
+    border: solid 1px var(--color-border-accent-strong);
+    border-radius: 100px;
+    padding: 8px 32px;
+    font-size: 14px;
+    transition: all 150ms ease-out;
+
+    &:hover,
+    &:active,
+    &:focus {
+        background-color: var(--color-bg-accent-strong);
+        color: var(--color-text-inverse);
+        text-decoration: none;
+    }
+}
+
+
+footer a {
+    color: var(--color-text-accent);
+}
+
+
+body .wp-block-separator {
+    border-bottom: none;
+    border-color: var(--color-border-subtle);
+}
+
+
+
+body .is-layout-constrained > .wp-block-image:where(:not(.alignleft):not(.alignright):not(.alignfull)) {
+    max-width: 850px;
+}
+
+.wp-block-wp-discourse-comments-is-layout-constrained {
+    font-size: 16px;
+    margin-block: 5rem !important;
+
+    & .comment:not(:last-child) {
+        padding-bottom: 2rem;
+        margin-bottom: 2rem;
+        border-bottom: solid var(--color-border-subtle) 1px;
+    }
+
+    & .comment-reply-title,
+    & .discourse-participants {
+        font-size: 1.5rem;
+    }
+}
+
+.wp-block-quote {
+    border-left: solid 2px var(--color-border-accent) !important;
+}
+
+.wp-block-quote p {
+    font-size: 1.25rem;
+    font-style: italic;
+}
+
+.wp-block-quote cite {
+    font-size: .9rem;
+}
+
+
+
+.MathJax {
+    display: inline-block !important;
+}
+
+@media screen and (max-width: 500px) {
+    .wp-block-query h2 {
+        font-size: 1.25rem !important;
+    }
+
+    .wp-block-search__inside-wrapper {
+        width: 150px !important;
+    }
+
+    header nav.wp-block-navigation {
+        display: none;
+    }
+}

static/css/main.css

@@ -1,4 +1,5 @@
 @import "tooltips.css";
+@import "cookie-conset.css";
 
 body {
   margin-top: 61px;

templates/_cookie-consent.html

@@ -0,0 +1,127 @@
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@klaxit/[email protected]/dist/cookie-consent.js"></script>
+<script type="text/javascript" src="https://unpkg.com/@balena/design-tokens@latest/build/css/tokens.css"></script>
+
+<script>
+  const PROJECT_NAME = 'balena-main';
+  const COMPONENT_NAME = 'Docs';
+  const COMPONENT_VERSION = 'Docs';
+  const TRACKER_NAME = 'Docs';
+  const ENDPOINT = 'data.balena-cloud.com';
+  const GTM_TAG = 'GTM-598RSSPM';
+
+  window.dataLayer = window.dataLayer || [];
+  function gtag() { dataLayer.push(arguments); }
+
+  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 (_) {
+      const ac = window.analyticsClient;
+
+      const urlParams = new ac.AnalyticsUrlParams();
+      const newQuery = urlParams.consumeUrlParameters(window.location.search);
+      if (newQuery != null) {
+        const newUrl = window.location.pathname + ('?' + newQuery);
+        window.history.replaceState(null, '', newUrl);
+      }
+      const client = urlParams.isOptOutRequested()
+        ? ac.createNoopClient()
+        : ac.createMarketingClient({
+          projectName: PROJECT_NAME,
+          componentName: COMPONENT_NAME,
+          componentVersion: COMPONENT_VERSION,
+          endpoint: ENDPOINT,
+          deviceId: urlParams.getPassedDeviceId(),
+        });
+
+      urlParams.setClient(client);
+      const tracker = ac.createWebTracker(client, TRACKER_NAME);
+      tracker.trackPageView();
+
+      const a = document.getElementsByTagName('a');
+      for (let idx = 0; idx < a.length; ++idx) {
+        a[idx].addEventListener('click', async e => {
+          const href = e.currentTarget.href;
+          const origin = new URL(window.location.href);
+          const qs = urlParams.getQueryString(href, origin);
+
+          let hrefWithAnalyticsParams = href;
+          if (new URL(href).hostname !== origin.hostname) {
+            if (href.includes('?')) {
+              hrefWithAnalyticsParams = href + '&' + qs;
+            } else if (href.includes('#')) {
+              const urlParts = href.split('#');
+              hrefWithAnalyticsParams =
+                urlParts[0] + '?' + qs + '#' + urlParts[1];
+            } else {
+              hrefWithAnalyticsParams = href + '?' + qs;
+            }
+          }
+          e.currentTarget.href = hrefWithAnalyticsParams;
+          await tracker.trackNavigationClick(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: falßse,
+      },
+    })
+
+    cc.on('accept', () => {
+      addAnalyticsClient();
+      gtag('consent', 'update', {
+        'analytics_storage': 'granted'
+      });
+    });
+  }
+
+  if (window.CookieConsent?.acceptedCategories?.includes('analytics')) {
+    gtag('consent', 'update', {
+      'analytics_storage': 'granted'
+    });
+    addAnalyticsClient();
+  }
+
+  addGTM()
+</script>