Add plausible analytics (#811)

docs/mkdocs.yml

@@ -10,6 +10,22 @@ edit_uri: "blob/main/docs/src/"
 site_url: "https://developmentseed.org/titiler/"
 
 extra:
+  analytics:
+    provider: plausible
+    domain: developmentseed.org/titiler
+
+    feedback:
+      title: Was this page helpful?
+      ratings:
+        - icon: material/emoticon-happy-outline
+          name: This page was helpful
+          data: good
+          note: Thanks for your feedback!
+
+        - icon: material/emoticon-sad-outline
+          name: This page could be improved
+          data: bad
+          note: Thanks for your feedback!
   social:
     - icon: "fontawesome/brands/github"
       link: "https://github.com/developmentseed"

docs/src/overrides/partials/integrations/analytics/plausible.html

@@ -0,0 +1,53 @@
+<script
+  defer
+  data-domain="{{ config.extra.analytics.domain }}"
+  src="https://plausible.io/js/script.outbound-links.js"
+></script>
+
+<!-- Vendored from https://gitlab.com/notpushkin/material-plausible-plugin/ under the BSD 0 clause license. -->
+<script>
+  window.plausible =
+    window.plausible ||
+    function () {
+      (window.plausible.q = window.plausible.q || []).push(arguments);
+    };
+
+  /* Register event handlers after documented loaded */
+  document.addEventListener("DOMContentLoaded", function () {
+    /* Set up search tracking */
+    if (document.forms.search) {
+      var query = document.forms.search.query;
+      query.addEventListener("blur", function () {
+        if (this.value)
+          plausible("Search", { props: { search_term: this.value } });
+      });
+    }
+
+    /* Set up feedback, i.e. "Was this page helpful?" */
+    document$.subscribe(function () {
+      var feedback = document.forms.feedback;
+      if (typeof feedback === "undefined") return;
+
+      /* Send feedback to Plausible */
+      for (var button of feedback.querySelectorAll("[type=submit]")) {
+        button.addEventListener("click", function (ev) {
+          ev.preventDefault();
+
+          var page = document.location.pathname;
+          var value = this.getAttribute("data-md-value");
+          plausible(`Feedback: ${value}`);
+
+          /* Disable form and show note, if given */
+          feedback.firstElementChild.disabled = true;
+          var note = feedback.querySelector(
+            ".md-feedback__note [data-md-value='" + value + "']"
+          );
+          if (note) note.hidden = false;
+        });
+
+        /* Show feedback */
+        feedback.hidden = false;
+      }
+    });
+  });
+</script>