Fixed consent banner

Author: AnXh3L0

assets/style.css

@@ -424,6 +424,18 @@ key:
     translation:
       one: null
       other: "تعديل هذه الصفحة على GitHub"
+  - id: cookie-banner
+    translation:
+      one: null
+      other: يستخدم هذا الموقع [Clean Insights](https://cleaninsights.org/) لتحليلات الويب التي تحافظ على الخصوصية. باستخدامك للموقع، فإنك توافق على السماح بجمع المعلومات الأساسية مثل البلد، واللغة، والتنقل، ووكيل المستخدم.
+  - id: accept
+    translation:
+      one: null
+      other: قبول
+  - id: reject
+    translation:
+      one: null
+      other: رفض
   - id: January
     translation:
       one: null

i18n/ar.yml

@@ -445,6 +445,18 @@ key:
     translation:
       one: null
       other: Edit this page on GitHub
+  - id: cookie-banner
+    translation:
+      one: null
+      other: This website uses [Clean Insights](https://cleaninsights.org/) for privacy-preserving web analytics. By using the site you agree to allow the collection of basic country, language, navigation, and user-agent information.
+  - id: accept
+    translation:
+      one: null
+      other: Accept
+  - id: reject
+    translation:
+      one: null
+      other: Reject
   - id: January
     translation:
       one: null

i18n/en.yml

@@ -418,6 +418,18 @@ key:
     other: "La información de Git no está disponible."
   - id: edit-github
     other: "Editar esta página en GitHub"
+  - id: cookie-banner
+    translation:
+      one: null
+      other: Este sitio web utiliza [Clean Insights](https://cleaninsights.org/) para realizar análisis web que respetan la privacidad. Al usar el sitio, aceptas permitir la recopilación de información básica sobre el país, el idioma, la navegación y el agente de usuario.
+  - id: accept
+    translation:
+      one: null
+      other: Aceptar
+  - id: reject
+    translation:
+      one: null
+      other: Rechazar
   - id: January
     translation:
       one: null

i18n/es.yml

@@ -327,6 +327,18 @@ key:
   - id: edit-github
     one: null
     other: "Modifier cette page sur GitHub"
+  - id: cookie-banner
+    translation:
+      one: null
+      other: Ce site utilise [Clean Insights](https://cleaninsights.org/) pour des analyses web respectueuses de la vie privée. En utilisant ce site, vous acceptez la collecte d'informations de base telles que le pays, la langue, la navigation et l'agent utilisateur.
+  - id: accept
+    translation:
+      one: null
+      other: Accepter
+  - id: reject
+    translation:
+      one: null
+      other: Rejeter
   - id: January
     one: null
     other: "Janvier"

i18n/fr.yml

@@ -15,43 +15,72 @@
 
 {{ $insights := resources.Get "js/clean-insights.js" }}
 {{ $cleaninsights := slice $insights | resources.Concat "clean-insights.js" | resources.Minify }}
-<script src="{{ $cleaninsights.RelPermalink }}"></script>
+<script src="{{ $cleaninsights.RelPermalink }}" defer></script>
 
-<div id="tracking-banner" class="pointer-events-none fixed inset-x-0 bottom-0 px-6 pb-6">
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    const storedConsent = localStorage.getItem('trackingConsent');
+    if (storedConsent === 'granted') {
+      // Automatically grant consent if already stored
+      const ci = CleanInsightsAutoTracker("https://metrics.cleaninsights.org/cleaninsights.php", 34);
+      ci.grantCampaign('visits');
+      ci.grantFeature(CleanInsightsFeature.ua);
+      ci.grantFeature(CleanInsightsFeature.lang);
+      return; // Exit if consent is already granted
+    } else if (storedConsent === 'denied') {
+      // If consent is denied, hide the banner and do not initialize CleanInsights
+      document.getElementById('tracking-banner').style.display = 'none';
+      return;
+    }
+    
+    // Show banner if consent is not given
+    document.getElementById('tracking-banner').style.display = 'flex';
+  });
+</script>
+
+<div id="tracking-banner" class="hidden pointer-events-none fixed inset-x-0 bottom-0 px-6 pb-6">
   <div class="pointer-events-auto mx-auto max-w-xl rounded-xl bg-white p-6 shadow-lg ring-1 ring-gray-900/10">
-    <p class="text-sm leading-6 text-gray-900">This website uses <a href="https://cleaninsights.org/">Clean Insights</a> for privacy-preserving web analytics. By using the site you agree to allow the collection of basic country, language, navigation, and user-agent information.</p>
+    <p class="text-sm leading-6 text-gray-900 prose">{{ i18n "key.cookie-banner" | markdownify }}</p>
     <div class="mt-4 flex items-center gap-x-5">
       <button id="accept-consent" class="rounded-md bg-gray-900 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900">
-        Accept
+        {{ i18n "key.accept" }}
       </button>
+      <button id="reject-consent" class="text-sm font-semibold leading-6 text-gray-900">{{ i18n "key.reject" }}</button>
     </div>
   </div>
 </div>
 
 <script>
 document.addEventListener('DOMContentLoaded', () => {
-  const ci = CleanInsightsAutoTracker("https://metrics.cleaninsights.org/cleaninsights.php", 34);
-  console.log(ci);
+    const ci = CleanInsightsAutoTracker("https://metrics.cleaninsights.org/cleaninsights.php", 34);
+
+    const banner = document.getElementById('tracking-banner');
+    const acceptButton = document.getElementById('accept-consent');
+    const rejectButton = document.getElementById('reject-consent');
+
+    // Function to handle consent
+    const handleConsent = () => {
+      banner.style.display = 'none';
 
-  const banner = document.getElementById('tracking-banner');
-  const acceptButton = document.getElementById('accept-consent');
+      ci.grantCampaign('visits');
+      ci.grantFeature(CleanInsightsFeature.ua);
+      ci.grantFeature(CleanInsightsFeature.lang);
 
-  // Function to handle consent
-  const handleConsent = () => {
-    banner.style.display = 'none';
+      // Store consent in localStorage
+      localStorage.setItem('trackingConsent', 'granted');
+    };
 
-    ci.grantCampaign('visits');
-    ci.grantFeature(CleanInsightsFeature.ua);
-    ci.grantFeature(CleanInsightsFeature.lang);
-  };
+    // Function to handle rejection
+    const handleRejection = () => {
+      banner.style.display = 'none';
 
-  // Set up button click event
-  acceptButton.addEventListener('click', handleConsent);
+      // Store rejection in localStorage
+      localStorage.setItem('trackingConsent', 'denied');
+    };
 
-  // Show banner if consent is not given
-  if (!ci.campaignConsents.some(item => item === 'visits')) {
-    banner.style.display = 'flex';
-  }
+    // Set up button click events
+    acceptButton.addEventListener('click', handleConsent);
+    rejectButton.addEventListener('click', handleRejection);
 });
 </script>