From 7e7b6384194f40729d6ce976dd2dcfa21dc8b17c Mon Sep 17 00:00:00 2001
From: Alina Derkach <alina.derkach@percona.com>
Date: Tue, 18 Nov 2025 17:13:30 +0100
Subject: [PATCH] DOCS-217 Test and implement the feedback form in doc projects
 (15) 	modified:   _resourcepdf/overrides/main.html 	new file:  
 _resourcepdf/overrides/partials/rating.html 	new file:  
 docs/css/rating.css 	new file:   docs/js/rating.js 	modified:  
 mkdocs-base.yml 	modified:   mkdocs.yml 	modified:   requirements.txt

---
 _resourcepdf/overrides/main.html            |   3 +
 _resourcepdf/overrides/partials/rating.html | 191 ++++++++++++++++++++
 docs/css/rating.css                         |  43 +++++
 docs/js/rating.js                           | 183 +++++++++++++++++++
 mkdocs-base.yml                             |   6 +
 mkdocs.yml                                  |  14 --
 requirements.txt                            |   1 +
 7 files changed, 427 insertions(+), 14 deletions(-)
 create mode 100644 _resourcepdf/overrides/partials/rating.html
 create mode 100644 docs/css/rating.css
 create mode 100644 docs/js/rating.js

diff --git a/_resourcepdf/overrides/main.html b/_resourcepdf/overrides/main.html
index 962a9cbe4..420becefa 100644
--- a/_resourcepdf/overrides/main.html
+++ b/_resourcepdf/overrides/main.html
@@ -54,6 +54,9 @@
                 {% endif %}
                 <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" {{ hidden }}>
                   <div class="md-sidebar__scrollwrap">
+                    <div class="md-sidebar__inner">
+                      {% include "partials/rating.html" %}
+                    </div>
                     <div class="md-sidebar__inner">
                       {% include "partials/edit.html" %}
                     </div>
diff --git a/_resourcepdf/overrides/partials/rating.html b/_resourcepdf/overrides/partials/rating.html
new file mode 100644
index 000000000..ff6a2cd96
--- /dev/null
+++ b/_resourcepdf/overrides/partials/rating.html
@@ -0,0 +1,191 @@
+<!-- Feedback Widget -->
+<div class="rating-widget" style="
+  background: var(--md-default-bg-color);
+  border: 0.05rem solid var(--md-default-fg-color--lightest);
+  padding: 10px 15px;
+  border-radius: 0.2rem;
+  margin-bottom: 16px;
+  font-family: 'Poppins','Roboto',Arial,Helvetica,sans-serif;
+  font-size: 16px;
+  text-align: center;
+  transition: all 0.2s ease-out;
+">
+
+  <div class="rating-title" style="
+    margin-bottom: 4px;
+    font-size: 15px;
+    font-weight: bold;
+    /* Removed inline color to use CSS */
+  ">
+    Rate this page
+  </div>
+
+  <div class="rating-stars" style="display: inline-block;">
+    {% for i in range(1,6) %}
+      <span class="star" data-rating="{{ i }}" style="
+        font-size: 24px;
+        cursor: pointer;
+        margin: 0 2px;
+        display: inline-block;
+      ">☆</span>
+    {% endfor %}
+  </div>
+
+  <div id="feedback-notification" style="
+    display: none;
+    margin-top: 10px;
+    color: var(--md-typeset-a-color);
+    font-weight: 500;
+    font-size: 14px;
+  ">Thanks for your feedback</div>
+
+<div id="feedback-submit-notification" style="
+display: none;
+margin-top: 10px;
+color: var(--md-typeset-a-color);
+font-weight: 500;
+font-size: 14px;
+">Thank you! The feedback has been submitted.</div>
+
+  <div id="feedback-form" style="
+    display: none;
+    margin-top: 12px;
+    text-align: left;
+    position: relative;
+    border: 0.05rem solid var(--md-default-fg-color--lightest);
+    padding: 12px;
+    border-radius: 6px;
+    background: var(--md-default-bg-color);
+    width: 100%;
+    box-sizing: border-box;
+    transition: all 0.2s ease-out;
+  ">
+<button id="close-feedback" title="Close" style="
+position: absolute;
+top: -10px;
+right: -10px;
+background: var(--md-default-bg-color);
+border: 0.05rem solid var(--md-default-fg-color--lightest);
+border-radius: 50%;
+width: 24px;
+height: 24px;
+font-size: 18px;
+font-weight: bold;
+cursor: pointer;
+color: var(--md-default-fg-color--light);
+line-height: 1;
+display: flex;
+align-items: center;
+justify-content: center;
+box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+">
+×
+</button>
+
+    <textarea id="feedback-text" rows="3" placeholder="Write your feedback here..." style="
+      width: 100%;
+      font-size: 14px;
+      padding: 6px;
+      margin-bottom: 12px;
+      resize: vertical;
+      font-family: 'Poppins','Roboto',Arial,Helvetica,sans-serif;
+      color: var(--md-default-fg-color);
+      background: var(--md-default-bg-color);
+      border: 0.05rem solid var(--md-default-fg-color--lightest);
+    "></textarea>
+
+    <label for="feedback-email" style="
+      display: block;
+      font-size: 15px;
+      margin-bottom: 4px;
+    ">
+      Email <span style="color: var(--md-default-fg-color--light);">(optional)</span>
+    </label>
+
+    <input type="email" id="feedback-email" placeholder="you@example.com" style="
+      width: 100%;
+      font-size: 14px;
+      padding: 6px;
+      margin-bottom: 12px;
+      font-family: 'Poppins','Roboto',Arial,Helvetica,sans-serif;
+      color: var(--md-default-fg-color);
+      background: var(--md-default-bg-color);
+      border: 0.05rem solid var(--md-default-fg-color--lightest);
+    " />
+
+<button id="submit-feedback" style="
+  padding: 5px 10px;
+  font-size: 14px;
+  background-color: var(--md-typeset-a-color);
+  border: none;
+  border-radius: 3px;
+  cursor: pointer;
+  font-family: 'Poppins','Roboto',Arial,Helvetica,sans-serif;
+">
+  Send
+</button>
+
+    <div id="feedback-status" style="
+      margin-top: 8px;
+      font-size: 13px;
+    "></div>
+  </div>
+</div>
+
+<style>
+  /* Hover shadow like data-banner */
+  .rating-widget:hover,
+  #feedback-form:hover {
+    box-shadow:
+      0px 1px 10px 0px rgba(0, 0, 0, 0.12),
+      0px 4px 5px 0px rgba(0, 0, 0, 0.14),
+      0px 2px 4px -1px rgba(0, 0, 0, 0.20);
+  }
+
+  /* Default star colors */
+  .rating-stars .star {
+    color: var(--md-default-fg-color);
+    transition: color 0.2s ease-out;
+  }
+
+  /* Active/hovered stars */
+  .rating-stars .star.active,
+  .rating-stars .star.hovered {
+    color: var(--md-typeset-a-color, #0E5FB5);
+  }
+
+  /* Rate this page text color matches stars in light mode */
+  .rating-widget .rating-title {
+    color: var(--md-typeset-a-color, #0E5FB5);
+  }
+
+  /* Dark mode */
+  @media (prefers-color-scheme: dark) {
+    /* Rate this page text */
+    .rating-widget .rating-title {
+      color: var(--md-typeset-a-color, #93C7FF) !important;
+    }
+    /* Stars active and hovered fill color */
+    .rating-stars .star.active,
+    .rating-stars .star.hovered {
+      color: var(--md-typeset-a-color, #93C7FF) !important;
+    }
+
+    /* Feedback form text */
+    #feedback-form,
+    #feedback-form textarea,
+    #feedback-form input,
+    #feedback-form label,
+    #feedback-form button,
+    #feedback-form div {
+      color: var(--md-typeset-a-color, #93C7FF) !important;
+      border-color: #666 !important;
+      background: var(--md-default-bg-color) !important;
+    }
+
+    /* Close button color */
+    #close-feedback {
+      color: var(--md-typeset-a-color, #93C7FF) !important;
+    }
+  }
+</style>
diff --git a/docs/css/rating.css b/docs/css/rating.css
new file mode 100644
index 000000000..889367b80
--- /dev/null
+++ b/docs/css/rating.css
@@ -0,0 +1,43 @@
+.rating-widget:hover,
+#feedback-form:hover {
+  box-shadow:
+    0px 1px 10px 0px rgba(0, 0, 0, 0.12),
+    0px 4px 5px 0px rgba(0, 0, 0, 0.14),
+    0px 2px 4px -1px rgba(0, 0, 0, 0.20);
+}
+
+/* Title color */
+.rating-widget .rating-title {
+  color: var(--md-typeset-a-color, #0E5FB5);
+}
+
+/* Dark mode title */
+@media (prefers-color-scheme: dark) {
+  .rating-widget .rating-title {
+    color: var(--md-typeset-a-color, #93C7FF) !important;
+  }
+}
+
+/* Feedback status */
+#feedback-status {
+  color: var(--md-typeset-a-color);
+}
+
+@media (prefers-color-scheme: dark) {
+  #feedback-status {
+    color: var(--md-typeset-a-color, #93C7FF) !important;
+  }
+}
+
+/* Light mode: Send button */
+#submit-feedback {
+  color: white !important;
+}
+
+/* Dark mode: Send button */
+@media (prefers-color-scheme: dark) {
+  #submit-feedback {
+    background-color: var(--md-typeset-a-color, #93C7FF) !important;
+    color: #999 !important;
+  }
+}
diff --git a/docs/js/rating.js b/docs/js/rating.js
new file mode 100644
index 000000000..1e86d7e31
--- /dev/null
+++ b/docs/js/rating.js
@@ -0,0 +1,183 @@
+function initFeedbackWidget() {
+    const widget = document.querySelector(".rating-stars");
+    if (!widget || widget.dataset.initialized === "true") return; // ✅ already initialized
+    widget.dataset.initialized = "true";
+  
+    const stars = widget.querySelectorAll(".star");
+    const feedbackForm = document.getElementById("feedback-form");
+    const feedbackTextarea = document.getElementById("feedback-text");
+    const emailInput = document.getElementById("feedback-email");
+    const submitButton = document.getElementById("submit-feedback");
+    const statusDiv = document.getElementById("feedback-status");
+    const closeButton = document.getElementById("close-feedback");
+    const notification = document.getElementById("feedback-notification");
+    const submitNotification = document.getElementById("feedback-submit-notification");
+  
+    if (!stars.length || !feedbackForm) return;
+  
+    const formURL = "https://docs.google.com/forms/d/e/1FAIpQLSdXWLhl1oKQqq9AgG_Ugxs5EbF3NMAiddWswL4ITyaQZZr5BA/formResponse";
+    const fieldIds = {
+      rating: "entry.303027158",
+      pageUrl: "entry.295622433",
+      feedback: "entry.2131350495",
+      email: "entry.1689727303"
+    };
+  
+    let selectedRating = 0;
+    let notificationTimeout;
+    let ratingLocked = false; // 🔒 cooldown lock
+  
+    function showNotification(msg) {
+      notification.textContent = msg;
+      notification.style.display = "block";
+      clearTimeout(notificationTimeout);
+      notificationTimeout = setTimeout(() => {
+        notification.style.display = "none";
+      }, 3000);
+    }
+  
+    function sendRatingOnly(rating) {
+      const formData = new FormData();
+      formData.append(fieldIds.rating, rating);
+      formData.append(fieldIds.pageUrl, window.location.href);
+  
+      fetch(formURL, {
+        method: "POST",
+        mode: "no-cors",
+        body: formData
+      }).catch(() => {
+        console.warn("Rating failed to submit silently.");
+      });
+    }
+  
+    function submitFeedback(rating, feedbackText = "", email = "") {
+      const formData = new FormData();
+      formData.append(fieldIds.rating, rating);
+      formData.append(fieldIds.pageUrl, window.location.href);
+      formData.append(fieldIds.feedback, feedbackText);
+      if (email) formData.append(fieldIds.email, email);
+  
+      fetch(formURL, {
+        method: "POST",
+        mode: "no-cors",
+        body: formData
+      }).then(() => {
+        statusDiv.style.color = "";
+        feedbackTextarea.value = "";
+        emailInput.value = "";
+        feedbackForm.style.display = "none";
+        selectedRating = 0;
+  
+        stars.forEach((s) => {
+          s.textContent = "☆";
+          s.classList.remove("active");
+          s.classList.remove("hovered");
+        });
+  
+        submitNotification.style.display = "block";
+        clearTimeout(notificationTimeout);
+        notificationTimeout = setTimeout(() => {
+          submitNotification.style.display = "none";
+        }, 4000);
+      }).catch(() => {
+        statusDiv.style.color = "";
+        statusDiv.textContent = "Error sending feedback.";
+      });
+    }
+  
+    stars.forEach((star) => {
+      const rating = parseInt(star.dataset.rating, 10);
+  
+      star.addEventListener("mouseover", () => {
+        if (ratingLocked) return;
+        stars.forEach((s, index) => {
+          s.textContent = index < rating ? "★" : "☆";
+          if(index < rating) {
+            s.classList.add("hovered");
+            s.classList.remove("active");
+          } else {
+            s.classList.remove("hovered");
+            s.classList.remove("active");
+          }
+        });
+      });
+  
+      star.addEventListener("mouseleave", () => {
+        if (ratingLocked) return;
+        stars.forEach((s, index) => {
+          s.textContent = index < selectedRating ? "★" : "☆";
+          if(index < selectedRating) {
+            s.classList.add("active");
+          } else {
+            s.classList.remove("active");
+          }
+          s.classList.remove("hovered");
+        });
+      });
+  
+      star.addEventListener("click", () => {
+        if (ratingLocked) return;
+        ratingLocked = true; // 🔒 lock stars for 10 seconds
+  
+        selectedRating = rating;
+  
+        stars.forEach((s, index) => {
+          s.textContent = index < rating ? "★" : "☆";
+          if(index < rating) {
+            s.classList.add("active");
+          } else {
+            s.classList.remove("active");
+          }
+          s.classList.remove("hovered");
+        });
+  
+        sendRatingOnly(rating);
+        feedbackForm.style.display = "block";
+        statusDiv.textContent = "";
+  
+        setTimeout(() => {
+          ratingLocked = false; // ⏱ unlock after 10 seconds
+        }, 10000);
+      });
+    });
+  
+    submitButton.addEventListener("click", () => {
+      if (!selectedRating) return;
+      const feedbackText = feedbackTextarea.value.trim();
+      const email = emailInput.value.trim();
+  
+      if (selectedRating < 5 && !feedbackText) {
+        statusDiv.style.color = "";
+        statusDiv.textContent = "Write feedback before sending.";
+        return;
+      }
+  
+      submitFeedback(selectedRating, feedbackText, email);
+    });
+  
+    closeButton.addEventListener("click", () => {
+      feedbackForm.style.display = "none";
+      feedbackTextarea.value = "";
+      emailInput.value = "";
+      statusDiv.textContent = "";
+      selectedRating = 0;
+      ratingLocked = false;
+  
+      stars.forEach((s) => {
+        s.textContent = "☆";
+        s.classList.remove("active");
+        s.classList.remove("hovered");
+      });
+    });
+  }
+  
+  // Init on load
+  document.addEventListener("DOMContentLoaded", initFeedbackWidget);
+  
+  // Re-init on page change (MkDocs Material support)
+  if (typeof document$ !== 'undefined') {
+    document$.subscribe(() => {
+      initFeedbackWidget();
+    });
+  }
+  
\ No newline at end of file
diff --git a/mkdocs-base.yml b/mkdocs-base.yml
index 46757e0ee..d11de18a2 100644
--- a/mkdocs-base.yml
+++ b/mkdocs-base.yml
@@ -64,12 +64,14 @@ extra_css:
   - css/osano.css
   - css/landing.css
   - css/postgresql.css
+  - css/rating.css
 
 
 extra_javascript:
   - js/version-select.js
   - js/promptremover.js
   - js/consent.js
+  - js/rating.js
 
 markdown_extensions:
   attr_list: {}
@@ -117,6 +119,10 @@ plugins:
   git-revision-date-localized: 
     enable_creation_date: true
     enabled: !ENV [ENABLED_GIT_REVISION_DATE, True]
+  git-committers:
+    enabled: !ENV [CI, false]
+    repository: percona/postgresql-docs
+    branch: "15"
   meta-descriptions:
     export_csv: false
     quiet: false
diff --git a/mkdocs.yml b/mkdocs.yml
index dd58366d5..1e8966e36 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -12,17 +12,3 @@ extra:
   analytics:
     provider: google
     property: G-J4J70BNH0G
-    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! Want to improve this page? Click  <strong>Edit this page on GitHub</strong> above to submit a pull request.
-
diff --git a/requirements.txt b/requirements.txt
index d21b46b7b..0bd313cfa 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -26,3 +26,4 @@ mike
 Pillow > 10.1.0
 mkdocs-open-in-new-tab
 mkdocs-print-site-plugin
+mkdocs-git-committers-plugin-2