docs: replace CookieHub with cookieconsent (#918)

Co-authored-by: Cursor <[email protected]>

docs/themes/navy/layout/partial/after_footer.swig

@@ -17,12 +17,10 @@ debug: false
 });
 </script>
 
-<!-- Google tag (gtag.js) -->
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-GM713991QQ"></script>
-<script>
+<script type="text/plain" data-category="analytics">
   window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
   gtag('js', new Date());
-
   gtag('config', 'G-GM713991QQ');
 </script>

docs/themes/navy/layout/partial/footer.swig

@@ -5,6 +5,7 @@
       {{__('footer.license')}}
     </div>
     <div id="footer-links">
+      <button type="button" class="footer-link cookie-preferences" data-cc="show-consentModal" title="Manage cookie preferences"><i class="icon-shield"></i></button>
       <a href="https://twitter.com/{{ config.twitter }}" class="footer-link" target="_blank"><i class="icon-twitter"></i></a>
       <a href="https://opencollective.com/{{ config.oc }}" class="footer-link" target="_blank"><i class="icon-opencollective"></i></a>
       <a href="https://github.com/{{ config.github }}" class="footer-link" target="_blank"><i class="icon-github"></i></a>

docs/themes/navy/layout/partial/head.swig

@@ -32,12 +32,7 @@
   <meta name="msapplication-TileImage" content="{{ url_for('icon/mstile-144x144.png') }}">
   {{ css('css/navy') }}
   {{ feed_tag('atom.xml') }}
-  <script src="https://cdn.cookiehub.eu/c2/e8e44c93.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orestbida/[email protected]/dist/cookieconsent.css">
-  <script type="text/javascript">
+  <script src="https://cdn.jsdelivr.net/gh/orestbida/[email protected]/dist/cookieconsent.umd.js"></script>
-  document.addEventListener("DOMContentLoaded", function(event) {
+  {{ js('js/cookieconsent-config') }}
-    if (location.hostname === 'localhost' || location.hostname === '127.0.0.1') return;
-    var cpm = {};
-    window.cookiehub.load(cpm);
-  });
-  </script>
 </head>

docs/themes/navy/source/css/_partial/cookieconsent.styl

@@ -0,0 +1,15 @@
+#cc-main
+  --cc-btn-primary-bg: var(--color-link)
+  --cc-btn-primary-color: #fff
+  --cc-btn-primary-border-color: var(--color-link)
+  --cc-btn-primary-hover-bg: var(--color-link-hover)
+  --cc-btn-primary-hover-border-color: var(--color-link-hover)
+  --cc-btn-secondary-bg: #eaeff2
+  --cc-btn-secondary-color: var(--color-default)
+  --cc-btn-secondary-border-color: #eaeff2
+  --cc-toggle-on-bg: var(--color-link)
+
+.cc--darkmode #cc-main
+  --cc-btn-secondary-bg: #3a4248
+  --cc-btn-secondary-color: var(--color-default)
+  --cc-btn-secondary-border-color: #3a4248

docs/themes/navy/source/css/_partial/footer.styl

@@ -42,6 +42,13 @@
   @media mq-normal
     font-size: 30px
 
+.cookie-preferences
+  background: none
+  border: 0
+  padding: 0
+  cursor: pointer
+  color: inherit
+
 .icon-oc
   height: 36px
   width: 30px

docs/themes/navy/source/css/navy.styl

@@ -9,6 +9,7 @@
 @import "_partial/page"
 @import "_partial/mobile_nav"
 @import "_partial/footer"
+@import "_partial/cookieconsent"
 @import "_partial/highlight"
 @import "_partial/icomoon.css"
 @import "_partial/docsearch.min.css"

docs/themes/navy/source/js/cookieconsent-config.js

@@ -0,0 +1,49 @@
+(function () {
+  if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    document.documentElement.classList.add('cc--darkmode');
+  }
+
+  var config = {
+    guiOptions: {
+      consentModal: {
+        equalWeightButtons: false
+      }
+    },
+    categories: {
+      necessary: {
+        enabled: true,
+        readOnly: true
+      },
+      analytics: {
+        enabled: false
+      }
+    },
+    language: {
+      default: 'en',
+      translations: {
+        en: {
+          consentModal: {
+            title: 'We use cookies',
+            description: 'This site uses cookies for analytics and to improve your experience.',
+            acceptAllBtn: 'Accept',
+            acceptNecessaryBtn: 'Reject'
+          }
+        }
+      }
+    }
+  };
+
+  if (/^localhost$|^127\.0\.0\.1$/i.test(location.hostname)) {
+    config.cookie = { secure: false };
+  }
+
+  function run() {
+    CookieConsent.run(config);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', run);
+  } else {
+    run();
+  }
+}());