Merge 3e2dff5e45 into 67d5156507

assets/scss/partials/footer.scss

@@ -28,4 +28,14 @@ footer.site-footer {
             color: var(--body-text-color);
         }
     }
+
+    .GDPRbanner {
+        color: var(--body-text-color);
+        font-weight: normal;
+        font-size: 1.2rem;
+
+        a {
+            color: var(--body-text-color);
+        }
+    }
 }

data/consent.yaml

@@ -0,0 +1,9 @@
+items:
+  - title: Google Anaytics (functional)
+    description: This code gives us insight into the number of people that visit our website, where they are from and what they are clicking on. We follow the guidelines of the Dutch Government, which describe how to use Google Analytics without requiring explicit consent.
+    is_functional: true
+    script_file: ga.js
+  - title: Crisp chat
+    description: This code gives users the option to chat directly with us through a chat box in the bottom right corner. Visitor data will (also) be sent to Crisp.
+    is_functional: false
+    script_file: crisp.js

exampleSite/config.yaml

@@ -29,6 +29,10 @@ params:
     rssFullContent: true
     favicon:
 
+    GDPRbanner:
+        enabled: true
+        onlytechnical: false
+
     footer:
         since: 2020
         customText:
@@ -109,7 +113,7 @@ params:
             defaultHomeserverUrl: "https://matrix.cactus.chat:8448"
             serverName: "cactus.chat"
             siteName: "" # You must insert a unique identifier here matching the one you registered (See https://cactus.chat/docs/getting-started/quick-start/#register-your-site)
-            
+
         giscus:
             repo:
             repoID:
@@ -122,15 +126,15 @@ params:
             emitMetadata: 0
 
         gitalk:
-            owner: 
+            owner:
-            admin:  
+            admin:
-            repo: 
+            repo:
-            clientID: 
+            clientID:
-            clientSecret: 
+            clientSecret:
-        
+
         cusdis:
-            host: 
+            host:
-            id: 
+            id:
     widgets:
         enabled:
             - search
@@ -183,14 +187,14 @@ menu:
               ### For demonstration purpose, the home link will be open in a new tab
               newTab: true
               icon: home
-    
+
     social:
         - identifier: github
           name: GitHub
           url: https://github.com/CaiJimmy/hugo-theme-stack
           params:
             icon: brand-github
-            
+
         - identifier: twitter
           name: Twitter
           url: https://twitter.com

i18n/en.yaml

@@ -63,6 +63,11 @@ search:
         other: "#PAGES_COUNT pages (#TIME_SECONDS seconds)"
 
 footer:
+    GDPRsettings:
+        modify: Manage GDPR settings
+        technical: This website use only technical cookies
+        nocookie: This website doesn't use any cookie and doesn't collect any personal data
+
     builtWith:
         other: Built with {{ .Generator }}
 

i18n/it.yaml

@@ -62,6 +62,11 @@ search:
         other: "#PAGES_COUNT pagine (#TIME_SECONDS secondi)"
 
 footer:
+    GDPRsettings:
+        other: Gestisci il consenso GDPR
+        technical: Questo sito web utilizza solo cookie tecnici
+        nocookie: Questo sito web non usa cookie e non raccoglie dati personali
+
     builtWith:
         other: Realizzato con {{ .Generator }}
 

layouts/partials/footer/custom.html

@@ -0,0 +1,5 @@
+{{ if .Site.Params.GDPRbanner.enabled }}
+  {{ if not .Site.Params.GDPRbanner.onlytechnical }}
+    {{ partial "helper/consent.html" . }}
+  {{ end }}
+{{ end }}

layouts/partials/footer/footer.html

@@ -1,13 +1,26 @@
 {{- $ThemeVersion := "3.7.0" -}}
 <footer class="site-footer">
+
     <section class="copyright">
-        &copy; 
+        &copy;
         {{ if and (.Site.Params.footer.since) (ne .Site.Params.footer.since (int (now.Format "2006"))) }}
-            {{ .Site.Params.footer.since }} - 
+            {{ .Site.Params.footer.since }} -
         {{ end }}
         {{ now.Format "2006" }} {{ .Site.Title }}
     </section>
-    
+
+    <section class="GDPRbanner">
+      {{ if .Site.Params.GDPRbanner.enabled }}
+        {{ if not .Site.Params.GDPRbanner.onlytechnical }}
+            <a class="manage-consent" href="#manage-consent">{{ T "footer.GDPRsettings.modify" }}</a>
+        {{ else }}
+            {{ T "footer.GDPRsettings.technical" }}
+        {{ end }}
+      {{ else }}
+            {{ T "footer.GDPRsettings.nocookie" }}
+      {{ end }}
+    </section>
+
     <section class="powerby">
         {{ with .Site.Params.footer.customText }}
             {{ . | safeHTML }} <br/>

layouts/partials/helper/consent.html

@@ -0,0 +1,169 @@
+<style>
+    #consent-notice {padding: 1rem 1rem; display: none; text-align: center; position: fixed; bottom: 0; width: calc(100% - 2rem); background: #222; color: rgba(255,255,255,0.8);}
+    #consent-notice span {margin-right: 1rem;}
+    #consent-notice button {cursor: pointer; display: inline-block; width: auto;}
+    #consent-notice span a {color: inherit; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.5);}
+    #consent-notice button.btn {margin-left: 0.5rem;}
+    #consent-notice button.btn.manage-consent {background: rgba(255,255,255,1); font-weight: normal;}
+    #consent-notice button.btn.deny-consent {background: rgba(255,255,255,1); font-weight: normal;}
+    #consent-notice button.btn.approve-consent {background: rgba(255,255,255,1); font-weight: normal;}
+
+    #consent-overlay {position: fixed; left: 0; top: 0; width: 100%; height: 100vh; display: none; background: rgba(0,0,0,0.75); z-index: 999999; overflow: auto; cursor: pointer;}
+    #consent-overlay.active {display: flex;}
+    #consent-overlay > div {background: white; width: 100%; max-width: 30rem; padding: 1.75rem; margin: auto; cursor: initial;}
+    #consent-overlay > div > div {display: flex; align-items: flex-start; margin-bottom: 1rem;}
+    #consent-overlay > div > div:last-child {margin: 0;}
+    #consent-overlay h3 {padding-top: 0;}
+    #consent-overlay input {margin-top: 0.3rem;}
+    #consent-overlay label {display: block;}
+    #consent-overlay .btn {margin-right: 0.5rem;}
+    #consent-overlay button.btn.save-consent {background: rgba(255,255,255,0.6); font-weight: normal;}
+    #consent-overlay button.btn.approve-consent {background: rgba(255,255,255,1); font-weight: normal;}
+
+    @media (max-width: 767px) {
+        #consent-overlay > div {padding: 1.75rem 1rem;}
+        #consent-notice span {display: block; padding-top: 3px; margin-bottom: 1.5rem;}
+        #consent-notice button.btn {position: relative; bottom: 4px;}
+    }
+</style>
+<div id="consent-notice"><span>We would like to use <a class="manage-consent" href="#manage-consent">third party code</a> to improve the functionality of this website.</span><button class="btn manage-consent">Manage preferences</button><button class="btn deny-consent">Deny</button><button class="btn approve-consent">Allow</button></div>
+<div id="consent-overlay">
+    <div>
+        {{ range $index, $item := .Site.Data.consent.items }}
+            <div>
+                <input type="checkbox" id="item{{ $index }}" value="1" name="item{{ $index }}" {{ if $item.is_functional }}checked disabled{{ end }} />
+                <label for="item{{ $index }}">
+                    <h3>{{ $item.title }}</h3>
+                    <p>{{ $item.description }}</p>
+                </label>
+            </div>
+        {{ end }}
+        <div>
+            <button id="save-consent" class="btn save-consent" data-consentvalue="{{ range $index, $item := .Site.Data.consent.items }}{{ if $item.is_functional}}{{ else }}0{{ end }}{{ end }}">Save preferences</button>
+            <button class="btn approve-consent">Allow all</button>
+        </div>
+    </div>
+</div>
+<script>
+
+    const scripts = [];{{ range $index, $item := (where .Site.Data.consent.items "is_functional" false) }}
+    scripts[{{ $index }}] = "/js/{{ $item.script_file }}";{{ end }}
+
+    function createCookie(name,value,days) {
+        var expires = "";
+        if (days) {
+            var date = new Date();
+            date.setTime(date.getTime() + (days*24*60*60*1000));
+            expires = "; expires=" + date.toUTCString();
+        }
+        document.cookie = name + "=" + value + expires + "; path=/";
+    }
+    function readCookie(name) {
+        var nameEQ = name + "=";
+        var ca = document.cookie.split(';');
+        for(var i=0;i < ca.length;i++) {
+            var c = ca[i];
+            while (c.charAt(0)==' ') c = c.substring(1,c.length);
+            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
+        }
+        return null;
+    }
+    function eraseCookie(name) {
+        createCookie(name,"",-1);
+    }
+    function denyAllConsentScripts() {
+        var consentValue = "";
+        scripts.forEach(function(){
+            consentValue = consentValue + "0";
+        });
+        acceptSomeConsentScripts(consentValue);
+    }
+    function acceptAllConsentScripts() {
+        var consentValue = "";
+        scripts.forEach(function(){
+            consentValue = consentValue + "1";
+        });
+        acceptSomeConsentScripts(consentValue);
+    }
+    function acceptSomeConsentScripts(consentValue) {
+        setConsentInputs(consentValue);
+        createCookie('consent-settings',consentValue,31);
+        document.getElementById('consent-notice').style.display = 'none';
+        document.getElementById('consent-overlay').classList.remove('active');
+        loadConsentScripts(consentValue);
+    }
+    function loadConsentScripts(consentValue) {
+        scripts.forEach(function(value,key){
+            //console.log('script'+key+' is set to ' +consentValue[key]+' and is file '+value);
+            if(consentValue[key]=="1") {
+                var s = document.createElement('script');
+                s.type = 'text/javascript';
+                s.src = value;
+                document.body.appendChild(s);
+            }
+        });
+    }
+    function setConsentInputs(consentValue) {
+        var elements = document.querySelectorAll('#consent-overlay input:not([disabled])');
+        elements.forEach(function(el,index) {
+            if(consentValue[index]=="1") el.checked = true;
+            else el.checked = false;
+        });
+    }
+    function setConsentValue() {
+        var elements = document.querySelectorAll('#consent-overlay input:not([disabled])');
+        var consentValue = "";
+        elements.forEach(function(el) {
+            if(el.checked) consentValue = consentValue + "1";
+            else consentValue = consentValue + "0";
+        });
+        document.getElementById("save-consent").dataset.consentvalue = consentValue;
+    }
+
+    var elements = document.querySelectorAll('#consent-overlay input:not([disabled])');
+    elements.forEach(function(el) {
+        el.checked = false;
+    });
+
+    if(readCookie('consent-settings')) {
+        var consentValue = readCookie('consent-settings').toString();
+        console.log(consentValue);
+        setConsentInputs(consentValue);
+        loadConsentScripts(consentValue);
+    } else {
+        document.getElementById('consent-notice').style.display = 'block';
+    }
+    var elements = document.querySelectorAll('.manage-consent');
+    elements.forEach(function(el) {
+        el.addEventListener("click",function() {
+            document.getElementById('consent-overlay').classList.toggle('active');
+        });
+    });
+    var elements = document.querySelectorAll('.deny-consent');
+    elements.forEach(function(el) {
+        el.addEventListener("click",function() {
+            denyAllConsentScripts();
+        });
+    });
+    var elements = document.querySelectorAll('.approve-consent');
+    elements.forEach(function(el) {
+        el.addEventListener("click",function() {
+            acceptAllConsentScripts();
+        });
+    });
+    document.getElementById("save-consent").addEventListener("click",function() {
+        setConsentValue();
+        acceptSomeConsentScripts(this.dataset.consentvalue);
+    });
+    document.getElementById("consent-overlay").addEventListener("click",function(e) {
+        if (!document.querySelector("#consent-overlay > div").contains(e.target)){
+            this.classList.toggle('active');
+        }
+    });
+</script>
+
+{{ range $index, $item := .Site.Data.consent.items }}
+    {{ if $item.is_functional }}
+        <script type="text/javascript" src="/js/{{ $item.script_file }}"></script>
+    {{ end }}
+{{ end }}