feat: Add Clarity Cookies

Author: wilovy

src/components/CookieBanner.astro

@@ -0,0 +1,62 @@
+---
+const projectId = import.meta.env.VITE_CLARITY_PROJECT_ID
+---
+
+<div
+  id="cookie-banner"
+  data-clarity-id={projectId}
+  class="hidden fixed bottom-0 left-0 right-0 z-50 p-4 bg-editor-bg border-t border-stroke-color shadow-lg"
+>
+  <div class="max-w-4xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4">
+    <p class="text-sm text-secondary/80">
+      Usamos cookies de analítica para mejorar tu experiencia. ¿Aceptas?
+    </p>
+    <div class="flex gap-3 shrink-0">
+      <button
+        id="reject-cookies"
+        class="px-4 py-2 text-sm text-secondary/70 border border-stroke-color rounded hover:bg-stroke-color/30 transition-colors cursor-pointer"
+      >
+        Rechazar
+      </button>
+      <button
+        id="accept-cookies"
+        class="px-4 py-2 text-sm bg-yellow text-primary font-semibold rounded hover:opacity-90 transition-opacity cursor-pointer"
+      >
+        Aceptar
+      </button>
+    </div>
+  </div>
+</div>
+
+<script>
+  import Clarity from "@microsoft/clarity"
+
+  const banner = document.getElementById("cookie-banner")
+  const projectId = banner?.dataset.clarityId ?? ""
+
+  function loadClarity() {
+    if (projectId) {
+      Clarity.init(projectId)
+      Clarity.consentV2({ ad_Storage: "granted", analytics_Storage: "granted" })
+    }
+  }
+
+  const consent = localStorage.getItem("cookiesAccepted")
+
+  if (consent === "true") {
+    loadClarity()
+  } else if (consent === null) {
+    banner?.classList.remove("hidden")
+  }
+
+  document.getElementById("accept-cookies")?.addEventListener("click", () => {
+    localStorage.setItem("cookiesAccepted", "true")
+    loadClarity()
+    banner?.classList.add("hidden")
+  })
+
+  document.getElementById("reject-cookies")?.addEventListener("click", () => {
+    localStorage.setItem("cookiesAccepted", "false")
+    banner?.classList.add("hidden")
+  })
+</script>

src/layouts/Layout.astro

@@ -2,6 +2,7 @@
 import { ClientRouter } from "astro:transitions"
 import "~/styles/global.css"
 import favicon from "~/assets/images/webp/favicon.webp"
+import CookieBanner from "~/components/CookieBanner.astro"
 
 const {
 	title = "RustLings Web",
@@ -23,5 +24,6 @@ const {
     class="h-screen flex flex-col bg-primary text-secondary font-family-poppins"
   >
     <slot />
+    <CookieBanner />
   </body>
 </html>

src/pages/index.astro

@@ -1,14 +1,9 @@
 ---
-import Clarity from "@microsoft/clarity"
 import Footer from "~/components/footer/Footer.astro"
 import Community from "~/features/home/components/Community.astro"
 import Hero from "~/features/home/components/Hero.astro"
 import Playground from "~/features/home/components/Playground.astro"
 import Layout from "~/layouts/Layout.astro"
-
-const projectId = import.meta.env.VITE_CLARITY_PROJECT_ID
-
-Clarity.init(projectId)
 ---
 
 <Layout>