feat: add page feedback widget

Requires Google Analytics and production env.

New front-matter param for Book layout:

feedback: true

modules/wowchemy/config.yaml

@@ -16,6 +16,10 @@ markup:
   tableOfContents:
     startLevel: 2
     endLevel: 3
+minify:
+  tdewolff:
+    html:
+      keepComments: true
 sitemap:
   changefreq: weekly
 module:

modules/wowchemy/i18n/en.yaml

@@ -266,3 +266,17 @@
 
 - id: published_with
   translation: Published with {wowchemy} — the free, {repo_link}open source{/repo_link} website builder that empowers creators.
+
+# Feedback widget
+
+- id: feedback_widget_title
+  translation: Feedback
+
+- id: feedback_widget_question
+  translation: Was this page helpful?
+
+- id: feedback_widget_answer_positive
+  translation: 😍 Yes
+
+- id: feedback_widget_answer_negative
+  translation: 😡 No

modules/wowchemy/layouts/_default/baseof.html

@@ -1,4 +1,6 @@
 <!DOCTYPE html>
+{{ "<!-- This site was created with Wowchemy. https://www.wowchemy.com -->" | safeHTML }}
+{{ printf "<!-- Last Published: %s -->" (now | time.Format ":date_long") | safeHTML }}
 {{- $language_code := site.LanguageCode | default "en-us" -}}
 <html lang="{{$language_code}}" {{ if in site.Data.i18n.rtl.rtl $language_code }}dir="rtl"{{end}}>
 

modules/wowchemy/layouts/partials/book_layout.html

@@ -80,6 +80,8 @@
 
           </div>
 
+          {{ partial "components/feedback" . }}
+
           {{ partial "tags.html" . }}
 
           {{/* Show next/previous pages by default. */}}

modules/wowchemy/layouts/partials/components/feedback.html

@@ -0,0 +1,70 @@
+{{ $ga := site.Params.marketing.analytics.google_analytics | default site.GoogleAnalytics | default "" }}
+{{ $show_feedback := .Params.feedback | default true }}
+
+{{ if hugo.IsProduction | and $ga | and $show_feedback }}
+<style>
+  .btn-feedback {
+    display: inline-block;
+  }
+  .btn-feedback-negative {
+    margin-left: 1em;
+  }
+  .feedback--response {
+    display: none;
+    margin-top: 1em;
+  }
+  .feedback--response__visible {
+    display: block;
+  }
+</style>
+<div class="d-print-none widget--feedback">
+  <h2 class="feedback--title">{{ i18n "feedback_widget_title" | default "Feedback" }}</h2>
+  <p class="feedback--question">{{ i18n "feedback_widget_question" | default "Was this page helpful?" }}</p>
+  <p class="feedback--response feedback--response-positive">
+    {{ (site.Params.features.feedback.responses.positive | default "🙏")  | markdownify | safeHTML }}
+  </p>
+  <p class="feedback--response feedback--response-negative">
+    {{ (site.Params.features.feedback.responses.negative | default "🙏") | markdownify | safeHTML }}
+  </p>
+  <button class="btn btn-primary mb-4 btn-feedback btn-feedback-positive">
+    {{ i18n "feedback_widget_answer_positive" | default "😍 Yes" }}
+  </button>
+  <button class="btn btn-primary mb-4 btn-feedback btn-feedback-negative">
+    {{ i18n "feedback_widget_answer_negative" | default "😡 No" }}
+  </button>
+</div>
+<script>
+  const yesButton = document.querySelector('.btn-feedback-positive');
+  const noButton = document.querySelector('.btn-feedback-negative');
+  const yesResponse = document.querySelector('.feedback--response-positive');
+  const noResponse = document.querySelector('.feedback--response-negative');
+  const disableButtons = () => {
+    yesButton.disabled = true;
+    noButton.disabled = true;
+  };
+  const sendFeedback = (value) => {
+    if (typeof ga !== 'function') return;
+    const args = {
+      command: 'send',
+      hitType: 'event',
+      category: 'Page Rating',
+      action: 'click',
+      label: window.location.pathname,
+      value: value
+    };
+    ga(args.command, args.hitType, args.category, args.action, args.label, args.value);
+  };
+  yesButton.addEventListener('click', () => {
+    console.debug('Feedback response: 😍');
+    yesResponse.classList.add('feedback--response__visible');
+    disableButtons();
+    sendFeedback(1);
+  });
+  noButton.addEventListener('click', () => {
+    console.debug('Feedback response: 😡');
+    noResponse.classList.add('feedback--response__visible');
+    disableButtons();
+    sendFeedback(0);
+  });
+</script>
+{{ end }}