feat: 📈 add ackee analytics and privacy policy

src/layouts/base.njk

@@ -73,9 +73,12 @@
             <p>Content licensed under
               <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a>
             </p>
+            <p>
+              <a href="/privacy">Privacy Policy</a>
+            </p>
           </div>
           <div class="basis-full space-y-4 sm:text-right">
-            <p>Made with <a href="https://11ty.dev">11ty</a></p>
+            <p>Made with ❤️ and <a href="https://11ty.dev">11ty</a></p>
             <ul class="flex justify-start gap-4 sm:justify-end" aria-label="Connect">
               <li>
                 <a
@@ -115,5 +118,24 @@
         </div>
       </div>
     </footer>
+
+    <dialog id="ackee-banner" class="fixed start-4 end-4 top-auto ms-auto bottom-4 max-w-128 rounded-xl bg-sky-600 text-white shadow-xl dark:bg-sky-950">
+      <form method="dialog" class="flex flex-col">
+        <div class="space-y-4 p-4 text-center">
+          <p class="text-xl font-bold">Analytics</p>
+          <p>
+            I would like to know which devices my site is displayed on. May I collect data about your device? The specific data is outlined
+            <a href="/privacy" class="!decoration-white hover:!text-white dark:!decoration-sky-600 dark:hover:!text-sky-600">here</a>.
+          </p>
+        </div>
+        <div class="flex flex-row *:first:rounded-es-xl *:last:rounded-ee-xl *:first:border-e">
+          <button id="yes" class="flex-1/2 grow bg-sky-500 px-4 py-2 hover:bg-sky-800 dark:bg-sky-800 dark:hover:bg-sky-500">Yeah sure</button>
+          <button id="no" class="flex-1/2 grow bg-sky-500 px-4 py-2 hover:bg-sky-800 dark:bg-sky-800 dark:hover:bg-sky-500">Nope</button>
+        </div>
+      </form>
+    </dialog>
+
+    <script src="https://ackee.sebin-nyshkim.net/tracker.js"></script>
+    <script src="/js/ackee.js"></script>
   </body>
 </html>