Bring back feedback buttons (#2481)

Signed-off-by: Daniel Gray <[email protected]>

config/mkdocs-common.yml

@@ -93,6 +93,21 @@ extra:
       link: /ru/
       lang: ru
       icon: https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f1f7-1f1fa.svg
+  analytics:
+    feedback:
+      title: Was this page helpful?
+      ratings:
+        - icon: material/emoticon-happy-outline
+          name: This page was helpful
+          data: 1
+          note: >-
+            Thanks for your feedback!
+        - icon: material/emoticon-sad-outline
+          name: This page could be improved
+          data: 0
+          note: >-
+            Thanks for your feedback! If you want to let us know more, please leave a post on our
+            <a href="https://discuss.privacyguides.net/c/site-development/7" target="_blank" rel="noopener">forum</a>.
   consent:
     title: !ENV [ANALYTICS_CONSENT_TITLE, "Contribute anonymous statistics"]
     description:
@@ -101,7 +116,7 @@ extra:
         "We use cookies to collect anonymous usage statistics. You can opt out if you wish.",
       ]
     cookies:
-      umami:
+      analytics:
         name: Self-Hosted Analytics
         checked: true
       github:
@@ -162,6 +177,7 @@ extra_javascript:
   - assets/javascripts/mathjax.js
   - assets/javascripts/randomize-element.js
   - assets/javascripts/resolution.js
+  - assets/javascripts/feedback.js
 
 watch:
   - ../theme

theme/assets/javascripts/feedback.js

@@ -0,0 +1,51 @@
+var feedback = document.forms.feedback
+feedback.hidden = false
+
+feedback.addEventListener("submit", function(ev) {
+  ev.preventDefault()
+
+  var data = ev.submitter.getAttribute("data-md-value")
+
+  if (data == 1) {
+    var umamiEventName = "feedback-positive"
+  } else if (data == 0) {
+    var umamiEventName = "feedback-negative"
+  }
+
+  var umamiEvent = {
+    payload: {
+      hostname: window.location.hostname,
+      language: navigator.language,
+      referrer: document.referrer,
+      screen: `${window.screen.width}x${window.screen.height}`,
+      url: window.location.pathname,
+      website: '30b92047-7cbb-4800-9815-2e075a293e0a',
+      name: umamiEventName,
+    },
+    type: 'event',
+  };
+
+  // remove trailing slash from path
+  if (umamiEvent.payload.url.slice(-1) === '/') {
+    umamiEvent.payload.url = umamiEvent.payload.url.slice(0, -1);
+  }
+
+  console.log(umamiEvent)
+
+  fetch("https://stats.jonaharagon.net/api/send", {
+    method: "POST",
+    body: JSON.stringify(umamiEvent),
+    headers: {
+      "Content-type": "application/json",
+    }
+  })
+    .then((response) => console.log(response));
+
+  feedback.firstElementChild.disabled = true
+
+  var note = feedback.querySelector(
+    ".md-feedback__note [data-md-value='" + data + "']"
+  )
+  if (note)
+    note.hidden = false
+})

theme/assets/javascripts/resolution.js

@@ -22,14 +22,14 @@ function getCookie(cname) {
 
 var consent = __md_get("__consent")
 if (!consent) {
-  __md_set("__consent", {"umami":true,"github":true});
+  __md_set("__consent", {"analytics":true,"github":true});
   if (getCookie('resolution') == '') {
     const resolution = `${window.screen.width}x${window.screen.height}`;
     setCookie('resolution', resolution, 30);
   }
 }
 
-if (consent && consent.umami) {
+if (consent && consent.analytics) {
   if (getCookie('resolution') == '') {
     const resolution = `${window.screen.width}x${window.screen.height}`;
     setCookie('resolution', resolution, 30);

theme/main.html

@@ -116,9 +116,11 @@ <h1>{{ page.title | d(config.site_name, true)}}</h1>
     {{ page.content }}
     {% include "partials/source-file.html" %}
 
+    {% include "partials/feedback.html" %}
+
     {% if config.theme.language == "en" %}
     <hr>
-    <h2>Share this website and spread privacy knowledge</h2>
+    <h2 class="md-feedback__title">Share this website and spread privacy knowledge</h2>
     <p><input class="admonition quote social-share-text" id="share" type="text" value="Privacy Guides: https://www.privacyguides.org - Cybersecurity resources and privacy-focused tools to protect yourself online" onclick="select()" readonly=""></p>
     <p><em>Copy this text to easily share Privacy Guides with your friends and family on any social network!</em></p>
     {% elif config.extra.translation_notice %}
@@ -128,6 +130,5 @@ <h2>Share this website and spread privacy knowledge</h2>
     </div>
     {% endif %}
 
-    {% include "partials/feedback.html" %}
     {% include "partials/comments.html" %}
 {% endblock %}