From 25e0b0627f0965a221ad9b9e7a9c2ff33c01b657 Mon Sep 17 00:00:00 2001 From: George Cushen Date: Wed, 30 Dec 2020 22:46:46 +0000 Subject: [PATCH] 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 | 2 +- wowchemy/assets/js/wowchemy-search.js | 2 + wowchemy/assets/js/wowchemy.js | 44 +++++++++++++++------- wowchemy/assets/scss/wowchemy/_search.scss | 25 +++++++++++- wowchemy/i18n/en.yaml | 3 ++ wowchemy/layouts/_default/baseof.html | 17 +++++++-- wowchemy/layouts/partials/search.html | 16 ++++++++ wowchemy/layouts/partials/site_head.html | 11 ++++-- wowchemy/layouts/partials/site_js.html | 24 ++++++++---- 9 files changed, 115 insertions(+), 29 deletions(-) diff --git a/LICENSE.md b/LICENSE.md index 4e3b49ef..f40304fe 100644 --- a/LICENSE.md +++ b/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 diff --git a/wowchemy/assets/js/wowchemy-search.js b/wowchemy/assets/js/wowchemy-search.js index 0fecc003..1428a1df 100644 --- a/wowchemy/assets/js/wowchemy-search.js +++ b/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); diff --git a/wowchemy/assets/js/wowchemy.js b/wowchemy/assets/js/wowchemy.js index 3a1cc05c..c969ee08 100644 --- a/wowchemy/assets/js/wowchemy.js +++ b/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(); diff --git a/wowchemy/assets/scss/wowchemy/_search.scss b/wowchemy/assets/scss/wowchemy/_search.scss index 92e7074f..27c0f9e3 100644 --- a/wowchemy/assets/scss/wowchemy/_search.scss +++ b/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 */ diff --git a/wowchemy/i18n/en.yaml b/wowchemy/i18n/en.yaml index b002ee09..05d8010f 100644 --- a/wowchemy/i18n/en.yaml +++ b/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 diff --git a/wowchemy/layouts/_default/baseof.html b/wowchemy/layouts/_default/baseof.html index 6967a11d..a8e5142d 100644 --- a/wowchemy/layouts/_default/baseof.html +++ b/wowchemy/layouts/_default/baseof.html @@ -8,12 +8,23 @@ {{- $highlight_active_link := site.Params.main_menu.highlight_active_link | default true -}} - {{/* 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) }} - + {{ $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 -}} + {{ partial "search" . }} diff --git a/wowchemy/layouts/partials/search.html b/wowchemy/layouts/partials/search.html index 9285ee8b..5dc8dbc9 100644 --- a/wowchemy/layouts/partials/search.html +++ b/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) }} +{{end}} diff --git a/wowchemy/layouts/partials/site_head.html b/wowchemy/layouts/partials/site_head.html index 36169244..85468b96 100644 --- a/wowchemy/layouts/partials/site_head.html +++ b/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 -}} diff --git a/wowchemy/layouts/partials/site_js.html b/wowchemy/layouts/partials/site_js.html index 90dcc897..6197fc96 100644 --- a/wowchemy/layouts/partials/site_js.html +++ b/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 }} {{ 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 -}} {{ partial "custom_js" . }}