Add Plausible Banner

layouts/_default/baseof.html

@@ -16,6 +16,7 @@
   {{ if ( .Site.Params.footer.enable ) }}
     {{ partial "footer/main" . }}
   {{ end }}
+  {{ partial "cookies/plausible" . }}
   {{ partial "scripts" . }}
 </body>
 </html>

layouts/partials/cookies/plausible.html

@@ -0,0 +1,21 @@
+
+
+  <div id="plausible-banner" tabindex="-1" class="hidden fixed bottom-0 right-0 z-50 flex justify-end w-full p-4 pb-8 border-b border-gray-200 dark:border-gray-600">
+    <div class="flex items-center">
+        
+        <div class="relative bg-white shadow-lg shadow-black dark:bg-gray-600 rounded-lg text-sm text-gray-500 dark:text-white lg:mb-0">
+            <div class="justify-between items-center p-5 lg:flex">
+                <p class="mb-4">
+                    
+                </p>
+                <div class="items-center space-y-4 sm:space-y-0 sm:space-x-4 sm:flex lg:pl-10 shrink-0 px-2">
+                    We use Plausible Analytics, a privacy first web analytics tool that does not use cookies.
+                    <span class="text-sm px-1"><a class="cursor-pointer font-sm text-gray-900 hover:underline dark:text-white" onclick="disablePlausible();">Disable Plausible</a></span>
+                    <span class="text-sm px-1"><a href="/cookies/" class="font-sm text-gray-900 hover:underline dark:text-white">Cookie Policy</a></span>
+                    <button id="close-modal" onclick="enablePlausible();" type="button" class="py-2 px-4 w-full text-sm font-medium text-center text-white rounded-lg focus:ring-4 focus:outline-none bg-primary-700 sm:w-auto hover:bg-primary-800 dark:bg-primary-600 dark:hover:bg-primary-700 cursor-pointer">OK</button>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</div>

layouts/partials/scripts.html

@@ -2,4 +2,4 @@
 <script src="{{ .Site.BaseURL }}/js/vendors.bundle.js"></script>
 <script defer data-domain="beardedtek.com" src="https://plausible.beardedtek.org/js/script.file-downloads.hash.outbound-links.pageview-props.revenue.tagged-events.js"></script>
 <script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
-
+<script src="{{ .Site.BaseURL }}/js/plausible-exclude.js"></script>

static/js/plausible-exclude.js

@@ -0,0 +1,22 @@
+// Plausible Exclude
+const plausibleBanner = document.getElementById('plausible-banner');
+var hidePlausibleBanner = window.localStorage.getItem('hidePlausibleBanner');
+
+function disablePlausible(e) {
+    window.localStorage.setItem('plausible_ignore', 'true');
+    window.localStorage.setItem('hidePlausibleBanner','true');
+    plausibleBanner.classList.add('hidden');
+}
+
+function enablePlausible(e) {
+    window.localStorage.removeItem('plausible_ignore');
+    window.localStorage.setItem('hidePlausibleBanner','true');
+    plausibleBanner.classList.add('hidden');
+}
+
+
+if ( hidePlausibleBanner){
+    plausibleBanner.classList.add('hidden');
+} else {
+    plausibleBanner.classList.remove('hidden');
+}