Adding Feedback mechanism that Dapr docs use

docs/config.toml

@@ -105,3 +105,8 @@ sidebar_menu_foldable = true
 sidebar_menu_truncate = 500
 ul_show = 1
 navbar_logo = true
+
+[params.ui.feedback]
+enable = true
+yes = '<b>Glad to hear it!</b> Please <a href="https://github.com/dapr/docs/issues/new/choose">tell us how we can improve</a>.'
+no = '<b>Sorry to hear that.</b> Please <a href="https://github.com/dapr/docs/issues/new/choose">tell us how we can improve</a>.'

docs/layouts/partials/feedback.html

@@ -0,0 +1,62 @@
+<style>
+    .feedback--title {
+      margin-top: 3rem;
+    }
+    .feedback--answer {
+      display: inline-block;
+    }
+    .feedback--answer-no {
+      margin-left: 1em;
+    }
+    .feedback--response {
+      display: none;
+      margin-top: 1em;
+    }
+    .feedback--response__visible {
+      display: block;
+    }
+  </style>
+  <div class="d-print-none">
+  <h2 class="feedback--title">Feedback</h2>
+  <p class="feedback--question">Was this page helpful?</p>
+  <button class="btn btn-primary mb-4 feedback--answer feedback--answer-yes">Yes</button>
+  <button class="btn btn-primary mb-4 feedback--answer feedback--answer-no">No</button>
+  <p class="feedback--response feedback--response-yes">
+    {{ .yes | safeHTML }}
+  </p>
+  <p class="feedback--response feedback--response-no">
+    {{ .no | safeHTML }}
+  </p>
+  </div>
+  <script>
+    const yesButton = document.querySelector('.feedback--answer-yes');
+    const noButton = document.querySelector('.feedback--answer-no');
+    const yesResponse = document.querySelector('.feedback--response-yes');
+    const noResponse = document.querySelector('.feedback--response-no');
+    const disableButtons = () => {
+      yesButton.disabled = true;
+      noButton.disabled = true;
+    };
+    const sendFeedback = (value) => {
+      if (typeof ga !== 'function') return;
+      const args = {
+        command: 'send',
+        hitType: 'event',
+        category: 'Helpful',
+        action: 'click',
+        label: window.location.pathname,
+        value: value
+      };
+      ga(args.command, args.hitType, args.category, args.action, args.label, args.value);
+    };
+    yesButton.addEventListener('click', () => {
+      yesResponse.classList.add('feedback--response__visible');
+      disableButtons();
+      sendFeedback(1);
+    });
+    noButton.addEventListener('click', () => {
+      noResponse.classList.add('feedback--response__visible');
+      disableButtons();
+      sendFeedback(0);
+    });
+  </script>