feedback buttons functionality (#1295)

qdrant-landing/config.toml

@@ -86,16 +86,6 @@ disableKinds = ["taxonomy", "term"]
   name = "Andrey Vasnetsov"
   email = "info@qdrant.tech"
 
-[params.feedback]
-  enable = true
-  title = "Feedback"
-  question = "Was this page helpful?"
-  positive = "Yes"
-  negative = "No"
-  on_yes = "Thanks! 🙏"
-  on_no = "Sorry! 😔"
-
-
 [taxonomies]
     tag = "tags"
     category = "categories"

qdrant-landing/content/headless/docs-feedback.md

@@ -2,15 +2,15 @@
 title: Was this page useful?
 positiveButton: 
   text: "Yes"
-  url: /#
   icon:
     src: /icons/outline/thumb-up.svg
     alt: Thumb up icon
 negativeButton:
   text: "No"
-  url: /#
   icon:
     src: /icons/outline/thumb-down.svg
     alt: Thumb down icon
+positiveFeedback: Thank you for your feedback! 🙏
+negativeFeedback: We are sorry to hear that. 😔 You can <a class="text-brand-p" href="#edit" target="_blank">edit</a> this page on GitHub, or <a class="text-brand-p" href="#issue" target="_blank">create</a> a GitHub issue.
 sitemapExclude: true
 ---

qdrant-landing/themes/qdrant-2024/assets/css/partials/documentation/_docs-feedback.scss

@@ -1,12 +1,13 @@
 @use '../../helpers/functions' as *;
 
 .docs-feedback {
+  $sectionPadding: $spacer * 2.5 0;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
   gap: $spacer;
-  padding: $spacer * 2.5 0;
+  padding: $sectionPadding;
 
   &__title {
     color: $neutral-98;
@@ -26,6 +27,22 @@
     gap: $spacer * 0.5;
     box-shadow: 0 0 0 pxToRem(1) $neutral-30;
   }
+  &__responses {
+    padding: $sectionPadding;
+  }
+  &__response {
+    display: none;
+    padding: 8px;
+    color: $neutral-100;
+    background: $neutral-20;
+    border-radius: 8px;
+    font-size: $font-size-sm;
+    margin: 0;
+
+    &_visible {
+      display: block;
+    }
+  }
 
   @include media-breakpoint-up(xl) {
     justify-content: flex-start;
@@ -40,5 +57,9 @@
         filter: invert(1);
       }
     }
+    &__response {
+      color: $neutral-30;
+      background: $neutral-90;
+    }
   }
 }

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

@@ -1,15 +1,46 @@
 {{ with (.Site.GetPage "/headless/docs-feedback") }}
-  <section class="docs-feedback">
+  <section class="docs-feedback d-print-none">
     <h5 class="docs-feedback__title">{{ .Params.title }}</h5>
     <div class="docs-feedback__buttons">
-      <a href="{{ .Params.positiveButton.url }}" class="button button_outlined button_sm docs-feedback__button">
-        <img src="{{ .Params.positiveButton.icon.src }}" alt="{{ .Params.positiveButton.icon.alt }}">
+      <button class="button button_outlined button_sm docs-feedback__button" id="feedback__answer_yes">
+        <img src="{{ .Params.positiveButton.icon.src }}" alt="{{ .Params.positiveButton.icon.alt }}" />
         {{ .Params.positiveButton.text }}
-      </a>
-      <a href="{{ .Params.negativeButton.url }}" class="button button_outlined button_sm docs-feedback__button">
-        <img src="{{ .Params.negativeButton.icon.src }}" alt="{{ .Params.negativeButton.icon.alt }}">
+      </button>
+      <button class="button button_outlined button_sm docs-feedback__button" id="feedback__answer_no">
+        <img src="{{ .Params.negativeButton.icon.src }}" alt="{{ .Params.negativeButton.icon.alt }}" />
         {{ .Params.negativeButton.text }}
-      </a>
+      </button>
     </div>
   </section>
-{{end }}
+  <section class="docs-feedback__responses d-none">
+    <p class="docs-feedback__response docs-feedback__response_yes" id="feedback__response_yes">
+      {{ .Params.positiveFeedback | safeHTML }}
+    </p>
+    <p class="docs-feedback__response docs-feedback__response_no" id="feedback__response_no">
+      {{ $negativeFeedback := replace (.Params.negativeFeedback | .RenderString) "#edit" (path.Join $.Site.Params.githubDocPrefix (path.Clean $.File.Path)) }}
+      {{ $negativeFeedback = replace $negativeFeedback "#issue" $.Site.Params.githubIssueLink }}
+      {{ $negativeFeedback | safeHTML }}
+    </p>
+  </section>
+
+  <script>
+    const buttonsSection = document.querySelector('.docs-feedback');
+    const responsesSection = document.querySelector('.docs-feedback__responses');
+    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 toggleResponses = () => {
+      buttonsSection.classList.add('d-none');
+      responsesSection.classList.remove('d-none');
+    };
+    yesButton.addEventListener('click', () => {
+      yesResponse.classList.add('feedback__response_visible');
+      toggleResponses();
+    });
+    noButton.addEventListener('click', () => {
+      noResponse.classList.add('feedback__response_visible');
+      toggleResponses();
+    });
+  </script>
+{{ end }}