exclude.njk

---
layout: layout.njk
---
<div class="container mt-24 text-center">
      <h1 class="text-5xl font-black dark:text-gray-100">Plausible Exclude</h1>
      <div class="my-4 text-xl dark:text-gray-100">
        Click the button below to toggle your exclusion in analytics for this
        site
      </div>
      <div class="my-4 text-xl dark:text-gray-100">
        You currently <span
          class="font-bold text-red-600 dark:text-red-400"
          id="plausible_not">are not</span>
        <span
          class="hidden font-bold text-green-600 dark:text-green-400"
          id="plausible_yes">are</span>
         excluding your visits.
      </div>
      <a
        class="w-full rounded-lg bg-indigo-600 px-4 py-2 text-center text-base font-semibold text-white shadow-md transition duration-200 ease-in hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-indigo-200"
        id="plausible_button">Exclude my visits</a
      >
    </div>
<style>
  .hidden {
    display: none;
  }
</style>
<script>
  window.addEventListener('load', function (e) {
    var exclusionState = window.localStorage.plausible_ignore == 'true'

    if (exclusionState) {
      document.getElementById('plausible_not').classList.add('hidden')
      document.getElementById('plausible_yes').classList.remove('hidden')
      document.getElementById('plausible_button').innerHTML =
        'Stop excluding my visits'
    } else {
      document.getElementById('plausible_yes').classList.add('hidden')
      document.getElementById('plausible_not').classList.remove('hidden')
      document.getElementById('plausible_button').innerHTML =
        'Exclude my visits'
    }
  })

  function toggleExclusion(e) {
    var exclusionState = window.localStorage.plausible_ignore == 'true'

    if (exclusionState) {
      delete window.localStorage.plausible_ignore
      document.getElementById('plausible_yes').classList.add('hidden')
      document.getElementById('plausible_not').classList.remove('hidden')
      document.getElementById('plausible_button').innerHTML =
        'Exclude my visits'
    } else {
      window.localStorage.plausible_ignore = 'true'
      document.getElementById('plausible_not').classList.add('hidden')
      document.getElementById('plausible_yes').classList.remove('hidden')
      document.getElementById('plausible_button').innerHTML =
        'Stop excluding my visits'
    }
  }

  function registerToggle() {
    document
      .querySelector('#plausible_button')
      .addEventListener('click', toggleExclusion)
  }

  // Run once when page loads
  if (document.readyState === 'complete') {
    document.addEventListener('DOMContentLoaded', () => registerToggle())
  } else {
    document.addEventListener('DOMContentLoaded', () => registerToggle())
  }
</script>