Feedback buttons (#546)

* Test commit, feedback

* more

* feedback buttons

* changed position in toc

* changed feedback max_value to 100

---------

Co-authored-by: mjang <michael.jang@qdrant.com>

qdrant-landing/config.toml

@@ -81,6 +81,16 @@ keywords = "search engine, vector database, neural network, matching, filter, Sa
   name = "Andrey Vasnetsov"
   email = "info@qdrant.tech"
 
+[params.feedback]
+  enable = true
+  max_value = 100
+  title = "Feedback"
+  question = "Was this page helpful?"
+  positive = "Yes"
+  negative = "No"
+  on_yes = "Thanks! 🙏"
+  on_no = "Sorry! 😔"
+
 [taxonomies]
     tag = "tags"
     category = "categories"

qdrant-landing/themes/qdrant/layouts/partials/feedback.html

@@ -0,0 +1,47 @@
+{{ if .Site.Params.feedback.enable }}
+
+<div class="feedback d-print-none">
+  <h6 class="feedback__title">{{ .Site.Params.feedback.title }}</h6>
+  <p class="feedback__question">{{ .Site.Params.feedback.question }}</p>
+  <button class="btn feedback__answer feedback__answer_yes">{{ .Site.Params.feedback.positive }}</button>
+  <button class="btn feedback__answer feedback__answer_no">{{ .Site.Params.feedback.negative }}</button>
+  <p class="feedback__response feedback__response_yes">
+    {{.Site.Params.feedback.on_yes | safeHTML }}
+  </p>
+  <p class="feedback__response feedback__response_no">
+    {{.Site.Params.feedback.on_no | safeHTML }}
+    <br>You can <a class="text-brand-p" href="{{ .Site.Params.githubDocPrefix }}{{ .File.Path }}" target="_blank">edit</a> this page on GitHub, or <a class="text-brand-p" href="{{ .Site.Params.githubIssueLink }}" target="_blank">create</a> a GitHub issue.
+  </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 gtag !== 'function') return;
+    gtag('event', 'page_helpful', {
+      'event_category': 'Helpful',
+      'event_label': window.location.pathname,
+      'value': value
+    });
+  };
+  yesButton.addEventListener('click', () => {
+    yesResponse.classList.add('feedback__response_visible');
+    disableButtons();
+    {{ $maxValue := .Site.Params.feedback.max_value | default 100 -}}
+    sendFeedback({{ $maxValue }});
+  });
+  noButton.addEventListener('click', () => {
+    noResponse.classList.add('feedback__response_visible');
+    disableButtons();
+    sendFeedback(0);
+  });
+</script>
+
+{{ end }}

qdrant-landing/themes/qdrant/layouts/partials/table_of_content.html

@@ -5,7 +5,8 @@
     <div class="sticky-top">
         <h5 class="tableOfContent__header">Table of contents</h5>
         {{ .TableOfContents }}
-        <div class="divider mb-1"></div>
+
+        <div class="divider mb-2"></div>
         <ul class="tableOfContent__footer">
             <li>
                 <a class="text-brand-p" href="{{ .Site.Params.githubDocPrefix }}{{ .File.Path }}" target="_blank">
@@ -18,7 +19,11 @@
                 </a>
             </li>
         </ul>
-        <br/>
+        <div class="divider pt-2 mb-3"></div>
+
+        {{ if (and (not .Params.hide_feedback) (.Site.Params.feedback.enable) (.Site.GoogleAnalytics)) }}
+            {{ partial "feedback.html" . -}}
+        {{ end }}
     </div>
     {{ end }}
-</nav>
+</nav>

qdrant-landing/themes/qdrant/static/css/_colors.scss

@@ -17,4 +17,14 @@
   --neutral-n-700: #1F3266;
   --neutral-n-800: #102252;
   --neutral-n-900: #06153D;
+
+  --brand-success-100: #D1FADF;
+  --brand-success-500: #12B765;
+  --brand-success-900: #085232;
+  --brand-warning-100: #FEE4C7;
+  --brand-warning-500: #F5870A;
+  --brand-warning-900: #662F0A;
+  --brand-error-100: #FED6D6;
+  --brand-error-500: #F03030;
+  --brand-error-900: #661414;
 }

qdrant-landing/themes/qdrant/static/css/blocks/_feedback.scss

@@ -0,0 +1,36 @@
+.feedback {
+  &__title {
+    font-size: 1rem;
+  }
+  &__answer {
+    &_yes {
+      background: var(--brand-success-100);
+      margin-right: 6px;
+      box-sizing: border-box;
+      &:hover {
+        border: 1px solid var(--brand-success-500);
+      }
+    }
+    &_no {
+      background: var(--brand-error-100);
+      &:hover {
+        border: 1px solid var(--brand-error-500);
+      }
+    }
+    &[disabled] {
+      display: none;
+    }
+  }
+
+  &__response {
+    display: none;
+    padding: 10px 8px;
+    color: var(--brand-secondary);
+    background: var(--neutral-n-50);
+    border-radius: 8px;
+
+    &_visible {
+      display: block;
+    }
+  }
+}

qdrant-landing/themes/qdrant/static/css/blocks/_table_of_content.scss

@@ -28,7 +28,6 @@
     &:not(nav > ul  > li):not(ul.tableOfContent__footer > li) {
       padding-left: 1rem;
     }
-  }
 
   & a {
     display: inline-block;
@@ -38,6 +37,7 @@
       text-decoration: underline;
     }
   }
+  }
 
   & ul:not(.tableOfContent__footer) a {
     display: block;

qdrant-landing/themes/qdrant/static/css/main.scss

@@ -179,6 +179,7 @@ blockquote {
 @import "blocks/breadcrumbs";
 @import "blocks/share-post";
 @import "blocks/table_of_content";
+@import "blocks/feedback";
 @import "blocks/footer";
 @import "responsive";