Merge pull request #100 from ByteInternet/cookie_consent

Author: tdgroot

docs/_static/cookieconsent.css

@@ -0,0 +1,98 @@
+window.addEventListener('load', function() {
+    const cc = initCookieConsent();
+
+    cc.run({
+        current_lang: 'en',
+        autoclear_cookies: true,
+        page_scripts: true,
+        force_consent: true,
+
+        onFirstAction: function(user_preferences, cookie) {
+            // callback triggered only once on the first accept/reject action
+            location.reload();
+        },
+        onAccept: function () {
+            if (cc.allowedCategory('analytics')) {
+                gtag('consent', 'update', {
+                    'analytics_storage': 'granted'
+                });
+                document.cookie = "cc_analytics=1";
+            } else {
+                document.cookie = "cc_analytics=0";
+            }
+
+            if (cc.allowedCategory('targeting')) {
+                gtag('consent', 'update', {
+                    'ad_storage': 'granted'
+                });
+                document.cookie = "cc_targeting=1";
+            } else {
+                document.cookie = "cc_targeting=0";
+            }
+        },
+        onChange: function (cookie, changed_categories) {
+            // callback triggered when user changes preferences after consent has already been given
+            location.reload();
+        },
+
+        gui_options: {
+            consent_modal: {
+                layout: 'box',                 // box/cloud/bar
+                position: 'middle center',     // bottom/middle/top + left/right/center
+                transition: 'zoom',            // zoom/slide
+            },
+            settings_modal: {
+                transition: 'zoom'             // zoom/slide
+            }
+        },
+
+        languages: {
+            'en': {
+                consent_modal: {
+                    title: 'Mmmm Cookies...',
+                    description: "Hypernode Docs uses cookies from Google to analyze activities on our website and to improve our documentation.<br><br>Read more about cookies in our <a href='https://www.hypernode.com/cookie-policy/' target='_blank' rel='noopener'>cookie policy</a> or take a look at our <a href='https://www.hypernode.com/privacy-policy/' target='_blank' rel='noopener'>privacy policy</a> to see how carefully we handle your personal data. If desired, you can change your preferences under ‘Preferences’.",
+                    primary_btn: {
+                        text: 'Accept all',
+                        role: 'accept_all'
+                    },
+                    secondary_btn: {
+                        text: 'Preferences',
+                        role: 'settings'
+                    }
+                },
+                settings_modal: {
+                    title: 'Mmmm Cookies...',
+                    save_settings_btn: 'Save preferences',
+                    accept_all_btn: 'Accept all',
+                    blocks: [
+                        {
+                            title: 'Functional',
+                            description: 'The technical storage or access is strictly necessary for the legitimate purpose of enabling the use of a specific service explicitly requested by the subscriber or user, or for the sole purpose of carrying out the transmission of a communication over an electronic communications network.',
+                            toggle: {
+                                value: 'necessary',
+                                enabled: true,
+                                readonly: true          // cookie categories with readonly=true are all treated as "necessary cookies"
+                            }
+                        }, {
+                            title: 'Statistics',
+                            description: 'The technical storage or access that is used exclusively for statistical purposes.',
+                            toggle: {
+                                value: 'analytics',
+                                enabled: false,
+                                readonly: false
+                            },
+                        }, {
+                            title: 'Marketing',
+                            description: 'The technical storage or access is required to create user profiles to send advertising, or to track the user on a website or across several websites for similar marketing purposes.',
+                            toggle: {
+                                value: 'targeting',
+                                enabled: false,
+                                readonly: false
+                            }
+                        }
+                    ]
+                }
+            }
+        }
+    });
+});

docs/_static/css/colors.css

@@ -24,4 +24,6 @@
     --message-info: #074E8A;
     --message-info-bg: #E7F2F8;
     --message-info-text: #063b67;
+    --cc-btn-primary-bg: var(--primary-blue);
+    --cc-btn-secondary-text: var(--primary-blue);
 }

docs/_static/css/main.css

@@ -29,6 +29,9 @@
     <link rel="stylesheet" href="{{ pathto('_static/' + style, 1) }}" type="text/css" />
     <link rel="stylesheet" href="{{ pathto('_static/pygments.css', 1) }}" type="text/css" />
   {%- endif %}
+  {%- if theme_analytics_id %}
+    <link rel="stylesheet" href="{{ pathto('_static/cookieconsent.css', 1) }}" type="text/css" />
+  {%- endif %}
   {%- for css in css_files %}
     {%- if css|attr("rel") %}
       <link rel="{{ css.rel }}" href="{{ pathto(css.filename, 1) }}" type="text/css"{% if css.title is not none %} title="{{ css.title }}"{% endif %} />
@@ -67,11 +70,23 @@
   <![endif]-->
 
   {%- if theme_analytics_id %}
+    <script>
+     // Define dataLayer and the gtag function.
+     window.dataLayer = window.dataLayer || [];
+     function gtag(){dataLayer.push(arguments);}
+
+     gtag('consent', 'default', {
+       'analytics_storage': 'denied',
+       'ad_storage': 'denied'
+     });
+   </script>
     <script>(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','{{ theme_analytics_id }}');</script>
+    <script src="{{ pathto('_static/js/cookieconsent.js', 1) }}" defer></script>
+    <script src="{{ pathto('_static/js/cookieconsent-init.js', 1) }}" defer></script>
   {%- endif %}
 
   {%- if not embedded %}