add cookie banner

assets/css/common/main.css

@@ -66,3 +66,49 @@ div.highlight:hover .copy-code,
 pre:hover .copy-code {
     display: block;
 }
+
+#cookie-notice {
+    font-size: medium;
+    padding: 0.5rem 1rem;
+    display: none;
+    text-align: center;
+    position: fixed;
+    bottom: 0;
+    left: 20px;
+    padding-top: 15;
+    padding-bottom: 10px;
+    width: 100%;
+    background: rgb(70, 70, 70);
+    color: rgba(255,255,255,0.8);
+}
+    
+#cookie-notice a {
+    font-weight: 600;
+    display: inline-flex;
+    cursor: pointer;
+    margin-left: 0.5rem;
+}
+
+#cookie-notice-accept {
+    color:rgb(86, 228, 58);
+}
+
+#cookie-notice-deny {
+    color:rgb(243, 34, 34);
+}
+
+@media (max-width: 767px) {
+    #cookie-notice span {
+        display: block;
+        padding-top: 3px;
+        margin-bottom: 1rem;
+    }
+    #cookie-notice a {
+        position: relative;
+        bottom: 4px;
+    }
+    #cookie-notice {
+        left: 0px;
+    }
+}
+    

i18n/it.yaml

@@ -25,3 +25,15 @@
 
 - id: code_copied
   translation: "copiato!"
+
+- id: cookie_approve
+  translation: "Accetta"
+
+- id: cookie_deny
+  translation: "Rifiuta"
+
+- id: cookie_more_info
+  translation: "Più Info"
+
+- id: cookie_message
+  translation: "Vorrei utilizzare cookie e script di terze parti per migliorare la funzionalità di questo sito web."

layouts/partials/head.html

@@ -163,7 +163,11 @@
 
 {{- /* Misc */}}
 {{- if hugo.IsProduction | or (eq site.Params.env "production") }}
+{{- if eq .Site.Params.cookieEnabled true }}
+{{- template "partials/templates/cookie-consent.html" . }}
+{{- else }}
 {{- template "_internal/google_analytics.html" . }}
+{{- end -}}
 {{- template "partials/templates/opengraph.html" . }}
 {{- template "partials/templates/twitter_cards.html" . }}
 {{- template "partials/templates/schema_json.html" . }}

layouts/partials/templates/cookie-consent.html

@@ -0,0 +1,75 @@
+<div id="cookie-notice">
+    <span>{{- i18n "cookie_message" | default "I would like to use third party cookies and scripts to improve the functionality of this website." }}</span>
+    <a id="cookie-notice-accept" class="btn btn-primary btn-sm">{{- i18n "cookie_approve" | default "Approve" }}</a>
+    <a id="cookie-notice-deny" class="btn btn-primary btn-sm">{{- i18n "cookie_deny" | default "Deny" }}</a>
+    <a href="{{ .Permalink }}privacy" class="btn btn-primary btn-sm">{{- i18n "cookie_more_info" | default "More Info" }}</a></div>
+    <script>
+        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);
+        }
+    
+        if(readCookie('cookie-notice-option')=='true') {
+            {{ if hugo.IsProduction | or (eq site.Params.env "production") }}
+            
+            function loadScriptAsync(scriptSrc, callback) {
+                if (typeof callback !== 'function') {
+                    throw new Error('Not a valid callback for async script load');
+                }
+                var script = document.createElement('script');
+                script.onload = callback;
+                script.src = scriptSrc;
+                document.head.appendChild(script);
+            }
+
+            {{- if site.GoogleAnalytics }}
+            let googleAnalyticsCode = {{ site.GoogleAnalytics }};
+            {{- end }}
+    
+            /* This is the part where you call the above defined function and "calls back" 
+            your code which gets executed after the script has loaded */
+            //REPLACE WITH YOUR GA TAG!
+            loadScriptAsync('https://www.googletagmanager.com/gtag/js?id=' + googleAnalyticsCode, function () {
+                window.dataLayer = window.dataLayer || [];
+                function gtag() { dataLayer.push(arguments); }
+                gtag('js', new Date());
+                gtag('config', googleAnalyticsCode, { 'anonymize_ip': true }); //REPLACE WITH YOUR GA TAG!
+            })
+    
+            {{ end }}
+        } else if (readCookie('cookie-notice-option')!='false'){
+            document.getElementById('cookie-notice').style.display = 'block';
+        }
+    
+        document.getElementById('cookie-notice-accept').addEventListener("click",function() {
+            createCookie('cookie-notice-option','true',31);
+            document.getElementById('cookie-notice').style.display = 'none';
+            location.reload();
+        });
+    
+        document.getElementById('cookie-notice-deny').addEventListener("click",function() {
+            createCookie('cookie-notice-option','false',31);
+            document.getElementById('cookie-notice').style.display = 'none';
+            location.reload();
+        });
+    
+    </script>
+</div>