Cookie concent feature.

assets/js/cookieconsent.js

@@ -0,0 +1,38 @@
+(function () {
+
+    'use strict';
+
+    if (typeof window.Cookies !== 'undefined') {
+        const cookieconsent = document.querySelector('.cookieconsent');
+
+        if (window.Cookies.get('cookieconsent') === undefined && cookieconsent) {
+            cookieconsent.classList.add('js-cookieconsent-open');
+        }
+
+        const cookie_buttons = Array.prototype.slice.call(
+            document.querySelectorAll('button[data-consent]')
+        );
+        const sitedomain = window.location.hostname.split('.').slice(-2);
+        const cookiedomain = sitedomain.join('.');
+        let cookie_options = [];
+        cookie_options['domain'] = cookiedomain;
+        cookie_options['sameSite'] = 'strict';
+        cookie_options['expires'] = 365;
+        if (window.location.protocol === 'https:') {
+            cookie_options['secure'] = true;
+        }
+
+        cookie_buttons.forEach(function (button) {
+            button.addEventListener('click', function () {
+                if (button.getAttribute('data-consent') == 'true') {
+                    window.Cookies.set('cookieconsent', 'accept', cookie_options);
+                }
+                else {
+                    window.Cookies.set('cookieconsent', 'decline', cookie_options);
+                }
+                cookieconsent.classList.remove('js-cookieconsent-open');
+            })
+        });
+    }
+
+})();

assets/js/lib/js.cookie.min.js

@@ -0,0 +1,3 @@
+/*! js-cookie v2.2.1 | MIT */
+
+!function(a){var b;if("function"==typeof define&&define.amd&&(define(a),b=!0),"object"==typeof exports&&(module.exports=a(),b=!0),!b){var c=window.Cookies,d=window.Cookies=a();d.noConflict=function(){return window.Cookies=c,d}}}(function(){function a(){for(var a=0,b={};a<arguments.length;a++){var c=arguments[a];for(var d in c)b[d]=c[d]}return b}function b(a){return a.replace(/(%[0-9A-Z]{2})+/g,decodeURIComponent)}function c(d){function e(){}function f(b,c,f){if("undefined"!=typeof document){f=a({path:"/"},e.defaults,f),"number"==typeof f.expires&&(f.expires=new Date(1*new Date+864e5*f.expires)),f.expires=f.expires?f.expires.toUTCString():"";try{var g=JSON.stringify(c);/^[\{\[]/.test(g)&&(c=g)}catch(j){}c=d.write?d.write(c,b):encodeURIComponent(c+"").replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g,decodeURIComponent),b=encodeURIComponent(b+"").replace(/%(23|24|26|2B|5E|60|7C)/g,decodeURIComponent).replace(/[\(\)]/g,escape);var h="";for(var i in f)f[i]&&(h+="; "+i,!0!==f[i]&&(h+="="+f[i].split(";")[0]));return document.cookie=b+"="+c+h}}function g(a,c){if("undefined"!=typeof document){for(var e={},f=document.cookie?document.cookie.split("; "):[],g=0;g<f.length;g++){var h=f[g].split("="),i=h.slice(1).join("=");c||'"'!==i.charAt(0)||(i=i.slice(1,-1));try{var j=b(h[0]);if(i=(d.read||d)(i,j)||b(i),c)try{i=JSON.parse(i)}catch(k){}if(e[j]=i,a===j)break}catch(k){}}return a?e[a]:e}}return e.set=f,e.get=function(a){return g(a,!1)},e.getJSON=function(a){return g(a,!0)},e.remove=function(b,c){f(b,"",a(c,{expires:-1}))},e.defaults={},e.withConverter=c,e}return c(function(){})});

assets/js/tracking.js

@@ -3,16 +3,29 @@
  * A JavaScript file for analytic tracking.
  */
 
+var cookieConsent = {{ .Site.Params.cookieConsent | default false }};
+
 var idSite = '{{ .Site.Params.piwikSiteID }}';
 var matomoTrackingApiUrl = 'https://{{ .Site.Params.piwikTrackerUrl }}/matomo.php';
 
 var _paq = window._paq || [];
+if (cookieConsent) {
+  _paq.push(['requireConsent']);
+}
 _paq.push(['setTrackerUrl', matomoTrackingApiUrl]);
 _paq.push(['setSiteId', idSite]);
 _paq.push(['trackPageView']);
 _paq.push(['enableLinkTracking']);
+if (typeof window.Cookies !== 'undefined' && Cookies.get('cookieconsent') === 'accept') {
+  _paq.push(['setConsentGiven']);
+}
 
 var googleAnalytics = '{{ .Site.GoogleAnalytics }}';
+if (cookieConsent) {
+  if (typeof window.Cookies === 'undefined' || Cookies.get('cookieconsent') !== 'accept') {
+    window['ga-disable-' + googleAnalytics] = true;
+  }
+}
 
 var _gaq = window._gaq || [];
 _gaq.push(['_setAccount', googleAnalytics]);

assets/sass/components/button/_button.scss

@@ -74,6 +74,13 @@ button,
 // Add button variations here.
 .button,
 %button {
+  &--small {
+    @include type-layout(xs, 1);
+    @include margin-right(.3);
+    @include margin-bottom(.3);
+    padding: 0 6px;
+  }
+
   &--variant-name {
     // Add styles here.
   }

assets/sass/components/cookieconsent/_cookieconsent.scss

@@ -0,0 +1,32 @@
+// Cookieconsent
+
+.cookieconsent {
+    @include type-layout(s, 1);
+    position: sticky;
+    bottom:  0;
+    width: 100%;
+    color: $warning;
+    background-color: $warning-bg;
+    border-top:  4px solid $warning-border;
+    text-align: center;
+    transform: translateY(100vh);
+    transition: all 130ms ease-in;
+
+    a {
+        color: inherit;
+    }
+}
+
+.button {
+  &--accept {
+    border-color: $status;
+  }
+
+  &--decline {
+    border-color: $warning-border;
+  }
+}
+
+.js-cookieconsent-open {
+    transform: translateY(0);
+}

assets/sass/layouts/_layouts.scss

@@ -17,7 +17,8 @@
   &__first-sidebar,
   &__second-sidebar,
   &__page-top,
-  &__page-bottom {
+  &__page-bottom,
+  &__cookieconsent {
     padding: 0 $zen-gutters / 2;
     min-width: 0;  // With display grid defaults to auto, making <pre> overflow.
 
@@ -39,7 +40,8 @@
                            'side1'
                            'side2'
                            'bottom'
-                           'foot';
+                           'foot'
+                           'notice';
       grid-template-rows: auto
                           auto
                           auto
@@ -47,6 +49,7 @@
                           auto
                           auto
                           auto
+                          auto
                           auto;
       grid-template-columns: 1fr;
     }
@@ -58,6 +61,7 @@
                               auto
                               1fr
                               auto
+                              auto
                               auto;
       }
 
@@ -67,7 +71,8 @@
                                'side1 top'
                                'side1 main'
                                'side1 bottom'
-                               'foot foot';
+                               'foot foot'
+                               'notice notice';
           grid-template-columns: 1fr
                                  2fr;
       }
@@ -78,7 +83,8 @@
                                'top side2'
                                'main side2'
                                'bottom side2'
-                               'foot foot';
+                               'foot foot'
+                               'notice notice';
           grid-template-columns: 2fr
                                  1fr;
       }
@@ -89,7 +95,8 @@
                                'side1 top side2'
                                'side1 main side2'
                                'side1 bottom side2'
-                               'foot foot foot';
+                               'foot foot foot'
+                               'notice notice notice';
           grid-template-columns: 1fr
                                  2fr
                                  1fr;
@@ -127,6 +134,11 @@
     &__footer {
       grid-area: foot;
     }
+
+    &__cookieconsent {
+      grid-area: notice;
+    }
+
   }
 
 }

assets/sass/styles.scss

@@ -36,6 +36,7 @@
 
 @import 'components/box/box';
 @import 'components/clearfix/clearfix';
+@import 'components/cookieconsent/cookieconsent';
 @import 'components/header/header';
 @import 'components/hidden/hidden';
 @import 'components/highlight-mark/highlight-mark';

i18n/ar.toml

@@ -94,6 +94,17 @@ other = "تجاهل"
 [lang_select_title]
 other = "اختيار اللغات"
 
-
 [posts]
 other = "المنشورات"
+
+[cookieconsent_message]
+other = "This website uses non essential cookies for tracking and analytics that you can accept or decline."
+
+[cookieconsent_accept]
+other = "Accept tracking"
+
+[cookieconsent_decline]
+other = "Decline tracking"
+
+[privacy_policy]
+other = "Privacy policy"

i18n/de.toml

@@ -93,3 +93,15 @@ other = "Überspringen, wenn du ein Mensch bist"
 
 [lang_select_title]
 other = "Sprachauswahl"
+
+[cookieconsent_message]
+other = "This website uses non essential cookies for tracking and analytics that you can accept or decline."
+
+[cookieconsent_accept]
+other = "Accept tracking"
+
+[cookieconsent_decline]
+other = "Decline tracking"
+
+[privacy_policy]
+other = "Privacy policy"

i18n/en.toml

@@ -93,3 +93,15 @@ other = "Skip if you are a human"
 
 [lang_select_title]
 other = "Language selector"
+
+[cookieconsent_message]
+other = "This website uses non essential cookies for tracking and analytics that you can accept or decline."
+
+[cookieconsent_accept]
+other = "Accept tracking"
+
+[cookieconsent_decline]
+other = "Decline tracking"
+
+[privacy_policy]
+other = "Privacy policy"

i18n/fr.toml

@@ -93,3 +93,15 @@ other = "Ne faites pas attention à ça si vous êtes humain"
 
 [lang_select_title]
 other = "Selection de la langue"
+
+[cookieconsent_message]
+other = "This website uses non essential cookies for tracking and analytics that you can accept or decline."
+
+[cookieconsent_accept]
+other = "Accept tracking"
+
+[cookieconsent_decline]
+other = "Decline tracking"
+
+[privacy_policy]
+other = "Privacy policy"

i18n/he.toml

@@ -94,3 +94,15 @@ other = "דלג אם אתה בן אנוש"
 [lang_select_title]
 other = "בחירת שפה"
 
+[cookieconsent_message]
+other = "This website uses non essential cookies for tracking and analytics that you can accept or decline."
+
+[cookieconsent_accept]
+other = "Accept tracking"
+
+[cookieconsent_decline]
+other = "Decline tracking"
+
+[privacy_policy]
+other = "Privacy policy"
+

i18n/id.toml

@@ -93,3 +93,15 @@ other = "Lewati jika anda manusia"
 
 [lang_select_title]
 other = "Pilihan Bahasa"
+
+[cookieconsent_message]
+other = "This website uses non essential cookies for tracking and analytics that you can accept or decline."
+
+[cookieconsent_accept]
+other = "Accept tracking"
+
+[cookieconsent_decline]
+other = "Decline tracking"
+
+[privacy_policy]
+other = "Privacy policy"

i18n/nb.toml

@@ -93,3 +93,15 @@ other = "Hopp over om du er menneske."
 
 [lang_select_title]
 other = "Velg språk"
+
+[cookieconsent_message]
+other = "This website uses non essential cookies for tracking and analytics that you can accept or decline."
+
+[cookieconsent_accept]
+other = "Accept tracking"
+
+[cookieconsent_decline]
+other = "Decline tracking"
+
+[privacy_policy]
+other = "Privacy policy"

i18n/pt.toml

@@ -94,3 +94,15 @@ other = "Pular se você é humano"
 
 [lang_select_title]
 other = "Seletor de idioma"
+
+[cookieconsent_message]
+other = "This website uses non essential cookies for tracking and analytics that you can accept or decline."
+
+[cookieconsent_accept]
+other = "Accept tracking"
+
+[cookieconsent_decline]
+other = "Decline tracking"
+
+[privacy_policy]
+other = "Privacy policy"

i18n/sv.toml

@@ -93,3 +93,15 @@ other = "Hoppa över ifall du är människa."
 
 [lang_select_title]
 other = "Språkväljare"
+
+[cookieconsent_message]
+other = "Denna webb-plats använder valfria cookies för analys och spårning av besökare."
+
+[cookieconsent_accept]
+other = "Godkänn spårning"
+
+[cookieconsent_decline]
+other = "Avstå spårning"
+
+[privacy_policy]
+other = "Personuppgiftsbehandling"

layouts/_default/baseof.html

@@ -36,6 +36,7 @@
 {{ with $.Param "footer" }}<p>{{ . | markdownify }}</p>{{ end }}
 {{ if $.Param "poweredby" }}<p>Powered by <a href="https://gohugo.io/">Hugo</a> and the <a href="https://github.com/frjo/hugo-theme-zen">Zen theme</a>.</p>{{ end }}
 </footer>
+{{ if $.Param "cookieconsent" }}{{ partial "cookieconsent.html" . }}{{ end -}}
 
 </div>
 {{ if $.Param "mobilemenu" }}{{ partial "mobilemenu.html" . }}{{ end -}}

layouts/partials/cookieconsent.html

@@ -0,0 +1,10 @@
+<div class="cookieconsent layout__cookieconsent">
+  <div class="cookieconsent__message">
+    {{ i18n "cookieconsent_message" }}
+    {{ with .Site.Params.privacyPolicyUrl }}<a href="{{ . }}">{{ i18n "privacy_policy" }}</a>{{ end }}
+  </div>
+  <div class="cookieconsent__actions">
+    <button class="button button--small button--cookieconsent button--decline" type="button" data-consent="false">{{ i18n "cookieconsent_decline" }}</button>
+    <button class="button button--small button--cookieconsent button--accept" type="button" data-consent="true">{{ i18n "cookieconsent_accept" }}</button>
+  </div>
+</div>

layouts/partials/scripts.html

@@ -10,6 +10,12 @@
 {{ $mobilemenu := resources.Get "js/mobile.js" | minify | fingerprint -}}
 <script defer src="{{ $mobilemenu.RelPermalink }}"></script>
 {{ end -}}
+{{ if $.Param "cookieconsent" -}}
+{{ $jscookie := resources.Get "js/lib/js.cookie.min.js" | fingerprint -}}
+<script src="{{ $jscookie.RelPermalink }}"></script>
+{{ $cookieconsent := resources.Get "js/cookieconsent.js" | minify | fingerprint -}}
+<script defer src="{{ $cookieconsent.RelPermalink }}"></script>
+{{ end -}}
 {{ if .HasShortcode "contact" -}}
 {{ $contact := resources.Get "js/contact.js" | minify | fingerprint -}}
 <script defer src="{{ $contact.RelPermalink }}"></script>