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 }}

starters/academic/config/_default/config.yaml

@@ -23,6 +23,7 @@ module:
   imports:
     - path: github.com/wowchemy/wowchemy-hugo-themes/modules/wowchemy-plugin-netlify-cms
     - path: github.com/wowchemy/wowchemy-hugo-themes/modules/wowchemy-plugin-netlify
+    - path: github.com/wowchemy/wowchemy-hugo-themes/modules/wowchemy-plugin-reveal
     - path: github.com/wowchemy/wowchemy-hugo-themes/modules/wowchemy/v5
 
 ############################
@@ -70,3 +71,5 @@ security:
   _merge: deep
 sitemap:
   _merge: deep
+minify:
+  _merge: deep

starters/academic/config/_default/params.yaml

@@ -61,10 +61,8 @@ locale:
 
 features:
   syntax_highlighter:
-    enable: true
-    extra_languages:
-      - r
-      - latex
+    theme_light: github-light
+    theme_dark: dracula
   math:
     enable: false
   privacy_pack:
@@ -72,7 +70,7 @@ features:
   repository:
     url: 'https://github.com/<username>/<repository>'
     content_dir: content
-    branch: master
+    branch: main
   avatar:
     gravatar: false
     shape: circle

starters/blog/config/_default/config.yaml

@@ -89,3 +89,5 @@ security:
   _merge: deep
 sitemap:
   _merge: deep
+minify:
+  _merge: deep

starters/blog/config/_default/params.yaml

@@ -58,10 +58,8 @@ locale:
 
 features:
   syntax_highlighter:
-    enable: true
-    extra_languages:
-      - r
-      - latex
+    theme_light: github-light
+    theme_dark: dracula
   math:
     enable: false
   privacy_pack:

starters/blog/content/post/writing-technical-content/index.md

@@ -2,7 +2,6 @@
 title: Writing technical content in Markdown
 date: 2019-07-12
 math: true
-highlight: true
 image:
   placement: 2
   caption: 'Image credit: [**John Moeses Bauan**](https://unsplash.com/photos/OGZtQF8iC0g)'
@@ -18,7 +17,7 @@ On this page, you'll find some examples of the types of technical content that c
 
 ### Code
 
-Wowchemy supports a Markdown extension for highlighting code syntax. You can enable this feature by toggling the `syntax_highlighter` option in your `config/_default/params.toml` file.
+Wowchemy supports a Markdown extension for highlighting code syntax. You can customize the styles under the `syntax_highlighter` option in your `config/_default/params.yaml` file.
 
     ```python
     import pandas as pd
@@ -34,6 +33,88 @@ data = pd.read_csv("data.csv")
 data.head()
 ```
 
+### Mindmaps
+
+Wowchemy supports a Markdown extension for mindmaps.
+
+Simply insert a Markdown `markmap` code block and optionally set the height of the mindmap as shown in the example below.
+
+A simple mindmap defined as a Markdown list:
+
+<div class="highlight">
+<pre class="chroma">
+<code>
+```markmap {height="200px"}
+- Hugo Modules
+  - wowchemy
+  - wowchemy-plugins-netlify
+  - wowchemy-plugins-netlify-cms
+  - wowchemy-plugins-reveal
+```
+</code>
+</pre>
+</div>
+
+renders as
+
+```markmap {height="200px"}
+- Hugo Modules
+  - wowchemy
+  - wowchemy-plugins-netlify
+  - wowchemy-plugins-netlify-cms
+  - wowchemy-plugins-reveal
+```
+
+A more advanced mindmap with formatting, code blocks, and math:
+
+<div class="highlight">
+<pre class="chroma">
+<code>
+```markmap
+- Mindmaps
+  - Links
+    - [Wowchemy Docs](https://wowchemy.com/docs/)
+    - [Discord Community](https://discord.gg/z8wNYzb)
+    - [GitHub](https://github.com/wowchemy/wowchemy-hugo-themes)
+  - Features
+    - Markdown formatting
+    - **inline** ~~text~~ *styles*
+    - multiline
+      text
+    - `inline code`
+    -
+      ```js
+      console.log('hello');
+      console.log('code block');
+      ```
+    - Math: $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
+```
+</code>
+</pre>
+</div>
+
+renders as
+
+```markmap
+- Mindmaps
+  - Links
+    - [Wowchemy Docs](https://wowchemy.com/docs/)
+    - [Discord Community](https://discord.gg/z8wNYzb)
+    - [GitHub](https://github.com/wowchemy/wowchemy-hugo-themes)
+  - Features
+    - Markdown formatting
+    - **inline** ~~text~~ *styles*
+    - multiline
+      text
+    - `inline code`
+    -
+      ```js
+      console.log('hello');
+      console.log('code block');
+      ```
+    - Math: $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
+```
+
 ### Charts
 
 Wowchemy supports the popular [Plotly](https://plot.ly/) format for interactive charts.

starters/course/config/_default/config.yaml

@@ -83,3 +83,5 @@ security:
   _merge: deep
 sitemap:
   _merge: deep
+minify:
+  _merge: deep

starters/course/config/_default/params.yaml

@@ -60,10 +60,8 @@ locale:
 
 features:
   syntax_highlighter:
-    enable: true
-    extra_languages:
-      - r
-      - latex
+    theme_light: github-light
+    theme_dark: dracula
   math:
     enable: false
   privacy_pack:

starters/documentation/config/_default/config.yaml

@@ -79,3 +79,5 @@ security:
   _merge: deep
 sitemap:
   _merge: deep
+minify:
+  _merge: deep

starters/documentation/config/_default/params.yaml

@@ -58,10 +58,8 @@ locale:
 
 features:
   syntax_highlighter:
-    enable: false
-    extra_languages:
-      - r
-      - latex
+    theme_light: github-light
+    theme_dark: dracula
   math:
     enable: false
   privacy_pack:
@@ -70,6 +68,10 @@ features:
     url: 'https://github.com/wowchemy/hugo-documentation-theme'
     content_dir: content
     branch: main
+  feedback:
+    responses:
+      positive: 'Glad to hear it! [Any ideas for improvements?](https://github.com/<USERNAME>/<REPO>/issues/new).'
+      negative: 'Sorry to hear that. [Please tell us how we can improve](https://github.com/<USERNAME>/<REPO>/issues/new).'
   comment:
     provider: ''
     disqus:

starters/markdown-slides/config/_default/config.yaml

@@ -23,6 +23,7 @@ module:
   imports:
     - path: github.com/wowchemy/wowchemy-hugo-themes/modules/wowchemy-plugin-netlify-cms
     - path: github.com/wowchemy/wowchemy-hugo-themes/modules/wowchemy-plugin-netlify
+    - path: github.com/wowchemy/wowchemy-hugo-themes/modules/wowchemy-plugin-reveal
     - path: github.com/wowchemy/wowchemy-hugo-themes/modules/wowchemy/v5
 
 ############################
@@ -64,3 +65,5 @@ related:
       weight: 70
 security:
   _merge: deep
+minify:
+  _merge: deep

starters/minimal/config/_default/config.yaml

@@ -69,3 +69,5 @@ security:
   _merge: deep
 sitemap:
   _merge: deep
+minify:
+  _merge: deep

starters/notes/config/_default/config.yaml

@@ -80,3 +80,5 @@ security:
   _merge: deep
 sitemap:
   _merge: deep
+minify:
+  _merge: deep

starters/portfolio/config/_default/config.yaml

@@ -82,3 +82,5 @@ security:
   _merge: deep
 sitemap:
   _merge: deep
+minify:
+  _merge: deep