Cookies (#163)

* Add cookies popup, add empty pages privacy and cookies, add links to footer

* Add cookies switcher  to config

config.toml

@@ -83,6 +83,9 @@ corner-radius = "0px"
 ## Url to navigation web component
 uniNavHeaderUrl = 'https://konturio.github.io/qgis-uni-navigation/assets/index-I1cvcjQR.js'
 
+## This will turn on Coockie popup. True to show popup
+cookiesstate = false
+
 # This will cause html in markdown files to be rendered directly
 [markup]
   [markup.goldmark]
@@ -178,6 +181,7 @@ sectionPagesMenu = 'main'
   weight = 40
   #pre = "<i class='fa-solid fa-clipboard-question mr-1'></i>"
 
+
 [[menu.documentation]]
   name = "Documentation"
   url = "/documentation/overview/"
@@ -218,6 +222,7 @@ sectionPagesMenu = 'main'
   [menu.showcase.params]
     submenu = "showcase"
 
+
 [[menu.showcase]]
   name = "Blogs"
   url = "/showcase/community-blogs/"

content/cookies/index.md

@@ -0,0 +1,14 @@
+---
+type: "page"
+title: "Cookies Policy"
+subtitle: ""
+draft: false
+---
+
+{{< content-start classes="content narrow">}}
+
+# Our Cookies Policy
+
+[TBD]
+
+{{< content-end >}}

content/privacy/index.md

@@ -0,0 +1,14 @@
+---
+type: "page"
+title: "Privacy Policy"
+subtitle: ""
+draft: false
+---
+
+{{< content-start classes="content narrow">}}
+
+# Our Privacy Policy
+
+[TBD]
+
+{{< content-end >}}

themes/hugo-bulma-blocks-theme/assets/css/cookie.css

@@ -0,0 +1,63 @@
+* {
+    margin: 0;
+}
+
+body {
+    font-family: "Roboto", sans-serif;
+}
+
+p {
+    margin: 16px 0 8px;
+    line-height: 1.4;
+    font-weight: 400;
+}
+
+.wrapper {
+    padding: 24px;
+}
+
+.cookie-container {
+    position: fixed;
+    bottom: -100%;
+    left: 10px;
+    font-size: 14px;
+    width: 300px;
+    line-height: 19px;
+    z-index: 10000;
+    background: #ffffff;
+    color: #888888;
+    border-radius: 10px;
+    padding: 0 32px;
+    box-shadow: 0 -2px 16px rgba(47, 54, 64, 0.15);
+    transition: 400ms;
+}
+.cookhead {
+    font-weight: 600;
+    color: black;
+    line-height: 1;
+    margin-top: 24px;
+    font-size: 18px;
+}
+.cookie-container.active {
+    bottom: 10px;
+}
+
+.cookie-container a {
+    color: #3a9800;
+    font-weight: 400;
+}
+
+.cookie-btn {
+    background: #f1903b;
+    border: 0;
+    color: #f5f6fa;
+    padding: 12px 48px;
+    width: 100%;
+    font-size: 12px;
+    margin-bottom: 16px;
+    border-radius: 8px;
+    cursor: pointer;
+}
+.cookie-btn:hover {
+    background: #f1813b;
+}

themes/hugo-bulma-blocks-theme/assets/js/cookie.js

@@ -0,0 +1,13 @@
+const cookieContainer = document.querySelector(".cookie-container");
+const cookieButton = document.querySelector(".cookie-btn");
+
+cookieButton.addEventListener("click", () => {
+  cookieContainer.classList.remove("active");
+  localStorage.setItem("cookieBannerDisplayed", "true");
+});
+
+setTimeout(() => {
+  if (!localStorage.getItem("cookieBannerDisplayed")) {
+    cookieContainer.classList.add("active");
+  }
+}, 2000);

themes/hugo-bulma-blocks-theme/layouts/_default/single.html

@@ -4,4 +4,4 @@
 {{ partial "contextmenu.html" . }}
 {{ partial "banner.html" . }}
 {{ .Content }}
-{{ partial "footer.html" . }}
+{{ partial "footer.html" . }}

themes/hugo-bulma-blocks-theme/layouts/partials/cookie-notice.html

@@ -0,0 +1,10 @@
+<div class="cookie-container">
+    <p>
+        We use cookies 🍪. This improves the site’s performance and makes it
+        more efficient. By continuing to use this site, you agree to our
+        <a href="/privacy/">privacy policy</a> and
+        <a href="/cookies/">cookie policy</a>.
+    </p>
+    <button class="cookie-btn">Got it</button>
+</div>
+<script src="/my_js/cookie.js"></script>

themes/hugo-bulma-blocks-theme/layouts/partials/footer.html

@@ -119,10 +119,17 @@
             class="has-text-grey column is-narrow is-offset-3-desktop"
             >Diversity statement</a
         >
-        <a href="#" class="has-text-grey column is-narrow">Privacy policy</a>
+        <a href="{{ absURL "/privacy" }}" class="has-text-grey column is-narrow"
+            >Privacy policy</a
+        >
         <a href="{{ absURL "/conduct" }}" class="has-text-grey column is-narrow"
             >Code of conduct</a
         >
-        <a href="#" class="has-text-grey column is-narrow">Cookie setting</a>
+        <a href="{{ absURL "/cookies" }}" class="has-text-grey column is-narrow"
+            >Cookie setting</a
+        >
     </div>
 </footer>
+{{ if ( .Site.Params.cookiesstate ) }}
+    {{ partial "cookie-notice.html" }}
+{{ end }}

themes/hugo-bulma-blocks-theme/layouts/partials/header.html

@@ -95,9 +95,9 @@
         {{/* Highlight: See last part of article at https://mertbakir.gitlab.io/hugo/syntax-highlighting-in-hugo/ */}}
         {{ $highlightcss := resources.Get "css/highlight.css" }}
         {{ $overridescss := resources.Get "css/bulma-overrides.css" }}
-
+        {{ $cookiecss := resources.Get "css/cookie.css" }}
         {{/* must have the leading slash in css path or gh pages deploy will break */}}
-        {{ $css := slice $menucss $syntaxcss $customcss $animatecss $blockcss $highlightcss $overridescss | resources.Concat "/css/all.css" | resources.Fingerprint }}
+        {{ $css := slice $menucss $syntaxcss $customcss $animatecss $blockcss $highlightcss $overridescss $cookiecss | resources.Concat "/css/all.css" | resources.Fingerprint }}
         <link
             href="{{ $css.RelPermalink }}"
             integrity="{{ $css.Data.Integrity }}"
@@ -172,7 +172,8 @@
         {{ $qrcreatejs := resources.Get "js/qrcreate.js" }}
         {{ $fusejs := resources.Get "js/fuse.js" }}
         {{ $markjs := resources.Get "js/mark.min.js" }}
-        {{ $js := slice $animatejs $expandjs $navbarjs $qrcreatejs $fusejs $markjs | resources.Concat "js/all.js" | resources.Fingerprint }}
+        {{ $cookiejs := resources.Get "js/cookie.js" }}
+        {{ $js := slice $animatejs $expandjs $navbarjs $qrcreatejs $fusejs $markjs $cookiejs | resources.Concat "js/all.js" | resources.Fingerprint }}
         {{/* See https://www.youtube.com/watch?v=T33NN_pPeNI */}}
         <script
             defer