Combining feedback widget and Giscus

[pawamoy]

I was going to open a new issue, but actually it works even without setting a custom, empty provider. See the text below for what I was going to post.

---

I'm kinda hijacking Giscus to provide a feeback system on my documentation pages. So I don't actually use any analytics provider. But Material for MkDocs seems to require that I set a provider under extra.analytics. So I set custom and added an empty partial.

# mkdocs.yml
theme:
  name: material
  custom_dir: docs/.overrides

extra_javascript:
- js/feedback.js

extra:
  analytics:
    provider: custom
    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: Let us know how we can improve this page.

<!-- docs/.overrides/partials/integrations/analytics/custom.html -->

<!-- docs/.overrides/partial/comments.html -->
<!-- Giscus -->
<!-- https://squidfunk.github.io/mkdocs-material/setup/adding-a-comment-system/#giscus-integration -->
    <div id="comments" style="display: none;">
        <h2 id="__comments">Feedback</h2>
        <script src="https://giscus.app/client.js"
            data-repo="some/repo"
            data-repo-id="MDEwOlJlcG9zaXRvcnk1NTYxNzIxNA=="
            data-category="Documentation"
            data-category-id="DIC_kwDOA1Cmvs4CPVxB"
            data-mapping="pathname"
            data-reactions-enabled="0"
            data-emit-metadata="0"
            data-input-position="top"
            data-theme="preferred_color_scheme"
            data-lang="en"
            data-loading="lazy"
            crossorigin="anonymous"
            async>
        </script>

        <!-- Synchronize Giscus theme with palette -->
        <script>
            var giscus = document.querySelector("script[src*=giscus]")

        // Set palette on initial load
        var palette = __md_get("__palette")
        if (palette && typeof palette.color === "object") {
            var theme = palette.color.scheme === "slate"
                ? "transparent_dark"
                : "light"

            // Instruct Giscus to set theme
            giscus.setAttribute("data-theme", theme) 
        }

        // Register event handlers after documented loaded
        document.addEventListener("DOMContentLoaded", function() {
            var ref = document.querySelector("[data-md-component=palette]")
            ref.addEventListener("change", function() {
                var palette = __md_get("__palette")
                if (palette && typeof palette.color === "object") {
                    var theme = palette.color.scheme === "slate"
                        ? "transparent_dark"
                        : "light"

                    // Instruct Giscus to change theme
                    var frame = document.querySelector(".giscus-frame")
                    frame.contentWindow.postMessage(
                        { giscus: { setConfig: { theme } } },
                        "https://giscus.app"
                    )
                }
            })
            })
        </script>
    </div>

// js/feedback.js
const feedback = document.forms.feedback;
feedback.hidden = false;

feedback.addEventListener("submit", function(ev) {
    ev.preventDefault();
    const commentElement = document.getElementById("comments");
    commentElement.style.display = "block";
    feedback.firstElementChild.disabled = true;
    const data = ev.submitter.getAttribute("data-md-value");
    const note = feedback.querySelector(".md-feedback__note [data-md-value='" + data + "']");
    if (note) {
        note.hidden = false;
    }
})

The Giscus comments are wrapped in a div with display: none, and when I click on the sad face, it displays it 🙂 (actually with the code above it also displays it when I click on the happy face but I'll change that).

Would it be possible to not require setting provider: custom and creating an empty partial with the same name? Or am I hijacking the system too much? I'm just combining two nice features 🥹

---

So actually as stated in the first sentence of this discussion, it works without the custom, empty provider, thanks to the additional feedback.js which enables the widget 🙂

The JSON schema still complains though and seems to want me to add a provider (missing property "provider" and missing property "property").

[staadecker]

This worked great for me however I had to modify the script slightly to avoid this issue. Thanks @pawamoy ! @squidfunk I think this documentation code snippet needs updating to avoid the instant reload issue.

// docs/javascripts/feedback.js

document$.subscribe(function () {
  const feedback = document.forms.feedback;
  if (feedback === undefined) return;
  
  feedback.hidden = false;

  feedback.addEventListener("submit", function (ev) {
    ev.preventDefault();

    feedback.firstElementChild.disabled = true;

    const data = ev.submitter.getAttribute("data-md-value");

    if (data == 0) {
      const commentElement = document.getElementById("comments");
      commentElement.style.display = "block";
    }

    const note = feedback.querySelector(
      ".md-feedback__note [data-md-value='" + data + "']"
    );
    if (note) {
      note.hidden = false;
    }
  });
});

[squidfunk]

Thanks, merged!