feat: adds cookies policy (front)

content/cookies/index.es.md

@@ -0,0 +1,32 @@
++++
+title = 'Politica de cookies'
+slug = "cookies"
+translationKey = "i18n-cookies-es"
++++
+- **¿Qué son las cookies?**
+
+  Las cookies son pequeños archivos de texto que se almacenan en tu dispositivo cuando visitas un sitio web. Estos archivos contienen información que facilita la navegación y mejora la experiencia del usuario.
+
+- **Uso de Cookies Analíticas**
+
+  Utilizamos cookies con fines analíticos mediante herramientas como Google Analytics y Microsoft Clarity. Estas herramientas nos permiten recopilar datos sobre el uso del sitio, como páginas visitadas, tiempo de permanencia, y acciones realizadas. La información obtenida se utiliza para realizar análisis estadísticos y mejorar la calidad de nuestros servicios.
+
+- **Heatmaps y Grabaciones de Comportamiento**
+
+  A través de estas herramientas, implementamos heatmaps (mapas de calor) y grabaciones de comportamiento de usuarios. Los heatmaps nos ayudan a identificar las áreas de mayor interacción en nuestro sitio, mientras que las grabaciones nos permiten revisar el comportamiento del usuario de manera anónima. Este análisis contribuye a la optimización de la estructura y diseño del sitio para mejorar la experiencia del usuario.
+
+- **No Comercialización de la Información**
+
+  Queremos destacar que en ningún momento comercializamos la información recopilada a través de estas herramientas analíticas. La información recopilada se utiliza exclusivamente con el propósito de mejorar la funcionalidad y la experiencia general del usuario en nuestro sitio web.
+
+- **Gestión de Cookies**
+
+  Puedes gestionar la configuración de las cookies en tu navegador. La mayoría de los navegadores permiten aceptar, rechazar o eliminar cookies. Ten en cuenta que la desactivación de cookies puede afectar la funcionalidad de ciertas partes de nuestro sitio.
+
+- **Cambios en la Política de Cookies**
+
+  Nos reservamos el derecho de realizar cambios en esta política de cookies para reflejar actualizaciones en nuestras prácticas y en las herramientas analíticas que utilizamos. Te recomendamos revisar esta política de forma periódica para estar informado sobre cualquier cambio.
+
+Al continuar utilizando nuestro sitio web, aceptas el uso de cookies según lo descrito en esta política.
+
+Fecha de última actualización: [Incluir la fecha de la última revisión de la política de cookies].

content/cookies/index.md

@@ -0,0 +1,33 @@
++++
+title = 'Cookies Policy'
+slug = "cookies"
+translationKey = "i18n-cookies"
++++
+- **What are cookies?**
+
+  Cookies are small text files stored on your device when you visit a website. These files contain information that facilitates navigation and enhances the user experience.
+
+- **Use of Analytical Cookies**
+
+  We use cookies for analytical purposes through tools such as Google Analytics and Microsoft Clarity. These tools allow us to collect data about site usage, including visited pages, time spent, and user actions. The information obtained is used for statistical analysis and to improve the quality of our services.
+
+- **Heatmaps and Behavior Recordings**
+
+  Through these tools, we implement heatmaps (heat maps) and user behavior recordings. Heatmaps help us identify areas of high interaction on our site, while recordings allow us to review user behavior anonymously. This analysis contributes to optimizing the site's structure and design to enhance the user experience.
+
+- **Non-Commercialization of Information**
+
+  We want to emphasize that at no point do we commercialize the information collected through these analytical tools. The collected information is used exclusively to improve the functionality and overall user experience on our website.
+
+- **Cookie Management**
+
+  You can manage cookie settings in your browser. Most browsers allow you to accept, reject, or delete cookies. Note that disabling cookies may affect the functionality of certain parts of our site.
+
+- **Changes to the Cookie Policy**
+
+  We reserve the right to make changes to this cookie policy to reflect updates in our practices and the analytical tools we use. We recommend reviewing this policy periodically to stay informed about any changes.
+
+By continuing to use our website, you accept the use of cookies as described in this policy.
+
+Last updated: [Include the date of the last cookie policy review].
+

hugo.toml

@@ -13,6 +13,8 @@ googleAnalytics = "G-XLN4KF6SDM"
 defaultContentLanguage = "en"
 [languages]
   [languages.es]
+    cookiesPolicy = "Este sitio web utiliza cookies para garantizar que obtenga la mejor experiencia en nuestro sitio web."
+    cookiesPolicyShowMore = "Mostrar mas"
     contact = "Contacto"
     contactUrl = "/es/contact"
     about = "Acerca de"
@@ -38,6 +40,8 @@ defaultContentLanguage = "en"
       logoHomeLink = "/es"
     [languages.es.menu]
   [languages.en]
+    cookiesPolicy = "This website uses cookies to ensure you get the best experience on our website."
+    cookiesPolicyShowMore = "Show more"
     contact = "Contact"
     contactUrl = "/contact"
     about = "About"

resources/_gen/assets/scss/css/style.scss_f120a3f402b106f64b18d498afd3d82e.content

@@ -765,6 +765,59 @@ h4:hover a {
       .footer .copyright {
         flex-direction: column;
         margin-top: 10px; } }
+.cookie-consent {
+  position: relative;
+  animation: slide-in 1s ease-in-out forwards;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: 8px 16px 8px 16px;
+  background-color: #242627;
+  color: white; }
+
+.cookie-consent-info {
+  display: flex;
+  height: 100%;
+  align-items: center; }
+
+.cookie-consent-cta {
+  display: flex;
+  height: 100%;
+  width: 200px;
+  align-items: center; }
+
+.cookie-consent-cta button {
+  width: 90px;
+  height: 30px;
+  border: none;
+  border-radius: 0px;
+  font-size: 14px; }
+
+.cta-accept {
+  margin-left: 10px;
+  background-color: #26b1ff; }
+
+@media screen and (max-width: 900px) {
+  .cookie-consent {
+    flex-direction: column;
+    height: auto; }
+  .cookie-consent-info {
+    margin-bottom: 8px; } }
+
+.hide-out {
+  display: none; }
+
+@keyframes slide-in {
+  from {
+    transform: translateY(100%); }
+  to {
+    transform: translateY(0); } }
+
 .terms {
   width: 100%;
   max-width: 800px;

themes/hello-friend/assets/css/cookies.scss

@@ -0,0 +1,61 @@
+.cookie-consent {
+    position:relative;
+    animation: slide-in 1s ease-in-out forwards;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    padding: 8px 16px 8px 16px;
+    background-color: #242627;
+    color: white;
+}
+.cookie-consent-info {
+    display: flex;
+    height: 100%;
+    align-items: center;
+}
+.cookie-consent-cta {
+    display: flex;
+    height: 100%;
+    width: 200px;
+    align-items: center;
+}
+
+.cookie-consent-cta button {
+    width: 90px;
+    height: 30px;
+    border: none;
+    border-radius: 0px;
+    font-size: 14px;
+}
+.cta-accept {
+    margin-left: 10px;
+    background-color: #26b1ff;
+}
+
+@media screen and (max-width: 900px) { 
+    .cookie-consent {
+        flex-direction: column;
+        height: auto;
+    }
+    .cookie-consent-info {
+        margin-bottom: 8px;
+    }
+}
+.hide-out {
+    display: none;
+}
+
+@keyframes slide-in {
+    from {
+        transform: translateY(100%);
+    }
+
+    to {
+        transform: translateY(0);
+    }
+}

themes/hello-friend/assets/css/style.scss

@@ -10,6 +10,7 @@
 @import 'post';
 @import 'pagination';
 @import 'footer';
+@import 'cookies';
 
 @import 'terms';
 @import 'archive';

themes/hello-friend/assets/js/cookies.js

@@ -0,0 +1,20 @@
+function cookie(name) { 
+    let c = document.cookie.split('; ').find(cookie => cookie && cookie.startsWith(name+'='))
+    return c ? c.split('=')[1] : false; 
+}
+
+document.addEventListener("DOMContentLoaded", function() {
+    var banner = document.querySelector('.cookie-consent');
+    var acceptButton = document.querySelector('.cta-accept');
+
+    if (cookie('cookie-accepted') === "true") {
+        banner.classList.remove('slide-in-animation');
+        banner.classList.add('hide-out');
+    }
+
+    acceptButton.addEventListener('click', function() {
+        banner.classList.remove('slide-in-animation');
+        banner.classList.add('hide-out');
+        document.cookie = `cookie-accepted=true`
+    });
+});

themes/hello-friend/layouts/partials/footer.html

@@ -1,3 +1,11 @@
+<div class="cookie-consent slide-in-animation">
+  <div class="cookie-consent-info">
+    <p>{{ $.Site.Params.cookiesPolicy }}<br><a href="/cookies" style="color: #27b1ff;">{{ $.Site.Params.cookiesPolicyShowMore }}</a></p>
+     <div class="cookie-consent-cta">
+    <button class="cta-accept">Ok</button>
+  </div>
+  </div>
+</div>
 <footer class="footer">
   <div class="footer__inner">
     {{ if $.Site.Copyright }}
@@ -16,10 +24,11 @@
   </div>
 </footer>
 
+{{ $cookies := resources.Get "js/cookies.js" | js.Build }}
 {{ $menu := resources.Get "js/menu.js" | js.Build }}
 {{ $prism := resources.Get "js/prism.js" | js.Build }}
 {{ $theme := resources.Get "js/theme.js" | js.Build }}
-{{ $bundle := slice $menu $prism $theme | resources.Concat "bundle.js" | resources.Minify }}
+{{ $bundle := slice $menu $cookies $prism $theme | resources.Concat "bundle.js" | resources.Minify }}
 <script type="text/javascript" src="{{ $bundle.RelPermalink }}"></script>
 
 {{- partial "extended_footer.html" . }}