From f4bc779c430a59f4a38a46afd25ba0afcc7d73f5 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <rawr@sebin-nyshkim.net>
Date: Sat, 19 Jul 2025 00:54:13 +0200
Subject: [PATCH] feat: :chart_with_upwards_trend: add analytics banner
 component and privacy policy

---
 src/components/analytics-banner.webc | 110 +++++++++++++++++++++++++++
 src/layouts/base.webc                |   5 +-
 src/layouts/page.webc                |  44 +++++++++++
 src/privacy.md                       |  45 +++++++++++
 4 files changed, 203 insertions(+), 1 deletion(-)
 create mode 100644 src/components/analytics-banner.webc
 create mode 100644 src/layouts/page.webc
 create mode 100644 src/privacy.md

diff --git a/src/components/analytics-banner.webc b/src/components/analytics-banner.webc
new file mode 100644
index 0000000..9e17d52
--- /dev/null
+++ 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>
diff --git a/src/layouts/base.webc b/src/layouts/base.webc
index 31328a3..d059c16 100644
--- a/src/layouts/base.webc
+++ b/src/layouts/base.webc
@@ -14,5 +14,8 @@
     <link rel="stylesheet" :href="getBundleFileUrl('css')" webc:keep />
     <script type="module" :src="getBundleFileUrl('js')" webc:keep></script>
   </head>
-  <body @raw="content"></body>
+  <body>
+    <template @raw="content" webc:nokeep></template>
+    <analytics-banner></analytics-banner>
+  </body>
 </html>
diff --git a/src/layouts/page.webc b/src/layouts/page.webc
new file mode 100644
index 0000000..4c87a2c
--- /dev/null
+++ b/src/layouts/page.webc
@@ -0,0 +1,44 @@
+---
+layout: base.webc
+---
+
+<main>
+  <page-content>
+    <h1 @text="$data.title || $data.eleventyNavigation.key"></h1>
+    <template @raw="content" webc:nokeep></template>
+  </page-content>
+
+  <page-footer></page-footer>
+</main>
+
+<style>
+  main {
+    --inbox-spacing: 1rem;
+
+    display: grid;
+    justify-content: center;
+    justify-items: center;
+    align-items: start;
+    gap: 1em;
+    grid-auto-columns: 100%;
+    grid-template-areas:
+      'content'
+      'footer';
+
+    margin-block: var(--container-spacing-top-safe) var(--container-spacing-bottom-safe);
+    margin-inline: var(--container-spacing-left-safe) var(--container-spacing-right-safe);
+
+    margin-block: var(--page-spacing);
+
+    @media (min-width: 64em) {
+      --inbox-spacing: 1.5rem;
+
+      grid-auto-columns: revert;
+      grid-template-columns: minmax(0, 65ch);
+    }
+  }
+
+  h1 {
+    margin-inline: var(--inbox-spacing);
+  }
+</style>
diff --git a/src/privacy.md b/src/privacy.md
new file mode 100644
index 0000000..b704714
--- /dev/null
+++ b/src/privacy.md
@@ -0,0 +1,45 @@
+---
+layout: 'page.webc'
+title: Privacy Policy
+---
+
+I use a self-hosted [Ackee](https://ackee.electerious.com) instance to gain insights about the types of devices that visit this site.
+
+Ackee is open-source analytics software. The data it collects is anonymized in a way that does not allow me to identify individual visitors. It also does not save any cookies and does not follow you around the web. I merely store whether you agree to analytics collection or not in your browser's local storage.
+
+## Data that Ackee collects
+
+Ackee gives me insight into the following data points:
+
+* Number of visits per day
+* Number of visitors that currently view the site
+* Approximate duration of stay
+* Number of times a given page was visited
+* Sites a visit originated from (referrer)
+* Name and manufacturer of the device
+* Name and version of the operating system
+* Name and version of the browser
+* Screen size of the device
+* Primary language of the browser or operating system
+
+Ackee uses the IP, user-agent and domainId to identify a user. All information will be hashed together with a [salt](https://en.wikipedia.org/wiki/Salt_(cryptography)) that changes daily. The final hash is called `clientId`.
+
+The daily salt is never stored anywhere. It avoids that database backups can be used to stick data together to reconstruct the browsing history of a user.
+
+## Purpose of collecting data
+
+I collect this data to better understand my audience, improve the site's user experience, and to inform future development and editorial decisions. The data will not be shared with anyone, ever.
+
+## Data retention
+
+Ackee removes data from previous records when a new record with an existing identification gets added. This way the user identifier and other identifiable data is only stored once in the database.
+
+In other words: Ackee forgets who you are as soon as it sees you again. It's not possible to reconstruct a browsing history, even on a daily basis.
+
+## User consent
+
+Data collection is opt-in. I will not collect any analytics data until you explicitly allow me to do so. If you previously opted-in but changed your mind, click the button below:
+
+<button onclick="localStorage.setItem('ackeeDetailed', false)" class="items-center bg-sky-600 *:stroke-[2.5] 2xl:px-6 2xl:py-3 2xl:rounded-2xl button duration-300 font-bold gap-2 hover:bg-sky-700 inline-flex no-underline px-5 py-2 rounded-xl text-white transition-colors">Opt-out</button>
+
+By using this site, you acknowledge that you have read and understood this privacy policy. If you have any questions or concerns about how your data is collected or used, please feel free to [contact me](https://sebin-nyshkim.net/contact).