feat: support common queries in search dialog

Common queries can be added to `data/search_queries.yaml` (experimental feature).
Refactor Wowchemy keyboard shortcut parser.
Fix JS/CSS assets being minified/fingerprinted in dev env.

Close #2060

LICENSE.md

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2016-present George Cushen
+Copyright (c) 2016-present George Cushen (https://georgecushen.com/)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the "Software"), to deal in

wowchemy/assets/js/wowchemy-search.js

@@ -55,6 +55,7 @@ function initSearch(force, fuse) {
   // If query deleted, clear results.
   if ( query.length < 1) {
     $('#search-hits').empty();
+    $('#search-common-queries').show();
   }
 
   // Check for timer event (enter key not pressed) and query less than minimum length required.
@@ -63,6 +64,7 @@ function initSearch(force, fuse) {
 
   // Do search.
   $('#search-hits').empty();
+  $('#search-common-queries').hide();
   searchAcademic(query, fuse);
   let newURL = window.location.protocol + "//" + window.location.host + window.location.pathname + '?q=' + encodeURIComponent(query) + window.location.hash;
   updateURL(newURL);

wowchemy/assets/js/wowchemy.js

@@ -550,24 +550,42 @@ $(window).on('load', function () {
     printLatestRelease(githubReleaseSelector, $(githubReleaseSelector).data('repo'));
   }
 
-  // On search icon click toggle search dialog.
-  $('.js-search').click(function (e) {
-    e.preventDefault();
-    toggleSearchDialog();
-  });
-  $(document).on('keydown', function (e) {
-    if (e.which == 27) {
-      // `Esc` key pressed.
-      if ($('body').hasClass('searching')) {
+  // Parse Wowchemy keyboard shortcuts.
+  document.addEventListener('keyup', (event) => {
+    if (event.code === "Escape") {
+      const body = document.body;
+      if (body.classList.contains('searching')) {
+        // Close search dialog.
+        toggleSearchDialog();
+      }
+    }
+    // Use `key` to check for slash. Otherwise, with `code` we need to check for modifiers.
+    if (event.key === "/" ) {
+      let focusedElement = (
+        document.hasFocus() &&
+        document.activeElement !== document.body &&
+        document.activeElement !== document.documentElement &&
+        document.activeElement
+      ) || null;
+      let isInputFocused = focusedElement instanceof HTMLInputElement || focusedElement instanceof HTMLTextAreaElement;
+      if (search_config && !isInputFocused) {
+        // Open search dialog.
+        event.preventDefault();
         toggleSearchDialog();
       }
-    } else if (e.which == 191 && e.shiftKey == false && !$('input,textarea').is(':focus')) {
-      // `/` key pressed outside of text input.
-      e.preventDefault();
-      toggleSearchDialog();
     }
   });
 
+  // Search event handler
+  // Check that built-in search or Algolia enabled.
+  if (search_config) {
+    // On search icon click toggle search dialog.
+    $('.js-search').click(function (e) {
+      e.preventDefault();
+      toggleSearchDialog();
+    });
+  }
+
   // Init. author notes (tooltips).
   $('[data-toggle="tooltip"]').tooltip();
 

wowchemy/assets/scss/wowchemy/_search.scss

@@ -66,7 +66,8 @@
   text-align: right;
 }
 
-.search-header i {
+// Large icon for closing search dialog.
+.search-header .col-search-close i {
   font-size: 2rem;
   line-height: 1;
 }
@@ -125,6 +126,28 @@
   box-shadow: 0 0 0 .2rem $sta-primary-light;
 }
 
+// Common queries
+
+#search-common-queries ul {
+  // Empirically remove indentation due to `fa-ul`'s centered 2em spacing, wider than the search icon.
+  margin-left: 0;
+  padding-left: 1.6em;
+}
+
+#search-common-queries li {
+  // Vertically align FA icons.
+  line-height: 1;
+}
+
+#search-common-queries li a {
+  // Color common search query links as body text.
+  color: inherit;
+}
+
+.dark #search-common-queries li a {
+  color: rgb(248, 248, 242);
+}
+
 /* DARK themed components. */
 
 /* Algolia search input */

wowchemy/i18n/en.yaml

@@ -225,6 +225,9 @@
 - id: search_no_results
   translation: No results found
 
+- id: search_common_queries
+  translation: Common searches
+
 # Error 404
 
 - id: page_not_found

wowchemy/layouts/_default/baseof.html

@@ -8,12 +8,23 @@
 {{- $highlight_active_link := site.Params.main_menu.highlight_active_link | default true -}}
 <body id="top" data-spy="scroll" {{ if $show_navbar }}data-offset="70"{{end}} data-target="{{ if or .IsHome (eq .Type "widget_page") | and $highlight_active_link }}#navbar-main{{else}}#TableOfContents{{end}}" class="page-wrapper {{ if not (.Scratch.Get "light") }}dark{{end}} {{ if not $show_navbar }}no-navbar{{end}}">
 
-  {{/* Initialise theme variation. */}}
+  {{/* Initialise Wowchemy. */}}
+  {{ $js_license := printf "/*! Wowchemy v%s | https://wowchemy.com/ */\n" site.Data.wowchemy.version }}
+  {{ $js_license := $js_license | printf "%s/*! Copyright 2016-present George Cushen (https://georgecushen.com/) */\n" }}
+  {{ $js_license := $js_license | printf "%s/*! License: https://github.com/wowchemy/wowchemy-hugo-modules/blob/master/LICENSE.md */\n" }}
+  {{ $js_bundle_head := $js_license | resources.FromString "js/bundle-head.js" }}
   {{ $wcDarkLightEnabled := site.Params.day_night | default false }}
   {{ $wcIsSiteThemeDark := not (.Scratch.Get "light") | default false }}
   {{ $js_params := dict "wcDarkLightEnabled" $wcDarkLightEnabled "wcIsSiteThemeDark" $wcIsSiteThemeDark }}
-  {{ $js_file := resources.Get "js/wowchemy-init.js" | js.Build (dict "params" $js_params) }}
-  <script src="{{ $js_file.RelPermalink }}"></script>
+  {{ $js_bundle := resources.Get "js/wowchemy-init.js" | js.Build (dict "params" $js_params) }}
+  {{- if eq hugo.Environment "production" -}}
+    {{ $js_bundle = $js_bundle | minify }}
+  {{- end -}}
+  {{ $js_bundle := slice $js_bundle_head $js_bundle | resources.Concat "js/wowchemy-init.min.js" }}
+  {{- if eq hugo.Environment "production" -}}
+    {{- $js_bundle = $js_bundle | fingerprint "md5" -}}
+  {{- end -}}
+  <script src="{{ $js_bundle.RelPermalink }}"></script>
 
   {{ partial "search" . }}
 

wowchemy/layouts/partials/search.html

@@ -1,3 +1,5 @@
+{{/* Partial for built-in search and Algolia search. */}}
+{{ if eq site.Params.search.engine 1 | or (eq site.Params.search.engine 2) }}
 <aside class="search-results" id="search">
   <div class="container">
     <section class="search-header">
@@ -20,6 +22,19 @@
         {{ end }}
       </div>
 
+      {{ if eq site.Params.search.engine 1 | and site.Data.search_queries }}
+      <div id="search-common-queries" class="pt-3">
+        <div class="font-weight-bold pb-3">{{ i18n "search_common_queries" | default "Common searches" }}</div>
+        <ul class="fa-ul">
+          {{ range site.Data.search_queries }}
+            <li class="pb-3">
+              <a href="{{.link | relURL}}"><i class="fa-li fas fa-search" aria-hidden="true"></i><span class="pl-1">{{.query | markdownify | emojify}}</span></a>
+            </li>
+          {{ end }}
+        </ul>
+      </div>
+      {{ end }}
+
     </section>
     <section class="section-search-results">
 
@@ -30,3 +45,4 @@
     </section>
   </div>
 </aside>
+{{end}}

wowchemy/layouts/partials/site_head.html

@@ -142,17 +142,22 @@
     {{ end }}
   {{ end }}
 
-  {{ $css_comment := printf "/*!* Wowchemy v%s (https://wowchemy.com/) */\n" site.Data.wowchemy.version }}
-  {{ $css_bundle_head := $css_comment | resources.FromString "css/bundle-head.css" }}
+  {{ $license := printf "/*! Wowchemy v%s | https://wowchemy.com/ */\n" site.Data.wowchemy.version }}
+  {{ $license := $license | printf "%s/*! Copyright 2016-present George Cushen (https://georgecushen.com/) */\n" }}
+  {{ $license := $license | printf "%s/*! License: https://github.com/wowchemy/wowchemy-hugo-modules/blob/master/LICENSE.md */\n" }}
+  {{ $css_bundle_head := $license | resources.FromString "css/bundle-head.css" }}
   {{ $css_options := dict "targetPath" "css/wowchemy.css" }}
   {{- if eq hugo.Environment "production" -}}
     {{- $css_options = merge $css_options (dict "outputStyle" "compressed") -}}
   {{- end -}}
   {{ $sass_template := resources.Get "scss/main.scss" }}
   {{ $style := $sass_template | resources.ExecuteAsTemplate "main_parsed.scss" . | toCSS $css_options }}
+  {{- if eq hugo.Environment "production" -}}
+    {{- $style = $style | minify -}}
+  {{- end -}}
   {{ $style := slice $css_bundle_head $style | resources.Concat "css/wowchemy.css" }}
   {{- if eq hugo.Environment "production" -}}
-    {{- $style = $style | minify | fingerprint "md5" -}}
+    {{- $style = $style | fingerprint "md5" -}}
   {{- end -}}
   <link rel="stylesheet" href="{{ $style.RelPermalink }}">
 

wowchemy/layouts/partials/site_js.html

@@ -49,8 +49,8 @@
 
     {{ if ne site.Params.search.engine 0 }}
     {{/* Configure search engine. */}}
-    {{ $min_length := site.Params.search.academic.min_length | default 1 }}
-    {{ $threshold := site.Params.search.academic.threshold | default 0.3 }}
+    {{ $min_length := site.Params.search.wowchemy.min_length | default 1 }}
+    {{ $threshold := site.Params.search.wowchemy.threshold | default 0.3 }}
     {{ $search_i18n := dict "placeholder" (i18n "search_placeholder") "results" (i18n "search_results") "no_results" (i18n "search_no_results") }}
     {{ $search_config := dict "indexURI" ("/index.json" | relLangURL) "threshold" $threshold "minLength" $min_length }}
     <script>
@@ -152,25 +152,33 @@
     <script id="dsq-count-scr" src="https://{{site.Params.comments.disqus.shortname}}.disqus.com/count.js" async></script>
     {{ end }}
 
-    {{ $js_comment := printf "/* Wowchemy v%s | https://wowchemy.com/ */\n" site.Data.wowchemy.version }}
-    {{ $js_bundle_head := $js_comment | resources.FromString "js/bundle-head.js" }}
+    {{ $js_license := printf "/*! Wowchemy v%s | https://wowchemy.com/ */\n" site.Data.wowchemy.version }}
+    {{ $js_license := $js_license | printf "%s/*! Copyright 2016-present George Cushen (https://georgecushen.com/) */\n" }}
+    {{ $js_license := $js_license | printf "%s/*! License: https://github.com/wowchemy/wowchemy-hugo-modules/blob/master/LICENSE.md */\n" }}
+    {{ $js_bundle_head := $js_license | resources.FromString "js/bundle-head.js" }}
     {{ $js_linebreak := "\n" | resources.FromString "js/linebreak.js" }}{{/* Fix no line break after Bootstrap JS causing error. */}}
     {{ $js_params := dict "hugoEnvironment" hugo.Environment }}
     {{ $js_academic := resources.Get "js/wowchemy.js" | js.Build (dict "params" $js_params) }}
-    {{ $js_academic_search := resources.Get "js/wowchemy-search.js" }}
-    {{ $js_algolia_search := resources.Get "js/algolia-search.js" }}
     {{ $js_bootstrap := resources.Get "js/_vendor/bootstrap.bundle.js" }}
     {{ $js_bundle := slice $js_bootstrap $js_linebreak $js_academic }}
     {{ if eq site.Params.search.engine 1 }}
+      {{ $js_academic_search := resources.Get "js/wowchemy-search.js" }}
       {{ $js_bundle = $js_bundle | append $js_academic_search }}
     {{ else if eq site.Params.search.engine 2 }}
+      {{ $js_algolia_search := resources.Get "js/algolia-search.js" }}
       {{ $js_bundle = $js_bundle | append $js_algolia_search }}
     {{ end }}
     {{ range site.Params.plugins_js }}
       {{ $js_bundle = $js_bundle | append (resources.Get (printf "js/%s.js" .)) }}
     {{ end }}
-    {{ $js_bundle := $js_bundle | resources.Concat "js/wowchemy-bundle-pre.js" | minify }}
-    {{ $js_bundle := slice $js_bundle_head $js_bundle | resources.Concat "js/wowchemy.min.js" | fingerprint "md5" }}
+    {{ $js_bundle := $js_bundle | resources.Concat "js/wowchemy-bundle-pre.js" }}
+    {{- if eq hugo.Environment "production" -}}
+      {{ $js_bundle = $js_bundle | minify }}
+    {{- end -}}
+    {{ $js_bundle := slice $js_bundle_head $js_bundle | resources.Concat "js/wowchemy.min.js" }}
+    {{- if eq hugo.Environment "production" -}}
+      {{- $js_bundle = $js_bundle | fingerprint "md5" -}}
+    {{- end -}}
     <script src="{{ $js_bundle.RelPermalink }}"></script>
 
     {{ partial "custom_js" . }}