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
This commit is contained in:
George Cushen 2020-12-30 22:46:46 +00:00
commit 25e0b0627f
9 changed files with 115 additions and 29 deletions

View file

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

View file

@ -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);

View file

@ -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();

View file

@ -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 */

View file

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

View file

@ -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" . }}

View file

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

View file

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

View file

@ -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" . }}