feat: 📈 add analytics banner component and privacy policy

2025-07-19 00:54:13 +02:00 · 2025-07-19 00:54:13 +02:00 · f4bc779c43
commit f4bc779c43
parent 1143b57085
4 changed files with 203 additions and 1 deletions
--- a/src/components/analytics-banner.webc
+++ b/src/components/analytics-banner.webc
@ -0,0 +1,110 @@
+<script src="https://ackee.sebin-nyshkim.net/tracker.js" webc:keep></script>
+
+<script>
+  const ackeeBanner = document.querySelector('#ackee-banner');
+  const yesBtn = ackeeBanner.querySelector('.positive');
+  const noBtn = ackeeBanner.querySelector('.negative');
+  const confirmKey = 'ackeeDetailed';
+
+  yesBtn.addEventListener('click', () => localStorage.setItem(confirmKey, true));
+  noBtn.addEventListener('click', () => localStorage.setItem(confirmKey, false));
+
+  if (localStorage.getItem(confirmKey) === null) {
+    ackeeBanner.show();
+  }
+
+  const ackeeServer = 'https://ackee.sebin-nyshkim.net';
+  const ackeeDomainId = '76704028-959b-4bce-997b-5e1ca0c19aa7';
+  const ackeeOpts = {
+    detailed: localStorage.getItem(confirmKey) === 'true',
+    ignoreLocalhost: false
+  };
+
+  if (localStorage.getItem(confirmKey) === 'true') {
+    const instance = ackeeTracker.create(ackeeServer, ackeeOpts);
+    instance.record(ackeeDomainId);
+  }
+</script>
+
+<dialog id="ackee-banner" webc:root="override">
+  <form method="dialog">
+    <p class="message">
+      <strong>📊 Analytics 💡</strong> May I collect some anonymized data about the device you use
+      to view this site? I won't know who you are. See: <a href="/privacy">Privacy Policy</a>
+    </p>
+    <ref-button class="positive">Yeah sure</ref-button>
+    <ref-button class="negative">Nope</ref-button>
+  </form>
+</dialog>
+
+<style webc:scoped="analytics-banner">
+  :host {
+    --clr-yes: oklch(65% 0.2 140deg);
+    --clr-no: oklch(40% 0.2 40deg);
+
+    position: sticky;
+    inset: auto 1em 1em 1em;
+
+    font-size: 0.875em;
+    color: inherit;
+
+    background: linear-gradient(
+      to bottom right,
+      var(--clr-box-gradient-start) 0%,
+      var(--clr-box-gradient-end) 50%
+    );
+
+    margin: 1em;
+    border: none;
+    border-radius: 1em;
+    padding: 0;
+
+    z-index: 1;
+  }
+
+  :host form {
+    --areas: 'message message' 'yes no';
+    --gradient-dir: ellipse at bottom right;
+    --gradient-start: var(--clr-quick-info-gradient-end);
+    --gradient-end: var(--clr-quick-info-gradient-start);
+
+    display: grid;
+    grid-template-areas: var(--areas);
+    align-items: center;
+    gap: 1em;
+
+    background: var(--clr-box-background);
+    background: radial-gradient(
+      var(--gradient-dir),
+      var(--gradient-start) 70%,
+      var(--gradient-end) 100%
+    );
+
+    margin: var(--border-thin);
+    border-radius: inherit;
+    padding: 1em;
+
+    @media (min-width: 48em) {
+      --areas: 'message yes no';
+    }
+  }
+
+  :host .message {
+    grid-area: message;
+    margin-block: 0;
+  }
+
+  :host .positive {
+    --gradient-base: var(--clr-yes);
+    --clr-text: var(--theme-c-primary-100);
+
+    grid-area: yes;
+  }
+
+  :host .negative {
+    --gradient-base: var(--clr-no);
+    --clr-text: var(--theme-c-primary-100);
+
+    grid-area: no;
+  }
+</style>