Create popup for cookie consent

i18n/en.yaml

@@ -1,2 +1,10 @@
 trackingStatus:
   other: Tracking Status
+cookieConsentStatus:
+  other: Cookie Consent Status
+dismissPopup:
+  other: Dismiss
+popupMsg:
+  other: By visiting my website, you agree with my
+cookiePolicy:
+  other: cookie policy

i18n/pt.yaml

@@ -1,2 +1,5 @@
 trackingStatus:
   other: Estado da monitorização
+
+dismissPopup:
+  other: Fechar

layouts/partials/matomo_cookie_popup.html

@@ -0,0 +1,24 @@
+{{ if and (isset .Site.Params "matomo") (eq .Site.Params.matomo.enable true) }}
+    <script type="text/javascript">
+        window.addEventListener("load", function() {
+            t=Matomo.getTracker("{{- .Site.Params.matomo.url -}}", "{{- .Site.Params.matomo.id -}}");
+            when = t.getRememberedCookieConsent();
+
+            banner = document.getElementsByClassName("cookie-banner")[0];
+            if (when == 0) {
+                banner.style.display = 'block';
+            }
+        }, false);
+
+        function dismissPopup() {
+            t=Matomo.getTracker("{{- .Site.Params.matomo.url -}}", "{{- .Site.Params.matomo.id -}}");
+            t.rememberCookieConsentGiven()
+            banner = document.getElementsByClassName("cookie-banner")[0];
+            banner.style.display = 'none';
+        }
+    </script>
+    <div class="cookie-banner" style="display:none">
+        <p>{{ i18n "popupMsg" }}<a href="{{- .Site.Params.matomo.policyurl -}}"> <u>{{ i18n "cookiePolicy" }}</u></a>.</p>
+        <a style="font-size: 12px;" href="javascript:dismissPopup()">({{ i18n "dismissPopup" }})</a>
+    </div>
+{{ end }}

layouts/partials/matomo_head.html

@@ -1,4 +1,5 @@
 {{ if and (isset .Site.Params "matomo") (eq .Site.Params.matomo.enable true) }}
+    <link rel="stylesheet" type="text/css" href="{{ "assets/css/hugo-matomo.css" | absURL }}" />
     <!-- Matomo -->
     <script type="text/javascript">
         var _paq = window._paq = window._paq || [];

static/assets/css/hugo-matomo.css

@@ -0,0 +1,15 @@
+.cookie-banner {
+  align-items: center;
+  background: inherit;
+  border-radius: 5px;
+  border-width: 10px;
+  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.7);
+  position: fixed;
+  bottom: 40px;
+  left: 25%;
+  right: 25%;
+  width: 50%;
+  padding: 5px 14px;
+  display: flex;
+  text-align: center;
+}